ウィジェットスペースを作ってみる

ウィジェットスペースを追加してみる

「ウィジェットスペース」という言葉が正しいのか分かりませんが、
サイドバーを追加してみたいと思います。

001
具体的には、上の写真にあるGoogleAdsenseを貼っているところを、ウィジェットスペースにしたいと思います。

直接記入して、対応していたのですが、
他のページでも表示させたいとかいった場合、
アーカイブページや、単一ページにもコードを挿入する必要があります。

面倒なので、新たにウィジェットスペースを作ります。

お好みのファイル名をデザインディレクトリに作成します。
今回は、「technical Speech」というデザインで行いますので、
“/wp-content/themes/technical-speech”というディレクトリに、”sidebar-middle.php”とします。

次に、WordPressの管理画面から「外観」→「編集」を開きます。
この時点で、右のファイル一覧に、”sidebar-middle.php”が追加されていることが確認できます。
しかし、「外観」→「ウィジェット」を開いても、ウィジェットスペースは表示されません。
ウィジェットスペースを表示するためには、”function.php”を編集します。
「外観」→「編集」を開くと、”テーマのための関数(function.php)”というのがあり、
これに、以下を追記します。

  register_sidebar(array(
        'before_widget' => '<div class="widgetbox3">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="boxheading"><span>',
        'after_title' => '</span><div class="clear"></div><div class="left"></div></div><div class="widgetwrap">',
    'name' => 'middle'
    ));

これで、「外観」→「ウィジェット」を開くと、ウィジェットスペースは表示されます。

次に、このウィジェットスペースを入れたいページに、ウィジェットスペースを呼びだすようにします。
今回は、”home.php”、”archive.php”、”page.php”、”index.php”、”single.php”、”search.php”になります。
デザインにより、ファイルは異なりますので、ご注意ください。
“index.php”の場合、以下のようになります。
変更前

            <?php endif; ?>
          </div>
        </div>
<?php get_sidebar('block'); ?>
<?php get_sidebar('right'); ?>
<?php get_sidebar('left'); ?>

変更後

            <?php endif; ?>
          </div>
<?php get_sidebar('middle');?>
        </div>
<?php get_sidebar('block'); ?>
<?php get_sidebar('right'); ?>
<?php get_sidebar('left'); ?>

これで、ウィジェットスペースは呼びだされるようになりましたが、
内容がないので、何も表示されません。
“sidebar-middle.php”には、とりあえず、以下のように記載します。

          <?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar('middle') ) : ?>
          <?php endif; ?>

ウイジェットスペースにウィジェットを追加していない時は何も表示しないという設定になります。
(多分そういう意味かと・・・)
ウィジェットを追加すると、表示されるようになります。

後は、CSSに以下を追加すればOKです。

.widgetbox3{padding:5px;border:1px solid #000;margin:5px 0 0 0;font-size:.8em;}