WordPress設定

Tag Groups タグをグループ化して表示するプラグイン 設定方法と使い方

Tag Groups タグをグループ化して表示するプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)のタグをグループ化して表示するプラグイン Tag Groupsの設定方法と使い方を解説します。

この記事を見ることで得られるメリット

  • Tag Groupsの使い方と詳細な設定方法がわかります

Tag Groupsで実現できること

 Tag Groupsはタグをグループ化することでタグを一覧化して見やすくし、利用者の使い勝手を向上させることができます。

無料版(Free)と有料版(Pro)があり、無料版では、各タグは 1 つのグループにのみ割り当てることができます。

ブロックディタでブロックとして利用可能です。他にもウィジェット機能やテキストエディタでショートコードを埋め込んで投稿記事内やサイドバーなどの任意の場所に表示させることもできます。

  • 当記事では無料版(Free)の機能を取上げています

Tag Groupsの機能

Tag Groupsの主な機能は次の通りです。

  • タグリストを表示
  • タグクラウドを表示
  • アルファベット順タグインデックスを表示
  • アルファベット順タグクラウドを表示
  • アコーディオンタグクラウドを表示
  • タググループ情報を表示

Tag Groupsのドキュメント

Tag Groupsの公式サイトにはドキュメントページがあり、設定する時に参考になる情報が載っています。

すべて英語で、日本語に翻訳しても難解な内容ですが、時間を掛ければ理解できる内容です。

Tag Groupsの各機能の説明サイトのリンクです↓
https://taxopress.com/docs/introduction-tag-groups/

Tag Groupsのインストール方法

Tag GroupsプラグインをWordPressにインストールする方法を解説します。

  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規プラグインを追加」をクリックします
  3. 検索ボックスに”Tag Groups”と入力すると下に検索結果が表示されます
  4. ”Tag Groups is the Advanced Way to Display Your Taxonomy Terms”の今すぐインストールボタンをクリックします
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
“Tag Groups”のインストール完了画面“Tag Groups”のインストール完了画面

↑Tag Groupsのインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Tag Groups"を有効化すると表示されるプラグイン画面“Tag Groups”を有効化すると表示されるプラグイン画面

これでTag Groupsのインストールと有効化は完了です。

Tag Groupsの設定と使い方

Tag Groupsプラグインを有効化するとダッシュボード(管理画面)の中に「Tag Groups」が表示されます↓

Tag Groupsプラグインのダッシュボード(管理画面)Tag Groupsプラグインのダッシュボード(管理画面)

Tag Groupsの設定項目

Tag Groupsには下記の機能と設定項目があります。 ※一部の項目名は日本語に翻訳しています。

  • ホーム・家(Home): 最初のステップとタググループ管理への内部リンク
  • タクソノミー(Taxonomies): タググループを使用するタクソノミーを選択
  • フロントエンド(Font End): サンプルショートコードと各タグクラウドの外観を変更
  • バックエンド(Back End):WordPress管理者画面の投稿とタグへのタググループ絞り込み機能のオン/オフ
  • Tools(ツール): 設定情報のエクスポート/インポートや情報など
  • Upgrade to Pro(プロ仕様にアップグレードする): 有料版の外部リンク

設定画面は基本的には日本語ですが、詳細説明は英語になっている箇所もあります。 なので、以降はすべて日本語に翻訳した画像を載せています。 ※画像の設定は全てデフォルトの状態です。

ホーム・家(Home)

Tag Groupsプラグインのホーム・家(Home)画面Tag Groupsプラグインのホーム・家(Home)画面

↑初期ウィザード(最初のステップ)のリンクとタググループの管理画面への内部リンクがあります。

初期設定ウィザード(最初のステップ)は実施しなくても大丈夫です。
※サンプルのタググループを作成してサンプルページのプレピューでタグクラウドの見え方を確認したい場合は実施してください。

タクソノミー(Taxonomies)

Tag Groupsプラグインのタクソノミー(Taxonomies)画面Tag Groupsプラグインのタクソノミー(Taxonomies)画面

↑タクソノミー(分類)を選択することができます。

フロントエンド(Font End)

フロントエンド(Font End)には下記2つの画面があります

  • ショートコード
  • テーマと外観

ショートコード

Tag Groupsプラグインのフロントエンド(Font End)・ショートコード画面Tag Groupsプラグインのフロントエンド(Font End)・ショートコード画面

ショートコード画面には下記の6つのショートコードのサンプルが載っています。

  • タブ付きタグクラウド
  • アコーディオン
  • タグ一覧
  • アルファベット順のタグクラウド
  • アルファベット順のタグインデックス
  • グループ情報
ショートコード・タブ付きタグクラウド
Tag Groupsプラグインのショートコード・タブ付きタグクラウドTag Groupsプラグインのショートコード・タブ付きタグクラウド

↑タブ付きクラウドのサンプルコード(例)が載っています。

ショートコード・アコーディオン
Tag Groupsプラグインのショートコード・アコーディオンTag Groupsプラグインのショートコード・アコーディオン

↑アコーディオンタグクラウドのサンプルコード(例)が載っています。

ショートコード・タグ一覧
Tag Groupsプラグインのショートコード・タグ一覧Tag Groupsプラグインのショートコード・タグ一覧

↑タグリストのサンプルコード(例)が載っています。

ショートコード・アルファベット順のタグクラウド
Tag Groupsプラグインのショートコード・アルファベット順のタグクラウドTag Groupsプラグインのショートコード・アルファベット順のタグクラウド

↑アルファベット順タグクラウドのサンプルコード(例)が載っています。

ショートコード・アルファベット順のタグインデックス
Tag Groupsプラグインのショートコード・アルファベット順のタグインデックスTag Groupsプラグインのショートコード・アルファベット順のタグインデックス

↑アルファベット順タグインデックスのサンプルコード(例)が載っています。

ショートコード・グループ情報
Tag Groupsプラグインのショートコード・グループ情報Tag Groupsプラグインのショートコード・グループ情報

↑タググループ情報のサンプルコード(例)が載っています。

テーマと外観

Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観画面Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観画面

↑各タグクラウドやアコーディオンタグクラウドなどの外観を変更できます。
外観は下記の8種類のプリセットから選択できます。

  • delta
  • base
  • ui-gray
  • ui-lightness
  • ui-darkness
  • blitzer
  • aristo
  • Don’t load a theme.

この外観を変更する機能は使用しているWordPressテーマによって利用できない場合があります。※CocoonはOKでしたが、JINはNGでした

delta
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【delta】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【delta】

base
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【base】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【base】

ui-gray
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-gray】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-gray】

ui-lightness
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-lightness】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-lightness】

ui-darkness
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-darkness】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【ui-darkness】

blitzer
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【blitzer】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【blitzer】

aristo
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【aristo】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【aristo】

Don’t load a theme.
Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【Don't load a theme.】Tag Groupsプラグインのフロントエンド(Font End)・テーマと外観の【Don’t load a theme.】

バックエンド(Back End)

Tag Groupsプラグインのバックエンド(Back End)画面Tag Groupsプラグインのバックエンド(Back End)画面

↑WordPress管理画面の投稿とタグ画面内にTag Groupsプラグインのタググループの絞り込み機能の表示するか否かを選択できます。

Tools(ツール)

ツールには下記5つの画面があります

  • 応急処置
  • システムインフォメーション
  • デバッグ
  • 輸出入
  • リセット

ツール・応急処置

Tag GroupsプラグインのTools(ツール)・応急処置Tag GroupsプラグインのTools(ツール)・応急処置

↑タグを新しい形式のタググループに移行したり、タグページのフィルターをリセットできます。

ツール・システムインフォメーション

Tag GroupsプラグインのTools(ツール)・システムインフォメーションTag GroupsプラグインのTools(ツール)・システムインフォメーション

↑WordPressのシステム情報が表示されます。

ツール・デバッグ

Tag GroupsプラグインのTools(ツール)・デバッグTag GroupsプラグインのTools(ツール)・デバッグ

↑wp-config.phpファイルに設定コードを追記する必要がある、上級者向けの機能です。

ツール・輸出入

Tag GroupsプラグインのTools(ツール)・輸出入Tag GroupsプラグインのTools(ツール)・輸出入

↑Tag Groupsプラグインの設定をエクスポート/インポートできます。

ツール・リセット

Tag GroupsプラグインのTools(ツール)・リセットTag GroupsプラグインのTools(ツール)・リセット

↑Tag Groupsプラグインで作成したタググループを削除できます。設

Upgrade to Pro(プロ仕様にアップグレードする)

Tag GroupsプラグインのUpgrade to Pro(プロ仕様にアップグレードする)を押すと表示される有料版の案内サイトTag GroupsプラグインのUpgrade to Pro(プロ仕様にアップグレードする)を押すと表示される有料版の案内サイト

↑外部リンクになっていて、有料版の案内が表示されます。

Tag Groupsプラグインの使い方

ここからはTag Groupsプラグインの実際の使い方を解説します。

  • タググループの管理
  • タグの作成・編集画面にタググループ選択リストを表示
  • 投稿一覧画面のタググループフィルター機能
  • ショートコードを使って任意の場所にタグクラウドを表示

タググループの管理

Tag GroupsプラグインのTag Group Admin(タググループの管理)Tag GroupsプラグインのTag Group Admin(タググループの管理)

↑Tag Groupsプラグインを有効化するとWordPressの管理画面(ダッシュボード)にTag Group Adminが追加されます。

Tag GroupsプラグインのTag Group Admin(タググループの管理)画面Tag GroupsプラグインのTag Group Admin(タググループの管理)画面

↑この画面でタググループを追加・削除・変更ができます。

タグの作成・編集画面にタググループ選択リストを表示

WordPressの管理画面(ダッシュボード)のタグ画面に表示されたタググループの選択リストWordPressの管理画面(ダッシュボード)のタグ画面に表示されたタググループの選択リスト

↑Tag Groupsプラグインを有効化すると、WordPressの管理画面(ダッシュボード)のタグ画面に前出のタググループの管理で作成したタググループを割り当てることがきるるようになります。各タグの編集画面内にも同様にタググループの選択リストが追加されます。

投稿一覧画面のタググループフィルター機能

WordPressの管理画面(ダッシュボード)の投稿一覧画面のタググループフィルター機能WordPressの管理画面(ダッシュボード)の投稿一覧画面のタググループフィルター機能

↑Tag Groupsプラグインを有効化すると投稿一覧画面にタググループのフィルター機能が追加されます。

ショートコードを使って任意の場所にタグクラウドを表示

下記のショートコードを表示させいたい場所に貼り付けます。

ショートコードの出力画像はすべてパラメーター無しで表示させています。
※使用しているWorPressテーマやプラグインによってタグクラウドが表示されない場合があります。

タグリストを表示


[tag_groups_tag_list]

Tag Groupsプラグインのタグリスト[tag_groups_tag_list]出力画面Tag Groupsプラグインのタグリスト[tag_groups_tag_list]出力画面

タグクラウドを表示


[tag_groups_cloud]

アルファベット順タグインデックスを表示


[tag_groups_alphabetical_index]

Tag Groupsプラグインのアルファベット順タグインデックス[tag_groups_alphabetical_index]出力画面Tag Groupsプラグインのアルファベット順タグインデックス[tag_groups_alphabetical_index]出力画面

アルファベット順タグクラウドを表示


[tag_groups_alphabet_tabs]

アコーディオンタグクラウドを表示


[tag_groups_accordion]

タググループ情報を表示


[tag_groups_info]

Tag Groupsプラグインのタググループ情報[tag_groups_info]の出力画面Tag Groupsプラグインのタググループ情報[tag_groups_info]の出力画面

タグクラウドの設定方法と使い方

ウィジェット機能を使ってサイドバーにタグクラウドを表示する手順と方法を解説します。

一般的なウィジェット機能を使ったショートコードとまったく同じ手順になります

タグクラウドの設定手順

  1. WordPressのダッシュボード(管理者画面)の「外観」→ 「ウィジェット」に入る
  2. 任意の場所で「ショートコード」を押す
  3. ショートコード入力欄にタグクラウドのショートコードを入力して、最後に更新ボタンを押して保存する

使っているWordPressテーマや、インストールされている他のプラグインの影響などによっては正常にタグクラウドが表示されない場合があります

実際にTag Groupsを使った感想とメリットデメリット

実際にTag Groupsを使ってみた感じたメリットとデメリットです。

Tag Groupsのメリット

タグの数が多い場合はグループ化したほうが利用者側の見やすさが向上するため、サイトの巡回率が上がり滞在時間を伸ばすことにつながります。
その結果、SEOにも効果が期待できる点がメリットです。

Tag Groupsのデメリット

タググループ名は自動で生成されるので表示されますが、タググループ名以外の例えば”タグ一覧”などの見出しは自動作成されないため、必要な場合は手動でH2やH3を使って見出しを作成する必要があります。

公式サイトのドキュメントも英語で、翻訳しても日本語が可笑しい箇所がどうしてもあるので、意味理解がし難い面もあります。

まとめ

Tag Groupsプラグインは思い通りにタグクラウドを表示させるが難しく、使いこなすには敷居が高く、完全に上級者向けです。

そのうえ、CSSなどの知識がないと、見た目を思い通りにカスタマイズできません。

使用しているWorPressテーマやプラグインなどの競合が原因で正常にタグクラウドが出力されない場合もあるので初心者には不向きです。

タグをグループ化しないで、カテゴリーで代用できないかを検討したほうが時間の節約になるかもしれません。

タグのグループ化が必須ではない場合は、他のタグクラウド専用のプラグインを使うか、タグのグループ化はできませんが、タグクラウドも表示できるTaxoPressをを使うことをおすすめします。