【WordPress】新しくウィジェットエリアを追加する方法
MENU
  • 記事公開:2019/06/09
  • 最終更新:2019/06/01

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

Wordpressサイトに新しくウィジェットエリアを追加する方法をご紹介します。ウィジェットエリアを追加して管理画面から更新できる部分を増やしたい方は、ぜひ参考にしてください。

この記事は約 6 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'before_widget' => '<div>',

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

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

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

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

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

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

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

'before_title' => '<h4>',

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

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

'after_title' => '</h4>'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する


著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA