AN(tcd014)の関連記事に表示される記事数を10に増やして2段にする

AN(tcd014)では、投稿ページに関連記事が5記事まで表示されるようになっていますが、それをもう1段増やして最大10記事まで表示させる方法を書きたいと思います。

変更前

関連記事に表示させる記事数を増やす

まず、関連記事に表示させる記事数を増やすには、single.phpを変更します。

single.phpで、<?php // related post と書かれた部分を探してください。

<?php // related post
      if ($options['show_related_post']) :
      $odd_or_even = 'odd';
      $categories = get_the_category($post->ID);
      if ($categories) {
      $category_ids = array();
       foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array($post->ID),
                    'showposts'=>5,
                    'orderby' => 'rand'
                  );
       $my_query = new wp_query($args);
       if($my_query->have_posts()) {
 ?>

‘showposts’=>5, の部分が、表示される記事数です。この数字を 10 に変更してみます。

<?php // related post
      if ($options['show_related_post']) :
      $odd_or_even = 'odd';
      $categories = get_the_category($post->ID);
      if ($categories) {
      $category_ids = array();
       foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array($post->ID),
                    'showposts'=>10,
                    'orderby' => 'rand'
                  );
       $my_query = new wp_query($args);
       if($my_query->have_posts()) {
 ?>

これだけで関連記事が10記事表示されるようになります。

ですが、記事タイトルの文字数によって、1記事分の高さが違ってくることから、6記事目は、1段目の高さが一番低いところの下に入ってしまいます。

関連記事-10記事表示で崩れた状態

1記事の高さを指定する

2段目以降が崩れてしまわないために、1記事分の高さを指定します。変更するのは、style_pc.css の single post page に書かれいてる /* related post*/ の部分です。

変更前

/* related post*/
#related_post { margin:20px; border:1px solid #ccc; background:#f9f9f9; }
#related_post .headline { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }
#related_post ul { margin:15px -30px 15px 15px; }
#related_post li { float:left; margin:0 17px 0 0; width:108px; }
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; }
#related_post .image img { width:90px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:12px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

#related_post li に height:○px; と指定します。ただ、記事タイトルの文字数や、font-sizeによって高さが変わりますので、一概に「高さを何pxに指定してね」とは言いにくいのです。

それだと困ると思いますので、参考までにだいたいの高さを書いておきます。font-sizeは、デフォルトの12pxです。

関連記事-1記事分の高さ

それよりもタイトルが長くなって、5行になる場合の高さは、206px必要です。

この1記事に必要な高さと、あとは2段目との間を取るためのマージンを #related_post li に書き加えます。

変更後

/* related post*/
#related_post { margin:20px; border:1px solid #ccc; background:#f9f9f9; }
#related_post .headline { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }
#related_post ul { margin:15px -30px 15px 15px; }
#related_post li { float:left; margin:0 17px 10px 0; width:108px; height:206px; }
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; }
#related_post .image img { width:90px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:12px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

下のマージンは、10pxにしましたが、お好みで変更してください。

横に5記事が2段になり、全10記事表示されました。

関連記事-5記事を2段で10記事表示

関連記事は、ランダムに表示されますので、1段目にタイトルが短い記事ばかりが表示されると、2段目との間が少し空きすぎに感じるかもしれませんね(>_<)

4記事を2段にして8記事表示したり、3記事を2段にして6記事表示したりする場合は、同じ要領でsingle.phpで表示数を変更してから、li要素やサムネイルのwidthを調整するといいです。