WordPressの関連記事を表示する設置する方法です。
プラグインもいくつかありましたが、設定がイマイチ分かなったので、下記記事を参考に関連記事を追加しました。
設置場所は、記事詳細ページ（シングルページ）に設置しています。
レスポンシブ対応のCSSも記載しています。
設置イメージ
1. テーマフォルダに、関連記事用のテンプレートを追加作成します。
今回は tpl-related.php としました。
tpl-related.php の内容
‘posts_per_page’=> 9, の「9」は、表示件数になります。
お好みで変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div id="related-post"> <h3>関連記事</h3> <div class="related-post-list"> <?php $categories = get_the_category($post->ID); $category_ID = array(); foreach($categories as $category): array_push( $category_ID, $category -> cat_ID); endforeach ; $args = array( 'post__not_in' => array($post -> ID), 'posts_per_page'=> 9,//表示件数 'category__in' => $category_ID, 'orderby' => 'rand', ); $query = new WP_Query($args); if( $query -> have_posts() ): while ($query -> have_posts()) : $query -> the_post(); ?> <div class="related-post-sub"> <div class="related-post-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('full'); ?> <?php else : ?> <p class="thumb-noimage">no image</p> <?php endif ; ?> </a> </div> <div class="related-post-content"> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> </div> </div> <?php endwhile;?> <?php else:?> <p>関連記事はありませんでした。</p> <?php endif; wp_reset_postdata(); ?> </div> </div> |
2.single.php の表示したい場所にtpl-related.php を読み込みます。
single.phpに追加
|
1 2 3 4 5 |
<?php include( TEMPLATEPATH . '/tpl-related.php' ); ?> |
3.スタイルシートを追加します。
レスポンシブ対応です。PCビューで3カラム、スマートフォンで2カラムとなります。
style.css に追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/* 関連記事 */ #related-post{} #related-post *{ box-sizing:border-box; } #related-post h3{} .related-post-list{ display:flex; flex-wrap:wrap; } .related-post-list .related-post-sub{ width:32%; margin-right:1%; margin-bottom:2%; padding:0.2em; box-shadow:0px 0px 3px 1px #EEE; -moz-box-shadow:0px 0px 3px 1px #EEE; -webkit-box-shadow:0px 0px 3px 1px #EEE; } .related-post-thumb{ margin-bottom: 0.5em; } .related-post-thumb img{ width:100%; } .related-post-thumb .thumb-noimage{ text-align:center; background:#EEE; padding:2em; font-size:12px; color:#666; } .related-post-content{ padding:0.5em; } .related-post-content h4{ margin-bottom:1em; font-size:12px; } @media only screen and (max-width: 600px){ .related-post-list .related-post-sub{ width:48%; margin-right:2%; } } |
