SWELL│投稿タイプやカスタムタクソノミーを指定して関連記事を表示する方法

関連記事で投稿記事の関連記事に別の投稿タイプの記事を掲載したかったり、

単純に全ての新着記事順で表示したかったり、色々カスタマイズしたいことがあると思います。

SWELLの関連記事は表示数などはフックで変えられるものの、カスタマイズはそこまでできないので

同じ見た目て条件のつけられる関連記事表示を作ってみました。

例

標準の設定では、現在の記事を除く公開済みの新着記事を最大6件表示します。

使用例：[related_articles]。以下の修正版を登録した検証環境で表示を確認してください。

ショートコードに投稿タイプやカスタムタクソノミーを指定することで、その記事に関連した記事が表示できるようにしています。

例えば表示している記事に関連している投稿タイプ：works、タクソノミー：areaの場合は下記のようにショートコードを指定して関連記事を表示します。

[related_articles post_type="works" relation="taxonomy" taxonomy="area"]

本記事ではカスタムした関連記事のカスタマイズ方法を紹介します。

著者

motoki

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

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

MOTOKI合同会社

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

SWELLで投稿タイプやカスタムタクソノミーを指定して関連記事を表示する方法

次は、掲載PHPをカスタム投稿とタクソノミーの検証データで実行した表示例です。3件のうち1件は画像なしです。比較用に2件へ同じ画像を設定し、リンク先はWAZAの公開記事にしています。この枠は生成済みHTMLで、閲覧のたびに関連記事を取得するものではありません。

やり方は簡単です。

functions.phpを挿入して、ショートコードをウィジェットの関連記事上に配置するだけです。

クラスはSWELLのものに揃えているので、CSSなどは特に書いていません。

標準の関連記事との重複を調整する

先に掲載ショートコードで目的の候補が出ることを確認します。標準の関連記事も出る場合は、重複を確認してから必要に応じて標準表示をOFFにします。投稿タイプや分類の登録が不足した状態で標準表示を先に停止しないでください。

functions.phpを挿入

子テーマのfunctions.phpのPHP内に次のコードを追加します。旧display_related_articles_shortcodeとその登録を外してから置き換えてください。

エラーが怖い人はCode Snippetsのプラグインを入れて、そこにコードを挿入しましょう。

function waza_related_articles( $atts ) {
    $a = shortcode_atts( array( 'post_type' => 'post', 'relation' => 'recent', 'taxonomy' => '' ), $atts, 'related_articles' );
    $type = sanitize_key( $a['post_type'] );
    $object = get_post_type_object( $type );
    if ( ! $object || ! is_post_type_viewable( $object ) ) { return ''; }
    $relation = $a['relation'];
    if ( ! in_array( $relation, array( 'recent', 'category', 'tag', 'taxonomy' ), true ) ) { return ''; }
    $current = is_singular() ? get_queried_object_id() : 0;
    $args = array( 'post_type' => $type, 'posts_per_page' => 6, 'post_status' => 'publish',
        'has_password' => false, 'post__not_in' => $current ? array( $current ) : array(),
        'orderby' => 'date', 'order' => 'DESC', 'no_found_rows' => true );
    if ( 'recent' !== $relation ) {
        $tax = 'category' === $relation ? 'category' : ( 'tag' === $relation ? 'post_tag' : sanitize_key( $a['taxonomy'] ) );
        if ( ! $current || ! taxonomy_exists( $tax ) || ! is_object_in_taxonomy( $type, $tax )
            || ! is_object_in_taxonomy( get_post_type( $current ), $tax ) ) { return ''; }
        $terms = wp_get_post_terms( $current, $tax, array( 'fields' => 'ids' ) );
        if ( is_wp_error( $terms ) || ! $terms ) { return ''; }
        $args['tax_query'] = array( array( 'taxonomy' => $tax, 'field' => 'term_id', 'terms' => $terms ) );
    }
    $posts = get_posts( $args );
    if ( ! $posts ) { return ''; }
    $title = 'recent' === $relation ? '新着記事' : '関連記事';
    $out = '<section class="l-articleBottom__section -related"><h2 class="c-secTitle">' . esc_html( $title ) . '</h2><ul class="p-postList p-relatedPosts -type-card">';
    foreach ( $posts as $entry ) {
        $out .= '<li class="p-postList__item"><a class="p-postList__link" href="' . esc_url( get_permalink( $entry->ID ) ) . '">';
        if ( has_post_thumbnail( $entry->ID ) ) {
            $out .= '<div class="p-postList__thumb c-postThumb"><figure class="c-postThumb__figure">'
                . get_the_post_thumbnail( $entry->ID, 'medium', array( 'class' => 'c-postThumb__img u-obf-cover' ) ) . '</figure></div>';
        }
        $out .= '<div class="p-postList__body"><div class="p-postList__title">' . esc_html( get_the_title( $entry->ID ) ) . '</div></div></a></li>';
    }
    return $out . '</ul></section>';
}
add_shortcode( 'related_articles', 'waza_related_articles' );

ショートコードの使い方

ショートコードブロックを記事本文や対応するウィジェットへ配置して表示させます。

ショートコードにはオプションで投稿タイプとカスタムタクソノミーを指定できるようにしています。

• [related_articles post_type="post" relation="recent"] : 新着記事（デフォルト）
• [related_articles post_type="post" relation="category"] : 同じカテゴリーの記事
• [related_articles post_type="post" relation="tag"] : 同じタグの記事
• [related_articles post_type="works" relation="taxonomy" taxonomy="custom_taxonomy"] : カスタムタクソノミーに基づく関連記事

以上です。

共有タームから実記事を抽出した結果

2026年10月3日に、通常投稿とworksの両方へareaを登録し、同じ地域を持つ制作事例を実際のSWELL本文から抽出しました。地域1件では2記事、地域2件では3記事が表示され、下書き・パスワード付きの記事は候補に入りませんでした。基準投稿に地域がない場合は、関連記事の見出しも出ません。

本文へ入れた指定は [related_articles post_type="works" relation="taxonomy" taxonomy="area"] です。投稿タイプの表示名ではなくpost_typeのスラッグ、分類の表示名ではなくtaxonomyのスラッグを指定します。入力時は角括弧を一重にしたショートコードブロックを使います。

候補を確認した後、検証投稿のSWELL設定にある「関連記事」を非表示にして標準枠との重複を解消しました。独自の3件は残り、カードのEnter操作で制作事例の個別ページへ到達しました。すべての投稿で標準枠を停止する必要はありません。

新着記事と関連記事の条件を選ぶ

初期値のrecentは新着順の一覧です。記事内容と関連づけたい場合はcategory・tag・taxonomyを選びます。postの記事からworksを探す例なら、areaをworksだけでなく基準となるpostにも登録し、両方の記事に共有するタームを付けてください。

候補が出ない場合は、表示対象の投稿タイプ、基準記事のターム、候補が公開済みか、パスワード保護されていないかの順に確認します。まず共有タームのある1件が出ること、共有タームのない記事と基準記事自身が出ないことを確認してから、件数や位置を調整します。標準関連記事を止めるのは、この確認が済んで重複を避けたい場合です。

制作事例をカテゴリ・タグで絞り込む

投稿の記事から制作事例を案内する場合は、worksにもカテゴリまたはタグが登録されている必要があります。

現在の記事と制作事例の両方へ、同じタクソノミーの同じタームを割り当ててください。

同じ名前の分類を別のタクソノミーに作っても一致しません。

表のショートコードを、記事本文のショートコードブロックへ貼り付けます。

カテゴリ指定とタグ指定を両方置くと、それぞれの条件で関連記事が表示されます。

隔離環境では、現在の記事と「同じ分類の制作事例A」に共通カテゴリと共通タグを設定しました。

カテゴリ指定・タグ指定のどちらも制作事例Aだけを表示し、分類を付けていない制作事例Bは表示しませんでした。

写真の上側がカテゴリ指定、下側がタグ指定の結果です。

制作事例AのリンクをEnterキーで選ぶと、実際の制作事例ページが開きました。

候補が出ない場合は、まず対象の投稿タイプで分類を利用できるか、記事側と候補側の割り当てが一致するか、候補が公開済みかを確認してください。

今回の追加確認はPCで行い、スマホのカード配置は未確認です。

同じカスタム分類の複数項目は、どれか一つの一致で選ぶ

relation=taxonomyで同じタクソノミーを指定した場合、このコードは現在の記事が持つ項目のIDを集め、そのいずれかに一致する記事を候補にします。

基準記事がAとBを持っていても、候補記事がAとBの両方を持つ必要はありません。

隔離環境ではカスタム分類waza_topicを通常投稿と制作事例へ登録し、基準記事にAとBを割り当てました。

その本文内の関連記事欄にはAだけの記事とBだけの記事の2件が表示され、Cだけの記事と基準記事自身は入りませんでした。

Bだけの記事のリンクにもEnterで移動できました。

この結果は本文のショートコードが出す関連記事欄の確認です。

SWELL標準の関連記事欄は別に出力されるため、標準欄に同じ記事や別の分類の記事が見えることとは分けて判断してください。

記事全体で欄を一つにしたい場合は、前述の「標準の関連記事との重複を調整する」の手順に従って表示先を選びます。

AとBの両方が必須となる検索や、二つの異なるタクソノミーを同時に指定する抽出は、このショートコードの現在の仕様に含めていません。

導入前には基準・Aだけ・Bだけ・別分類の4記事を用意し、本文の追加欄だけで結果を確認すると条件を切り分けやすくなります。

戻す場合は配置したショートコードを外し、追加したPHPを停止します。

まとめ

コードは応用が効くので、色々変更して好きな関連記事をカスタムしてみましょう。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

適用条件と戻し方

category・tag・taxonomyは、表示中の記事と候補の投稿タイプが同じタクソノミーを使う場合に絞り込みます。

階層のある分類では、WordPressの既定動作により、指定した親タームの子タームも候補に含まれます。

隔離環境では、表示中の投稿に親のareaを付けたとき、子のareaを持つ制作事例が候補に入り、別のareaの制作事例は除外されることを確認しました。

同じタームIDだけに限定したい場合は、include_childrenを無効にする設計と、その条件での検証が別途必要です。

対象タームなし・不正なタクソノミー・取得エラーでは何も表示しません。

無関係な新着記事へ自動で切り替えません。

recentだけはターム条件を使いません。

非公開の投稿タイプ、パスワード保護記事は候補から外します。画像なしの記事は画像枠を出しません。カスタムタクソノミーを使う場合、元記事側にもそのタクソノミーが登録されているか確認してください。

先に検証環境で新着・ターム一致・タームなしを確認してから、必要に応じて標準関連記事を非表示にします。戻す場合はショートコードブロックを外し、今回の関数と登録を削除し、標準関連記事の設定を戻します。親テーマは編集しません。旧GitHubのコードは今回の修正版と同期していないため、併用しないでください。