広告

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

Cocoonカスタマイズ

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

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

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

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

コピー元:/wp-content/themes/cocoon-master/tmp/entry-card.php
コピー先:/wp-content/themes/cocoon-child-master/tmp/entry-card.php

子テーマのディレクトリにコピーした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」の固有クラス名をつけているので、セレクタと組み合わせて指定してあげるのが良いでしょう。

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

コメント

  1. WP初心者です。本日試してみたのですがタグが表示されません(何も変わりません)。
    以下のどれかが怪しいのではないかと思っていますが、私の知識ではうまくいきません。
    可能であればアドバイス頂けるとありがたいです。

    ・WPのVersion 5.8.3
    ・コピー先の「cocoon-child-master」の下層に「tmp」フォルダがなかったため作成しました。 (「tmp-usr」というフォルダはあったのですが違いますよね?)
    ・コードの挿入はWPテーマエディタ―で行いました。

    メールアドレス: yoshiken31@gmail.com
    どうぞよろしくお願いします。

  2. 探していた情報です。
    参考にさせていただき、早速試したところタグが表示されていました!

    ありがとうございます

タイトルとURLをコピーしました