【WordPress】新しくウィジェットエリアを追加する方法

今回は、ウィジェットエリアを新しく追加する方法をご紹介します。

テーマにウィジェット機能が実装されている場合、サイドエリアやヘッダーエリアなど、予めウィジェットエリアが決まっています。

今回の方法は、既存のエリアとは別にウィジェットエリアを設ける方法です。
詳しく見ていきましょう。

新しいウィジェットエリアを追加する手順

新しくウィジェットエリアを追加する場合、以下の手順で追加することができます。

手順1：functions.phpにコードを追加する

まずは、functions.phpに以下のコードを記述します。

上記のコードを追加することで、ウィジェットエリアを新しく設けることができます。

手順2：コード尾の内容を調整する

コードを追加したら、コードの内容を調整していきます。

上記のコードをそのまま使用した場合、ウィジェットエリアは以下のようなHTML構造となります。

このHTMLは、コードの内容を調整することで自由に変更することができます。
調整箇所は、以下の6つです。

調整1：ウィジェットエリアの名前

【ウィジェットエリアの名前】を、お好きな文字列に置き換えます。
例：【ウィジェットエリア1】など。

上記の赤枠部分に表示されます。
どこのウィジェットエリアか一目で分かる文字列が良いでしょう。

調整2：ウィジェットエリアのID

【ウィジェットエリアのID】の部分を、お好きな文字列を置き換えます。

ウィジェットエリアを識別する文字列となります。
独自の文字列でなければなりません。
例：【widget-01】など。

調整3：ウィジェットの直前に出力されるHTML

【<div>】の部分を、ウィジェットエリアの直前に出力するHTMLに置き換えます。

例えば、ウィジェットエリアを【<div class=”test”></div>】で囲いたい場合は、
【<div class=”test”>】に置き換えてやります。

調整4：ウィジェットの直後に出力されるHTML

【</div>】の部分を、ウィジェットエリアの直後に出力するHTMLに置き換えます。

【<div class=”test”></div>】で囲いたい場合は、【</div>】に置き換えてやります。

調整5：ウィジェットエリアのタイトルの直前に出力されるHTML

【<h4>】部分を、ウィジェットのタイトルの直前に出力するHTMLに置き換えます。
例えば、タイトルを【<h2></h2>】で囲いたい場合は、【<h2>】に置き換えてやります。

調整6：ウィジェットエリアのタイトルの直後に出力されるHTML

【</h4>】部分を、ウィジェットのタイトルの直後に出力するHTMLに置き換えます。
例えば、タイトルを【<h2></h2>】で囲いたい場合は、【</h2>】に置き換えてやります。

手順3：サイト上にウィジェットエリアを表示する

最後に、追加したウィジェットエリアをサイト上に表示させます。
ウィジェットエリアを表示させたい箇所に、以下のコードを記述してください。

【ウィジェットエリアのID】は、手順1で記述したコードで指定した【ウィジェットエリアのID】に置き換えてください。

サイドエリアに表示させる場合、サイドエリアを管理しているファイルにコードを記述します。

コードを記述する箇所は、表示させたい箇所とテーマの構造によって異なります。
こちらは、環境に合わせて設置箇所を見つけてください。

複数のウィジェットエリアを追加する場合

複数のウィジェットエリアを追加する場合、以下の要領でコードを記述します。

上記は、ウィジェットエリアを2つ設ける場合のコードです。

上記がひとつのウィジェットを構成する部分です。
3つのウィジェットエリアを設けたければ、上記のコードを3つ設置しましょう。

【ウィジェットエリアの名前】と【任意の文字列】部分は、追加するウィジェットエリアごとに、独自のものを設定しなければなりません。

まとめ

新しくウィジェットエリアを追加する方法をご紹介しました。

新しいウィジェットエリアは、コードのコピペと簡単な調整だけで追加することができます。
エリアを追加すれば、管理画面から更新できる部分が増えてサイト運営が楽になります。

この機会に、ぜひカスタマイズを試してみてください。