【Cocoon】リスト（エントリーカード）にタグを表示するカスタマイズ

Cocoonのリスト表示（エントリーカード）には、サムネイルの上にカテゴリ情報が表示されますが、タグ情報が表示されません。

タグを多用しているサイトなどでは、エントリーカードからタグ検索の導線を設置したいをケースもあるかと思いますので、今回このカスタマイズを行っていきます。

Cocoonテーマのentry-card.phpの編集

Cocoonの親テーマにあるentry-card.phpファイルをCocoonの子テーマディレクトリにコピーします。

子テーマのディレクトリにコピーしたentry-card.phpを開きます。

一番最後の</div>タグの手前に以下のコードを追加します。

<?php //タグ、カテゴリの表示 ?>
<div class="entry-card-categories-ex"><object><?php the_category_links() ?></object></div>
<?php if (get_the_tags()): ?>
<div class="entry-card-tags-ex" tabindex="0"><object><?php the_tag_links() ?></object></div>
<?php endif; ?>

前後のコードを記載すると以下のようになります。73行目付近ですが、バージョンにより記述が異なる可能性がありますので注意してください。

          <?php //コメント数の表示
          if(is_entry_card_post_comment_count_visible() && is_single_comment_visible()): ?>
            <span class="post-comment-count"><span class="fa fa-comment-o" aria-hidden="true"></span> <?php echo get_comments_number(); ?></span>
          <?php endif; ?>
        </div>
        <div class="entry-card-categorys"><?php the_nolink_categories() ?></div>
      </div>

<?php //タグ、カテゴリの表示 ?>
<div class="entry-card-categories-ex"><object><?php the_category_links() ?></object></div>
<?php if (get_the_tags()): ?>
<div class="entry-card-tags-ex" tabindex="0"><object><?php the_tag_links() ?></object></div>
<?php endif; ?>

    </div><!-- /.entry-card-content -->
  </article>
</a>

コードを反映させるとエントリーカードの表示が以下のように変化します。

カードタイプが「縦型カード2列」の場合

カードタイプが「エントリーカード（デフォルト）」の場合

この段階ではCSSには手を加えていないので、投稿ページで表示されるデザインに近い形でカテゴリとタグが表示されます。

とりあえずデザインが破綻してなければこのまま運用してもよいのですが、細かい調整が必要になった場合はテーマ用のCSSに追記してデザイン調整を行うとよいと思います。

上記のコードの例ではカテゴリのDIVブロックに「entry-card-categories-ex」、タグのDIVブロックに「entry-card-tags-ex」の固有クラス名をつけているので、セレクタと組み合わせて指定してあげるのが良いでしょう。

こちらのカスタマイズにあわせたスタイルシートの記述については後日改めて情報を追加できればと思います。