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」が表示件数にあたる部分ですので、変更する場合は奇数で設定しておきましょう。

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

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

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

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も同じように追記する必要があります。


こんな記事も書きました!

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

cup-2315554_1280

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

desktop-2325627_1280

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower