WooCommerceで商品カテゴリーのリンク付きバナーセクションを作る

WooCommerceの商品カテゴリー(product_cat)では、初期からサムネイルを登録することが可能です。
これを活用してサムネイル登録あり＋紐付く投稿があるカテゴリーでアーカイブページに飛べるバナーを出力し、バナーセクションを作るという小ネタをご紹介したいと思います。

実装手順

まずはWordPressの管理画面メニュー【商品】→【カテゴリー】で、バナーセクションに表示したいカテゴリーのサムネイル画像を登録しておきましょう。

その後、テンプレートファイル等で以下のようなphpの記述を行います。

<?php 
$categories = get_terms('product_cat');
if (!empty($categories)) { ?>
  <section class="banners">
    <?php foreach ($categories as $category) {
        $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
        if ( $thumbnail_id ) { ?>
        <a href="<?= esc_url(get_term_link($category->term_id)); ?>" class="banners__link">
          <img src="<?= esc_url(wp_get_attachment_url($thumbnail_id)); ?>" class="banners__image">
        </a>
        <?php }
      } ?>
  </section>
<?php }

コードの説明

get_termsは$argsで条件抽出が可能ですが、省略してもhide_emptyがtrue・hierarchicalもtrueなので子タームでサムネイルが登録されているものも取得してくれます。

get_term_metaで添付ファイルの投稿IDを取得→wp_get_attachment_urlで取得したIDを利用しソースのURLを取得するという流れとなります。

アーカイブリンクはget_term_linkで取得し、あとはCSSで見た目を整えて完成です。

上記コードではカテゴリー名を出力内容に含めていませんが、$category→nameで取得して出力すればOKです。

シンプルですが、意外と使いそうな実装ケースかなと思いました。
以上、ご参考になれば幸いです。