MENU
  1. Home
  2. WordPress リファレンス
  3. Function
  4. wp_tag_cloud()

wp_tag_cloud()

広告
Function

wp_tag_cloud() は、タグクラウドを簡単に表示するためのWordPressテンプレートタグです。このタグを使うと、タグやタクソノミーの用語を使用頻度に応じて異なるフォントサイズで表示できます。

目次

機能の説明

wp_tag_cloud() は、タグやタクソノミーの用語を自動的に取得し、それらをクラウド形式で表示します。使用頻度の高いタグほど大きく表示され、ユーザーの関心の高いトピックを視覚的に表現するのに役立ちます。

シンプルなコード例

<?php wp_tag_cloud(); ?>

このコードは、デフォルトの設定でタグクラウドを表示します。

使い方の解説

  • wp_tag_cloud() は、タグクラウドを生成し、そのままHTMLとして出力します。
  • オプションを指定して、フォントサイズや表示形式をカスタマイズすることができます。

使用例

<?php
wp_tag_cloud( array(
    'smallest'   => 8,    // 最小フォントサイズ
    'largest'    => 22,   // 最大フォントサイズ
    'unit'       => 'px', // フォントサイズの単位
    'number'     => 10,   // 表示するタグの数
    'format'     => 'flat', // 表示形式 ('flat' または 'list')
    'separator'  => ' | ', // タグの区切り文字
    'orderby'    => 'count', // 並べ替え基準 ('name' か 'count')
    'order'      => 'DESC', // 並べ替え順 ('ASC' または 'DESC')
) );
?>
  • smallest / largest: タグの最小・最大フォントサイズを指定します。
  • number: 表示するタグの数を制限します。
  • format: 'flat' はフラットなHTML形式、'list' は <ul> / <li> リスト形式。
  • orderby / order: タグを名前または使用頻度で並べ替え。

一緒に使うことが多い関連タグ

get_tags()

get_tags() は、すべてのタグを取得し、配列として返します。wp_tag_cloud() のカスタマイズ用データとして活用されます。

<?php
$tags = get_tags( array( 'orderby' => 'count', 'order' => 'DESC' ) );
foreach ( $tags as $tag ) {
    echo '<a href="' . get_tag_link( $tag->term_id ) . '">';
    echo esc_html( $tag->name );
    echo '</a> ';
}
?>
  • get_tags(): すべてのタグを取得し、並べ替えます。
  • get_tag_link(): タグのアーカイブページへのリンクを取得します。

the_tags()

the_tags() は、特定の投稿に関連付けられたタグを表示するテンプレートタグです。

<p>この投稿のタグ: <?php the_tags( '', ', ', '' ); ?></p>
  • the_tags(): 現在の投稿に関連するタグを表示します。
  • 第1引数~第3引数: タグの前後や区切りに挿入する文字列を指定します。

追加情報を取得したい場合

wp_tag_cloud() のカスタムタクソノミー対応やタグの詳細情報取得は、get_terms() 関数と組み合わせると便利です。

get_term()で取得できる情報

<?php
$tag = get_term( 3, 'post_tag' ); // タグIDが3のタグを取得
echo 'タグ名: ' . esc_html( $tag->name );
echo '<br>スラッグ: ' . esc_html( $tag->slug );
echo '<br>説明: ' . esc_html( $tag->description );
?>

出力できる情報

  • name：タグ名
  • slug：タグのスラッグ（URLフレンドリーな名前）
  • description：タグの説明
  • count：タグが使われている投稿の数

使用する事で想定されるトラブル

タグクラウドが表示されない

タグが存在しない、または投稿にタグが割り当てられていない可能性があります。

解決方法

投稿にタグを割り当て、get_tags() でデータが取得できるか確認します。

スタイルが反映されない

テーマやプラグインによるCSSの競合が考えられます。

解決方法

次のようにカスタムCSSでタグクラウドのスタイルを調整します。

.tagcloud a {
    font-size: 12px !important;
    color: #333;
}

特定のタグのみ表示したい

include パラメータを使って特定のタグを表示します。

<?php
wp_tag_cloud( array( 'include' => '1,2,3' ) ); // タグIDが1, 2, 3のタグを表示
?>

Q&A

wp_tag_cloud() でカスタムタクソノミーを表示する方法は？

get_terms() を使ってカスタムタクソノミーの用語を取得し、タグクラウドを生成します。

<?php
$terms = get_terms( array( 'taxonomy' => 'custom_tax', 'orderby' => 'name' ) );
wp_tag_cloud( array( 'include' => wp_list_pluck( $terms, 'term_id' ) ) );
?>

wp_tag_cloud() のリンクを削除できますか？

タグクラウドのHTMLを出力後、リンクを削除するカスタム処理を行います。

<?php
$cloud = wp_tag_cloud( array( 'echo' => false ) ); // クラウドを変数に格納
echo strip_tags( $cloud, '<span>' ); // リンクを削除し、<span> タグだけ残す
?>

使用頻度の低いタグを除外するには？

get_tags() でタグの使用回数を条件に指定します。

<?php
$tags = get_tags( array( 'number' => 10, 'hide_empty' => true ) );
wp_tag_cloud( array( 'include' => wp_list_pluck( $tags, 'term_id' ) ) );
?>

まとめ

wp_tag_cloud() は、タグクラウドを簡単に生成し、視覚的なコンテンツナビゲーションを提供する強力なテンプレートタグです。

get_tags() や get_terms() などの関連タグと組み合わせることで、より柔軟な表示が可能になります。また、CSSでデザインをカスタマイズすることで、サイトのスタイルに合わせた魅力的なタグクラウドを作成することができます。

Function
よかったらシェアしてね！
  • URLをコピーしました！

コメント

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.

目次