wordPressのテーマSWELLで記事一覧にタグ表示を追加

wordPressのテーマのSWELLを使っているウェブサイトで、記事一覧にタグの表示を加えたいことがあると思います。
今回はカード型ではなく、リスト型で実装したいと思い試行錯誤したないようを記録します。

また、SWELLの深い部分のファイルを修正するため、VSCODEやFTPソフトなどを使ったことが無い方は、作業が難しいかもしれません。

リスト型でタグの表示をすることは、SWELLの構造上不可能と思われます。
今回関連しているCSSのクラス名の指定１１か所を分析しましたが、フレキシブルボックスの設定がaタグにされていることが最大の影響かなと思いました。
ただ、リンクをサムネイルとタイトルなどのbodyの部分と分けて試したのですが、結果は、変わりませんでした。
というとりも、タグ表示が無い記事の部分も表示が崩れてしまいました。

今回の最大のポイント

aタグの中にaタグのリンクが入るというaタグの入れ子、リンクの入れ子となります。
これが、デザイン崩れの最大の原因です。

リンクが貼られていない文字列を追加しても、サムネイルの下に記事タイトルが移動してしまうことは、ありません。

記事一覧で各記事のサムネイルと、記事のタイトルから日付などmeta情報までのbodyの部分に、p-postList__linkというクラス名がありますが、この扱いも注意してください。
リンクしている個所を分けようとしたときに、フレキシブルボックスの設定があるため、タグが無い記事一覧にも影響が出ます。

カード型のレイアウトでタグ表示のコードを販売している人は、きっとリスト型では記事のタイトルの下にタグを表示できないと分かり、カード型で試したのではと推測しています。
サンプルサイトのCSSを解析したら、リスト型で使われているCSSのタグが異なっていました。

設置場所を説明するために、挿入個所の前後一行か二行程度はSWELLのコードを紹介する部分もあります。

今回ご紹介するコードを実装すると、記事一覧のサムネイルの下に、タグが表示されます。

タグ表示のコードのご紹介

下記のコードを画像のように、style_normal.phpにコードを追加することで、実装できます。
このファイルのパスは、こちらです。
parts/post_list/style_normal.php

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

コードの挿入場所の説明

下記のコードをAタグの閉じる場所の下に、設置してください。

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

CSSも、ご紹介します。

c-tagListというクラス名は、タグのアイコンを表示するもので、SWELLのテーマのクラス名です。
.p-postList__bodyも、SWELLがテーマで使うクラス名です。
記事のタイトルから、日付などのmeta情報を表示する部分のクラス名です。

post-tagsと it-tagのクラス名は、私が設定しました。

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

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


 .it-tag {
	font-size: 8px !important;
	color: black !important;
}

.it-tag a {
	color: black;

}

レイアウトが崩れる失敗例は、こちらです。

失敗例

日付の上にタグ表示のコードを追加すると、タイトルなどの部分もサムネイルの下に移動してしまい、レイアウトが崩れてしまいます。
気を付けてください。

こちらのタグ表示のコードも、同様に利用できます。
表示の内容は、先に紹介したコードと同じです。

<!-- タグ表示 -->
<?php
$tags = get_the_tags();
if ($tags) {
    echo '<div class="post-tags it-tag c-tagList">';
    foreach ($tags as $tag) {
        echo '<a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a>';
    }
    echo '</div>';
}
?>