【WordPress】サイドバーウィジェットをカスタマイズする

WordPress
スポンサーリンク

サイドバーとはサイトのメインコンテンツ横に表示されている、サイトの閲覧に際して便利な情報や機能が配置されている領域のことで、ウィジェットはサイドバーを構成している要素一つ一つのことを指す。

当ブログで言うなら下図赤枠部分がサイドバーである。

WordPressではこのサイドバーの内容を簡単にカスタマイズすることが出来る。今回はその方法を解説しよう。

サイドバーに追加できるウィジェットの種類はテーマによって違うが、基本的な項目と追加や削除の方法は同じなのでどのテーマを使おうとも参考にならないことはないだろう。

なお、この解説ではテーマ”Twenty Twelve”を使用する。

スポンサーリンク

ウィジェットの編集ページを表示する

まずはダッシュボードから”外観”をクリック。

次に”ウィジェット”とクリックし、編集ページを開こう。

このページからでも編集は可能だが、今回はカスタマイズ結果を確認しながら作業を行えるライブプレビューという機能を使用する。

ページ上部にある”ライブプレビューで管理”をクリックしよう。

すると右側にブログの現在の状態、左側にはカスタマイズ用のメニューエリアが表示される。

今ここで左エリアに表示されている項目はウィジェットが設置可能な場所だ。今回はメインサイドバーしか無いのでそれをクリックする。

テーマによってはここに複数の設置箇所が表示されるので、その時は自分がカスタマイズしたい場所を選択しよう。

左エリアには現在サイドバーに設置されているウィジェットが表示されている。これで準備は完了だ。

ウィジェットの詳細設定

まず現在設置されているウィジェットの詳細設定をする方法を説明する。

設定を変更したいウィジェットをクリックしてみよう。ここでは例として”最近の投稿”ウィジェットを選択する。

すると詳細設定のための項目が表示される。それぞれの項目の説明は書いてある通りなので省略する。

すべての項目を好きなように設定する。ちなみにタイトルは無入力でもウィジェットの名前がそのまま表示されるぞ。

設定した内容を右エリアで確認。

納得がいったら左エリア上部にある”保存して公開”をクリックしよう。

”保存して公開”ボタンが”保存しました”に変わっていれば詳細設定は完了だ。

ウィジェットの並び替え

ウィジェットの並び順を変更する方法は2つある。

一つ目は、左エリアにあるウィジェットをドラッグし、移動したい場所にドロップする方法。

二つ目は、左エリア下部にある”並べ替え”をクリックすると表示されるウィジェット横の矢印をクリックすることで順序を入れ替える方法だ。

どちらの方法でも結果は変わらないので、自分のやりやすい方法を選ぼう。

ウィジェットを追加する

左エリアの下部にあるウィジェットを追加をクリックしよう。

すると追加できる項目の一覧が表示される。それぞれ簡単な説明が書いてあるが、わかりにくそうな項目を少しだけ補足しておこう。

  • RSS:外部サイトの更新情報を取得し表示するためのウィジェット。TwitterやFacebookなどと連携させると効果的かもしれない。
  • タグクラウド:今まで記事に入力したタグの一覧のようなものを表示する。それぞれがそのタグが使われている記事一覧へのリンクになっている。
  • メタ情報:主に管理者用のリンクを表示する。WordPressへのログイン・ログアウト用のリンクが表示されるので必要なら設置しておくとよい。

それではウィジェットを追加してみよう。やり方は簡単で追加したい項目を選びクリックするだけだ。ここでは”RSS”を追加してみることにする。

クリックすると左エリアに”RSS”が追加され、詳細設定のための項目が表示される。

下図のように入力すると…

このように表示される。URLの部分にはRSSに対応したサイトのURLを入力しないと更新情報を取得できないので注意してほしい。

ちなみにオプション全てにチェックを入れるとこうなる。

入力した内容の確認が終わったら左エリア上部にある”保存して公開”をクリックしよう。これでウィジェットの追加は完了だ。

ウィジェットの削除

最後に不要になったウィジェットの削除方法を解説しよう。

まず左エリアから削除したいウィジェットをクリック。例では”最近のコメント”を削除してみる。

詳細設定が表示されたら、設定項目の下にある”削除”をクリックする。

すると左・右両方のエリアからウィジェットが消える。

この状態で左エリア上部の”保存して公開”をクリックすれば削除完了だ。

ここで削除したウィジェットは追加し直すことで元に戻せるが、入力してあった内容や設定までは復元できないので注意が必要だ。

コメント

タイトルとURLをコピーしました