WordPress のサイドバーは、外観 > ウィジェットから様々なアイテムを追加してサイト上に表示するのが一般的です。今回ご紹介するのは、以下のウィジェットエリアを追加する方法です。
 |
 |
| WordPress5.8以降 | WordPress5.8以前 |
当記事では、ウィジェットエリアの登録〜サイト上に表示するまでの手順をご紹介します。各ウィジェットの詳細や基本的な使い方は、以下の記事をご覧ください。
2021/3/23 情報を更新いたしました。 WordPressには、特定のエリアを管理画面から簡単に装飾できるパーツ（ウィジェット）が複数用意されています。これらを活用すれば、下記のようにサイドバーやフッターを装飾できます。 （例：TCDテーマ「Muum」） フッター ...
ウィジェットエリアを追加する4つのステップ
ウィジェットエリアを追加して表示するまでの手順を以下の4つのステップで解説していきます。
- ウィジェットエリアの新規登録
- register_sidebar()の仕様を知る
- register_sidebar()のパラメータを調整
- ウィジェットエリアの出力
ウィジェットエリアの新規登録
まずは、外観 > ウィジェットの画面に新しい「ウィジェットエリア」を設置していきます。このフィールドは、register_sidebar()という関数で追加できます。試しに以下の記述をテーマの「functions.php」に記入してみてください。
add_action( 'widgets_init', function(){
register_sidebar();
} );これで外観 > ウィジェットを確認すると「サイドバー1」と書かれたフィールドが追加されるはずです。ただし、このままでは管理しにくいため、パラメータを指定してより使いやすい状態にしていきます。
 |
 |
| WordPress5.8以降 | WordPress5.8以前 |
register_sidebar()の仕様を知る
ウィジェットエリアに追加したウィジェットをサイト上に出力する時、各ウィジェットは自動的に特定のHTMLタグで囲まれます。例えば以下のような形式になりますね。（パラメータを何も指定していない場合）
<li id="各ウィジェットのID名" class="各ウィジェットに応じたクラス名">
<h2 class="widgettitle">入力したタイトル</h2>
<!-- ここに各ウィジェットのHTMLが反映 -->
</li>register_sidebar()のパラメータを変更することで、上記の構造を変えることができます。register_sidebar()の代表的なパラメータをご紹介します。
register_sidebar( $args );| name | ウィジェットエリアの名前 |
| id | ウィジェットエリアを識別するためのID（出力する時にも使用） |
| description | ウィジェットエリアの説明文 |
| before_widget | ウィジェットの直前に出力されるHTML（idは%1$s、classは%2$s） |
| after_widget | ウィジェットの直後に出力されるHTML |
| before_title | ウィジェットタイトルの直前に出力されるHTML |
| after_title | ウィジェットタイトルの直後に出力されるHTML |
基本的には、上記のパラメータを抑えてくだけで十分です。次は、実用的な形に整えていきましょう。
register_sidebar()のパラメータを調整
それでは、register_sidebar()のパラメータを調整して実用的な形にしていきます。以下は、register_sidebar()のパラメータを汎用的な形にカスタマイズしたものです。
add_action( 'widgets_init', function(){
register_sidebar( array(
'name' => 'ウィジェットエリアの名前', // 管理画面のウィジェットエリアの名称
'id' => 'my-widget', // ウィジェットエリアの識別名称（出力時にも使用）
'description' => 'ウィジェットエリアの説明', // 管理画面のウィジェットエリアの説明文
'before_widget' => '<div id="%1$s" class="my-widget %2$s">', // ウィジェットを囲むdivの開始タグ
'after_widget' => '</div>', // ウィジェットを囲むdivの終了タグ
'before_title' => '<h3 class="my-widget-title">', // ウィジェットタイトルを囲むh3の開始タグ
'after_title' => '</h3>', // ウィジェットタイトルを囲むh3の終了タグ
) );
} );基本的には、上記をベースに各パラメータを編集していただければ使い回せるはずです。次はウィジェットエリアに追加したウィジェットを表示する方法について解説します。
ウィジェットエリアの出力
このままでは、管理画面のウィジェットエリアにアイテムを追加してもサイト上に反映されませんよね。ウィジェットを出力する時は、dynamic_sidebar()を利用します。
dynamic_sidebar( 'ウィジェットエリアのID' );使い方は非常に簡単で、dynamic_sidebar()の引数にウィジェットエリアのIDを記入して、表示したいテンプレートファイルに記入するだけです。試しに以下の記述をsingle.phpなどに記入してみてください。
<?php
// 「my-widget」のウィジェットエリアを呼び出す
dynamic_sidebar( 'my-widget' );
// 出力結果
?>
<div id="各ウィジェットのID" class="my-widget 各ウィジェットに応じたクラス名">
<h3 class="my-widget-title">ウィジェットタイトル</h3>
<!-- ここに各ウィジェットのHTMLが反映 -->
</div>追加したウィジェットが表示されるようになったはずです。（ウィジェットが何も追加されていなければ表示されません。）
ここでregister_sidebar()の「id」を利用するので、使用用途が分かるような名称にしておきましょう。
まとめ
ウィジェットエリアの登録〜表示方法までの手順を解説しました。当記事で紹介した内容をコピペするだけで使えるので、ぜひお試しください。
なお、WordPress5.8からウィジェットの操作画面は、大幅に変わりました。従来のウィジェットエリアをご利用になる場合は、以下の方法で実現できますので、ぜひお試しください。
WordPress5.8よりウィジェットの編集画面の仕様が大幅に変更されています。UIがブロックエディター形式に変更されました。 弊社のお知らせでアナウンスいたしました通り、TCDオリジナルウィジェットはウィジェットブロックエディターで正常に動作しない可能性があります。※2021年8月2日現在、一...
コメント