WordPress にウィジェットエリアを追加する方法 (ブロックテーマとクラシックテーマ)

公開: 2023-06-16

ウィジェットは、WordPress Web サイトのさまざまな場所に追加の機能、特徴、情報を追加する一般的な方法です。これらを使用すると、カレンダー上の連絡先フォームから Web ページ上の最新のブログ投稿のリストまで、あらゆるものを配置できます。

ただし、これを行うには、少なくとも従来の WordPress テーマでは、まずウィジェット領域が必要です。これらは WordPress テーマの特別に指定された部分で、バックエンドでウィジェットを追加すると、フロントエンドにも表示されます。

一方、WordPress サイトエディターを使用してテーマをブロックすると、ウィジェット領域がなくなりました。ここでは、ウィジェットの追加の動作が以前とは大きく異なります。これが、このトピック全体をカバーするのに十分な理由です。

以下では、WordPress テーマにウィジェットを追加するさまざまな方法を見ていきます。クラシックテーマでウィジェット化された領域を使用して新しい領域を作成する方法、およびブロックテーマにウィジェットを表示する方法について説明します。

ウィジェットとは何ですか?またその使用方法は何ですか?

より技術的な話に入る前に、まず WordPress に関して「ウィジェット」という用語を使用するときに何を言っているのかを簡単に理解しましょう。 Twenty Twenty-One のような非ブロックテーマを使用している場合、設定は「外観 > ウィジェット」にあります。

これにより、現在のテーマで利用可能なすべてのウィジェット領域 (ここではフッターのみ) とそこに含まれるウィジェットが表示されます。ここに表示されるものはすべて、Web サイトのフロントエンドにも対応します。

通常、ウィジェット化された領域はフッター、サイドバー、またはヘッダーにあります。ただし、必要な場所にほぼどこにでも配置することもできます (すぐにわかります)。

サイトにウィジェットを表示する方法

ウィジェットメニューには以前は異なるユーザーインターフェイスがありましたが、現在では WordPress の他の部分と同様にブロックエディターで動作するように変換されています。したがって、WordPress Gutenberg エディターの他のインスタンスと同様に使用できます。

ブロックインサーター (左上隅にある青いプラスボタン) またはウィジェット領域の小さいバージョンを使用してブロックを追加します。通常の方法でブロックを削除し、右側のサイドバーでブロックの外観や動作を変更することもできます。

使用できるブロックは通常のオプションに及びます。段落、見出し、表、画像など、何でも可能です。

通常、ウィジェット領域は、情報が自動的に更新される、より動的なセクションに使用されます。これらは、ブロックインサーターの[ウィジェット]カテゴリの下にまだあります。

ご覧のとおり、アーカイブやカテゴリの表示、ページのリストや最新の投稿やコメント、RSS フィード、検索バーなどが含まれています。ここで行った変更を永続的にするには、右上隅にある[更新]をクリックすることを忘れないでください。

あるいは、これらの設定はすべて、WordPress カスタマイザー ( [外観] > [カスタマイズ] ) の[ウィジェット]タブにもあります。

ここの利点は、ページ上のすべてがどのように表示されるかをエディターで直接プレビューできることです。

クラシック WordPress テーマでの新しいウィジェット領域の作成

さて、ここまでは順調です。ウィジェットとは何か、またクラシックテーマのどの部分でウィジェットを管理できるかについては決まりました。

ただし、利用可能なウィジェット化領域の選択に満足できない場合はどうすればよいでしょうか? テーマの他の場所にウィジェットを追加できるようにしたい場合はどうすればよいでしょうか?

その場合は、自分で作成する必要があります。これについてはこれから説明します。

1. ウィジェットエリアを登録する

WordPress テーマでのウィジェット領域の作成は 2 段階のプロセスです。最初のステップはそれらを登録することです。

これを行うには、 functions.php内のregister_sidebar()関数を使用します。次のようになります。

 function ns_register_top_banner_widget() { register_sidebar( array( 'name' => 'Top Bar', 'id' => 'top-bar-widgets', 'description' => 'Widgets in this area will appear in a bar at the top of the site.', 'before_widget' => '<div class="widget top-bar-widget">', 'after_widget' => '</div>', 'before_sidebar'=> '<div>', 'after_sidebar'=> '</div>', ) ); } add_action( 'widgets_init', 'ns_register_top_banner_widget' );

注: 多くのテーマの変更と同様、これを子テーマの形式で実装することをお勧めします。

コードスニペットのさまざまな部分とその意味の説明:

name — これは、WordPress バックエンドに表示されるウィジェット領域の名前です。
id — 後で表示できるように、ウィジェット領域に ID を与える必要があります。
description — これは以前はウィジェットメニュー内に表示されていました。たとえば、他のユーザーにサイドバーの場所を説明するために使用できます。ただし、ウィジェットのブロックエディターを使用していないWordPressバージョンにのみ表示されるため、省略することもできます。
before_sidebarとafter_sidebar — これら 2 つのパラメータを使用すると、ウィジェット領域の前後に HTML マークアップを追加できます。こうすることで、たとえば、それを<div>コンテナでラップできます。
before_widgetとafter_widget — 上記と同じですが、この領域に表示されるウィジェットが対象です。

register_sidebar()で使用できるパラメータは他にもあります。詳細については、ドキュメントを参照してください。ただし、私たちの目的には上記で十分です。

functions.phpに存在し、ファイルが保存されると、ウィジェット領域はすでに WordPress バックエンドに表示されます。

2. WordPress テーマのウィジェット領域を出力する

ダッシュボードにはすでにウィジェット領域が表示されていますが、現時点ではそこにブロックやウィジェットを配置しても効果はありません。これは、テーマに追加したものを出力するように指示するマークアップがまだ存在しないためです。

これは、 dynamic_sidebar()関数によって行われます。たとえば、上で作成したウィジェット領域をテーマ内の任意の場所に出力するには、次の関数を使用できます。

 <?php dynamic_sidebar( 'top-bar-widgets' ); ?>

ウィジェット領域を表示するために以前に作成したウィジェット領域と同じ ID がコードにどのように含まれているかに注目してください。

上記は機能しますが、多くの場合、もう少し複雑なスニペットを使用する方が合理的です。

 <?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?> <?php dynamic_sidebar( 'top-bar-widgets' ); ?> <?php endif; ?>

上記のコードは、まず問題のウィジェット領域にウィジェットがあるかどうかを確認し、存在する場合にのみページに追加します。また、CSS 経由で出力をカスタマイズしやすくするために、HTML クラスや ID などのマークアップも含まれています。

これでは、このマークアップをどこに置くのかという疑問が残るだけです。

答えは、ウィジェット領域を表示したいテーマファイル内の任意の場所です。通常、これはpage.phpやsingle.phpなどのページテンプレートファイル内にあります。ただし、 header.phpやfooter.phpなどに追加することもできます。決定を下すには、テンプレートの階層を理解し、テーマがどのように機能するかを理解しておくと役立ちます。

この場合、Twenty Twenty-One テーマの場合、ページを開いた直後のheader.php内に配置します。

コードを配置したら、新しく作成した領域内にウィジェットを配置すると、Web サイト上の意図した場所に表示されます。

代替案: WordPress フックを使用してウィジェット領域を表示する

コードスニペットをページテンプレートやテーマファイルに直接追加する代わりに、WordPress フックを使用して同じ出力を実現することもできます。

これらは、前述のファイル内の戦略的な場所に配置された小さなコードであり、物理的にコードを配置せずに、まさにその場所で関数を実行するように WordPress に指示するために使用できます。代わりに、問題の関数をfunctions.php内に配置できます。そうすることで、ウィジェット化されたすべての領域を 1 か所から管理できるという利点があります。

私たちの場合はどうなるでしょうか?

WordPress フックを使用してウィジェット領域を配置する方法は次のとおりです。

 function ns_output_top_banner_widget() { if ( is_active_sidebar( 'top-bar-widgets' ) ) : dynamic_sidebar( 'top-bar-widgets' ); endif; } add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

Twenty Twenty-One テーマには、ヘッダーファイル内にwp_body_open()という名前のフックがあります。これをフックすることで、ファイル自体を変更することなく、同じ場所にウィジェットエリアを表示することができます。

前述したように、コードスニペットは (子) テーマのfunctions.php内に組み込まれます。この方法は、Genesis Framework などのフックが多数含まれるテーマに特に適しています。

ブロックテーマにウィジェットを追加する方法

これまでは、クラシックテーマでウィジェット領域を作成する方法についてのみ説明してきました。しかし、結局のところ、WordPress テーマの事実上の標準になる可能性が高いブロックテーマについてはどうでしょうか。

ここでは、サイトエディターの動作が大きく異なるため、実際にはウィジェット領域がありません。また、[外観] > [ウィジェット]メニューが存在しないことにも気づきます。

ただし、上記と同様の原則を使用して、ウィジェット、コンテンツ、その他の要素をテーマに追加することはできます。

ページテンプレートとテンプレートパーツを入力する

ここで最初に注目していただきたいのは、ブロックエディターを使用するとウィジェットの配置の制約がはるかに少なくなるということです。事前に構成されたウィジェット領域に制限されないため、任意のページ要素を必要な場所に配置できます。

ただし、ページテンプレートとテンプレートパーツを使用すると、クラシックテーマのウィジェットのようなブロックを引き続き使用できます。左側のサイトエディターのメニューからブロック内にアクセスします (左上隅の WordPress ロゴをクリックして開きます)。

これにより、サイトで使用可能なページテンプレートのリストが表示されます。通常、それらの範囲は、ページオーバーアーカイブテンプレートから 404 ページまでです。

これは、クラシックテーマのテーマファイルを見た場合に見つかるものと似ています。

一方、 「テンプレートパーツ」の下には、ヘッダー、フッター、コメントセクションなどの Web サイトのパーツのテンプレートが表示されます。

いずれかをクリックしてエディタで開きます。あるいは、テンプレートエディターを使用してテンプレートとテンプレートパーツを変更することもできます。これは、通常のページエディターから開くことができる、サイトエディターのわずかに縮小されたバージョンです。目的のページを開き、 [テンプレート]の下のテンプレート名をクリックし、 [テンプレートの編集]をクリックするだけです。

ドロップダウンエディターから別のテンプレートを選択することもできます。

新しい要素/ウィジェットの追加

ページテンプレートの仕組みを理解している場合は、ここで加えた変更が 1 つのページだけでなく、ページテンプレートまたはテンプレートパーツを使用する Web サイト上のすべてのコンテンツに影響することをおそらく理解しているでしょう。したがって、追加したページ要素は、それらがアクティブなサイト上のあらゆる場所に表示されます。

たとえば、フッターテンプレート部分に最新投稿ウィジェットを追加できます。

これを実行して保存すると、このテンプレートパーツが存在するすべてのページの Web サイトのフロントエンドにも表示されます。

考えてみれば、これは従来のウィジェット領域の動作とそれほど変わりません。これらは、ページ要素とコンテンツを追加して、Web サイト全体の同じ場所に再現されるようにするための単なる方法でもあります。

ここでの唯一の違いは、ファイルを編集する必要がないことです。代わりに、ビジュアルエディターですべての作業を行うことができ、WordPress がファイルを作成および変更します。

WordPress ブロックテーマに新しい「ウィジェットエリア」を作成する

では、ブロックテーマで新しいウィジェットエリアを作成するにはどうすればよいでしょうか?

答えは「そんなことはない」です。ただし、これに最も近いのは、新しいページテンプレートとテンプレートパーツを作成することです。これにより、Web サイトの限られた部分にのみ表示されるコンテンツを追加できるようになります。

わかりやすくするために例を見てみましょう。上で手動で行ったのと同じことを行いたいとします。以前は、ウィジェット領域を登録してから、それを出力するコードを追加する必要がありました。サイトエディターを使用すると、同じことを実現できます。この場合に限り、はるかに簡単です。

1 つの可能性は、新しいテンプレートパーツを作成することです。そのためには、エディターの[テンプレートパーツ]メニューで、上部にあるプラスアイコンをクリックします。

表示されるメニューで、名前を付け（たとえば、「トップバー付きヘッダー」）、タイプを選択し（この場合は、もちろんHeader ）、編集を開始します。必要または希望するページ要素、ウィジェット、コンテンツを追加します。

完了したら、それを表示するページテンプレートに割り当てる必要があります。

そのためには、そのテンプレート (この場合はHome ) に移動し、既存のヘッダーを見つけます。それをクリックし、次に 3 つの点をクリックしてメニューを開き、 [ヘッダーの置換]を選択します。

これにより、サイトで利用可能なテンプレートパーツとパターンを含むメニューが開きます。

作成したばかりのものを選択して入力し、ページテンプレートを保存します。ここで Web サイトのフロントエンドに戻ると、新しく作成したヘッダーがページ上に (そしてそこにのみ) 表示されていることがわかります。

新しいウィジェット/ブロックを追加する方法

ブロックテーマでウィジェットとウィジェット領域を作成する方法について話すときに残る最後の問題は、ウィジェットの選択肢をさらに追加する方法です。結局のところ、デフォルトでは、少数のオプションのみに制限されています。幸いなことに、さらに追加するにはさまざまな方法があります。

1 つは、Gutenberg ブロックプラグインをインストールでき、その多くにはフォーム、マップ、カルーセルなどのさまざまなウィジェットブロックが含まれています。

さらに、ウィジェット機能を備えた単一のブロックをインストールすることもできます。そのためには、まず WordPress サイトエディター内のブロックインサーターをクリックします。

開いたら、上部のフィールドに探しているブロックの種類の検索語を入力します。サイトにすでに存在するオプションに加えて、エディターは WordPress ブロックディレクトリも検索し、適切なオプションを表示します。

探しているものと似たものがあれば、問題のブロックをクリックしてサイトにインストールし、ページの現在の位置に挿入します。ページテンプレートまたはテンプレートパーツ内の表示させたい場所に配置して保存します。次に、サイトのフロントエンドでそれを鑑賞してください。

ちなみに、プラグインメニューにインストールした単一のブロックは、不要になった場合にいつでも削除できます。

WordPress テーマのウィジェット化はそれほど難しくありません

WordPress にウィジェットとウィジェット領域を追加することは、サイトにさまざまな機能や情報を表示するための重要なスキルです。これらは、サイトをよりインタラクティブで有益で使いやすいものにするのに役立ちます。

クラシックテーマでは、ウィジェット領域を作成するアプローチはもう少し技術的です。 WordPress ファイルアーキテクチャの基本的な理解と、コードエディターの使用と PHP コードの調整に慣れている必要があります。一方、ブロックテーマでは、マウスカーソルだけで同じことができます。

覚えておくべき重要な点は、原則は同じであり、実装が異なるだけであるということです。その方法がわかったので、この知識を使ってサイトを改善してください。

ウェブサイトに配置したい必須のウィジェットは何ですか? 実装するためにクラシックテーマまたはブロックテーマを使用していますか? コメントでお知らせください！