2021/3/23 情報を更新いたしました。

WordPressには、特定のエリアを管理画面から簡単に装飾できるパーツ(ウィジェット)が複数用意されています。これらを活用すれば、下記のようにサイドバーやフッターを装飾できます。
(例:TCDテーマ「Muum」

Muumのフッターウィジェット
フッター

Muumのサイドバーウィジェット
サイドバー

当記事では、ウィジェットの基本的な使い方をご紹介いたします。

ウィジェットとは

WordPressに用意された特定のエリア(サイドバーやフッター等)を装飾できるパーツです。ウィジェットを使用すれば、検索フォームや記事一覧等を簡単に設置できます。

テーマによって用意されているウィジェットや設置できるエリアは異なります。

動画解説もございますので、よろしければご覧ください。

ウィジェットの基本的な使い方

それでは実際にウィジェットを設定してみましょう。今回は、WordPressのデフォルトテーマ「Twenty Twenty」を例に解説していきます。

まずは、管理画面より、外観 > ウィジェットを選択します。

外観 > ウィジェットを選択

下記の画面がウィジェットの設定画面です。ここでは、左側にウィジェット(パーツ)が一覧で並んでおり、右側にウィジェットを設置できるエリアが表示されています。

ウィジェットの設定画面の解説

基本的には、左側のパーツを右側のエリアに追加して、装飾を行います。詳細な使い方をみていきましょう。

ウィジェットを追加する

ウィジェットを追加する時は、画面左側から追加したいウィジェットを選択し、画面右側のエリアにドラッグ&ドロップで移動します。これでサイト上に表示されるようになります。

ウィジェットの追加方法

ウィジェットを編集する

追加したウィジェットをクリックすると、下記のように設定画面が開きます。ここで表示形式やウィジェット上部に表示するタイトルを設定できます。

ウィジェットの編集方法

ウィジェットによって設定できる項目は異なります。

ウィジェットの移動・並び替え

追加したウィジェットは、ドラッグ&ドロップでエリアを移動したり、表示順を並び替えることもできます。

ウィジェットの移動を行う

ウィジェットの停止

ウィジェットを削除すると設定した内容も消えてしまいます。もし、一時的に無効化する場合は、「使用停止中のウィジェット」に移動させましょう。

こちらに移動させたウィジェットは、設定を維持したまま管理画面上に残しておけますので、再度利用する際に非常に便利です。

使用停止中のウィジェットを利用する

よく使用するウィジェットをご紹介

WordPressには、様々なウィジェットがデフォルトで用意されていますが、使用するものは限られています。下記に使用頻度の高いウィジェットをまとめましたので、ぜひご覧ください。

記事一覧などは、テーマに用意された専用のウィジェットを使って表示することが多いです。

カスタムHTML

HTMLを記入して任意のコンテンツを表示できるウィジェットです。例えば、下記のようにFacebookのタイムラインを埋め込むことも可能です。

カスタムHTMLウィジェット
管理画面

Facebookのタイムライン
実際の表示

TwitterやFacebookのタイムラインの埋め込み方法は下記の記事で紹介してますので、参考にしてください。

検索

サイト内検索が可能な検索フォームを設置できるウィジェットです。

検索ウィジェットの設定画面
管理画面

検索ウィジェットのサイト上の見た目
実際の表示

特定のページを検索結果から除外するプラグインもありますので、よろしければ合わせてお使いください。

ナビゲーションメニュー

外観 > メニューで作成したメニューをリスト形式で表示できるウィジェットです。

ナビゲーションメニューウィジェットの設定画面管理画面

ナビゲーションメニューウィジェットのサイト上の見た目実際の表示

ナビゲーションメニューの設定方法は下記をご覧ください。

カテゴリー

投稿に設定したカテゴリーを一覧で表示します。リストをクリックすると、該当カテゴリーの投稿一覧ページに遷移します。(ドロップダウンでも表示できます。)

カテゴリーウィジェットの設定画面管理画面

カテゴリーウィジェットのサイト上の見た目実際の表示

カテゴリーに該当する記事が存在しない場合は表示されません。

タグクラウド

カテゴリー、タグ等のタクソノミーを並べて表示できるウィジェットです。該当する記事数の多いものは自動的に文字サイズが大きくなるため、CSSでスタイルを調整して、使用されている方が多いです。

タグクラウドウィジェットの設定画面管理画面

タグクラウドウィジェットのサイト上の見た目実際の表示

タグやカテゴリーに該当する記事が存在しない場合は表示されません。

ウィジェットを効率的に設定する

今回は、デフォルトテーマ「Twenty Twenty」を例に解説しましたが、テーマによってはウィジェットエリアがより細分化されています。

その場合、エリアごとに同じウィジェットを使い回すことが多いんですよね。下記のプラグインを使用すれば、ウィジェットを複製し、追加〜設定の流れを大幅に短縮できますので、ぜひ導入してみてください。