ワードプレス サイドバー編集方法
ネットビジネスD運営者の龍一です！
今回は、ワードプレス サイドバー設定・編集方法の紹介です。
ページのサイドバーと呼ばれる幅の狭いカラムの部分は
ウィジェットとも言われます。
ウィジェットとは、本来は小型アプリのような意味なのですが
ワードプレスの*名称的には、ページのサイドバーの部分と
思ってください。
*フッター部分などもウィジェットと言う場合もあります。
サイドバーは、最初はシンプルなものになっている事が多いですが
ウィジェットを編集すると、人気記事の一覧を表示したり
QRコードなどを追加したり、カテゴリーを表示したりなど
サイドバーの表示を、自由にカスタマイズして変更する
ことができます。
テンプレートによって異なりますが、ウィジェットで
編集できるのはサイドバーだけではなく、フッターや
記事下のCTAもウィジェットで、設定できるように
なっているテンプレートもあります。
2.サイドバーウィジェットの設定
ダッシュボードの管理画面の左メニューから
「外観 」→ 「ウィジェット」の項目をクリックします。
赤線の四角の中が、このサイトの2カラム右側に
表示されている、サイドバーのメニューです。
赤線四角内はＨ3タイプですが、赤線四角下に
Ｈ4タイプが見えてますけども、好みのタイプを
選択して下さい。
*サイドバーは2カラム以上のテーマを基準とします。
基本的に、この選択したタイプの四角の中にメニューを
入れると表示され出すと非表示になります。
また順番もドラックして、メニューの□項目を上下する事で
サイドバーの（上からの）表示順の変更が可能です。
サイドバーの装飾
またサイドバーをＣＳＳで装飾する場合も
ＣＳＳの指定は、選択した使用中のＨ3（h3)やＨ4（h4）で
ＣＳＳのコードを指定して装飾して行きます。
Ｈ3（h3)なのに、Ｈ4（h4）でＣＳＳを追加しても
何もサイドバーに反映されませんので注意しましょう。
この上の画像とは異なりますが
メインのサイドバーと在るテーマは、四角と同じで
フロントページウィジェットエリア１&２は
固定ページをフロントページに指定した時に
サイト下部のメニューを充実させたい場合に使用します。
3.ウィジェットを追加する方法
基本操作は、好きな項目をサイドバー（四角エリア）に
追加するには、左側の「利用できるウィジェット」の中から
表示したいものを選んで、右側のボックスの中に
上画像の青矢印のようにドラッグ & ドロップするだけでOKです。
四角のサイドバーの種類も、上のような
いろいろな項目の中から選ぶことが出来ます。
タイトル右の▼をクリックすると開き（四角になる）ますので
その中にドラッグ & ドロップします。
ドラッグ & ドロップするメニューは
左側の利用できるウィジェットの中から選べます。
例えば上の左上から4つ目の「テキスト」などを選び
タイトルを入力して、自分の文を入力します。
リンクなどを設定したりして、▲を閉じて
右の四角の中にドラッグ & ドロップする事で
オリジナルのサイドバーの表示が自由に
カスタムして作成する事が出来ます。
ドラック＆ドロップ出来ない場合
ドラック＆ドロップしょうとしても
選択したサイドバーのエリアまでが遠くて
追加したいウィジェットを持っていけない時は
追加したいウィジェット（例・テキスト）をクリック
すると上の画像のような項目が、下に出て来ますので
サイドバーに使用しているタイプを
選択（チェック）をしてください。
次に、下にある「ウィジェットを追加」のボタンを
クリックすると、ドラック＆ドロップしなくても
ドラック＆ドロップしたようにサイドバーに
使用しているタイプの中に、転送され表示されて
いるはずです。
HTML で書き込む必要が生じる時の対処方
HTMLが苦手な方は、投稿の「新規追加」に移動して
ビジュアルエディタで普通に文書を書いてください。
表示したい内容を作成後、テキストボタンを押して
表示されている HTMLを、全て一時保存します。
それをサイドバーに貼付けると、簡単にHTMLの文書が作成できます。
サイドバーの見出しを中央にする。
サイドバーの見出しを中央にするには、子テーマに
下のCSSを追加します。
| /*サイドメニュー見出し*/#sidebar h● { text-align:center; /* 文字を中央表示 */ border-bottom:2px solid #70c09d; padding:10px 0; } |
●の部分はサイドバーにしているにはh3やh4などを記入。
＃のカラ―ナンバーも、御好みのカラ―を選択して変更してください。
