【WordPress】ウィジェットエリアを追加する方法！プラグインなし
WordPressで、任意の場所にウィジェットエリアを追加する方法を解説します。
ウィジェットエリアを自作することで、ヘッダー・投稿記事下・フッター前など、任意の位置に好きなブロックを配置できるようになります。
コードは、テーマファイル（子テーマ）のfunctions.phpに記述します。
目次
ウィジェットエリアの登録
register_sidebar()を利用して、ウィジェットエリアを登録します。
function my_widgets_init() {
register_sidebar(array(
'name' => 'フッター前',
'id' => 'append_footer',
'description' => 'これらのウィジェットはフッターの直前に表示されます。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
}
add_action('widgets_init', 'my_widgets_init');| キー | 値 | 初期値 |
|---|---|---|
| ‘name’ | ウィジェットエリアの名前 | Sidebar $instance |
| ‘id’ | ウィジェットエリアを識別するためのID ※呼び出し時にも利用 | sidebar-$instance |
| ‘description’ | ウィジェットエリアの説明文 | 空 |
| ‘before_widget’ | ウィジェットを囲む開始タグ | <li id=”%1$s” class=”widget %2$s”> |
| ‘after_widget’ | ウィジェットを囲む終了タグ | </li> |
| ‘before_title’ | ウィジェットタイトルを囲む開始タグ | <h2 class=”widgettitle”> |
| ‘after_title’ | ウィジェットタイトルを囲む終了タグ | </h2> |
使用するパラメータはおおよそこれくらいですが、何も記述しなくても動作自体はします。
ウィジェットタイトルについて
WordPress 5.8以降、ウィジェットタイトルの入力欄は廃止されました。クラシックウィジェット使用時のみ有効です。
ウィジェットエリアを登録すると、管理画面の「外観 → ウィジェット」に表示され、編集できるようになります。
ウィジェットを出力
登録したウィジェットエリアのIDをdynamic_sidebar()に渡し、フック位置にウィジェットを出力する例です。
// フッター前にウィジェットエリアを表示
add_action( 'snow_monkey_append_contents', function () {
if (is_active_sidebar('append_footer')) {
dynamic_sidebar('append_footer');
}
}
);テーマファイルの中で直接出力したい場合は、以下のように記述します。
<?php if ( is_active_sidebar( 'append_footer' ) ) : ?>
<?php dynamic_sidebar( 'append_footer' ); ?>
<?php endif; ?>複数のウィジェットエリアをまとめて登録
複数ある場合は、以下のようにまとめられます。
/*-----------------------------------------
ウィジェットエリアの追加
-------------------------------------------*/
function my_widgets_init() {
register_sidebar(array(
'name' => 'フッター前',
'id' => 'append_footer',
'description' => 'これらのウィジェットはフッターの直前に表示されます。',
// ウィジェットを囲うHTMLを変更（初期値：<li id="%1$s" class="widget %2$s"></li>）
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
// ウィジェットタイトルを囲うHTMLを変更（初期値：<h2 class="widgettitle"></h2>）
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => '個別記事本文の下',
'id' => 'append_entry_content',
'description' => 'これらのウィジェットは個別記事の本文の下に表示されます。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
));
}
add_action('widgets_init', 'my_widgets_init');
// フッター前にウィジェットエリアを表示
add_action(
'snow_monkey_append_contents',
function () {
if (is_active_sidebar('append_footer')) {
dynamic_sidebar('append_footer');
}
}
);
// 個別記事本文の下にウィジェットエリアを表示
add_action(
'snow_monkey_append_entry_content',
function () {
if (is_single() && is_active_sidebar('append_entry_content')) {
dynamic_sidebar('append_entry_content');
}
}
);ウィジェットエリアの追加方法まとめ
ウィジェットエリアの追加は非常に簡単です。
テンプレートファイルにフックを追加するだけで、さまざまなウィジェットを自由に配置できるようになります。
ぜひ自分のサイトに合わせてカスタマイズしてみましょう。
あわせて読みたい
【WordPress】エディタにCSSを読み込む方法の最適解はどれ
子テーマやプラグインから、エディター画面にCSSを読み込ませる方法がいくつかありましたので、最適解を探っていこうと思います。 今回は、以下の２通りご紹介します。 …
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ