【PR】を含みます。

WordPress

【WordPress】プラグインなしで関連記事をタグで表示する方法

WordPress プラグインなしで関連記事をタグで表示する方法

WordPressで運営しているブログやメディアサイトでは、関連記事の表示はユーザーの回遊率アップや直帰率の改善、SEO強化にもつながる重要な施策です。

本記事では、プラグインを使わずにタグを使って関連記事を表示する方法を初心者にも分かりやすく解説します。

さらに、関連記事をランダムに表示させる方法も紹介するので、動きのあるコンテンツを作りたい方にもおすすめです。

タグを使って関連記事を表示するメリット

タグを使った関連記事表示には、以下のようなSEOやUX上のメリットがあります。

  • 関連性の高い内部リンクが自然に増える（SEO効果）

  • カテゴリーよりも細かいトピック単位で関連付けができる

  • 複数タグを設定できるため柔軟性が高い

  • 読者の興味・関心に沿った記事を提示しやすい

【実装コード】関連記事をタグで表示する

WordPressのテーマファイル（例：single.php）に、以下のコードを挿入することで、現在表示している記事と同じタグを持つ記事を取得・表示できます。

Copyをクリックするとコピーできます。

PHP
Copy
<?php
$tags = wp_get_post_tags( get_the_ID() );
if ( $tags ) {
    $tagIds = array_map( function( $tag ) {
        return $tag->term_id;
    }, $tags );
    $args = array(
        'tag__in' => $tagIds,
        'post__not_in' => array( get_the_ID() ),
        'posts_per_page' => 6
    );
    $relatedPosts = new WP_Query( $args );
    if ( $relatedPosts->have_posts() ) {
        echo '<ul class="related-posts">';
        while ( $relatedPosts->have_posts() ) {
            $relatedPosts->the_post();
            echo '<li>';
            echo '<a href="' . get_permalink() . '">';
            if ( has_post_thumbnail() ) {
                $thumbId = get_post_thumbnail_id();
                $altText = get_post_meta( $thumbId, '_wp_attachment_image_alt', true );
                echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', array( 'alt' => esc_attr( $altText ) ) );
            } else {
                echo '<img src="' . esc_url( get_template_directory_uri() . '/img/no-image.jpg' ) . '" alt="No image">';
            }
            echo '<span class="related-title">' . get_the_title() . '</span>';
            echo '</a>';
            echo '</li>';
        }
        echo '</ul>';
        wp_reset_postdata();
    }
}
?>

関連記事表示コードの解説

$tags = wp_get_post_tags( get_the_ID() );

現在表示中の記事に付けられている「タグ（タグオブジェクト）」を取得します。

この関数は、投稿IDを渡すことで、その投稿に付いている全てのタグ情報（ID、スラッグ、名前など）を取得できます。

if ( $tags ) {

タグが1つでも存在するか確認します。

タグがなければ何も表示しないように制御しています。

$tagIds = array_map( function( $tag ) {
  return $tag->term_id;
}, $tags );

タグオブジェクトから、数値ID（term_id）だけを抽出して配列にまとめています。

tag__inで使用するため、IDだけの配列が必要です。

$args = array(
  'tag__in' => $tagIds,
  'post__not_in' => array( get_the_ID() ),
  'posts_per_page' => 6
);

WP_Query に渡すクエリパラメータを指定しています。

tag__in上記で取得したタグIDのどれかが付いている投稿を対象にする
post__not_in今見ている投稿を除外
posts_per_page最大6件までに制限
$relatedPosts = new WP_Query( $args );

上記の条件で、関連記事の一覧をデータベースから取得します。

WordPressのカスタムクエリの典型的な書き方です。

if ( $relatedPosts->have_posts() ) {

該当する記事が1件以上あれば、ループに進みます。

echo '<ul class="related-posts">';

記事リストのラップ（外枠）として <ul>タグを使用しています。

ループ内の処理

while ( $relatedPosts->have_posts() ) {
  $relatedPosts->the_post();

WordPressループの基本構文。

1記事ずつ処理し、表示していきます。

echo '<li>';
echo '<a href="' . get_permalink() . '">';

各記事のリストアイテムを作成し、記事タイトルや画像をリンクで囲む形にしています。

if ( has_post_thumbnail() ) {
  $thumbId = get_post_thumbnail_id();
  $altText = get_post_meta( $thumbId, '_wp_attachment_image_alt', true );
  echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', array( 'alt' => esc_attr( $altText ) ) );
}

アイキャッチ画像が設定されていれば、thumbnailサイズで表示します。

  • alt属性には代替テキストを取得して設定し、画像SEOにも配慮しています。
  • thumbnailサイズはWordPressが標準で生成する小サイズ画像なので、軽量＆高速表示に適しています。
    ※必要に応じてサイズは変更してください。
else {
  echo '<img src="' . esc_url( get_template_directory_uri() . '/img/no-image.jpg' ) . '" alt="No image">';
}

アイキャッチが設定されていない場合は、代替画像（no-image）を表示することでレイアウト崩れを防ぎます。

サイトに/img/no-image.jpgをあらかじめ設置しておく必要があります。

echo '<span class="related-title">' . get_the_title() . '</span>';

記事タイトルをテキストとして表示します。

画像と並んで表示されるので、画像だけでなく内容も伝わりやすくなります。

echo '</a>';
echo '</li>';

それぞれのリンクとリストアイテムを閉じます。

echo '</ul>';
wp_reset_postdata();

最後に</ul>を閉じて、クエリで変更された投稿データを元に戻す処理（wp_reset_postdata()）を忘れずに実行します。

【実装コード】関連記事をランダムに表示する

$args = array(に、orderby => 'rand'を指定することで、取得する記事の順番が毎回シャッフルされるようになります。

Copyをクリックするとコピーできます。

PHP
Copy
<?php
$tags = wp_get_post_tags( get_the_ID() );
if ( $tags ) {
    $tagIds = array_map( function( $tag ) {
        return $tag->term_id;
    }, $tags );
    $args = array(
        'tag__in' => $tagIds,
        'post__not_in' => array( get_the_ID() ),
        'posts_per_page' => 6,
        'orderby' => 'rand' // 表示順をランダムにする
    );
    $relatedPosts = new WP_Query( $args );
    if ( $relatedPosts->have_posts() ) {
        echo '<ul class="related-posts">';
        while ( $relatedPosts->have_posts() ) {
            $relatedPosts->the_post();
            echo '<li>';
            echo '<a href="' . get_permalink() . '">';
            if ( has_post_thumbnail() ) {
                $thumbId = get_post_thumbnail_id();
                $altText = get_post_meta( $thumbId, '_wp_attachment_image_alt', true );
                echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', array( 'alt' => esc_attr( $altText ) ) );
            } else {
                echo '<img src="' . esc_url( get_template_directory_uri() . '/img/no-image.jpg' ) . '" alt="No image">';
            }
            echo '<span class="related-title">' . get_the_title() . '</span>';
            echo '</a>';
            echo '</li>';
        }
        echo '</ul>';
        wp_reset_postdata();
    }
}
?>

まとめ

WordPressで関連記事をタグを使って表示する方法は、SEOにも効果的で、サイトの回遊率を高める手段です。

プラグインなしで実装できるため、表示速度やセキュリティを気にする方にもおすすめです。

また、ランダムに表示する手法を取り入れることで、見た目に変化が生まれ、リピーターにも新鮮な印象を与えることができます。

よくある質問（FAQ）

Q. タグが1つもない記事ではどうなる？

タグが取得できなければ関連記事は表示されません。

if ( $tags )の条件で分岐できます。

Q. 同じタグが付いていても記事が表示されない場合は？

該当タグが付いた他の記事が存在しない場合や、公開状態でない場合があります。

Q. タグを自動で整備・管理する方法は？

現在は手動管理が基本ですが、定期的に「投稿一覧」からタグの整理を行うことをおすすめします。

-WordPress
-