SWELL│投稿リストのカテゴリー表示をタグやカスタムタクソノミーに変更する方法

2023.10.152026.10.31

投稿リストはカードの右上にカテゴリーを表示することができますが、他の情報に差し替えたいことはないでしょうか？

本記事では投稿リストのカテゴリー表示をタグやカスタムタクソノミーに変更する方法を解説します。

サンプル

下記の画像はカテゴリーではなくタグを表示した場合です。

下記の画像は「お知らせ」というカスタム投稿タイプの記事の場合は投稿リストの表示を「ニュース」というカスタムタクソノミーに変更しています。

カスタム投稿タイプ「お知らせ」の記事で、投稿リストの表示をカスタムタクソノミー「ニュース」に変更したサンプル。

SWELLの投稿リストにタグを表示する

子テーマのfunctions.phpで、SWELLのカテゴリー表示用関数を差し替えます。

この関数を呼ぶ投稿一覧全体に影響するため、特定の投稿リストブロックだけを変更するコードではありません。

上書きするのはwp-content/themes/swell/lib/pluggable_parts/list_parts.phpにあるswl_parts__post_list_categoryという関数です。

親テーマのlist_parts.phpは直接編集せず、子テーマのfunctions.phpで同じ名前の関数を定義して上書きします。

下記はSWELL 2.19.0の実装と照合した元のコードです。

説明用なので貼り付けは不要です。

親テーマ更新後は、関数の引数・出力・フックに変更がないか再確認してください。

/**
 * 記事リストのカテゴリー
 */
if ( ! function_exists( 'swl_parts__post_list_category' ) ) :
	function swl_parts__post_list_category( $args ) {
		$the_id   = $args['post_id'] ?? get_the_ID();
		$class    = $args['class'] ?? 'p-postList__cat u-thin';
		$cat_data = get_the_category( $the_id );
		if ( empty( $cat_data ) ) {
			return;
		}

		// 表示するカテゴリー
		$display_cat = swl_get__a_catgory( $cat_data );

		$the_cat = apply_filters( 'swell_post_list_cat_data', [
			'id'   => $display_cat->term_id,
			'name' => $display_cat->name,
		], $the_id );
	?>
		<span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $the_cat['id'] )?>"><?=esc_html( $the_cat['name'] )?></span>
	<?php
}
endif;

functions.phpの挿入

下記のコードを子テーマのfunctions.phpに追加します。

子テーマのfunctions.phpかCode Snippetsの片方だけに登録します。

同名関数を親テーマより前に定義する必要があるため、スニペットでは実行時点を確認してください。

initやafter_setup_theme内の定義では親テーマの関数を置き換えられません。

タグ表示とカスタムタクソノミー表示のコードは同じ関数を上書きするため、どちらか一方だけを使ってください。

if ( ! function_exists( 'swl_parts__post_list_category' ) ) :
    function swl_parts__post_list_category( $args ) {
        $the_id = $args['post_id'] ?? get_the_ID();
        $class  = $args['class'] ?? 'p-postList__tag u-thin';
        $tags   = get_the_tags( $the_id );

        if ( empty( $tags ) || is_wp_error( $tags ) ) {
            return;
        }

        echo '<div class="tags-wrapper">';

        foreach ( $tags as $tag ) {
            ?>
            <span class="<?=esc_attr( $class )?> icon-tag" data-tag-id="<?=esc_attr( $tag->term_id )?>"><?=esc_html( $tag->name )?></span>
            <?php
        }

        echo '</div>';
    }
endif;

このままだと複数のタグが重なって表示されるため、外観 > カスタマイズ > 追加CSSに下記のCSSを追加して並べます。

.tags-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
}
.c-postThumb__cat.icon-tag {
    position: relative;
}

結果です。

SWELLの投稿リストにカスタムタクソノミーを表示する

同様に子テーマのfunctions.phpにコードを入れて上書きします。

カスタム投稿タイプとカスタムタクソノミーの作成

まずはプラグインのCustom Post Type UIを使って、お知らせ（news）というカスタム投稿タイプとニュース（news）というカスタムタクソノミーを追加しました。

プラグインを用いてカスタム投稿タイプ「お知らせ」とカスタムタクソノミー「ニュース」を追加した設定画面。

この例は、news投稿タイプに付けたnewsタクソノミーのタームを1件だけ表示します。

複数件ある場合は取得配列の先頭を使い、優先タームの選択機能はありません。

未設定・取得エラーならラベルを出さず、通常のカテゴリーへの代替表示もしません。

他の投稿タイプは元のカテゴリー表示へ分岐します。

functions.phpを挿入

下記のコードを子テーマのfunctions.phpに追加します。

子テーマのfunctions.phpかCode Snippetsの片方だけに登録します。

同名関数を親テーマより前に定義する必要があるため、スニペットでは実行時点を確認してください。

initやafter_setup_theme内の定義では親テーマの関数を置き換えられません。

コード内の投稿タイプ判定とタクソノミー取得に使うnewsは、それぞれ実際の登録スラッグに置き換えてください。

if ( ! function_exists( 'swl_parts__post_list_category' ) ) :
    function swl_parts__post_list_category( $args ) {
        $the_id   = $args['post_id'] ?? get_the_ID();
        $class    = $args['class'] ?? 'p-postList__cat u-thin';

        if ( get_post_type( $the_id ) === 'news' ) { // カスタム投稿タイプが 'news' の場合
            $news_terms = get_the_terms( $the_id, 'news' ); //カスタムタクソノミー 'news' を表示
            if ( !empty( $news_terms ) && !is_wp_error( $news_terms ) ) {
                $news_term = $news_terms[0];
                ?>
                <span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $news_term->term_id )?>"><?=esc_html( $news_term->name )?></span>
                <?php
            }
        } else {
            // それ以外の場合、通常のカテゴリーを表示
            $cat_data = get_the_category( $the_id );
            if ( !empty( $cat_data ) ) {
                $display_cat = swl_get__a_catgory( $cat_data );
                $the_cat = apply_filters( 'swell_post_list_cat_data', [
                    'id'   => $display_cat->term_id,
                    'name' => $display_cat->name,
                ], $the_id );
                ?>
                <span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $the_cat['id'] )?>"><?=esc_html( $the_cat['name'] )?></span>
                <?php
            }
        }
    }
endif;

結果です。

コードの挿入により、お知らせ記事の投稿リストにカスタムタクソノミーが表示された結果。

表示方法を選んでから確認する

選ぶコード	表示する分類	確認する記事
タグ表示版	通常の投稿に付けたタグ	タグ1件・複数件・タグなしの投稿
カスタムタクソノミー版	対象投稿タイプに付けた指定タクソノミー	分類あり・分類なしの対象記事と通常投稿

2つの例は同じswl_parts__post_list_categoryを定義します。

両方を貼って順番で切り替えるのではなく、目的に合う片方を選んでください。

カスタム版の投稿タイプとタクソノミーは別々の登録情報です。

両方がnewsという名前の例でも、自分のサイトではそれぞれのスラッグへ変更します。

ラベルを変えても、検索・分類に使うカテゴリー自体は変更しません。

まず投稿リストのカテゴリー表示が有効か確認します。

タグ版ではタグのない記事に空のラベルが残らないこと、カスタム版では通常投稿のカテゴリーが保たれることを確認し、複数ラベルの折り返しをスマホ幅で確認してください。