こんな疑問をお持ちのあなたへ
- wordpressのテーマを作ろうと思うんだけど、ウィジェットってどうやって作ったら良いの？
- wordpressの今使っているテーマにウィジェットを１個追加したいんだけどできるの？
と言ったお悩みに回答します。
目次
wordpressのウィジェットのエリアを追加と作り方！【超簡単です】
wordpressのウィジェットのエリアを追加する方法は、一見難しいんじゃないのかと思えますが、実は超簡単なんです。
早速その方法を説明していきます。
流れはたったの下記の２工程です。
- テーマのfunction.phpにコードを追加する
- テーマの該当するファイルにphpコードを追加する
テーマのfunction.phpにコードを追加する
下記コードをfunction.phpの最下部にコピペしてください。
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'サイドウィジェット01',
'id' => 'widget_side01',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}コード内の重要な部分のみ説明していきます。
- ‘name’ => ‘サイドウィジェット01’,
ウィジェット画面で管理者が目にする名前です。名前は自由に付けることができます。 - ‘id’ => ‘widget_side01’,
wordpressが管理する名前です。名前は自由ですが、他のウィジェットのidと被らないことと、半角の英数文字で入力してください。 - ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
ウィジェットを囲む開始タグの指定です。このように記載するとidとclassを自動で設定してくれます。個別のidが付くので、このウィジェットだけ見た目を変えたい。という事も可能になります。 - ‘after_widget’ => ‘</div>’,
ウィジェットを囲む終了タグの指定です。 - ‘before_title’ => ‘<h3>’,
ウィジェットの見出し開始タグを指定します。<h2>でも<p>でも何でも設定可能です。 - ‘after_title’ => ‘</h3>’,
ウィジェットの見出し終了タグを指定します。<h2>でも<p>でも何でも設定可能です。
複数のウィジェットを追加したい時
１つだけではなくいくつもウィジェットを追加したい時には、
register_sidebar(array(
'name' => 'サイドウィジェット01',
'id' => 'widget_side01',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));この部分をコピーし「 } 」の直前に貼り付けます。
表示するウィジェットのコードを貼り付ける
テーマの各テンプレート内に、ウィジェットを表示させたいコードを貼り付けます。
<?php dynamic_sidebar('widget_side01'); ?>１つのウィジェットに対して、この１行を追加します。５つのウィジェットを追加したいのであればこのコードも５つ必要になります。
※widget_side01 の名前は任意です。function.phpに設定したウィジェットのidと同じidを記入してください。
ウィジェットがよく使われるエリア場所（位置）やパターン
ウィジェットがよく使われるエリア・場所とパターンですが、下記のような事が想定されます。
- サイドメニュー
ブログやサイトにサイドメニューがある場合には、ウィジェットを２つ・３つ程接iされている場合が多いです。 - フッター
フッターにはロゴやプロフィール情報、メニューやカテゴリなどを表示する場合が多いので、３つ程以上設置するテーマをよく見かけます。 - 記事の上部
記事上部に固定して何かを表示させたい場合にはとても有効にはたらきます。 - 記事の下部
記事を読み終わった後に、何かしらの告知などをしたい場合にとても有効にはたらきます
テーマを作る場合には、このウィジェットにはこの情報を掲載するという想定のもとウィジェットを追加しておくと良いと思います。
むやみにウィジェットを増やしてもユーガーが使いにくくなってしまうだけです。
まとめ：ウィジェットのエリア追加はたったの２工程で超簡単でした
システム・プログラムをいじるイメージがあるので、一見敷居が高そうに見えますが、超簡単でしたね。
ウィジェットが追加できたら、次はウィジェットの使い方です。もしウィジェットの使い方に不安があるようでしたら、過去記事に分かりやすくまとめているので参考になれば嬉しいです。