SWELL｜投稿リストにタグを表示させる方法

この記事では、SWELLの投稿リストブロックのカスタマイズについて説明しています。

SWELLでは投稿リストにカテゴリーはデフォルトで表示されますが、
「タグも一緒に表示させたい！」と思ったことはありませんか？
この記事では、簡単なPHPとCSSのカスタマイズで、投稿リストにタグを表示させる方法をわかりやすく解説します！

投稿リストのカスタマイズとは？

SWELLの投稿リストブロックはとても便利ですが、初期設定では「カテゴリー」のみ表示されます。
しかし、記事に関連する「タグ」も表示させることで、読者がよりスムーズに興味のある情報へアクセスできるようになります。

SWELLの投稿リストでタグを表示させるために必要なこと

タグを投稿リストに表示させるには、以下の手順を行います。

1. 子テーマのPHPを編集する
2. CSSでデザインを調整する

順番に解説していきますね✨

PHPの編集

まずは、タグを表示させるためのコードを子テーマのPHPに追加します。

1. 子テーマのファイルを開く

style_normal.phpに追加することで、実装できます。
このファイルのパスはこちらです。
parts/post_list/style_normal.php

必ず親テーマから子テーマに、ディレクトリの位置も正確にコピーして設置してください。

2. 以下のコードを追加

以下のコードを追記してください。

<!-- タグ表示の追加部分 -->
<?php
if (has_tag()) {
    echo '<div class="post-tags it-tag c-tagList">';
    the_tags("", " ", ""); // カンマで区切ることに注意
    echo '</div>';
}
?>

ポイント：
• has_tag()は、記事にタグがある場合のみ表示する条件です。
• the_tags()でタグを表示します。

CSSでデザインを調整

次に、表示されるタグのデザインを整えます。

「外観」→「カスタマイズ」→「追加CSS」に追記していきます。

以下のコードを追加してください。

/*=================*/
/** 投稿リストのタグ表示 **/
/*=================*/

/* アイコン非表示 */
.c-tagList:before {
    display: none;
}

/* タグ間の余白を調整 */
.p-postList__body .post-tags a {
    display: inline-block;
    margin-right: 5px; 
}

.p-postList__link {
    display: inline;
}

.post-tags {
    display: inline-block;
}

/* タグのデザイン調整 */
.it-tag a {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background-color: #000; /* 背景色 */
    border-radius: 16px; /* 背景角丸 */
    padding: 2px 10px; /* 背景余白 */
    margin-top: 3px;
    font-size: 12px !important; /* 文字サイズ */
}

ポイント：
• タグの背景色や文字サイズを自由に変更できます。
• margin-rightやpaddingで余白を調整すると見やすくなります。

いかがでしたか？
投稿リスト（記事一覧）にタグを表示させるだけで、サイトの利便性がぐっとアップしますよね！
PHPファイルの扱いに注意する必要はありますが、コピペで簡単にカスタマイズできるテーマなので、
ぜひ挑戦してみてください✨