ウィジェットエリアを自作する
- ウィジェットを追加するエリアを自作したい。
- Webページに作成したエリアをウィジェットエリアとして扱いたい。
ココがポイント
結論：
関数「register_sidebar()」を使用するとウィジェットエリアを追加・関数「dynamic_sidebar()」を使用するとWebページの任意の場所にウィジェットを出力することができる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、WebページにHTMLで自作したエリアに、WordPressのウィジェットを追加できるようにしてみたいと思ったことはございませんか？
今回は、PHPを使用することで、自作したWebページのエリアを、ウィジェットエリアとして使用できるようにする方法をご紹介しようと思います。この方法で追加したウィジェットエリアには、WordPressで使用できるウィジェットを全て登録できます。Webページカスタマイズの手助けとなってくれるでしょう。
目次
1.PHPコードを追加できるプラグイン
プラグイン「Code Snippets」をインストールすると、functions.phpを直接編集しなくても、PHP関数を追加したり、WordPress のファイルに定義されている便利な PHP 関数を利用することができます。
今回ご紹介するPHPコードはfunctions.phpに追加する形でも動きますが、私と同じようにPHPプログラミン初心者の方は、ミスタイプなども発見できるプラグイン「Code Snippets」を使用すると、自作のカスタマイズがよりやりやすくなるでしょう。
もっと詳しく
2.「ウィジェットエリア」を追加
add_action( 'widgets_init', function() {
register_sidebar( array(
'name' => 'ウィジェットのエリア名',
'id' => 'widget_id001',
'description' => 'ウィジェットエリアについての説明を書きます',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
));
register_sidebar( array(
'name' => 'ウィジェットのエリア名',
'id' => 'widget_id002',
'description' => 'ウィジェットエリアについての説明を書きます',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
));
});
上記コードを「ウィジェットエリア」追加用として作成したスニペットにコピー＆ペーストします。
スニペットが動作する場所は「Run snippet everywhere（すべての場所（ダッシュボードとフロントエンド）で実行）」を選択します。「すべての場所で実行」させることでダッシュボードで登録したウィジェットをフロントエンドに表示することができます。
コードの役割について
ウィジェットエリアを複数追加できる
関数「register_sidebar()」を複製することで、ウィジェットエリアを複数追加することができます。
ウィジェットエリアの「タイトル」と「説明文」
「'name'」キーで指定した値「'ウィジェットのエリア名'」が「タイトル」に、「'description'」キーで指定した値「'ウィジェットエリアについての説明を書きます'」が「ウィジェットエリアの説明文」にそれぞれ対応しています。
'id'の値には大文字を使用しない
「'id'」キーの値には大文字を使用しないようにします。大文字を使用すると自作したウィジェットエリアにウィジェットを登録することができなくなります。
デフォルトで設定されている要素を削除
関数「register_sidebar()」内の「'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => ''」でデフォルトで設定されている要素をなしにしています。デフォルトだとウィジェット要素は<li>要素で囲まれ、タイトルは<h2>要素で囲まれています。ウィジェットエリアを作成し、CSSで体裁を設定するときにはデフォルトの要素をこの方法で削除しておくとよいでしょう。
| 配列のキー | キーに対応する値 |
| name | サイドバーの名前。ウィジェット管理画面に表示される。 |
| id | サイドバーの ID（すべて小文字の半角英数字）。 |
| description | サイドバーの説明テキスト。ウィジェット管理画面に表示される。 |
| class | サイドバーに割り当てられるCSS クラス。指定したクラス値の前に "sidebar" が付きます。 |
| before_widget | ウィジェットの直前に出力する HTML テキスト。 |
| after_widget | ウィジェットの直後に出力する HTML テキスト。 |
| before_title | タイトルの直前に出力する HTML テキスト。 |
| after_title | タイトルの直後に出力する HTML テキスト。 |
3.HTML内にウィジェットを出力
add_action( 'wp_footer', function () { ?>
<?php if ( is_active_sidebar('widget_id001') ) : ?>
<div class="custom">
<?php dynamic_sidebar('widget_id001'); ?>
</div>
<?php endif; ?>
<?php } );
上記のPHPコードをコピー＆ペーストします。
プラグイン「Code Snippets」を使用したときは、スニペットが動作する場所を「Run snippet everywhere（すべての場所（ダッシュボードとフロントエンド）で実行）」もしくは「Only run on site front-end（フロントエンド（作成したWebページ）のみで実行）」を選択します。
コードの役割について
1行目：wp_footerアクション
「footer」タグ内に以下のコードを出力します。
wp_headアクションを使用すると、「head」タグ内にコードを出力することができます。
もっと詳しく
2行目：is_active_sidebar('widget_id001')
このプログラムで「2.「ウィジェットエリア」を追加」で指定した'id'の値（今回は「'widget_id001'」）のウィジェットエリアがアクティブになっているかを確認しています。アクティブになっていれば「if」で囲んだコードを表示し、アクティブでなければ「if」で囲んだコードを非表示にします。
3・5行目：<div>
<?php ?>で囲まれていない部分は、HTMLコードを記述できます。この方法を使用することで、自作のエリアをWebページに作成することができます。
今回は、<div>タグで囲んでいるだけですが、いろいろな要素を追加してWebページをカスタマイズしましょう。
4行目：<?php dynamic_sidebar('widget_id001'); ?>
関数「dynamic_sidebar()」でウィジェットを出力します。「dynamic_sidebar()」の引数（今回は「'widget_id001'」）で、「register_sidebar()」で追加したウィジェットエリアの'id'の値を参照し出力しています。
もっと詳しく
まとめ
お疲れ様でした。
関数「register_sidebar()」を使用するとウィジェットエリアを追加することができます。また、関数「dynamic_sidebar()」は、追加したウィジェットエリアに登録したウィジェットを、Webページの任意の場所に出力することができる関数になります。
この2つの関数を利用することで、WordPressでのWebページのカスタマイズの幅が広がることでしょう。
もっと詳しく
WordPressでのPHPコードの使い方について、非常にわかりやすく記載されている冊子があります。これを読めば、WordPressでどのようにPHPが使用されているのかや、HTMLにPHPコードを合わせるときの独特の記入の仕方もわかり、PHPをより使いやすくなるでしょう。
「WordPressで学ぶPHP」は全4巻の冊子ですが、Kindle版では一冊500円で読むことができます。また、月額980円でKindle Unlimited に登録すると、「WordPressで学ぶPHP」を全冊読み放題で読むことができ、WordPressでのPHPの使い方を学ぶのに役に立つことでしょう。
下記の「WordPressで学ぶPHP ①変数・制御構造編
最後までご一読いただき、ありがとうございました。
