https://palulog.com/luxeritas-ga

ワードプレス サイドバー編集方法

2019年8月4日

ネットビジネスD運営者の龍一です!

今回は、ワードプレス サイドバー設定・編集方法の紹介です。

ページのサイドバーと呼ばれる幅の狭いカラムの部分は
ウィジェットとも言われます。

ウィジェットとは、本来は小型アプリのような意味なのですが
ワードプレスの*名称的には、ページのサイドバーの部分
思ってください。
*フッター部分などもウィジェットと言う場合もあります。

サイドバーは、最初はシンプルなものになっている事が多いですが
ウィジェットを編集すると、人気記事の一覧を表示したり
QRコードなどを追加したり、カテゴリーを表示したりなど
サイドバーの表示を、自由にカスタマイズして変更する
ことができます。

テンプレートによって異なりますが、ウィジェット
編集できるのはサイドバーだけではなく、フッターや
記事下のCTAもウィジェットで、設定できるように
なっているテンプレートもあります。


2.サイドバーウィジェットの設定 


ダッシュボードの管理画面の左メニューから
外観 」→ 「ウィジェット」の項目をクリックします。


赤線の四角の中が、このサイトの2カラム右側に
表示されている、サイドバーのメニューです。

赤線四角内H3タイプですが、赤線四角下
H4タイプが見えてますけども、好みのタイプを
選択して下さい。

*サイドバーは2カラム以上のテーマを基準とします。

基本的に、この選択したタイプの四角の中にメニューを
入れると表示され出すと非表示になります。

また順番もドラックして、メニューの□項目を上下する事で
サイドバーの(上からの)表示順の変更が可能です。

サイドバーの装飾

またサイドバーをCSSで装飾する場合も
CSSの指定は、選択した使用中のH3(h3)やH4(h4)
CSSのコードを指定して装飾して行きます。

H3(h3)なのに、H4(h4)でCSSを追加しても
何もサイドバーに反映されませんので注意しましょう。

この上の画像とは異なりますが
メインのサイドバーと在るテーマは、四角と同じで
フロントページウィジェットエリア1&2は
固定ページをフロントページに指定した時に
サイト下部のメニューを充実させたい場合に使用します。

3.ウィジェットを追加する方法

基本操作は、好きな項目をサイドバー(四角エリア)に
追加するには、左側の「利用できるウィジェット」の中から
表示したいものを選んで、右側のボックスの中に
上画像の青矢印のようにドラッグ & ドロップするだけでOKです。

四角のサイドバーの種類も、上のような
いろいろな項目の中から選ぶことが出来ます。

タイトル右の▼をクリックすると開き(四角になる)ますので
その中にドラッグ & ドロップします。


ドラッグ & ドロップするメニューは
左側の利用できるウィジェットの中から選べます。

例えば上の左上から4つ目の「テキスト」などを選び
タイトルを入力して、自分の文を入力します。
リンクなどを設定したりして、▲を閉じて
右の四角の中にドラッグ & ドロップする事で

オリジナルのサイドバーの表示が自由に
カスタムして作成する事が出来ます。

ドラック&ドロップ出来ない場合

ドラック&ドロップしょうとしても
選択したサイドバーのエリアまでが遠くて
追加したいウィジェットを持っていけない時

追加したいウィジェット(例・テキスト)をクリック
すると上の画像のような項目が、下に出て来ますので
サイドバーに使用しているタイプを
選択(チェック)をしてください。

次に、下にある「ウィジェットを追加」のボタンを
クリックすると、ドラック&ドロップしなくても
ドラック&ドロップしたようにサイドバーに
使用しているタイプの中に、転送され表示されて
いるはずです。

HTML で書き込む必要が生じる時の対処方 

HTMLが苦手な方は、投稿の「新規追加」に移動して
ビジュアルエディタで普通に文書を書いてください。

表示したい内容を作成後、テキストボタンを押して
表示されている HTMLを、全て一時保存します。
それをサイドバーに貼付けると、簡単にHTMLの文書が作成できます。

サイドバーの見出しを中央にする。

サイドバーの見出しを中央にするには、子テーマ
下のCSSを追加します。

/*サイドメニュー見出し*/#sidebar h● {
text-align:center; /* 文字を中央表示 */
border-bottom:2px solid #70c09d;
padding:10px 0;
}

●の部分はサイドバーにしているにはh3やh4などを記入。
#のカラ―ナンバーも、御好みのカラ―を選択して変更してください。

 カラーコードのページへ

 フッターに画像や文字を入れる方法