WordPressのウィジェットの使い方

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

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

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

ウィジェットとは

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

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

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

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

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

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

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

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

ウィジェットを追加する

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

ウィジェットを編集する

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

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

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

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

ウィジェットの停止

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

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

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

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

• カスタムHTML
• 検索
• ナビゲーションメニュー
• カテゴリー
• タグクラウド

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

カスタムHTML

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

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

検索

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

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

ナビゲーションメニュー

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

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

カテゴリー

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

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

タグクラウド

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

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

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

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

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