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

AN(tcd014)の関連記事に表示される記事数を変更する

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

変更前

関連記事デフォルトの状態

変更後

関連記事-5記事を2段で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記事分の高さ

全角30字の記事タイトルの場合、4行以内で収まり、高さは187px必要です。

関連記事-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を調整するといいです。

まとめ

この先、記事によって長~いタイトルをつける事があるかもしれないし、やっぱり高さを指定しまうのは抵抗あるなァと心配な方もいるかもしれません。

もし、高さを指定していて、その高さでは収まらないほどのタイトルだった場合、2段目のサムネイルでタイトルが隠れてしまいます。

そういった心配をされる場合は、inline-blockを使って横並びにするという方法もあります。

ご自分のサイトの関連記事の高さを調べてみたい場合は、サイト上で右クリック→要素を検証(調査)でできます。InternetExplorerのバージョンによっては、ツール→F12 開発者ツール で調べる事ができます。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

サイト内検索

おすすめ記事

ページ上部へ戻る