こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、WordPressテーマ:賢威7の記事一覧にタグを表示させる方法を紹介したいと思います。

カスタマイズ前の状態で表示されるカテゴリーのように、それぞれの記事に設定されたタグをアーカイブページヘのリンク付きで表示させます。結構手間がかかるように思えるかもしれませんが、編集自体は意外と簡単です。

カスタマイズ前

↓ 賢威7をインストールしたばかりの状態

keni7-post-index-page-tag-before

カスタマイズ後

↓ それぞれの投稿に設定されているタグが表示された

keni7-post-index-page-tag-after-php-2

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. cont.php を編集

トップページやアーカイブページの記事一覧のコードは cont.php に書かれているので、cont.phpを編集してきます。

cont.php の33行目付近に以下のコードがあるので、

    <p class="link-next"><a href="<?php the_permalink() ?>">続きを読む</a></p>
    </div>
    </div>
</article>

1つ目の </div> の後に以下のコードを追加します。

<div class="tag-list">
    <?php the_tags(); ?>
</div>

↓ コード編集後

    <p class="link-next"><a href="<?php the_permalink() ?>">続きを読む</a></p>
    </div>
    <div class="tag-list">
        <?php the_tags(); ?>
    </div>
    </div>
</article>

keni7-post-index-page-tag-conts-php

これでタグ一覧がリンク付きで表示されました。

keni7-post-index-page-tag-after-php-0

2. CSSファイルを編集

抜粋文などが見にくくならないように、タグ一覧の文字をほんの少しだけ小さくしてみます。

親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.tag-list {
    font-size: 14px;
}

↓ コード編集後

keni7-post-index-page-tag-after-php-2

ここでは文字サイズのみ調整しましたが、.tag-list を指定すれば文字の色や背景色などについても変更することが出来ます。

例:文字色の変更)

.tag-list {
    color: tomato;
}

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。