• 2016.4.27
• TCDANカスタマイズ
• コメントを書く

AN(tcd014)のTOPページのメインカラムにウィジェットを追加する

AN(tcd014)のTOPページで、メインカラムの上部、最近の記事の上にウィジェットを追加する方法です。

functions.phpにウィジェットエリアを追加するコードを記述する

functions.php に以下のようなコードを書き加えてあげます。

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 top widget', 'tcd-w'),
        'id' => 'index_top_widget'
    ));

コードを追加する場所

コードを追加する場所は、「// ウィジェットの設定」の部分です。

さらに、「// ウィジェットの設定」の中のどこに追加するかですが、それぞれのウィジェットのコードに割り込まないようにだけ気をつけてください。

1つのウィジェットエリアは、「register_sidebar(array(」から「));」までです。

ですので、一番最初の「if ( function_exists(‘register_sidebar’) ) { 」と「register_sidebar(array( 」の間、「));」と「register_sidebar(array(」の間、一番最後の「));」と「}」の間のいずかに書くといいです。

このウィジェットのコードは、書いてある順番で管理画面のウィジェット設定に表示されますので、ウィジェットの設定の一番最後に記述すると、管理画面では、詳細記事ページ(スマホ専用) の次に表示されることになります。

管理画面での表示の問題だけなので、ウィジェットエリアとウィジェットエリアの間だったらお好きなところへ書いてOKです。

これで、管理画面には、新しく「Index top widget(nameで設定した名前)」 というウィジェットが追加されているはずです。

ウィジェットのnameとidについて

name と id の部分は、自分がわかりやすい好きな名前をつけるといいです。

nameに設定した名前は、管理画面のウィジェットを設定するページでのウィジェット名になります。(元々入っているウィジェットは、翻訳ファイルによって日本語に変換されて表示されています)

私は、元々ある「トップページ中央下部」というウィジェットのname部分が「Index bottom widget」だったので、単純に「Index top widget」にしてみました。idも同じように、「index_top_widget」にしました。

もし、元々ある他のウィジェットと同じように日本語(「トップページ中央上部」など)で表示させたい場合は、翻訳ファイルを編集する必要があります。

ウィジェットの見出しレベルについて

もし、ソースをカスタマイズしてサイトのhタグの見出しレベルを変更している場合は、’before_title’ と ‘after_title’ の部分を、ご自身のサイトのウィジェットタイトルの見出しレベルに合わせておいてくださいね。

index.php に ウィジェットを表示させるためのコードを追加する

ウィジェットエリアが登録できたら、最後に、サイト上にウィジェットを表示させるためのコードを追加します。

今回表示させる場所は、TOPページの最近の記事のすぐ上ですので、index.phpに追加します。

追加するコード、追加する場所は以下の通りです。

<div id="index_main_content" class="clearfix">

 <div id="index_center_col">

  <!-- banner -->
  <?php if(!is_mobile()) { ?>
  <?php if($options['index_ad_code1']||$options['index_ad_image1']) { ?>
  <div id="index_banner_top">
  <?php if ($options['index_ad_code1']) { ?>
   <?php echo $options['index_ad_code1']; ?>
  <?php } else { ?>
   <a href="<?php esc_attr_e( $options['index_ad_url1'] ); ?>" class="target_blank"><img src="<?php esc_attr_e( $options['index_ad_image1'] ); ?>" alt="" title="" /></a>
  <?php }; ?>
  </div>
  <?php }; ?>
  <?php }; ?>

  <?php if(is_active_sidebar('index_top_widget')) { ?>
  <div id="index_top_widget">
   <?php dynamic_sidebar('index_top_widget'); ?>
  </div><!-- END index_top_widget -->
  <?php }; ?>

  <!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">

<!– recent post –> が最近の記事ですので、そのすぐ上ですね。

<div id="○○">や、is_active_sidebar(‘○○’) など、○○部分には、先ほど決めた「id」を書きます。

これで、最近の記事の上にウィジェットが表示されるようになります。

最近の記事の下にあるウィジェットを上に移動する方法

もし、元々ある最近の記事の下にあるウィジェットは使わないよーという場合は、それを最近の記事の上に移動させて使うという方法もあります。

移動させるのは、index.php 内の </div><!– END #index_pickup –> の下に書かれているウィジェットを表示させるためのコードです。

  <?php if(is_active_sidebar('index_bottom_widget')) { ?>
  <div id="index_bottom_widget">
   <?php dynamic_sidebar('index_bottom_widget'); ?>
  </div><!-- END index_bottom_widget -->
  <?php }; ?>

移動する場所は、<!– recent post –> の上です。

あとは、管理画面でウィジェットを設定する時は、「トップページ中央下部」に入れたいウィジェットを入れるだけでOKです。