プラグイン無しで新しくウィジェットエリアを追加する方法

テーマにウィジェット機能が実装されている場合、サイドエリアやヘッダーエリアなど、予め表示できるウィジェットエリアがありますが、functions.phpにコードを記述することで、このエリアを任意で追加することが可能です。

今回は、プラグイン無しで新しくウィジェットエリアを追加する方法についてご紹介します。

ウィジェットエリアとは？

ウィジェットとは、記事一覧やコンテンツなどの機能を持ったプログラムで、主にサイドバーや、ヘッダー・フッターに位置します。

このウィジェットを置く位置のことをウィジェットエリアと呼び、このエリアを追加することで、サイドバーやヘッダー・フッター以外の場所にウィジェットを置くことができる、サイトを色々といじることができるようになります。

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

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

functions.phpにコードを追加

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

register_sidebar(array(
'name'=>'ウィジェットエリアの名前',
'id' => 'ウィジェットエリアのID',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

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

コードの内容を調整

コードを追加したら、ウィジェットエリアは以下のようなHTMLで出力されるので、このコードの内容を調整します。

<div>
<h4>ウィジェットタイトル</h4>
ウィジェットの中身
</div>

このHTMLは、コードの内容をそれぞれ調整することで自由に変更することができます。

以下6つは、このサイトでも使用しているwordpressテーマ SANGO に合わせた調整なので、使用しているサイトに応じて調整ください。

ウィジェットエリアの名前

'name'=>'ウィジェットエリアの名前',

ウィジェットエリアの名前を設定できます。

外観 ＞ ウィジェット で表示されるので、どこのウィジェットエリアか一目で分かる名前で設定しましょう。

ウィジェットエリアのID

'id' => 'ウィジェットエリアのID',

ウィジェットエリアのID を任意で設定できます。

ウィジェットエリアのIDは、表示するコードの一部に使用するものなので、
他のものと重複しないよう名前を設定しましょう。

ウィジェットの直前に出力するHTML

'before_widget' => '<div>',

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

SANGOのテーマでサイドバー に表示する場合、このまま<div>で問題ありません。

ウィジェットの直後に出力するHTML

'after_widget' => '</div>',

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

SANGOのテーマでサイドバー に表示する場合、これも</div>で問題ありません。

ウィジェットエリアのタイトルの直前に出力するHTML

'before_title' => '<h4>',

<h4>部分を、ウィジェットのタイトルの直前に出力するHTMLに置き換えます。

SANGOのテーマでサイドバー に表示する場合、この部分をまるっと

'before_title' => '<h4 class="widgettitle dfont has-fa-before">',

に変更しましょう。

ウィジェットエリアのタイトルの直後に出力するHTML

'after_title' => '</h4>'

</h4>部分を、ウィジェットのタイトルの直後に出力するHTMLに置き換えます。

SANGOのテーマでサイドバー に表示する場合、そのまま</h4>で問題ありません。

表示したい場所にウィジェットエリアのコードを追加

設定が完了したら、表示したい場所にウィジェットエリアのコードを記述します。

<?php dynamic_sidebar('ウィジェットエリアのID'); ?>

このウィジェットエリアのIDは、記述したコードで指定した ウィジェットエリアのID に置き換えて、サイドエリアに表示させる場合、サイドエリアを管理しているファイルにこのコードを記述します。

コードを記述する箇所は、表示させたい箇所とテーマの構造により異なるので注意して記述しましょう。

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

1個だけ追加するのではなく、複数のウィジェットエリアを追加する場合、以下がひとつのウィジェットを構成するコードです。

register_sidebar(array(
'name'=>'ウィジェットエリアの名前',
'id' => 'ウィジェットエリアのID',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

2個以上ウィジェットエリアを設ける場合、このコードを3つ設置することで表示できますが、ウィジェットエリアの名前 と ウィジェットエリアのIDは、追加するウィジェットエリアごとに、独自のものを設定して記述しましょう。