WordPress特集 - ウィジェットエリアの登録
公開日：2021年11月7日
Webページ内でウィジェットを使って表示するエリアの登録を行います。ページのどこをウィジェットエリアとするかは、テンプレートにコードを記述します。一般的には各ページ共通で表示する、ヘッダー/フッター/サイドバーにウィジェットを設置するケースが多いです。
【記事執筆時の環境】
WordPress 5.8
【参考ページ】
サポート - ウィジェット
Codex 日本語版 - テーマのウィジェット対応
Theme Handbook - Widgets
functions.phpにコードを記述してウィジェットエリアを登録
【参考ページ】
Codex 日本語版 - 関数リファレンス/register sidebar
Code Reference | register_sidebar
functions.php に関数 register_sidebar を使ってコードを記述します。
以下はサイドバーとフッターにウィジェットエリアを登録するコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function my_add_widgets() { register_sidebar(array( 'name' => 'サイドバーウィジェット', 'id' => 'sidebar-widgets', 'before_widget' => '<div class="sidebar-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="sidebar-widget-title">', 'after_title' => '</h2>', )); register_sidebar(array( 'name' => 'フッターウィジェット', 'id' => 'footer-widgets', 'before_widget' => '<div class="footer-widget">', 'after_widget' => '</div>', 'before_title' => '<h3 class="footer-widget-title">', 'after_title' => '</h3>', )); } add_action('widgets_init', 'my_add_widgets'); |
ウィジェットを表示する位置をテンプレートに記述
【参考ページ】
Codex 日本語版 - 関数リファレンス/dynamic_sidebar
Codex 日本語版 - 関数リファレンス/is active sidebar
Code Reference | dynamic_sidebar
テンプレートに関数 dynamic_sidebar を使ってウィジェットを表示する位置を指定するコードを記述します。
以下は sidebar-widgets という id で登録したウィジェットエリアを指定するコード例です。ウィジェットエリアにウィジェットが実際に追加されているかを関数 is_active_sidebar で判断しています。
|
1 2 3 4 5 |
<?php if (is_active_sidebar('sidebar-widgets')) : dynamic_sidebar('sidebar-widgets'); endif; ?> |
管理画面からウィジェットエリアにウィジェットを追加
実際のページ作成作業では、[外観]>[ウィジェット] から、ウィジェットエリアにウィジェットを追加します。
あるいは [外観]>[ウィジェット] でカスタマイザーに移動し、ページのプレビューを確認しながら追加することも可能です。
WordPress 5.8 からウィジェット機能は大幅に変更となりました。従来のウィジェットではなく、投稿や固定ページで追加するのと同じブロックを、ウィジェットブロックとして追加する形になります。
【参考ページ】
Block Editor Handbook - Widgets Block Editor overview
«次の特集記事» カスタム画像サイズの登録
«前の特集記事» カスタム投稿・カスタム分類の登録
スポンサーリンク
