SWELL│関連記事を好きな場所に表示するカスタマイズ

カテゴリーまたはタグが共通する記事を、ショートコードを置いた場所に表示します。本文中、記事末尾、固定ページなどで使う例です。SWELL標準の関連記事の設定は変更しません。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

PHPを追加する

子テーマのfunctions.phpをバックアップしてから追加します。先頭のPHP開始タグは既存ファイルでは重ねません。旧版のbuild_related_post、category_shortcode、related_posts_shortcodeと関連する登録コードは併用せず、置き換えてください。同じショートコード名を別のプラグインが登録していないことも確認します。

<?php
add_shortcode( 'related_posts_category', 'waza_related_by_term' );
add_shortcode( 'related_posts_tag', 'waza_related_by_term' );
function waza_related_by_term( $atts, $content = null, $tag = '' ) {
    $atts = shortcode_atts( array( 'number' => 5, 'post_id' => 0 ), $atts, $tag );
    $id = absint( $atts['post_id'] );
    if ( ! $id && is_singular( 'post' ) ) { $id = get_queried_object_id(); }
    $base = get_post( $id );
    if ( ! $id || ! $base || 'post' !== $base->post_type || 'publish' !== $base->post_status || $base->post_password ) { return ''; }
    $taxonomy = 'related_posts_tag' === $tag ? 'post_tag' : 'category';
    $terms = wp_get_post_terms( $id, $taxonomy, array( 'fields' => 'ids' ) );
    if ( is_wp_error( $terms ) || ! $terms ) { return ''; }
    $posts = get_posts( array(
        'post_type' => 'post', 'post_status' => 'publish', 'has_password' => false,
        'posts_per_page' => max( 1, min( 20, (int) $atts['number'] ) ),
        'post__not_in' => array( $id ), 'orderby' => 'date', 'order' => 'DESC',
        'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'term_id', 'terms' => $terms ) ),
    ) );
    if ( ! $posts ) { return ''; }
    $out = '<ul class="waza-related-list">';
    foreach ( $posts as $item ) {
        $out .= '<li><a href="' . esc_url( get_permalink( $item->ID ) ) . '">';
        $out .= get_the_post_thumbnail( $item->ID, 'medium', array( 'loading' => 'lazy' ) );
        $out .= '<span>' . esc_html( get_the_title( $item->ID ) ) . '</span></a></li>';
    }
    return $out . '</ul>';
}

通常の公開投稿だけを取得し、基準の記事とパスワード保護の記事を除外します。カテゴリーやタグがないときは空文字を返し、関係のない最新記事には切り替えません。タイトルとリンク先をエスケープし、アイキャッチがなければ画像を省略します。外部サイトの代替画像には依存しません。

CSSを追加する

追加CSSまたは子テーマのstyle.cssに貼り付けます。本例は専用クラスの簡単な一覧で、SWELL標準の関連記事カードと同一の見た目を再現するものではありません。PCは2列、599px以下は1列です。

.waza-related-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.waza-related-list img{display:block;width:100%;height:auto}
.waza-related-list a{display:block;overflow-wrap:anywhere}
.waza-related-list a:focus-visible{outline:3px solid #176aa6;outline-offset:3px}
@media(max-width:599px){.waza-related-list{grid-template-columns:1fr}}

ショートコードを置く

通常の投稿では、ショートコードブロックに次のいずれかを入力します。見出しは必要に応じてブロックで別に追加してください。numberは1〜20件に制限しています。

[related_posts_category number="5"]
[related_posts_tag number="5"]

固定ページなど、基準の投稿を自動判定できない場所ではpost_idに公開済みの通常投稿のIDを指定します。123は例なので実際のIDに置き換えてください。

[related_posts_category post_id="123" number="4"]

カテゴリー版とタグ版の選び方

カテゴリー版は基準投稿のカテゴリー、タグ版は基準投稿のタグのいずれかに該当する記事を探します。掲載コードの tax_query は子カテゴリーを含める既定の動作なので、基準投稿に親カテゴリーが付いていると、その子孫カテゴリーの記事も候補になります。指定したカテゴリーIDだけに限定したい場合は、同じ条件配列へ 'include_children' => false を追加します。候補は公開日の新しい順で、関連度の採点順ではありません。候補が0件なら一覧は空になります。固定ページでは基準にしたい通常投稿のIDを指定してください。仕様はWordPressの分類クエリを参照しています。

設置前に、基準投稿と分類を共有する公開記事を1件用意して表示を確認します。次に共有分類のない記事、パスワード保護記事、自分自身が候補に混ざらないことを確認します。画像のない記事では画像枠を省きます。画像付き・画像なしの両方を一覧に出し、スマホの1列表示とTab・Enterによるリンク先を確認してください。

確認した範囲

2026年10月1日の実WordPressによる8条件の検証に加え、10月2日にカテゴリー版・タグ版を実SWELLの投稿内で表示しました。

画像付きと画像なしのカード、PC1280pxの2列とスマホ390pxの1列、固定ページのpost_id指定と呼出元投稿IDの維持を確認しました。

Enterによる記事への移動を確認し、画像付き一覧の実画面を下に掲載しています。

実機のタッチ操作と編集画面での保存は今回の検証対象に含めていません。

導入時はPCとスマホで一覧と画像を確認し、Tabでリンクへ移動してEnterで正しい記事を開けることを確認してください。カテゴリー版とタグ版を両方置くと、同じ記事が両方に出る場合があります。不要な重複があれば片方を使います。

画像付き関連記事の配置例

下の画面は、同じ分類を持つ公開投稿3件を専用の一覧に表示した例です。

アイキャッチを用意した記事には画像が付き、用意していない記事はタイトルだけで表示します。

固定ページでは基準の通常投稿をpost_idで指定し、カテゴリー版とタグ版のどちらかを選んでください。

SWELL標準の関連記事へNEWを付けたい場合はNEWバッジの設定例を参照してください。

戻し方

ショートコードブロックを外し、追加した関数・add_shortcodeの2行・専用CSSを取り除きます。コードを先に停止するとショートコード文字列が表示される場合があるため、ブロックから先に戻してください。キャッシュを更新して確認します。

旧版の実行サンプルは今回のコードと動作が異なるため撤去しました。外部GitHubの旧コードも未同期です。この記事のコードを基準にしてください。

よくある質問：SWELLで関連記事を好きな場所に表示するとき

このカスタマイズでは、関連記事をどこに表示できますか？

記事では、カテゴリーまたはタグが共通する記事を、ショートコードを置いた場所に表示します。本文中、記事末尾、固定ページなどで使う例です。SWELL標準の関連記事の設定は変更しません。

どんな記事が、表示されますか？

記事では、通常の公開投稿だけを取得し、基準の記事とパスワード保護の記事を除外します。カテゴリーやタグがないときは空文字を返し、関係のない最新記事には切り替えません。アイキャッチがなければ画像を省略します。

コードは、どこに追加しますか？

記事では、子テーマのfunctions.phpをバックアップしてから追加します。先頭のPHP開始タグは既存ファイルでは重ねません。旧版の関数と関連する登録コードは併用せず、置き換えます。同じショートコード名を別のプラグインが登録していないことも確認します。

SWELL標準の関連記事カードと、同じ見た目になりますか？

なりません。記事では、本例は専用クラスの簡単な一覧で、SWELL標準の関連記事カードと同一の見た目を再現するものではありません。PCは2列、599px以下は1列です。CSSは追加CSSまたは子テーマのstyle.cssに貼り付けます。

固定ページなどでは、どう指定しますか？

記事では、固定ページなど、基準の投稿を自動判定できない場所ではpost_idに公開済みの通常投稿のIDを指定します。コード内の例のIDは、実際のIDに置き換えます。表示する件数は、1〜20件に制限しています。

カテゴリー版とタグ版は、どう選びますか？

カテゴリー版は基準投稿のカテゴリーとその子孫、タグ版は基準投稿と同じタグを条件にします。複数の分類があれば、いずれかに該当する記事が候補です。基準投稿の親子関係も確認してください。両方を置くと同じ記事が重複する場合があるため、必要に応じて片方を使います。

公開前に、何を確認しますか？

記事では、導入時にPCとスマホで一覧と画像を確認し、Tabでリンクへ移動してEnterで正しい記事を開けることを確認します。基準の記事、パスワード保護記事、自分自身が候補に混ざらないことも確認します。画像付き・画像なしの両方を一覧に出して確認します。

元に戻すには、どうしますか？

記事では、ショートコードブロックを外し、追加した関数・add_shortcodeの2行・専用CSSを取り除きます。コードを先に停止するとショートコード文字列が表示される場合があるため、ブロックから先に戻します。なお、実機のタッチ操作と編集画面での保存は検証対象に含まれていません。