Amazon10/19まで!プライム感謝祭開催中! セール会場へ

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

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

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

サンプル

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

投稿リストのカテゴリー表示部分にタグを表示させたサンプル。

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

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

著者

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

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

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

やり方は簡単で、子テーマのfunctions.phpで投稿リストのカテゴリー表示用の関数を上書きするだけです。

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

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

下記はSWELL本体の元のコードなので、この部分はコピーする必要はありません。

/**
 * 記事リストのカテゴリー
 */
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)というカスタムタクソノミーを追加しました。

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

このお知らせの投稿記事だけ投稿リストはカスタムタクソノミーをカードに表示させます。

functions.phpを挿入

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

子テーマのfunctions.phpかCode Snippetsの片方だけに登録します。同名関数を親テーマより前に定義する必要があるため、スニペットでは実行時点を確認してください。initやafter_setup_theme内の定義では親テーマの関数を置き換えられません。

コード内の2か所の’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という名前の例でも、自分のサイトではそれぞれのスラッグへ変更します。

ラベルを変えても、検索・分類に使うカテゴリー自体は変更しません。まず投稿リストのカテゴリー表示が有効か確認します。タグ版ではタグのない記事に空のラベルが残らないこと、カスタム版では通常投稿のカテゴリーが保たれることを確認し、複数ラベルの折り返しをスマホ幅で確認してください。

まとめ

SWELLの投稿リストは便利なのでついつい使いたくなりますが、拡張性も実はあります。

フックやコードを上書きして自分なりの投稿リストにカスタマイズしてみましょう!

作業前に子テーマのfunctions.phpをバックアップしておきましょう。

元に戻すときは、追加した関数と追加CSSを削除すればSWELL標準のカテゴリー表示に戻ります。

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

よくある質問:SWELLの投稿リストのカテゴリー表示をタグやカスタムタクソノミーに変更するとき

投稿リストのカテゴリー表示を、タグなどに変えられますか?

変えられます。記事では、投稿リストはカードの右上にカテゴリーを表示しますが、これをタグやカスタムタクソノミーに変更する方法を解説しています。

どうやって変更しますか?

記事では、子テーマのfunctions.phpで、投稿リストのカテゴリー表示用の関数を上書きします。上書きするのはwp-content/themes/swell/lib/pluggable_parts/list_parts.phpにある関数で、親テーマのlist_parts.phpは直接編集せず、子テーマで同じ名前の関数を定義して上書きします。

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

記事では、子テーマのfunctions.phpかCode Snippetsの片方だけに登録します。同名関数を親テーマより前に定義する必要があるため、スニペットでは実行時点を確認します。initやafter_setup_theme内の定義では、親テーマの関数を置き換えられません。

タグ版とカスタムタクソノミー版は、両方入れてもよいですか?

入れないでください。記事では、2つの例は同じswl_parts__post_list_categoryを定義するため、両方を貼って順番で切り替えるのではなく、目的に合う片方を選びます。

カスタムタクソノミー版では、何を置き換えますか?

記事では、コード内の2か所の’news’を、ご自身のカスタム投稿タイプとカスタムタクソノミーのスラッグに置き換えます。投稿タイプとタクソノミーは別々の登録情報で、両方がnewsという名前の例でも、自分のサイトではそれぞれのスラッグへ変更します。

タグが複数あると、表示が重なりませんか?

そのままだと複数のタグが重なって表示されます。記事では、外観 > カスタマイズ > 追加CSSにCSSを追加して並べます。複数ラベルの折り返しは、スマホ幅で確認します。

カテゴリー自体も変更されますか?

変更されません。記事では、ラベルを変えても、検索・分類に使うカテゴリー自体は変更しません。まず投稿リストのカテゴリー表示が有効か確認します。

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

記事では、タグ版ではタグ1件・複数件・タグなしの投稿を確認し、タグのない記事に空のラベルが残らないことを確認します。カスタム版では、分類あり・分類なしの対象記事と通常投稿を確認し、通常投稿のカテゴリーが保たれることを確認します。元に戻すときは、追加した関数と追加CSSを削除すれば、SWELL標準のカテゴリー表示に戻ります。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次