calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

プラグインを使わずにWordPressで関連記事を出す方法

WordPress of Recommend

SEOの効果を高めたり、ユーザビリティをよくするためのレコメンド機能をプラグイン無しで簡単に実装する方法。詳細ページ(single.php)で、カテゴリをもとにランダムで記事を表示します。これはあくまでも簡易的なものとなります。

Sponsored Link

関連記事を出力するソースコード

get_the_category()で現在の投稿IDを取得し、WP_Queryのcategory__inでカテゴリーに属する投稿を拾ってランダムで出力します。つまり、現在表示されている投稿に属しているカテゴリーを引っ張ってきてランダムで表示しています。

get_the_category()のcat_IDはカテゴリーIDの値を引っ張ってきます。

WP_Queryのcategory__inパラメータはカテゴリーIDを使います。

<div class="recommend">
  <?php
    $cat = get_the_category();
    $cat = $cat[0]; // [0]は先頭要素
    $the_query = new WP_Query( array(
     'category__in' => $cat->cat_ID, // category__inはカテゴリーIDを使う
     'post_type' => 'post',
     'posts_per_page' => 4, // 表記数
     'orderby'=> 'rand' // ランダム
    ) );
  ?>
  <?php if ( $the_query->have_posts() ) : ?>
  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <article>
    <div class="recommend__thumbnail">
      <a href="<?php the_permalink(); ?>">
        <?php if (has_post_thumbnail()) : ?>
          <?php the_post_thumbnail(); ?>
        <?php else : ?>
          <img src="<?php echo get_template_directory_uri(); ?>/img/dummy.png" alt="">
        <?php endif; ?>
      </a>
    </div>
    <div class="recommend__text">
      <header>
        <a href="<?php the_permalink(); ?>">
          <?php the_title(); ?>
        </a>
      </header>
    </div>
  </article>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <?php else : ?>
  <?php endif; ?>
</div>

アイキャッチ画像が無い場合はimgディレクトリを作ってdummy.pngを表示するようにしています。imgディレクトリにダミー画像を置いてください。

get_the_category

get_the_categoryは、現在の投稿が属するカテゴリーを返します。パラメータの初期値は現在の投稿IDとなります。

<?php get_the_category(); ?>

var_dumpを使うと返り値を確認することができます。term_id/cat_IDはカテゴリーID、nameはカテゴリー名、slugはスラッグ名、parentは親カテゴリーIDなどを取得できます。参考:テンプレートタグ/get the category - WordPress Codex 日本語版

<pre>
<?php
  global $post;
  $categories = get_the_category( $post->ID );
  var_dump( $categories );
?>
</pre>

WP_Query

WP_QueryとはWordPressのコアの中にあるクラスで、様々な投稿を読み込んで処理します。WordPress内部で実行されるメインクエリはメインループ、WP_Queryはサブループと呼ばれます。

$変数 = new WP_Query();

WP_Queryについては、ここで詳しく触れませんが、サブループを使うことによって本来のループとは別のループを作れるので、覚えておくとよいでしょう。

以上、WordPressのシングルページでプラグインを使わずに関連記事を出力する方法でした。

WordPressカスタマイズに便利なテクニック一覧

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください