WordPress開発入門 #1：タグクラウドを出力する「wp_tag_cloud」関数の使い方（初心者向け！）
この記事には一部プロモーションが含まれています。
タグクラウドとは、タグのリストの一種！ 単に各タグを一覧表示するのではなく、「人気のタグほど大きな文字」で表示できるのが、タグクラウドの強みですね。
この記事ではWordPressでタグクラウドを表示する、「wp_tag_cloud」関数のレシピ・使い方を、初心者向けに解説していきます。
上記のイメージ画像をご覧ください。
「とくに人気」のタグは、free（無料）だとパッと見でわかります。「人気なほど大きく、不人気なほど小さい」のように、視覚的に"おすすめリンク"を表現可能！ この視覚性こそ、タグクラウドの魅力です。
↑↑↑ 解説文にて太字を使っているのも、「言葉の重要性を視覚的に表す」やり方という意味で、”タグクラウド的”と言えます。
タグクラウドを表示する「wp_tag_cloud」関数のレシピ・使い方
WordPressではwp_tag_cloud()を使えば、かんたんにタグクラウドを表示できちゃいますよ！
※WordPress開発者リソースでは、さらに詳しい解説を確認できます
WordPress 開発者リソース：wp_tag_cloud()
引数を指定しない場合
<?php wp_tag_cloud(); ?>引数を指定しない場合、下記のデフォルト設定が適用されます。
人気順に最大「45個」のタグが表示される
一番人気のタグのフォントサイズ：22pt
最も不人気なタグのフォントサイズ：8pt
引数を指定する場合
<?php
$tag_cloud_settings = ['number' => 20, 'smallest' => 5, 'largest' => 27];
wp_tag_cloud($tag_cloud_settings);
?>wp_tag_cloud()の引数を指定する方法
引数の型：wp_tag_cloud関数の引数は、連想配列である
'number'：人気順に最大何個のタグを表示するか
'smallest'：最も不人気なタグのフォントサイズ
'largest'：一番人気のタグのフォントサイズ
Note. タグクラウドの最大個数は45個（['number' => 45]が最大値）
※ UX（ユーザーエクスペリエンス）を考慮すると、45個でも多すぎる点に留意のこと
Note. PHPの連想配列は、['key' => 'value']形式で表す
（valueが数値の場合は、['Key' => 10]のように引用符（''）は不要）
引数を直接的に指定
<?php wp_tag_cloud(['number' => 20, 'smallest' => 5, 'largest' => 27]); ?>上記のPHPコードでは、引数の連想配列に3組の値を設定しました。ですが、1組や2組だけの連想配列でも、問題ありません。
最大タグ数のみを指定
<?php wp_tag_cloud(['number' => 30]); ?>[PR] エンジニアのためのWordPress開発入門 (Engineer's Library) 単行本
- Amazonレビュー：★4.1
▶ WordPress本のAmazonランキングをチェックしよう
補足：カテゴリーとタグの違い
WordPress開発をはじめたばかりの頃は、「カテゴリーとタグって何が違うの？」のような疑問を感じる場合も！ かんたんに復習していきましょう。
・カテゴリー：階層構造（大小関係）をもち、広い範囲を表す
・タグ：フラットな構造（どれも同じ大きさ）であり、狭い範囲を表す
▼noteでのタグ分けの実例▼
カテゴリーはブログの大まかな分類、タグは詳細なキーワード
例えば【お茶】というカテゴリーを想像してみましょう！ 「上の階層に飲み物、下の階層に緑茶」を想定できますね。
仮に「飲み物.com」のようなサイトの場合、「お茶」は広い範囲を表すので、カテゴリーにうってつけ！
一方「麦茶」はどうでしょう！？
もちろんカテゴリーにしても、致命的な問題にはなりません。
ですが「お茶」に比べると、狭い範囲を表すので、タグ向きのキーワードと言えます。もしも「麦茶」「ウーロン茶」「ジャスミン茶」etc…を、カテゴリー化してしまうと、サイト構造に問題が生じやすい.…のです。
カテゴリーが多すぎるのが、問題の原因！
そこで、「飲み物.com」というサイトならば、以下のようにカテゴリーとタグを使い分けるのが、好ましいでしょう。
カテゴリー分けの例
飲み物.com
｜－お茶
｜－ジュース
｜－炭酸飲料
｜－果物ジュース
｜－天然水
Note：カテゴリーは階層構造（大小関係）をもち、広い範囲を表す！
タグ分けの例
お茶系のタグ：麦茶・緑茶・ウーロン茶etc…
ジュース系のタグ：コーラ・メロンソーダ・オレンジジュースetc…
Note：タグはフラットな構造（どれも同じ大きさ）であり、狭い範囲を表す！
［PR］【Amazonプライム会員限定】Audible「3か月無料」体験キャンペーン中－2024年7月22日まで
wp_tag_cloud()のまとめ
【引数なし】：
45個のタグを、8pt～22ptで表示する
【引数あり】：
wp_tag_cloud([number => タグ数, smallest => 最小サイズ, largest => 最大サイズ]);
ここまで読んでもらえて、とっても嬉しいです！
以上、なつめ温泉でした。
［PR］WordPress開発のおすすめ本▼
『エンジニアのためのWordPress開発入門 (Engineer's Library)』
- Amazonレビュー：★4.1