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

  • このエントリーをはてなブックマークに追加

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

48b97e5b81bd7c026e0e173652618f53_m

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

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

記事を読む

photo

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

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

記事を読む

wpnavi

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

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

記事を読む

wpnavi

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

mow (1)

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

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

記事を読む

WordPressでCSSを実際に確認しながら編集する方法

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

記事を読む

mayu-official-site

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

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

記事を読む

valentine-1953964_1920

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

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

記事を読む

Message

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

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

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower