タグクラウドをドロップダウン・チェックボックス形式で表示する方法

カテゴリーページ内のタグクラウドを表示する方法

カテゴリーページを開くと、そのカテゴリーに属するタグクラウドがチェックボックス形式で表示されます。
複数のタグをチェックボックスで選択することで、関連する投稿を一覧で表示できます。
なお、カテゴリーページ以外ではタグクラウドは表示されません。

親カテゴリごとのタグクラウド設置方法について < SWELLに関する質問

-

users.swell-theme.com

使用方法

以下にショートコードを示します。

[my_category_tag_search]

実装手順

以下のコードをfunctions.phpに追加します。

add_shortcode('my_category_tag_search', function () {
  if (!is_category()) {
    return '';
  }

  // 現在のカテゴリーページのカテゴリーIDを取得
  $current_cat = get_queried_object();
  $cat_id      = isset($current_cat->term_id) ? $current_cat->term_id : 0;

  // カテゴリーに属す投稿を取得
  $posts = get_posts([
    'category'       => $cat_id,
    'posts_per_page' => -1,
    'fields'         => 'ids',
  ]);

  if (empty($posts)) {
    return '<p>タグはありません。</p>';
  }

  // カテゴリーに属すタグを取得
  $tags = get_terms([
    'taxonomy'   => 'post_tag',
    'orderby'    => 'name',
    'hide_empty' => true,
    'object_ids' => $posts,
  ]);

  if (empty($tags) || is_wp_error($tags)) {
    return '<p>タグはありません。</p>';
  }

  ob_start();
  ?>
  <form method="get" action="<?= esc_url(home_url('/')); ?>">
    <input type="hidden" name="cat" value="<?= esc_attr($cat_id); ?>" />
    <?php foreach ($tags as $tag): ?>
      <div>
        <input type="checkbox" value="<?= esc_attr($tag->slug); ?>" id="tag_<?= esc_attr($tag->slug); ?>" name="tag[]" />
        <label for="tag_<?= esc_attr($tag->slug); ?>">
          <?= esc_html($tag->name); ?> (<?= (int)$tag->count; ?>)
        </label>
      </div>
    <?php endforeach; ?>
    <button type="submit" class="key-btn btn">表示</button>
  </form>
  <?php
  return ob_get_clean();
});

カテゴリー選択に応じてタグクラウドを動的に表示する方法

メニューからカテゴリーを選択すると、そのカテゴリーに属するタグクラウド一覧が動的に表示されます。
さらに、複数のタグをチェックボックスで選択することで、関連する投稿を一覧で表示できます。

完成イメージ

使用方法

以下にショートコードを示します。

[my_category_tag_search]

実装手順

以下のコードをfunctions.phpに追加します。

// ショートコードを追加
add_shortcode('my_category_tag_search', function () {
  // 現在のカテゴリーIDを取得
  $current_category = get_queried_object();
  $current_cat_id   = isset($current_category->term_id) ? $current_category->term_id : 0;

  ob_start();
  ?>
  <div class="category-tag-search">
    <form class="category-tag-search__form" method="get" action="<?= esc_url(home_url('/')); ?>">

      <!-- カテゴリーを選択 -->
      <?php wp_dropdown_categories([
        'orderby'         => 'name',
        'hide_empty'      => 1,
        'show_option_all' => 'カテゴリー選択',
        'name'            => 'cat',
        'id'              => 'category-tag-search__category',
        'selected'        => $current_cat_id,
        'hierarchical'    => true,
        'depth'           => 0,
      ]); ?>

      <!-- タグを表示 -->
      <div id="category-tag-search__tags" class="category-tag-search__tags"></div>

      <!-- ボタン -->
      <button type="submit" class="category-tag-search__button key-btn btn">表示</button>
    </form>
  </div>
  <?php
  return ob_get_clean();
});


/**
 * カテゴリーに紐づくタグを取得
 *
 * @return void
 */
if (!function_exists('get_tags_by_category')):
function get_tags_by_category() {
  $cat_id = isset($_GET['cat_id']) ? intval($_GET['cat_id']) : 0;

  if ($cat_id <= 0) {
    wp_send_json(['tags' => []]);
  }

  // カテゴリーに属す投稿を取得
  $posts = get_posts([
    'category'       => $cat_id,
    'posts_per_page' => -1,
    'fields'         => 'ids',
  ]);

  if (empty($posts)) {
    wp_send_json(['tags' => []]);
  }

  // 投稿に紐づくタグを取得
  $tags = wp_get_object_terms($posts, 'post_tag', ['fields' => 'all']);

  if (empty($tags) || is_wp_error($tags)) {
    wp_send_json(['tags' => []]);
  }

  // タグ情報を返却
  wp_send_json([
    'tags' => array_map(function ($tag) {
      return [
        'id'   => $tag->term_id,
        'name' => $tag->name,
        'slug' => $tag->slug,
      ];
    }, $tags),
  ]);
}
endif;


// Ajaxアクションを追加
add_action('wp_ajax_get_tags_by_category', 'get_tags_by_category');
add_action('wp_ajax_nopriv_get_tags_by_category', 'get_tags_by_category');


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .category-tag-search__tag {
    display: block;
  }
  <?php

  $handle = 'category-tag-search';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    // カテゴリー変更を監視
    $('#category-tag-search__category').off('change').on('change', function () {
      const categoryId = $(this).val();
      loadTags(categoryId);
    });

    // 初期選択カテゴリーのタグをロード
    const categoryId = $('#category-tag-search__category').val();

    if (categoryId) {
      loadTags(categoryId);
    }

    /**
     * カテゴリーに紐づくタグを取得・表示
     *
     * @param {string|number} categoryId カテゴリーID
     * @return {void}
     */
    function loadTags(categoryId) {
      $.ajax({
        url: CategoryTagSearch.ajaxurl,
        data: {
          action: 'get_tags_by_category',
          cat_id: categoryId,
        },
        type: 'GET',
        success: function (data) {
          const tagContainer = $('#category-tag-search__tags');

          tagContainer.html(
            '<h3 class="category-tag-search__heading">クラウドタグ</h3>'
          );

          if (data.tags && data.tags.length > 0) {
            $.each(data.tags, function (index, tag) {
              const label = $('<label>', {
                class: 'category-tag-search__tag'
              }).append(
                $('<input>', {
                  type: 'checkbox',
                  name: 'tag[]',
                  value: tag.slug,
                  class: 'category-tag-search__checkbox'
                }),
                ' ',
                tag.name
              );

              tagContainer.append(label);
            });
          } else {
            tagContainer.append(
              '<p class="category-tag-search__empty">タグはありません。</p>'
            );
          }
        },
      });
    }
  });
  <?php

  wp_register_script($handle, false, ['jquery'], false, true);
  wp_enqueue_script($handle);
  wp_add_inline_script($handle, ob_get_clean());

  // Ajax用URLをJSに設定
  wp_localize_script($handle, 'CategoryTagSearch', [
    'ajaxurl' => admin_url('admin-ajax.php'),
  ]);
});