藤枝市・島田市・焼津市でホームページ制作・作成するならLIFESEEDSへ

こんな疑問をお持ちのあなたへ
  • wordpressのテーマを作ろうと思うんだけど、ウィジェットってどうやって作ったら良いの?
  • wordpressの今使っているテーマにウィジェットを1個追加したいんだけどできるの?

と言ったお悩みに回答します。

SPONSORED LINK

wordpressのウィジェットのエリアを追加と作り方!【超簡単です】

wordpressのウィジェットのエリアを追加する方法は、一見難しいんじゃないのかと思えますが、実は超簡単なんです。

早速その方法を説明していきます。

流れはたったの下記の2工程です。

  1. テーマのfunction.phpにコードを追加する
  2. テーマの該当するファイルに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>でも何でも設定可能です。

複数のウィジェットを追加したい時

1つだけではなくいくつもウィジェットを追加したい時には、

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>',
));

この部分をコピーし「 } 」の直前に貼り付けます。

SPONSORED LINK

表示するウィジェットのコードを貼り付ける

テーマの各テンプレート内に、ウィジェットを表示させたいコードを貼り付けます。

<?php dynamic_sidebar('widget_side01'); ?>

1つのウィジェットに対して、この1行を追加します。5つのウィジェットを追加したいのであればこのコードも5つ必要になります。

※widget_side01 の名前は任意です。function.phpに設定したウィジェットのidと同じidを記入してください。

ウィジェットがよく使われるエリア場所(位置)やパターン

ウィジェットがよく使われるエリア・場所とパターンですが、下記のような事が想定されます。

  • サイドメニュー
    ブログやサイトにサイドメニューがある場合には、ウィジェットを2つ・3つ程接iされている場合が多いです。
  • フッター
    フッターにはロゴやプロフィール情報、メニューやカテゴリなどを表示する場合が多いので、3つ程以上設置するテーマをよく見かけます。
  • 記事の上部
    記事上部に固定して何かを表示させたい場合にはとても有効にはたらきます。
  • 記事の下部
    記事を読み終わった後に、何かしらの告知などをしたい場合にとても有効にはたらきます

テーマを作る場合には、このウィジェットにはこの情報を掲載するという想定のもとウィジェットを追加しておくと良いと思います。

むやみにウィジェットを増やしてもユーガーが使いにくくなってしまうだけです。

SPONSORED LINK

まとめ:ウィジェットのエリア追加はたったの2工程で超簡単でした

システム・プログラムをいじるイメージがあるので、一見敷居が高そうに見えますが、超簡単でしたね。

ウィジェットが追加できたら、次はウィジェットの使い方です。もしウィジェットの使い方に不安があるようでしたら、過去記事に分かりやすくまとめているので参考になれば嬉しいです。

 

 

 

 

プロフィール

こまいたつお
静岡県島田市でフリーランスとして活動するwordpressエンジニア・ホームページ制作・コンサルティングをしています。

中小企業・店舗のホームページ制作や集客コンサル・アドバイス、ブロガー・アフィリエイター様のWordPressサイトのカスタマイズなどのご相談を受けております。お仕事のご相談はお問い合わせページからお願いします。