見出し画像

自作テーマのWordPressで関連記事を表示させる方法 | アダルトアフィリエイト

ふわり

noteで公開した自作テーマのWordPressサイトに関連記事を追加したので、今回は関連記事の追加方法を解説します。


関連記事の作成方法

WordPressにはプラグインで関連記事を表示させる方法がありますが、今回はプラグインを使わずに自作しました。

考え方としては、投稿IDから出演女優とジャンルタグを取得し、現在の記事を除外してランダムに最大6件取得します。
ジャンルタグの方は、投稿数が多い上位2つのジャンルを表示するようにします。
また、記事が1件未満だったら表示しないという処理も行います。

それでは、function.phpに書いていきます。

function.php

投稿ページなので、前回紹介したsetupPostクラスに追加します。

長いコードになりますが、getRelatedPostsメソッドを追記します。
戻り値は出演女優、ジャンルタグの関連記事と名前を配列で返します。

class setupPost {
  private $post_id;
  private $post;

  public function __construct($post_id = null) {
    $this->post_id = $post_id ? $post_id : get_the_ID();
    $this->post = get_post($this->post_id);

    if (!$this->post) {
      throw new Exception("Invaild post ID");
    }
  }

  // ...

  public function getRelatedPosts() {
    // 関連投稿を格納する配列を初期化
    $related_posts = array(
      'actor' => array(),       // 出演女優に基づく関連投稿
      'genre1' => array(),      // ジャンル1に基づく関連投稿
      'genre1_name' => '',      // ジャンル1の名前
      'genre2' => array(),      // ジャンル2に基づく関連投稿
      'genre2_name' => ''       // ジャンル2の名前
    );

    // 現在の投稿の出演女優を取得（'actor' タクソノミー）
    $actors = wp_get_post_terms($this->post_id, 'actor', array('fields' => 'ids'));
    
    // 出演女優が存在する場合
    if ($actors) {
      // 出演女優に基づく投稿のクエリを設定
      $actor_args = array(
        'post_type' => 'post',                  // 投稿タイプは 'post'
        'post_per_page' => 6,                   // 取得する投稿の最大数は6
        'post__not_in' => array($this->post_id),// 現在の投稿は除外
        'orderby' => 'rand',                    // ランダムに並び替える
        'tax_query' => array(
          array(
            'taxonomy' => 'actor',              // 'actor' タクソノミーに基づくクエリ
            'field' => 'term_id',               // タームIDを使用
            'terms' => $actors,                 // 出演女優のタームID
          ),
        ),
      );
      
      // WP_Query でクエリを実行
      $actor_query = new WP_Query($actor_args);

      // クエリ結果に投稿がある場合、関連投稿に追加
      if ($actor_query->have_posts()) {
        $related_posts['actor'] = $actor_query->posts;
      }
    }

    // 現在の投稿に関連するジャンル（'post_tag' タクソノミー）を取得、投稿数が多い順に並び替え
    $genres = wp_get_post_terms($this->post_id, 'post_tag', array('orderby' => 'count', 'order' => 'DESC', 'fields' => 'ids'));
    
    // ジャンルが2つ以上ある場合
    if ($genres && count($genres) > 1) {
      // ジャンル1に基づく投稿のクエリを設定
      $genre1_args = array(
        'post_type' => 'post',                  // 投稿タイプは 'post'
        'posts_per_page' => 6,                  // 取得する投稿の最大数は6
        'post__not_in' => array($this->post_id),// 現在の投稿は除外
        'orderby' => 'rand',                    // ランダムに並び替える
        'tax_query' => array(
          array(
            'taxonomy' => 'post_tag',           // 'post_tag' タクソノミーに基づくクエリ
            'field' => 'term_id',               // タームIDを使用
            'terms' => array($genres[0]),       // 最も投稿数の多いジャンルのタームID
          ),
        ),
      );
      
      // WP_Query でクエリを実行
      $genre1_query = new WP_Query($genre1_args);
      
      // クエリ結果に投稿がある場合、関連投稿に追加
      if ($genre1_query->have_posts()) {
        $related_posts['genre1'] = $genre1_query->posts;
        $related_posts['genre1_name'] = get_term($genres[0], 'post_tag')->name;  // ジャンル名も取得
      }

      // ジャンル2に基づく投稿のクエリを設定
      $genre2_args = array(
        'post_type' => 'post',                  // 投稿タイプは 'post'
        'posts_per_page' => 6,                  // 取得する投稿の最大数は6
        'post__not_in' => array($this->post_id),// 現在の投稿は除外
        'orderby' => 'rand',                    // ランダムに並び替える
        'tax_query' => array(
          array(
            'taxonomy' => 'post_tag',           // 'post_tag' タクソノミーに基づくクエリ
            'field' => 'term_id',               // タームIDを使用
            'terms' => array($genres[1]),       // 2番目に投稿数の多いジャンルのタームID
          ),
        ),
      );

      // WP_Query でクエリを実行
      $genre2_query = new WP_Query($genre2_args);
      
      // クエリ結果に投稿がある場合、関連投稿に追加
      if ($genre2_query->have_posts()) {
        $related_posts['genre2'] = $genre2_query->posts;
        $related_posts['genre2_name'] = get_term($genres[1], 'post_tag')->name;  // ジャンル名も取得
      }
    }

    // 関連記事が1件未満の場合、nullを返す
    if (empty($related_posts['actor']) && empty($related_posts['genre1']) && empty($related_posts['genre2'])) {
      return null;
    }

    // 関連投稿を返す
    return $related_posts;
  }
}

ちなみに自分の場合は出演女優はカスタムタクソノミーにしてるので'actor'は適宜置き換えてください。

single.phpで表示

最後にsingle.phpで表示させる例を書きます。

<?php
$post = new setupPost();
$actors = $post->getActors();
$actors_name = implode(',', array_column($actors, 'name'));

$related_posts = $post->getRelatedPosts();
$related_genre1_name = $related_posts['genre1_name'];
$related_genre2_name = $related_posts['genre2_name'];
?>

<?php if($related_posts):
  if(!empty($related_posts['actor'])): ?>
    <div class="p-post__related-heading"><?=$actors_name ?>のおすすめの記事</div>
    <div class="p-post__related-wrap">
      <?php foreach($related_posts['actor'] as $post):
        setup_postdata($post);
      ?>
      <a class="p-post__related-card" href="<?php the_permalink(); ?>">
        <div class="p-post__related-img"><?php display_thumb_image(); ?></div>
        <div class="p-post__related-title"><?php the_title(); ?></div>
      </a>
      <?php endforeach;
        wp_reset_postdata();
      ?>
    </div>
  <?php endif;

  if(!empty($related_posts['genre1'])): ?>
    <div class="p-post__related-heading"><?=$related_genre1_name ?>のおすすめの記事</div>
    <div class="p-post__related-wrap">
      <?php foreach($related_posts['genre1'] as $post):
        setup_postdata($post);
      ?>
      <a class="p-post__related-card" href="<?php the_permalink(); ?>">
        <div class="p-post__related-img"><?php display_thumb_image(); ?></div>
        <div class="p-post__related-title"><?php the_title(); ?></div>
      </a>
      <?php endforeach;
        wp_reset_postdata();
      ?>
    </div>
  <?php endif;

  if(!empty($related_posts['genre2'])): ?>
    <div class="p-post__related-heading"><?=$related_genre2_name ?>のおすすめの記事</div>
    <div class="p-post__related-wrap">
      <?php foreach($related_posts['genre2'] as $post):
        setup_postdata($post);
      ?>
      <a class="p-post__related-card" href="<?php the_permalink(); ?>">
        <div class="p-post__related-img"><?php display_thumb_image(); ?></div>
        <div class="p-post__related-title"><?php the_title(); ?></div>
      </a>
      <?php endforeach;
        wp_reset_postdata();
      ?>
    </div>
  <?php endif; ?>
<?php endif; ?>

ちなみにサムネを表示させるdisplay_performer()はfunction.phpに以下のように書いています。

// アイキャッチ画像を表示
function display_thumb_image() {
  // カスタムフィールドで指定された外部URLを取得
  $external_thumbnail_url = get_field('external_thumbnail_url');

  // 外部URLが指定されている場合、その画像を表示
  if ($external_thumbnail_url) {
    echo '<img src="' . esc_url($external_thumbnail_url) . '" alt="' . esc_attr(get_the_title()) . '">';
  } elseif (has_post_thumbnail()) {
    // 外部URLが指定されていない場合、通常のアイキャッチ画像を表示
    the_post_thumbnail();
  }
}

まとめ

WordPressでプラグインを使わずに関連記事を表示させる方法を書きました。

SEO的にも内部リンクが多いほうが良さそうなので、関連記事を設置してどうなるかも検証してみたいですね。

この記事が参考になれば幸いです☘️

それでは良いWordPressライフを！

この記事が気に入ったらサポートをしてみませんか？