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

ウィジェットエリアのアイキャッチ

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

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

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

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

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

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

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

STEP.1
functions.phpにコードを追加
functions.phpにコードを追加してウィジェットエリアを新しく設置します。
STEP.2
コードの内容を調整
コードを追加したら、サイトに合わせてコードの内容を調整していきます。
STEP.3
表示したい場所にウィジェットエリアのコードを追加
ウィジェットエリアを表示させたい箇所にphpのコードを記述して表示しましょう。

functions.phpにコードを追加

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

function.php

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

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

コードの内容を調整

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

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

function.php

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

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

1 COMMENT

現在コメントは受け付けておりません。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影