かわたま.net

Enjoy Creative! かわたまのwebメモ

【wordpress】各記事ページに’投稿’と’固定ページ’の「関連(タグ)記事」を表示させる記述方法

2014 October 18

Tag:

各記事ページに関連記事(同じタグがついた記事)を表示する方法は以前記事にまとめましたが、
今回は’投稿’で作成した記事だけでなく、’固定ページ’で作成した記事も合わせて関連記事として表示されるようにする記述方法をメモします。

【過去記事】
»【wordpress】サムネイル付き関連記事(タグ)をプラグインなしで表示させる方法

固定ページでタグ設定を有効にする

まずは、固定ページでもタグ設定ができるようにします。
通常、wordpressの固定ページにはタグの設定欄はありませんが、functions.phpに記述することで、投稿と同じようにタグを設定できるようになります。

設定方法はこの記事を参考にしてください。
»【wordpress】固定ページでタグを設定できるようにし、タグクラウド(TagCloud)にも追加する方法

#1:関連記事を表示させるためのphpファイルを作成

見ている記事と同じタグが付いた記事を表示させます。
single.phpやpage.phpに直接書いてもいいのですが、後で管理しやすいように別ファイルで読み込ませたいと思います。
今回は、テンプレートファイルと同じ階層に「related.php」という名前で作成します。

<?php
  $original_post = $post;
  $tags = wp_get_post_tags($post->ID);
  $tagIDs = array();
  if ($tags) {
    $tagcount = count($tags);
    for ($i = 0; $i < $tagcount; $i++) {
      $tagIDs[$i] = $tags[$i]->term_id;
  }
  $args=array(
  'tag__in' => $tagIDs,
  'post__not_in' => array($post->ID),
  'showposts'=>4,
  'ignore_sticky_posts'=>1
  'post_type' => array('post','page'),
  );
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
      <h4><a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
    </li>
    <?php endwhile; wp_reset_query(); ?>
    <?php } else { ?>
      関連する記事はありません。
  <?php } }?>
☆10行目〜16行目 配列の値の解説
tag__in
指定した複数のタグのいずれかを含む投稿のみを表示。

post__not_in
投稿IDを用いて、それ以外を指定する。(表示させないIDを指定)

showposts
指定件数分の記事を表示。-1で全ての記事を表示。

ignore_sticky_posts
固定表示になってる投稿を検索するためのパラメータ

post_type
表示させる投稿タイプを指定します。初期値(指定しない場合)は’post’。
固定ページは’page’、カスタム投稿タイプは’投稿タイプ名’などの指定ができます。
今回は投稿と固定ページを表示させたいので(‘post’,’page’)としました。

#2:single.php、page.phpに下記を追加

single.php、page.phpの任意の箇所に#1で作成した「related.php」を読み込ませます。

<div id="relation">
  <h3>関連記事</h3>
  <ul>
    <?php get_template_part( 'related' ); ?>
  </ul>
</div>

4行目の get_template_part() はテンプレートファイルに別ファイルを読み込ませるためのタグです。
今回はrelated.phpを読み込ませたいので( ‘related’ )となります。

以上で関連記事を表示できます。デザインに合わせてcssを記述してください。
サムネイル付きで表示させたい場合の記述方法は過去記事を参考にしてください。