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

AN(tcd014)でTOPページの最近の記事をカスタマイズする

AN(tcd014)では、TOPページに最近の記事がきれいに整えられて表示されるようになっています。

この最近の記事では、最新の投稿順にアイキャッチ画像付きの記事が6記事表示され、続いてアイキャッチ画像のないテキストのみの記事が4記事表示され、全部で10記事まで表示されるようになっています。

そのようになっている最近の記事をカスタマイズして、アイキャッチ画像付きで表示される記事数を9記事に増やしたり、記事タイトルのみの記事をなくしたりする方法を紹介します。

アイキャッチ画像付きの記事を9記事にする

まず、アイキャッチ画像付きの記事を9記事にしてみます。なお、タイトルのみで表示される記事数は、4記事のままにしておきます。

変更するファイルは、index.phpで、<!– recent post –> の部分が、最近の記事に関するコードです。

‘numberposts’ => 10 の「10」が、最近の記事に表示される記事数です。

if($i < 7) の部分は、「6記事まで、アイキャッチ・日付・記事タイトル・抜粋を表示しますよ～」という意味のことが書かれています。

<?php } elseif($i==7) { ?> の部分は、「もし7記事目があったら、記事タイトルだけのスタイルにするよ～」という意味のことが書かれています。

変更前

<!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">
    <?php
        $args = array('post_type' => 'post', 'numberposts' => 10);
        $index_post=get_posts($args);
        //$count_posts = wp_count_posts();
        //$published_posts = $count_posts->publish;
        $i = 1; 
        if ($index_post) {
         foreach ($index_post as $post) : setup_postdata ($post);
         if($i < 7) {
    ?>
    <li class="clearfix">
     <a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
     <?php if ($options['show_date']) { ?><p class="date"><?php the_time('Y.n.j'); ?></p><?php }; ?>
     <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
     <div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(40);}; ?></p></div>
    </li>
    <?php } elseif($i==7) { ?>
   </ol>
   <ol class="second_list">
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php } else { ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php }; ?>
    <?php $i++; endforeach; }; wp_reset_query(); ?>
   </ol>
  </div><!-- END #index_pickup -->

上記にあげた3つの数字をそれぞれ変更していきます。

結論から言うと、今回の例では、それぞれの数字に3を足したものに変更するだけになります。

変更後

<!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">
    <?php
        $args = array('post_type' => 'post', 'numberposts' => 13);
        $index_post=get_posts($args);
        //$count_posts = wp_count_posts();
        //$published_posts = $count_posts->publish;
        $i = 1; 
        if ($index_post) {
         foreach ($index_post as $post) : setup_postdata ($post);
         if($i < 10) {
    ?>
    <li class="clearfix">
     <a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
     <?php if ($options['show_date']) { ?><p class="date"><?php the_time('Y.n.j'); ?></p><?php }; ?>
     <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
     <div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(40);}; ?></p></div>
    </li>
    <?php } elseif($i==10) { ?>
   </ol>
   <ol class="second_list">
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php } else { ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php }; ?>
    <?php $i++; endforeach; }; wp_reset_query(); ?>
   </ol>
  </div><!-- END #index_pickup -->

‘numberposts’ => 13 の「13」が、最近の記事に表示される記事数で、アイキャッチ画像付きが9記事とタイトルだけが4記事の合わせて13記事ということになります。

if($i < 10) の部分が、9記事目までがアイキャッチ画像付きで表示するという意味になって、<?php } elseif($i==10) { ?> の部分が、10記事目以降は記事タイトルだけのスタイルになるという意味になっています。

アイキャッチ画像付きの記事だけを表示する

次に、記事タイトルのみで表示される部分をなくして、アイキャッチ付きの記事だけを表示させるようにしてみます。

デフォルトでは、アイキャッチ画像付きが6記事ですので、表示される記事数を6に変更します。

変更前

<!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">
    <?php
        $args = array('post_type' => 'post', 'numberposts' => 10);
        $index_post=get_posts($args);
        //$count_posts = wp_count_posts();
        //$published_posts = $count_posts->publish;

変更後

<!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">
    <?php
        $args = array('post_type' => 'post', 'numberposts' => 6);
        $index_post=get_posts($args);
        //$count_posts = wp_count_posts();
        //$published_posts = $count_posts->publish;

これだけで、アイキャッチ画像付きの6記事だけになり、記事タイトルのみで表示される部分はなくなります。

記事タイトルのみで表示される記事だけを表示する

アイキャッチ画像付きの記事をなくして、表示されるすべての記事、10記事を記事タイトルのみで表示する方法を紹介します。

変更後

<!-- recent post -->
  <div id="index_post_list">
   <h3 class="headline1"><?php _e('Recent post', 'tcd-w');  ?></h3>
   <ol class="first_list clearfix">
    <?php
        $args = array('post_type' => 'post', 'numberposts' => 10);
        $index_post=get_posts($args);
        //$count_posts = wp_count_posts();
        //$published_posts = $count_posts->publish;
        $i = 1; 
        if ($index_post) {
         foreach ($index_post as $post) : setup_postdata ($post);
         if($i < 1) {
    ?>
    <li class="clearfix">
     <a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
     <?php if ($options['show_date']) { ?><p class="date"><?php the_time('Y.n.j'); ?></p><?php }; ?>
     <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
     <div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(40);}; ?></p></div>
    </li>
    <?php } elseif($i==1) { ?>
   </ol>
   <ol class="second_list">
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php } else { ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php }; ?>
    <?php $i++; endforeach; }; wp_reset_query(); ?>
   </ol>
  </div><!-- END #index_pickup -->

1記事目から記事タイトルのみで表示させるので、アイキャッチ画像付きで表示するのは if($i < 1) で、0記事です。

if($i < ○) の部分は、「○記事までアイキャッチ画像付きで表示しますよ～」という意味なので、if($i < 1) とすることで、アイキャッチ画像付きで表示させる記事を0記事にしています。

<?php } elseif($i==1) { ?> の部分が、1記事目から記事タイトルだけのスタイルにするという意味になっています。

これで、1記事目から記事タイトルのみで表示されます。

アイキャッチ画像付きの記事と記事タイトルのみのあいだにある点線を削除する

デフォルトでは、アイキャッチ画像付きで表示される記事と、記事タイトルのみで表示される記事のあいだには、点線が表示されるようになっています。

この点線は、記事タイトルのみの記事上部に表示されるようにCSSがあてられています。

ですので、記事タイトルのみの記事が表示される以上、どうしても点線が表示されてしまいますので、この点線を削除します。

変更するファイルは、style_pc.css です。/* –index –*/ の中にある /* recent post */ の部分が、最近の記事に関するコードです。

#index_post_list .second_list に指定されている background が点線です。そのあとに指定されている padding は、点線と記事の余白です。この background と padding を削除します。

変更前

#index_post_list .second_list { list-style-type:none; margin:0 17px 17px; padding:0; background:url(img/common/dot2.gif) repeat-x left top; padding:20px 0 0 0; }

変更後

#index_post_list .second_list { list-style-type:none; margin:0 17px 17px; padding:0; }

これで、点線が表示されなくなります。

スマホでも同様に点線が表示されるようになっていますので、同じように style_sp.css の /* recent post */ にある #index_post_list .second_list を変更してください。

最後に

アイキャッチ付きの記事数を9記事に増やすと、PCから見た時はキレイなのですが、スマホから見ると、下にブワァーッと縦長に伸びてしまうので、ユーザーからするとちょっとウザく感じるかもしれませんね。

ちなみに、私はPHPに関しては、あんまりよくわかっていなくて、「書いてある事はなんとくわかる」程度ですので、ご了承ください(>_<)