CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。

トップページにはタブ切り替えできる記事一覧エリアがあり、どう考えてもここがサイトの顔！要はメインになる部分なのですが、ページナビ(ページネーション)がないため過去の記事にどんどん遡って読むというのはできません。
もちろん他記事への導線はあちこちから引ける仕様になっているテーマなんですけど、ピンポイントで情報を提供するのではなく暇つぶしにダラダラ読めるタイプのブログならページナビは欲しいところだなと・・・

これがどうしても気になって、今回トップページにページナビを付けさせていただくことにしました(m´・ω・｀)m

その前に、表示件数を変更したい方は

タブエリアの記事表示数を変更したいという方は、TCDさんの公式カスタマイズサイトに掲載されておりますのでご確認ください。
TCDテーマCOREタブ記事一覧の表示件数を変更する方法

(完全にそのまんまですがここでも簡単に説明しますと、)「外観」→「テーマ編集」→「index.php」を開いて該当箇所を変更します。

<?php // #index_post_list1 *************************************************************************************************** ?>
<?php if($options['show_index_post_list1'] == 1) { ?>
<div id="index_post_list1" class="index_post_list clearfix">
 <?php
      $args = array('post_type' => 'post', 'ignore_sticky_posts' => 1, 'posts_per_page' => 5);
      $index_post_list1 = get_posts($args);
      if ($index_post_list1) {
        $i = 1;
        foreach ($index_post_list1 as $post) : setup_postdata ($post);
 ?>

「’posts_per_page’ => 5」が表示件数にあたる部分ですので、変更する場合は奇数で設定しておきましょう。

そんなわけで、ページナビつけます！

完成イメージとしては、下図の赤線の部分に・・・

こういった形でページナビを設置します。

PHPファイルの変更

変更するファイルは先ほどと同じ「index.php」、変更する箇所も同じ辺りです。

▼変更前

 <?php // #index_post_list1 *************************************************************************************************** ?>
 <?php if($options['show_index_post_list1'] == 1) { ?>
 <div id="index_post_list1" class="index_post_list clearfix">
  <?php
       $args = array('post_type' => 'post', 'ignore_sticky_posts' => 1, 'posts_per_page' => 9, 'category'=>$options['index_category1']);
       $index_post_list1 = get_posts($args);
       if ($index_post_list1) {
         $i = 1;
         foreach ($index_post_list1 as $post) : setup_postdata ($post);
  ?>
  <div class="post_type<?php if($i ==1) { echo '1'; } else { echo '2'; }; ?> clearfix<?php if (!has_post_thumbnail()) { echo ' no_thumbnail'; }; ?>">
   <a class="image" href="<?php the_permalink() ?>">
    <?php if ( has_post_thumbnail()) { ?>
      <?php if($i == 1) { the_post_thumbnail('size4'); } else { if(is_mobile()){the_post_thumbnail('size4');}else{the_post_thumbnail('size4');}; }; ?>
     <?php } else { ?>
      <?php echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image'; if($i ==1) { echo '4'; } else { echo '4'; }; echo '.gif" alt="" title="" />'; ?>
    <?php }; ?>
   </a>
   <h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
   <?php if($i ==1) { ?><p class="excerpt"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(120); }; ?></p><?php }; ?>
   <?php if ($options['show_date'] && $options['show_category']) { ?>
   <ul class="meta clearfix">
    <?php if ($options['show_date']){ ?><li class="post_date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y/n/j'); ?></time></li><?php }; ?>
    <?php if ($options['show_category']){ ?><li class="post_category"><?php the_category(', '); ?></li><?php }; ?>
   </ul>
   <?php }; ?>
  </div>
  <?php $i++; endforeach; wp_reset_query(); }; ?>

 </div><!-- #index_post_list1 -->
 <?php }; ?>

▼変更後

 <?php // #index_post_list1 *************************************************************************************************** ?>
 <?php if ( have_posts() ) : ?>
 <div id="index_post_list1" class="index_post_list clearfix">
  <?php $i = 1; while ( have_posts() ) : the_post(); ?>
  <div class="post_type<?php if($i ==1) { echo '1'; } else { echo '2'; }; ?> clearfix<?php if (!has_post_thumbnail()) { echo ' no_thumbnail'; }; ?>">
   <a class="image" href="<?php the_permalink() ?>">
    <?php if ( has_post_thumbnail()) { ?>
      <?php if($i == 1) { the_post_thumbnail('size4'); } else { if(is_mobile()){the_post_thumbnail('size4');}else{the_post_thumbnail('size4');}; }; ?>
     <?php } else { ?>
      <?php echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image'; if($i ==1) { echo '4'; } else { echo '4'; }; echo '.gif" alt="" title="" />'; ?>
    <?php }; ?>
   </a>
   <h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
   <?php if($i ==1) { ?><p class="excerpt"><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(120); }; ?></p><?php }; ?>
   <?php if ($options['show_date'] && $options['show_category']) { ?>
   <ul class="meta clearfix">
    <?php if ($options['show_date']){ ?><li class="post_date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y/n/j'); ?></time></li><?php }; ?>
    <?php if ($options['show_category']){ ?><li class="post_category"><?php the_category(', '); ?></li><?php }; ?>
   </ul>
   <?php }; ?>
  </div><!-- #post_type -->
  <?php $i++; endwhile; ?>
  <?php else: ?>
  <?php endif; ?>

  <?php get_template_part('navigation'); ?>

 </div><!-- #index_post_list1 -->

ページナビ用のファイルがデフォルトで用意されていますのでそのまま設置しました。

CSSの調整

「外観」→「テーマオプション」→「基本設定」を開き、最下部の「カスタムCSS」に下記を追記します。

/* トップページ ------------------------------------------------------------ */
/* ページナビ */
#index_post_list1 .page_navi { clear:both; margin: 0 0 25px 25px; }

人気記事などにも設定する場合はindex.php内でそれぞれの箇所を変更し、それに応じてCSSも同じように追記する必要があります。