WordPressのプラグインを使わずに、タグやカテゴリで関連記事を表示しよう
2020.03.16
YouTubeの関連動画のせいで、1日を無駄にしたという人も多くいるのではないでしょうか。
もしあなたのブログにも関連記事があれば、誰かの1日を潰すくらいに読まれるブログになるかもしれません。
みなさま、こんにちは。
すこし言いすぎましたが、回遊率の大きな鍵を握る関連記事を、プラグインなしで表示する方法を解説していきますので、参考にしてください。
関連記事を表示しよう
なお本記事はプラグイン未使用になります。
PHP などに触れない人はプラグインを使用することをおすすめします。
カテゴリで関連記事を呼び出す方法
まずはコードを記載します。
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 |
<?php $categories = wp_get_post_categories( $post->ID, array( 'orderby' => 'rand' ) ); if ( $categories ) { $args = array( 'category__in' => array( $categories[ 0 ] ), ' post__not_in' => array( $post->ID ), 'showposts' => 3, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ); $my_query = new WP_Query( $args ); if ( $my_query->have_posts() ) { while ( $my_query->have_posts() ) { $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); } else { ?> <p class="no-related">おすすめの記事はありません。</p> <?php } } ?> |
コードの解説
コードにコメントアウトで記入しました。
参考にしてみてください。
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 |
<?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' => 3, // 表示する記事数 'ignore_sticky_posts' => 1, // 先頭固定表示の投稿を先頭に入れない。 'orderby' => 'rand' // ランダムで並び替える。 ); $my_query = new WP_Query( $args ); // 新たなオブジェクト my_query を生成する。 if ( $my_query->have_posts() ) { // 関連記事があった場合は、 while ( $my_query->have_posts() ) { // ループする。 $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); //メインループのクエリへ復帰する。 } else { // もし関連記事がない場合は、 ?> <p class="no-related">おすすめの記事はありません。</p> <?php } } ?> |
ループの箇所は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 29 30 31 32 33 34 35 36 |
<?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 ), 'post__not_in' => array( $post->ID ), 'showposts' => 3, // 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ); $my_query = new WP_Query( $args ); if ( $my_query->have_posts() ) { while ( $my_query->have_posts() ) { $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); } else { ?> <p class="no-related">おすすめの記事はありません。</p> <?php } } ?> |
コードの解説
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 |
<?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' => 3, // 表示する記事数 'caller_get_posts' => 1, // 先頭固定表示の投稿を先頭に入れま 'orderby' => 'rand' // ランダムで並び替える。 ); $my_query = new WP_Query( $args ); // 新たなオブジェクト my_query を生成する。 if ( $my_query->have_posts() ) { // 関連記事があった場合は、 while ( $my_query->have_posts() ) { // ループする。 $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); //メインループのクエリへ復帰する。 } else {// もし関連記事がない場合は、 ?> <p class="no-related">おすすめの記事はありません。</p> <?php } } ?> |
基本的にカテゴリと変わりません。
ただカテゴリの箇所をタグに置き換えました。
タグがないときにカテゴリで関連記事を呼び出す方法は?
最後に実践的に。
当然ですがタグの方が関連度が高くなると思います。
しかしタグを細かく分けていると、タグに含まれる記事が1つだけの可能性もありますよね。
その場合は、関連記事が表示されません。
その可能性の対策とし、タグがなかった場合はカテゴリを呼ぶ記述をしておきましょう。
コードは下記になります。
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 67 68 69 70 71 |
<?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 ), 'post__not_in' => array( $post->ID ), 'showposts' => 3, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ); $my_query = new WP_Query( $args ); if ( $my_query->have_posts() ) { while ( $my_query->have_posts() ) { $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); } else { ?> <?php $categories = wp_get_post_categories( $post->ID, array( 'orderby' => 'rand' ) ); if ( $categories ) { $args = array( 'category__in' => array( $categories[ 0 ] ), ' post__not_in' => array( $post->ID ), 'showposts' => 3, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ); $my_query = new WP_Query( $args ); if ( $my_query->have_posts() ) { while ( $my_query->have_posts() ) { $my_query->the_post(); ?> <div class="column"> <article> <a href="<?php the_permalink(); ?>"> <div class="column_thumbnail"> <?php the_post_thumbnail('large'); ?> </div> <div class="column_text"> <p> <?php the_title(); ?> </p> </div> </a> </article> </div> <?php } wp_reset_query(); } else { ?> <p class="no-related">おすすめの記事はありません。</p> <?php } } ?> <?php } } ?> |
シンプルに、タグがないときに、カテゴリを読み込むよう、入れ子にしました。
不用意なプラグインはサイトを重くするので、ぜひ上記方法に挑戦してみてください。