AN(tcd014)の右サイドにカテゴリとアーカイブ以外を表示させる

AN(tcd014)のTOPページの右サイドバーですが、表示させられるのはカテゴリとアーカイブと広告だけです。

もし、TOPページの右サイドバーにカテゴリとアーカイブ以外のものを表示させたいという場合は、そこにウィジェットエリアを追加してみてはいかがでしょうか。

変更するファイルは、functions.phpとindex.phpです。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

ウィジェットエリアを追加するためのコード

まず、ウィジェットエリアを追加するためのコードです。

register_sidebar(array(
        'before_widget' => '<div class="index_side_widget">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="index_side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Index rightside widget', 'tcd-w'),
        'id' => 'index_rightside_widget'
    ));

元々記述されているウィジェットに関するコードを真似て、ちょっと書き変えただけです(笑)

‘before_widget’ は、ウィジェットエリアの前に表示するタグで、’after_widget’ は、ウィジェットエリアの後ろに表示するタグです。

‘before_title’ は、ウィジェットのタイトルの前に表示するタグで、’after_title’ は、ウィジェットのタイトルの後ろに表示するタグです。

index.phpで、<div id="index_right_col">(右サイドバー)の部分を確認すると、以下のようなタグが記述されています。テンプレートの右サイドバーと同じデザインにするために同じタグを使います。

<?php if ($options['show_side_category']) { ?>
  <div class="index_side_widget"> //ウィジェットエリアの前に表示するタグ
   <h3 class="index_side_headline"> //ウィジェットのタイトルの前に表示するタグ
   <?php echo $options['side_category_headline']; ?>
   </h3> //ウィジェットのタイトルの後ろに表示するタグ
   <ul class="index_side_category">
    <?php wp_list_categories('orderby=name&title_li='); ?>
   </ul>
  </div> //ウィジェットエリアの後ろに表示するタグ
  <?php }; ?>

‘name’ は、管理ページのウィジェット編集ページで表示される名前です。

TOPページには、左サイドバーにもウィジェットがあり ‘Index side widget’ という名前がつけられていますので、それと区別するために、’Index rightside widget’ にしました。

‘id’ は、追加したウィジェットエリアを表示させるためのコードを書く際に必要です(このコードは後述します)。これも、その他のウィジェットと似たような感じにしました。

functions.phpのウィジェットの設定にコードを追加する

コードを追加する場所は、functions.phpの中にある // ウィジェットの設定という部分です。

「 register sidebar(array( 」の部分から「 )); 」までが、1つのウィジェットエリアですので、「 )); 」と、その下の「 register sidebar(array( 」の間に追加すればOKです。

// ウィジェットの設定 ------------------------------------------------------------------------------
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Single page side widget', 'tcd-w'),
        'id' => 'side_widget2'
    ));

// ウィジェットエリアとウィジェットエリアの間に追加する

    register_sidebar(array(
        'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Index side widget', 'tcd-w'),
        'id' => 'index_side_widget'
    ));

// ここに追加してもOKだすやん

    register_sidebar(array(
        'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Index bottom widget', 'tcd-w'),
        'id' => 'index_bottom_widget'
    ));

    register_sidebar(array(
        'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Archive widget (for mobile)', 'tcd-w'),
        'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
        'id' => 'mobile_widget_archive'
    ));
    register_sidebar(array(
        'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
        'after_widget' => "</div>\n",
        'before_title' => '<h3 class="side_headline">',
        'after_title' => "</h3>\n",
        'name' => __('Single page widget (for mobile)', 'tcd-w'),
        'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
        'id' => 'mobile_widget_single'
    ));

// わかりやすくウィジェットエリア最後のこの部分に追加してもOK

}

// オリジナルの抜粋記事 --------------------------------------------------------------------------------
function new_excerpt($a) {

functions.phpにコードを追加すると、管理ページのウィジェット編集ページに、新しく追加したウィジェットが表示されます。

ウィジェットエリアが追加される

上述しましたが、’name’ に設定した’Index rightside widget’ というのが、ウィジェットの編集ページに表示されます。

英語のまま表示されるので、他のウィジェット名と同じように「トップページ右側」など日本語で表示する場合は、翻訳ファイルを変更する必要があります。

～TCD～詳細を見るなどのテキストを変更する方法を参照して翻訳ファイルを変更してください。

index.phpにウィジェットエリアを配置させるためのコードを書く

ウィジェットエリアを追加しただけでは、エリア内に各ウィジェットを挿入しても、画面上では表示されません。今回は、TOPページに表示させますので、index.phpに以下のコードを書き加えます。

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

(‘index_rightside_widget’) の (‘ ‘) の中が、先ほど書いたウィジェットのidです。

どこに書くかというと、index.phpの下の方に <div id="index_right_col"> と書かれた部分があります。<div id="index_right_col"> から </div><!?php }; ?> までが右サイドバーについて書かれていますので、この間にコードを書き加えます。

今回はアーカイブの下、かつ広告エリアの上に配置してみます。

変更前

  <?php if ($options['show_side_archive']) { ?>
  <div class="index_side_widget">
   <h3 class="index_side_headline"><?php echo $options['side_archive_headline']; ?></h3>
   <ul class="index_side_archives">
    <?php wp_get_archives('type=monthly'); ?>
   </ul>
  </div>
  <?php }; ?>
/* この部分がアーカイブの下、広告の上です */
  <!-- banner -->
  <?php if($options['index_ad_code2']||$options['index_ad_image2']) { ?>

変更後

  <?php if ($options['show_side_archive']) { ?>
  <div class="index_side_widget">
   <h3 class="index_side_headline"><?php echo $options['side_archive_headline']; ?></h3>
   <ul class="index_side_archives">
    <?php wp_get_archives('type=monthly'); ?>
   </ul>
  </div>
  <?php }; ?>

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

  <!-- banner -->
  <?php if($options['index_ad_code2']||$options['index_ad_image2']) { ?>

これで、新しく追加したウィジェットが表示されるようになります。試しに、ウィジェットの編集ページで、追加したIndex rightside widget にメタ情報を入れてみました。

ウィジェットを表示させる

もし、カテゴリ・アーカイブよりも上(右サイドの一番上)に表示させたい場合は、<div id="index_right_col"> のすぐ下に書けばOKです。

 <div id="index_right_col">

<?php dynamic_sidebar('index_rightside_widget'); ?> //この部分に書けばカテゴリよりも上に表示される

  <?php if ($options['show_side_category']) { ?>
  <div class="index_side_widget">
   <h3 class="index_side_headline"><?php echo $options['side_category_headline']; ?></h3>
   <ul class="index_side_category">
    <?php wp_list_categories('orderby=name&title_li='); ?>
   </ul>
  </div>
  <?php }; ?>