【Cocoonカスタマイズ】「タグクラウド」ウィジェットに現在のカレント表示する方法

はじめに
WordPress標準のカレント判定
完成イメージ
実装手順
さいごに

はじめに

ナビゲーションメニューやカテゴリー一覧などに、現在表示中のページを示すクラスや属性が標準で付与されます。
一方、タグクラウドには、カレントを示すクラスや属性が標準では付与されません。

そこで、現在表示されているページに応じて、どのタグクラウドがカレントであるかを示すCSSクラスを追加します。

この記事では、この方法について説明します。

WordPress標準のカレント判定

WordPressでは、機能によってカレントを示すクラスや属性が異なります（表1参照）。

カレントを示すクラスや属性

ウィジェット	標準で付与されるクラス・属性
ナビゲーションメニュー	`.current-menu-item`
ナビゲーションメニュー（リンク）	`[aria-current="page"]`
カカテゴリー	`.current-cat`
アーカイブ	`[aria-current="page"]`
固定ページ	`[aria-current="page"]`
タグクラウド	なし

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

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

add_filter('wp_generate_tag_cloud_data', function ($tags_data) {
  if (!is_tag()) {
    return $tags_data;
  }

  // 現在表示中のタグIDを取得
  $current_tag_id = get_queried_object_id();

  foreach ($tags_data as $i => $tag) {
    // 現在表示中のタグと一致した場合
    if ((int) $tag['id'] === $current_tag_id) {
      $tags_data[$i]['class'] .= ' current-tag';
      break;
    }
  }

  return $tags_data;
});

ラベル
CSSを追加
以下のコードをstyle.cssに追加します。
```
.current-tag {
  background-color: #fff8e1;
  pointer-events: none;
}
```

さいごに

今回紹介した方法を使えば、「タグクラウド」ウィジェットに現在のページに関連するアイテムをカレント表示させることができます。
カレントメニューを強調表示することで、ユーザーにどのページを見ているのかを視覚的に示すことができます。