スポンサーリンク

【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」の固有クラス名をつけているので、セレクタと組み合わせて指定してあげるのが良いでしょう。

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

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

最短当日★ワードプレスの疑問質問トラブル解決します ご相談無料!初心者歓迎!優しく丁寧、徹底的にサポートします!
Cocoonテーマサイト構築&カスタマイズします ご相談無料★公式サポート対象外もOK!プログラミングはお任せ
CocoonカスタマイズWordPressWeb開発
この記事は良かったですか?
最新情報をお届けします。
クラベルをフォローする
スポンサーリンク
この記事を書いた人
クラベル

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。BPM(ビジネスプロセス管理)、BPR(業務改革)コンサルなどにも従事。世の中すべてピタゴラ装置をモットーに自動化します。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

プロフィール詳細、お仕事のご依頼はこちら

クラベルをフォローする
クラベル

コメント

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