WordPressでの記事が増えてくると、関連する記事を自動的に一覧表示したくなる時があります。
そういったプラグインも多数あるようですが、プラグインを使用せずに関連記事の一覧表示をやってみたいと思います。
プラグインを使わないことのメリットは、自分の好きなように応用できることです。
CSSなどで表示の仕方を工夫できます!
WordPress動作も重くなりにくいと思います!
Salty WordPress的コード
私が実際に使用しているコードを紹介します。私は同じカテゴリーに属する記事を関連記事として表示しております。
同じタグが付いたものを関連記事として表示するやり方も載せておきます。
カテゴリーの場合
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 | <?php // 同じカテゴリーの記事を関連記事として表示する $categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得 if ($categories) { $args = array( 'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事を除く 'showposts'=>5, // 取得記事数 'caller_get_posts'=>1, // 取得した記事の何番目から表示するか 'orderby'=> 'date' // 記事を日付順にする ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <div class="termlist_one"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br> <?php echo get_post_meta($post->ID, _aioseop_description, true); ?> <br clear="all" /> </div><!-- .termlist_one --> <?php endwhile; } wp_reset_query(); } ?> |
タグの場合
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 | <?php // 同じタグの記事を関連記事として表示する $tags = wp_get_post_tags($post->ID, array('orderby'=>'rand')); // 複数タグを持つ場合ランダムで取得 if ($tags) { $first_tag = $tags[0]->term_id; $args=array( 'tag__in' => array($first_tag), // タグのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事を除く 'showposts'=>5, // 取得記事数 'caller_get_posts'=>1, // 取得した記事の何番目から表示するか 'orderby'=> 'date' // 記事を日付順にする ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <div class="termlist_one"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br> <?php echo get_post_meta($post->ID, _aioseop_description, true); ?> <br clear="all" /> </div><!-- .termlist_one --> <?php endwhile; } wp_reset_query(); } ?> |
CSS
CSSはカテゴリー・タグの両方で共通です。1 2 3 4 5 6 7 8 | .termlist_one { padding-bottom: 2px; margin-bottom: 2px; } .termlist_one img { float: left; margin-right: 5px; } |
上記のコードでは、
- アイキャッチ画像の表示・記事へのリンク
- タイトルの表示・記事へのリンク
- All in One SEO Packでの詳細(Description)の表示
All in One SEO Packの詳細(Description)の表示をやめたい場合には、
<?php echo get_post_meta($post->ID, _aioseop_description, true); ?> |
を削除してください。
関連記事表示の効果
関連記事を表示した場合には、- 訪問者の回遊性を高める
- 訪問者の直帰率を下げる
- 記事ボリュームのアップ – SEO
仕事などで情報を求めて訪問している方にとっては、関連情報は本当にありがたいものですよね。
サイトオーナーにも訪問者にもありがたいことが多いですね。
筆者の感想
関連記事をアイキャッチ画像付きで一覧表示すれば、見栄えもかなりよくなります!色々なページを見てもらえる機会も増えますし、絶対にやるべきたと思います。
プラグインを使わずしても、難しい作業なしでできますしね!
CSSを工夫すれば色々な表示の仕方が可能ですので、自分のサイトに合った表示のさせ方を作り上げてください!
参考サイト
関連記事をプラグインを使わずに表示する!WordPress高速化Tips!関連記事

WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。

WordPressをカスタマイズして、記事タイトル一覧のページを作成している方も多いと思います。各タイトルと一緒にアイキャッチ画像を表示すれば、さらに見やすいページができあがります。