ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

WordPressテーマ作成。
テーマの構成を2段組み構成等で考える際の、サイドバー(ガジェット表示)をさせる方法。

方法概要

  1. 2段組みなどのテーマを作る
  2. ガジェットを挿入したい場所に、印コードを入れる
  3. function.phpにて、サイドバー(ガジェット)を登録する

2段組みなどのテーマを作る

2段組みでなくても構わないが、テーマを作成する。

印コードを入れる

ここでは大きく2つ。

  1. サイドバーの「名前」を決定する
  2. 名前を決めたサイドバーの名前を使い、テーマ中に印コード(ここにサイドバーを入れるという目印)を入れる

サイドバーの名前を決める

サイドバーは、wordpress上から複数編集できるので、それぞれ「名前」をつけておく必要がある。
下記のnameとidを、他のサイドバーと重複しないように命名する。

  • name
  • サイドバーの名前。日本語可
  • id
  • サイドバーのID。半角アルファベット

印コードを入れる

上記で命名したサイドバーを、どこに入れたいか決定する。
サイドバーのidがmainのものをテーマ上に配置したい場合、その配置したい場所に、

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

を挿入すればOK。

function.phpにてサイドバーを登録する

dynamic_sidebarで挿入するサイドバー本体を名前(name)やID(id)を使い登録する。これによって、wordpress管理画面でサイドバー(ガジェット)の編集が行えるようになる。
function.phpの最後尾に下記のソースを追記。
※下記のサンプルは、idをmain、名前を「メインサイドバー」としてサイドバーを登録してる

if ( function_exists('register_sidebars') ) {
    register_sidebar(
        array(
            'name'=> 'メインサイドバー' ,
            'id'=>'main'
     ));
}

を挿入。
これで終了。

余談

function.phpで用いた register_sidebar関数は、第一引数にarrayを指定するが、ここで指定する情報は、下記の内容も併記可能。

  • before_widget
  • ガジェットの始まりにつけるHTMLタグ。after_widgetとついになるように。サイドバーの前後ではなく、サイドバーに配置する各ガジェットの前後につくので注意
  • after_widget
  • ガジェットの終わりにつけるHTMLタグ。
  • before_title
  • ガジェットのタイトルの前につけるHTMLタグ。after_titleと対になるように。
  • after_title
  • ガジェットのタイトルの後ろにつけるHTMLタグ。
if ( function_exists('register_sidebars') ) {
    register_sidebar(
        array(
            'name'=> 'メインサイドバー' ,
            'id'=>'main',
            'before_widget' => '<div class="widget">',
            'after_widget' => '</div>',
            'before_title' => '<h4 class="widget_title"><span class="glyphicon glyphicon-globe"></span> ',
            'after_title' => '</h4>',
     ));
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


*