AN(tcd014)の関連記事を横2記事×縦3記事で6記事表示にする

AN(tcd014)では、PCで表示したとき、投稿ページに表示される関連記事は5記事が横並びに表示されるようになっています。これを横に2記事並べて、縦に増やしていく方法を紹介します。
変更前
変更後
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。
関連記事に表示される記事数を変更する
関連記事に表示される記事数を、single.phpで変更します。横に2記事表示するので、偶数個がいいかと思います。
今回は、横に2記事×縦に3記事で6記事表示されるようにしたいと思います。
<?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, の部分が、表示される記事数です。この数字を 6 に変更してみます。
<?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'=>6, 'orderby' => 'rand' ); $my_query = new wp_query($args); if($my_query->have_posts()) { ?>
これで6記事表示されるようになります。
style_pc.cssで1記事分の幅を変更する
まず、横に2記事だけが入るように、#related_post ul の margin を調整し、#related_post li の width を変更します。高さは、サムネイルが入る高さを指定します。
また、記事タイトルはサムネイル画像の右側にfloatされて入ってくるので、画像の右marinを0から15pxに変更して、画像と記事タイトルの間に余白を作るようにします。
それから、タイトルを中央寄せから左寄せに変更します。
変更前
/* 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*/ #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 0 15px 16px; } #related_post li { float:left; margin:0 16px 10px 0; width:294px; height:106px; } #related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 15px 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:left; } #related_post .title a { color:#333; }
横に2記事が3段になり6記事表示されるようになりました
サムネイル画像のサイズやマージンなどは、お好みで調整してくださいね。
コメント
- トラックバックは利用できません。
- コメント (0)
この記事へのコメントはありません。