投稿リストはカードの右上にカテゴリーを表示することができますが、他の情報に差し替えたいことはないでしょうか?
本記事では投稿リストのカテゴリー表示をタグやカスタムタクソノミーに変更する方法を解説します。
サンプル
下記の画像はカテゴリーではなくタグを表示した場合です。

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

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内の定義では親テーマの関数を置き換えられません。
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標準のカテゴリー表示に戻ります。



