WordPressウィジェットは非常に便利。投稿や固定ページの外側からあらゆる種類のコンテンツをサイトに追加し、ユーザーに対して情報の取得、リンクのフォロー、アクションの実行などを促すことができます。

今回の記事では、WordPressウィジェットについて知っておくべきことを余すところなくご紹介します。サイトに追加する方法、ウィジェットエリアを作成する方法、ウィジェット拡張に使えるプラグインをインストールする方法、独自のウィジェットをコーディングする方法などなど。

まずは、WordPressウィジェットとは何かを考えるところから始めましょう。

WordPressウィジェットとは

WordPressにおいてウィジェットとは、固定ページや投稿の枠外に位置するコンテンツです。

ウィジェットには、個々の投稿や固定ページとは別の情報、ナビゲーション、メディアなどが含まれます。ほとんどの場合、ウィジェットはサイト内のすべてのページに表示されますが、トップページなど特定のページ向けにウィジェットエリアを設定することもできます。

ウィジェットを利用するためには、これをウィジェットエリアに追加する必要があります。ウィジェットエリアは、機能というよりはサイトの設計やレイアウトに関連するもので、テーマにより定義されます。

ほとんどのWordPressテーマでは、サイドバーとフッターにウィジェットエリアが用意されていますが、コンテンツの下または上やヘッダーなど、多くの場所に複数のウィジェットエリアがあるものもあります。

私の運営するサイトの1つを例として取り上げます。下のスクリーンショットでは、サイドバーとフッターにウィジェットがあります。

サイトに表示されるウィジェットエリアの一例
サイトに表示されるウィジェットエリアの一例

WordPressには多数のウィジェットがデフォルトで付帯します。そのため、プラグインをインストールしたりコードを記述したりすることなくウィジェットが使用できます。もちろん、プラグインをインストールするか、独自のコーディングを行うことで、さらに多くのウィジェットを追加することもできます。

メディア、ソーシャルメディアフィード、ナビゲーション、検索、地図など、コンテンツタイプは多岐に渡ります。実際、サイトに欲しい機能としてウィジェットが対応しないものは、ほとんどないと言ってもいいでしょう。最大の課題は、あらゆる選択肢から選び、絞り込むことです。

WordPressウィジェットはどんな時に使用すべきなのか

サイト内の複数のページ（投稿、アーカイブなどを含む）にコンテンツを追加したいときにウィジェットを使用することになりますが、そのウィジェットは、各ページのコンテンツの一部ではありません。ウィジェットは、最新の投稿一覧、 ショッピングカート、行動を促すボタンなど、サイト全ページに表示したいコンテンツに便利です。

それぞれのウィジェットをどれだけの数の訪問者に見せたいのか、どのウィジェットをどこに配置するのか…これをよく考えてください。例えば、サイドバーのウィジェットはフッター（全てのユーザーが見るとも限りません）のウィジェットよりも目立ちます。

そのため、ユーザーが目にする可能性が高いサイドバーには最新の投稿や行動を促すウィジェットを、そして、フッターにはソーシャルメディアフィードを配置するのがいいかもしれません。

テーマにトップページ用の特別なウィジェットエリアがあれば、それを使用して、サイト内の各部門や関連コンテンツのリスト、またはサイトへの訪問を歓迎するビデオといったメディアを設置するのもいいでしょう。

WordPressウィジェット11の例

WordPressウィジェットが実際にどのような可能性を提供してくれるのか。これを理解する最善の方法は、具体例を見てみることです。WordPressサイトで頻繁に使われている11個のウィジェットを見てみましょう。

1. 「最近の投稿」ウィジェット

「最近の投稿」ウィジェットは、おそらくブログで最も広く使用されているウィジェットです。

サイトのすべてのページのサイドバーやフッターに最新の投稿を一覧表示でき、訪問者に対して多くの投稿を提示することができます。

WordPressには「最近の投稿」ウィジェットが標準で搭載されています。このウィジェットを使えば、表示する投稿の数とウィジェットに付ける見出しを設定できます。

「最近の投稿」ウィジェット
「最近の投稿」ウィジェット

さらに機能を追加したい場合には、最も人気のあるコンテンツを表示するWordPress Popular Postsなどの代替ウィジェットも利用できます。またはAdvanced Random Postsでは、ユーザーが新しい画面にアクセスするたびに、ウィジェットで表示されるコンテンツが更新されます。

2. 「最近のコメント」ウィジェット

サイトがどれだけ活気に満ちているか、周りの人がどの程度コンテンツに関心を持っているか訪問者に見せたいですか？

「最近のコメント」ウィジェットは、サイトの最新のコメントを表示し、訪問者に対してコメントに直接移動してディスカッションに参加することを促せます。

「最近のコメント」ウィジェット
「最近のコメント」ウィジェット

「最近のコメント」ウィジェットはWordPressに標準搭載されています。繰り返しになりますが、その他の機能を追加するには、Facebookアカウントを使用してコメントを投稿できるWP Social Commentsなどのサードパーティ製コメントプラグインをインストールできます。ソーシャルメディアエンゲージメントを加速させるには最適です。

3. CTAウィジェット

ウィジェットの強みとして訪問者に特定の行動を起こすよう働きかけることができます。具体的にはCTA（コールトゥーアクション）ウィジェットが便利です。

ウィジェットは単純なボタンにすることも、テキストウィジェットやHTMLウィジェット、または画像ウィジェット（これら全てがWordPressに標準搭載）を使用して、自分好みにデザインすることもできます。

私が運営するサイトの1つでは、メーリングリストへのサインアップを促すCTAウィジェットを作成しました。これには、HTMLでコーディングした画像、テキスト、ボタンを組み込んだHTMLウィジェットを使用しました。

「CTA」ウィジェットの一例（私自身のサイトより）
「CTA」ウィジェットの一例（私自身のサイトより）

4. ナビゲーションウィジェット

ウィジェットを使用して、ユーザーによるサイト内の移動を促すこともできます。

これにはいくつかのやり方があります。カテゴリー/タグクラウドウィジェットやナビゲーションメニューウィジェットです。

ナビゲーションメニューウィジェットを使用すると、サイト内メインナビゲーションメニューに加え、カスタムナビゲーションメニューを作成し、それをウィジェットエリアに追加できます。

メインナビゲーションメニューをそのままウィジェットエリアに追加することもできますが、これは、ナビゲーションメニューが小さな場合のみ検討すべきでしょう。

ナビゲーションメニューウィジェット
ナビゲーションメニューウィジェット

サイトのフッターにナビゲーションメニューを追加すると、訪問者が投稿の最後に到達した時にサイト内を簡単に移動できるようになります。ページの一番下からメインナビゲーションメニューに戻るためにたくさんスクロールしなければいけない（特にモバイルでは面倒）時にはこれが解決策になります。

または、ビルトインの「カテゴリー」ウィジェットを使用してサイト内のカテゴリのリストを表示するか「タグクラウド」ウィジェットを使用して、タグアーカイブに簡単にアクセスできるようにすることもできます。

5. メディアウィジェット

サイドバーまたはフッターにメディアを追加すると、サイトに彩りを加え、ユーザーに見たり操作したりすることのできる要素を提供できます。

ビルトインの「画像」ウィジェットを使用して、サイドバーやフッターに任意の画像が表示できます。その画像にリンクを設定することも可能です。

「画像」ウィジェット
「画像」ウィジェット

または、「動画」ウィジェットを使用すると、YouTubeまたはVimeoからサイトのウィジェットエリアに直接ビデオを埋め込むことができます。これは、サイトにトップページ専用の特別なウィジェットエリアがある場合に特に便利ですが、投稿の最後に到達したときに注意を引く方法としてフッターに設定することもできます。

6. ソーシャルメディアウィジェット

ウェブサイトを訪れるユーザーとSNSを介して交流したい場合は、ソーシャルメディアフィードをサイドバーまたはフッターに追加すると、SNSを頻繁に使っていることをアピールし、フォローを促すことができます。

最大のプラットフォーム（Facebook、Twitter、Instagram）のソーシャルメディアウィジェットを利用する方法として、例えば、これらすべてを含むJetpackプラグインが利用できます。

プラグイン「Jetpack」
プラグイン「Jetpack」

または、SNS独自のプラグインをそれぞれ入手することもできます。プラグインディレクトリで無料で提供されています。または、ソーシャルメディアフィードの表示方法をカスタマイズできるサードパーティ製プラグインを利用するのもいいでしょう。

7. 買い物かごウィジェット

WooCommerceなどのプラグインを使用してeコマースストアを運営している場合には、買い物かごウィジェットの利用をお勧めします。これにより、ユーザーはストア内のどこにいても簡単に商品を買い物かごに追加できます。

買い物かごウィジェット
買い物かごウィジェット

これは、サイト訪問者が簡単に見られるようにサイドバーに置くか、または、テーマに特別なウィジェットエリアがある場合には、さらに可視性を高めるためにヘッダーに置くことができます。

WooCommerceのようなeコマースプラグインには、プラグインの一部として既に買い物かごウィジェットやその他のeコマース関連ウィジェットが含まれているため、サイトにeコマースプラグインを追加すると、それらが「ウィジェット」画面に表示されます。

8. フォームウィジェット

連絡や質問を受け付けたり、メーリングリストに登録して欲しい時には、サイドバーにフォームを追加することもできます。

WordPressにはデフォルトでフォームウィジェットは含まれていませんが、無料の「Contact Form 7」や有料かつ非常に優れたGravity Formsといったプラグインを追加することでこの機能を実装できます。

9. 地図ウィジェット

実店舗を経営している方には、アクセスのしやすさを考えて、サイトに地図ウィジェットを追加することをお勧めします。

WP Google Mapsなど、無料で利用できるGoogleマップウィジェットプラグインが多数あります。

プラグイン「WP Google Maps」
プラグイン「WP Google Maps」

または、プラグインをインストールしたくない場合は、 Googleマップから埋め込みコードを取得して、HTMLウィジェットに追加できます。

10. ログインウィジェット

会員制サイトを運営している場合には、ログインウィジェットを使用すると、特別なログインページに移動しなくても、簡単にサイトにログインできるようになります。

WordPressにデフォルトで付帯する「メタ情報」ウィジェットにはログインリンクがありますが、不要なものも含まれているため、プラグインディレクトリから別のプラグインを取得することをお勧めします。

Login with Ajaxを使えば、ウィジェットエリアにログインフォームを表示して、どのページからでもサイトにログインできるように設定できます。

ウィジェットプラグイン「Login with Ajax」
ウィジェットプラグイン「Login with Ajax」

11. 「検索」ウィジェット

非常にシンプルでありながら信じられないほど便利なウィジェットが、WordPressに標準で付帯する「検索」ウィジェットです。

「検索」ウィジェット「検索」ウィジェットこれをサイドバーまたはヘッダーに追加することで、サイトでのコンテンツ探しを支援できます。

「検索」ウィジェットをパワーアップしたい場合は、無料のWP Google Searchウィジェットをインストールして、Google検索を実装できます。

WordPressサイトにウィジェットを追加する方法

WordPressサイトに必要なウィジェットの種類を決めたら、次はインストールです。

ただし追加しすぎないように注意してください。たくさんウィジェットを詰め込むほど、ユーザーに見てもらえなくなります。代わりに、サイドバーに追加するものは、2つまたは3つのメインなウィジェットに絞り込みましょう。重要度が低いものはフッターに追加できます。

テーマにその他にもウィジェットエリアがあれば、そこに配置するウィジェットも考えましょう。その際には、追加するウィジェットがサイトのレイアウトとデザインに適合するかどうか注意してください。

ウィジェットを追加する方法は3つあります。

  • WordPress付属のウィジェットを使用する
  • プラグインディレクトリからサードパーティ製のウィジェットを追加する
  • ウィジェットを含む有料プラグインを購入する

自分のWordPressサイトで使いたいウィジェットを見つける

選択肢は豊富にあるため、インストールするウィジェットを決めるのは困難です。多くの選択肢に目を通してから、最適なものを選びましょう。

WordPressに付属するウィジェット

標準搭載されているウィジェットで事足り場合には、それを使用しましょう。探す時間を節約でき、サイトで実行されるコードも少なくなります。

WordPressに最初から搭載されているウィジェット
WordPressに最初から搭載されているウィジェット

最初からインストールされているウィジェットは次のとおりです。

  • アーカイブ：月ごとのアーカイブへのリンクです。ブログ向けに設計されていますが、現在では少し時代遅れの印象です。
  • カレンダー：ブログのカレンダーです。タイミングを重要視するブログに適しています。しかし、最近ではあまり一般的ではありません。
  • カスタムHTML：究極の柔軟性を確保できるのがこちら。（Googleフォームのように）HTMLでの入力または貼り付けにより、必要なコンテンツを追加できます。コーディングに慣れていない場合は扱うのはやめた方がいいでしょう。
  • 画像：メディアライブラリから画像を表示します。
  • ナビゲーションメニュー：メインナビゲーションメニューまたは作成した別のメニューを表示します。
  • 最近のコメント：最近のコメントとそれへのリンクをリストとして表示します。
  • タグクラウド：クラウドフォーマットのタグ一覧と関連するアーカイブへのリンクを表示できます。
  • 動画： YouTubeなどのストリーミングサービスから動画を埋め込むことができます。
  • 音声：ポッドキャスト、プレーヤー、曲、またはその他オーディオクリップを埋め込むことができます（関連記事：WordPressを使ってポッドキャストを始める方法）。
  • カテゴリー：ブログのカテゴリーのリストとアーカイブページへのリンクが表示できます。
  • ギャラリー：画像ウィジェットよりも高度の設定で、画像のギャラリーを表示します。
  • メタ情報：ログインリンクやRSSフィードなどのメタデータです。WordPress初期からの名残であり、現在はあまり使用されていません。
  • 固定ページ：サイトにある固定ページのリストとリンクを表示します。
  • 最近の投稿：最新の投稿のリストを表示して、多くの記事を読んでもらうように促すことができます。
  • 検索：シンプルな検索ボックスです。
  • テキスト：サイトに関する情報など、好みのテキストが追加できます。

プラグインでウィジェットを追加する

WordPressプラグインディレクトリには、様々な種類のウィジェットを搭載した無料のウィジェットプラグインが何千と用意されています。

それに加えて、他の多くのプラグインにもウィジェットが組み込まれています。たとえば、eコマースプラグインには普通買い物かごウィジェットなどが搭載されています。

プラグインディレクトリから必要なプラグインが見つからない場合には、有料のプラグインも利用できます。通常、より多くの機能や直感的なインターフェースがあります。ただし、無料のプラグインでも同じ機能が見つかる場合があるため、プラグインを購入する前にプラグインディレクトリをよく調べてみてください。

サイトに適したウィジェットを見つける方法

適切なWordPressウィジェットを見つけるためのヒントを次にご紹介します。

  1. 具体的にウィジェットにどのような機能を求めていますか？どの機能が必要で、どのような見た目にしたいでしょうか？サードパーティ製のAPIにリンクする必要はありますか？
  2. ビルトインのウィジェットを見て、ニーズに合ったものがあるかどうか確認しましょう。適切なものが見つかったらテストします。見つからない場合には…
  3. プラグインディレクトリを確認してください。ディレクトリには「プラグイン」>「新規追加」からアクセスできます。複数の用語を使って検索してみましょう。「ウィジェット」という言葉を含めるのは必須ではありません。ウィジェットに焦点を合わせていないプラグインに広範な機能の一部としてウィジェットが含まれていることもあります。
  4. 無料プラグインの中に適切なものが見つからない場合は、有料プラグインを探してみましょう。他のWordPressユーザーにお勧めを尋ね、レビューを見てから選択してください。

どのウィジェットを使うにしても、テストして動作を確認する必要があります。有料プラグインを購入する場合、返金保証があるかどうか、無料試用期間が設けられているかどうかをチェックすることをお勧めします。

WordPressのサイドバーとフッターにウィジェットを追加する方法

ウィジェットを決めたら、次はサイトに追加しましょう。

テーマに組み込まれているウィジェットエリアのどこにでもウィジェットを追加できます。テーマの必要な場所にウィジェットエリアがない場合には、他のテーマを探してみるのもいいでしょう。

この記事の後半では、独自のウィジェットエリアのコーディング方法をご紹介します。

ウィジェットをサイトに追加するには、以下の2つの方法があります。

  • 一つ目はカスタマイズを利用する方法です。管理者メニューから「外観」>「カスタマイズ」>「ウィジェット」へ移動するか、画面上部のバーから「カスタマイズ」>「ウィジェット」へと移動します。
  • 「ウィジェット」管理画面からも操作できます。管理者メニューから「外観」>「ウィジェット」へと移動するか、画面上部のバーから「カスタマイズ」>「ウィジェット」へと移動します。
カスタマイズ画面のウィジェット
カスタマイズ画面のウィジェット

これら両方の方法についてはすぐに説明しますが、最初にウィジェットエリアを確認し、ウィジェットとテーマとの関係を考えてみましょう。

ウィジェットはサイドバーだけのものではない

WordPressのテーマによっては、複数の場所にウィジェットエリアがある場合があります。

ほとんどのテーマでは、サイドバーとフッターにウィジェットエリアがあります。しかし、コンテンツの下や上、ヘッダーなど、他の場所にもあるものもあります。

WordPress管理画面内「ウィジェット」設定画面に移動すると、テーマ内のすべてのウィジェットエリアが確認できます。

私は様々な場所にウィジェットエリアが用意されたテーマを使用しています。以下のスクリーンショットから、コンテンツの上下、ヘッダー内、メインフッターの下にウィジェットエリアがあることがわかります。

ウィジェット設定画面、ウィジェットエリア
ウィジェット設定画面、ウィジェットエリア

サイト内の他の場所にウィジェットを追加したいならば、ウィジェットエリアが豊富なテーマを見つけるのが理にかなっています。これを行うには、フレームワークテーマを使用するのがベストでしょう。

テーマ内のサイドバーまたはフッター以外の場所を使うとなると、私のウェブサイトの1つにあるように、ヘッダーに検索バーを追加するのがお勧めです。

ヘッダー内の検索バー
ヘッダー内の検索バー

ウィジェットエリアとテーマ

ウィジェットエリアは、テーマ関数ファイルとテーマテンプレートファイルに記述されています。

こちらが、私がヘッダーにウィジェットエリアを追加するためにテーマ関数ファイルに記述したコードです。

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

そして、このウィジェットエリアをテーマの適切な場所に追加するheader.phpファイルのコードは次の通りです。

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

テーマにウィジェットエリアを追加するには、これと同様のコードを追加します。この記事の後半で具体的な方法をご紹介します。

テーマに必要な数のウィジェットエリアがなければ、次の2つのいずれかを実行できます。

  • 必要な場所にウィジェットエリアがあるテーマを見つける
  • テーマまたは子テーマに新しいウィジェットエリアをコーディングする

テーマ内の必要なすべての場所にウィジェットエリアを確保できたら、そこにウィジェットを追加しましょう。

ウィジェット画面からウィジェットを追加する方法

WordPressサイトにウィジェットを追加する方法は2つあります。最初の方法は、WordPress管理画面内にあるウィジェット画面を使用することです。

「外観」>「ウィジェット」をクリックします。これでウィジェット画面が開きます。

ウィジェット画面
ウィジェット画面

ここからウィジェットを追加するには、以下の2つの方法があります。

  • 左側のウィジェットのリストから、利用したいウィジェットエリアにドラッグする
  • 好みのウィジェットをクリックすると、追加できる場所のリストが表示されるので、目的のエリアを選択して、「ウィジェットを追加」ボタンをクリック
ウィジェットエリアとウィジェットの選択
ウィジェットエリアとウィジェットの選択

その後、ウィジェットエリア内でのウィジェットの位置関係を編集する必要がある時もあります。

それぞれのウィジェットエリアに必要なだけウィジェットを追加できますが、詰め込みすぎはやめましょう。ウィジェットエリア内でドラッグして、正しい順序に並べ替えられます。ウィジェットの外観が気に入らない場合は、ウィジェットエリアから別のウィジェットエリアにドラッグすることもできます。

ウィジェット画面からキーボードを使用してウィジェットを追加することもできます。マウスが使えない状況でもウィジェットを追加できます。

アクセシビリティモードでウィジェットを追加/編集する

ウィジェット画面では、マウスを使用できない場合には代わりにキーボードが使用できます。

まず、画面の右上にある「アクセシビリティモードを有効にする」リンクをクリック（またはタブで移動して選択）して、画面をアクセシビリティモードにします。

アクセシビリティモードのリンク
アクセシビリティモードのリンク

画面が変わり、アクセシビリティモードが開始されます。

ウィジェット画面のアクセシビリティモード
ウィジェット画面のアクセシビリティモード

次に、キーボードの「Tab」キーを使用して画面の要素間を移動し、「Return」キーを押して項目を選択、操作します。タブを使ってウィジェットまで移動し「追加」リンクで「Return」を押して追加する場所を選択するか、ウィジェットエリアにタブで移動し「編集」リンクで「Return」を押すことができます。

WordPressカスタマイズ画面を使用してウィジェットを追加する方法

ウィジェット画面の代わりにカスタマイズ画面を使用してウィジェットを追加すると、リアルタイムでウィジェットが確認できます。これにより、必要に応じてウィジェットエリア間でウィジェットを移動するのが楽になります。

管理メニューで、「外観」>「カスタマイズ」をクリックします。または、サイトの画面上部にある管理バーから（ログインしている場合に表示されます）「カスタマイズ」をクリックします。これでカスタマイズ画面が開きます。

WordPress管理バー
WordPress管理バー

「ウィジェット」オプションをクリックすると、テーマのすべてのウィジェットエリアのリストが表示されます。ウィジェットを追加したいウィジェットエリアをクリックして、「ウィジェットを追加」ボタンをクリックします。

これで、サイトで使用できるすべてのウィジェットのリストが表示されます。ここには、WordPressに最初から付帯するすべてのビルトインウィジェットと、プラグインを介して追加されたウィジェットの両方が含まれます。

「ウィジェットを追加」ボタン
「ウィジェットを追加」ボタン

そのウィジェットエリアに追加したいウィジェットを選択すると、右側のプレビュー画面に表示されます。

ウィジェットを並べ替えるには、左側からウィジェットを上下にドラッグするか、ウィジェットのリストの下にある「並べ替え」リンクをクリックし、上下の矢印を押して移動します。

カスタマイズ画面でウィジェットを編集する
カスタマイズ画面でウィジェットを編集する

カスタマイズ画面でウィジェットの追加が完了したら、左上にある「公開」ボタンを忘れずにクリックして、変更を保存してください。これを行わずにカスタマイズ画面を終了すると、変更はサイトに反映されません。

ウィジェットを追加したら、それがページのデザインに合致しているか確認してください。ウィジェットエリアがたくさんありすぎると、少し煩雑に見えるかもしれません。そんな場合には、一部を削除するかウィジェットエリア間での移動で調整しましょう。

これは、ウィジェット画面から簡単に行えます。ウィジェット画面では、ウィジェットエリア間でウィジェットをドラッグで移動できます。

特定のページにウィジェットを追加する方法

一部のテーマには、トップページなどの特定のページ専用のウィジェットエリアがあります。それでは、ウィジェットをサイトの1ページにだけ追加したい場合はどうすればいいのでしょうか？

これは、グーテンベルクの投稿、固定ページエディターから行うことができます。

通常の方法で新しいブロックを追加してから「ウィジェット」ブロックタイプを選択します。

「ウィジェット」ブロックタイプ
「ウィジェット」ブロックタイプ

その後、サイトで有効にした多くのウィジェットの中から選択して、投稿や固定ページのコンテンツに追加できます。フォームウィジェット、CTAウィジェット、または最新の投稿ウィジェットなどを追加する場合に非常に便利です。

ウィジェットを編集する方法

サイトにウィジェットを追加したら、後から変更を加えることもできます。個々のウィジェットには設定があり、それにはウィジェット画面またはカスタマイズ画面からアクセスできます（ウィジェットを追加する際にどちらを使用したかは関係ありません）。

ウィジェットには設定がないものも、ウィジェットのタイトルや表示される投稿数などの設定があるものもあります。より複雑なものでは、別の設定ページでウィジェットをセットアップする必要があります。個別の設定については、プラグイン開発者の説明を確認してください。

ウィジェットプラグインを編集する方法は以下の通りです。

  • プラグインの設定を編集する
  • ウィジェットをあるエリアから別のエリアに移動する
  • ウィジェットを削除する（これには2つのやり方があり詳しくは後述）

ウィジェットの設定を編集するには、ウィジェット画面またはカスタマイズ画面でそのウィジェットを見つけ、そこに表示されるオプションを編集します。

ウィジェットの設定を編集する
ウィジェットの設定を編集する

ウィジェットをあるエリアから別のエリアに移動するには、ウィジェット画面を開いて、好きな場所へとドラッグします。アクセシビリティモードでは、ウィジェットの右側にある矢印から移動することができます。

ウィジェットを削除する

ウィジェット画面からウィジェットを削除するには、そのウィジェットを見つけ、ウィジェット設定ボックスの左下にある削除リンクをクリックします。

ウィジェット画面からウィジェットを削除する
ウィジェット画面からウィジェットを削除する

カスタマイズ画面でウィジェットを削除するには、ウィジェットエリアから対象となるウィジェットを見つけてください。ウィジェット名の右側にある矢印をクリックし、ウィジェット設定の左下にある「削除」リンクをクリックします。

カスタマイズ画面からウィジェットを削除する
カスタマイズ画面からウィジェットを削除する

ウィジェットエリアからウィジェットを削除できますが、その場合でもウィジェット画面から後で使用することができます。

画面下部にある「使用停止中のウィジェット」エリアまでスクロールします。ウィジェットをこのエリアにドラッグするとウィジェットエリアから消えますが、現在の設定で下書きとして保持できます。その後、必要に応じていつでもウィジェットエリアにドラッグし戻すことができます。

テーマを切り替え、新しいテーマのウィジェットエリアに違いがある場合、そこに収まらないウィジェットはWordPressによって自動的に「使用停止中のウィジェット」リストへと移動されます。

テーマに新しいウィジェットエリアを追加する方法

テーマに必要とするウィジェットエリアがない場合は、独自のテーマを追加することができます。これを行うには、2つのコードを追加します。

コンテンツの下にウィジェットエリアを追加してみましょう。

テーマの関数ファイルでウィジェットエリアを作成する

最初のステップとして、 register_widget()関数を使用してウィジェットエリアを設定します。

サードパーティのWordPressテーマを使用している場合（ちなみにお勧めはこちら）、これを行う前にまずは子テーマを作成する必要があります。そうしないと、将来的にテーマを更新した際にすべての変更が失われてしまいます。

独自のテーマを使用している場合は、そのテーマを直接編集して問題ありません。

テーマのfunctions.phpファイルを開いてください。ファイルの最後に、このコードを追加します。

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

functions.phpファイルを保存します。ウィジェット画面またはカスタマイズ画面に移動すると、ウィジェットを追加できる新しいウィジェットエリアが表示されます。

ただし、これだけでは、ページには何も表示されません。テーマのテンプレートファイルにもコードを追加する必要があります。

テーマのテンプレートファイルにウィジェットを追加する

最初に、どのテーマテンプレートファイルを使用する必要があるのか把握しましょう。

  • サイドバーを追加する場合は、このコードをphpファイルに追加する必要があります。
  • コンテンツ前後にウィジェットエリアを追加するには、コンテンツを出力するテーマテンプレートファイルにウィジェットエリアを追加する必要があります。
  • ウィジェットエリアをヘッダーに追加する場合は、phpファイルにコードを追加します。
  • 新しいウィジェットエリアがサイトの1つのページまたは1種類のコンテンツ専用である場合、WordPressのテンプレート階層を使用して、どのテンプレートファイルを使用/作成すればいいのか正確に把握してから先に進みましょう。そのため、たとえば、ウィジェットエリアをトップページに追加するには、front-page.phpファイルを作成し、そこにウィジェットエリアを追加する必要があります。

編集する必要があるテンプレートファイルと、ウィジェットエリアのコードを記述する箇所が決まったら、実際にコードの記述を始めます。コンテンツの後にウィジェットエリアを追加する場合、テーマのpost.phpとpage.phpファイルに以下を貼り付けます。

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

そして両テンプレートファイルを保存します。

コードは、ウィジェットエリアにつけた名前と、ウィジェットエリア内に配置する要素に応じて、ここにあるコードとは変わり得ますのでご注意ください。私は通常、サイドバーとウィジェットエリア用の設計には、aside要素を使用しています。

一歩進んだヒント：コンテンツのコンテナ要素の終了タグをサイドバーやフッターのファイルの先頭に移動したい場合には、そうすることができます。その際には、記述は一度で十分ですのでお気をつけください。

そして、サイトを見てみると、ウィジェットエリアに追加したウィジェットが適切な場所に表示されていることがわかります。思った通りにいっていない場合には、前に戻ってテンプレートファイルを編集し、コードをチェックしてみましょう。また、CSSを編集して見た目を調整することも重要です。

サイトを確認するとウィジェットが表示されている
サイトを確認するとウィジェットが表示されている

ウィジェットAPIを使用してウィジェットをコーディングする方法

これで、サイトに適したウィジェットを選択する方法、サイトにウィジェットを追加する方法、そして、新しいサイドバーやウィジェットエリアを登録する方法がわかりました。次のステップは、WordPressウィジェットの作成方法を学ぶことです。

サイトに必要なウィジェットを正確に生成してくれるプラグインに出会えないこともあります。そんな時には、自分でコーディングしてみましょう。

この例では、非常にシンプルなCTAウィジェットをコーディングする方法をご紹介します。

ウィジェットAPIの概要

WordPressのウィジェットAPIには、ウィジェットの登録、作成、コーディングに必要なすべてのコードが含まれています。ウィジェットAPIには以下が含まれます。

  • 新しいウィジェットを作成するためのクラス
  • ウィジェットを登録しサイトでそれを呼び出す関数
  • 親テーマなどからウィジェットを登録解除する関数

ここでは、クラスを使用してウィジェットを作成します。最初のステップは、ウィジェットを内包するためのプラグインを作成すること。

WordPressウィジェットのためにプラグインを作成する

独自のウィジェットを作成するには、プラグインをコーディングする必要があります。ウィジェットは機能に関するものであり、表示に関するものではないため、ウィジェットのコードをテーマに追加しないようにしてください。将来的にテーマを変更した場合でも、そのウィジェットにアクセスできるようにする必要があります。

空のプラグインを作成することから始めましょう。 wp-content/plugins ディレクトリにプラグインフォルダーを作成し、空のファイルを追加。適切な名前を付け、そのファイルを開き以下のコードを追加します。

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

上のAuthor URIとPlugin URIを独自に編集する必要があります。これにより、プラグイン画面から有効化することのできるプラグインが作成されます。

プラグイン画面にウィジェットプラグインが出現
プラグイン画面にウィジェットプラグインが出現

ただし、この時点では有効化しても何も起こりません。プラグインにコードを追加する必要があります。

ウィジェットのクラスを作成する

ウィジェットのコードはクラスで記述されます。それでは、これを追加しましょう。

class kinsta_Cta_Widget extends WP_Widget {

}

コンストラクタ関数を作成する

クラスに最初に記述するのは、ウィジェットを作成するコンストラクタ関数です。これをクラスのブレイス内に追加します。

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

これにより、ウィジェットの構築が始まります。

ウィジェットを出力するフォームを作成する

次に、ウィジェット画面とカスタマイズ画面がウィジェットを生成するために使用するフォームが必要となります。こちらもブレイス内に追加します。

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

これにより、（あなたを含む）ユーザーは、フォームを使用してCTAボックスにテキストとリンクを追加できるようになります。

ウィジェットを保存する関数を作成する

次に、フォームに入力されたデータを保存する必要があります。以下を追加してください。

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

これにより、ユーザーが入力したデータがウィジェット設定に保存されます。

ウィジェットを出力する関数を作成する

次に、サイトにウィジェットを表示するためのコードを記述します。繰り返しになりますが、これもブレイス内に追加します。

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
    echo $args['before_title'] . $title . $args['after_title'];
 };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

ウィジェットを登録する

クラスを作成したので、今度はWordPressウィジェットを登録して動作するようにしましょう。このコードをクラス外に追加します。

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

そして、プラグインファイルを保存します。ウィジェット画面に移動すると、ウィジェットが表示されています。

ウィジェット画面の新しいウィジェット
ウィジェット画面の新しいウィジェット

これをウィジェットエリアに追加して、テキストとリンクを追加すると、サイトに出力されます。

サイトに表示された新しいウィジェット
サイトに表示された新しいウィジェット

今のところ見た目はこの程度です。スタイルを設定するには、CSSを追加する必要があります。

ウィジェットにCSSを適用する

CSSをプラグインに適用するには、スタイルシートを作成し、プラグインにエンキューする必要があります。以下をプラグインファイルのクラスの前に追加してください。

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

次に、プラグインのフォルダ内に style.css ファイルを追加し、スタイルを適用します。もちろん、これについては、あなたにお任せします！

これで、サイトのウィジェットエリアに追加できるシンプルなCTAボタンの完了です。たとえば、これをサイドバーに追加すると、サイトのどこからでもサインアップページにアクセスできるようになります。

設定やオプションを駆使して、より複雑なウィジェットを作成することもできます。いずれにしても、ここまでの内容で独自のウィジェットの作成を始めるための基本は明確になったことでしょう。

スタイルを含むこのプラグインのコードの全貌は、Githubからどうぞ。コーディングをこれから始めたいという方は是非とも、gitとGitHubの違いについての詳細ガイドをご覧ください。

まとめ

ウィジェットは、私がWordPressの中でも愛用している機能の1つです。ウェブサイトに命を吹き込み、より多くのサインアップの獲得や、訪問者を顧客に変えることに貢献します。テーマ内の既存のウィジェットエリアには、WordPressウィジェットを自由に追加できます。さらにウィジェットエリアを拡張して、より多くの場所にウィジェットを追加することも可能です。

ウィジェットを探せる場所もたくさんあります。WordPressには多数のウィジェットが標準で付属。プラグインを使用して、さらに多くをインストールすることもできます。しかし、それだけではありません。ウィジェットAPIを使用して独自のウィジェットをコーディングすることもできます。

次はあなたの番です。サイトでWordPressウィジェットをどのように使っていますか？どれくらいの数のウィジェットを使っていますか？

Rachel McCollin

Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.