WordPressのテーマを自作しよう！タグ一覧ページ・タグクラウド作成方法タグ関連はこれを読めば大丈夫！

Satoken

WEBメモ

2023.07.10

WordPress

画像:WordPressのテーマを自作しよう！タグ一覧ページ・タグクラウド作成方法タグ関連はこれを読めば大丈夫！

サトケン

ハメカメ師匠。
今更ながらWordPressのTag（タグ）に関してまとめました。

ハメカメ

今更じゃのう・・・
相変わらず・・もっさいのぅ・・・

サトケン

・・・・

01.タグ一覧ページの作成方法
02.タグクラウドの作成方法
03.詳細ページでのタグ情報取得方法
04.まとめ

タグ一覧ページの作成方法

タグの名前（タイトル）取得

タグの名前（下記画像の赤枠の箇所）を取得します。
https://keprate.com/tag/responsive/でしたらWPの名前の レスポンシブの箇所になります。

        PHP
        コピー
    <?php single_tag_title();?>//出力文字:レスポンシブ
    <?php single_term_title();?>//出力文字:レスポンシブ
    <?
        $tag_o = get_queried_object();
        echo $tag_o->name;//出力文字:レスポンシブ
    ?>

https://keprate.com/tag/responsive/
というURLのページでしたら3種類の方法で全てレスポンシブという値が返ってきます。

この値を元にパンくずリストやタイトルを作成します。

タグのID取得方法

タグのID（下記画像の赤枠の箇所）を取得します。
管理画面上からは確認ができずおそらくURLからのみの確認となります。

    PHP
    コピー
<?php
    $tag_o = get_queried_object();
    $tag_o->term_id;//echoすると11（tag番号）が出力される
?>

この値を元にタグ一覧ページを作成します。
結局、タグのIDを取得する際にget_queried_object();が必要になりますのでタグの名前を取得する時も$tag_o->name;が個人的にいいのでは思います。

一覧ページの作成

タグIDをWP_Queryのパラメータ'tag_id'に渡し一覧ページを作成します。
下記、一番シンプルな形。

    PHP
    コピー
<?php

    $tag_o = get_queried_object();

    $args = array(
        'tag_id' => $tag_o->term_id
    );

    $my_query = new WP_Query($args);

?>

下記、ページャー付きタグ一覧ページの作成時。

    PHP
    コピー
<?php

    global $paged;

    $page_range = get_query_var('posts_per_page');

    $tag_o = get_queried_object();

    $args = array(
        'tag_id' => $tag_o->term_id,
        'posts_per_page' => $page_range,
        'paged' => $paged
    );

    $my_query = new WP_Query($args);

?>

あとは取得した値をループ処理。

下記は参考程度のHTML出力用のループ処理を加えたソース。
これはあくまでベースの形になりますので、画像やカテゴリ名など必要であれば追加していきます。

    PHP
    コピー
<nav class="nav-tag">
    <ul>
<?php

    global $paged;

    $page_range = get_query_var('posts_per_page');

    $tag_o = get_queried_object();

    $args = array(
        'tag_id' => $tag_o->term_id,
        'posts_per_page' => $page_range,
        'paged' => $paged
    );

    $my_query = new WP_Query($args);

?>
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
        <li>
            <a href="<?php the_permalink();?>">
                <div class="nav-tag__tit"><?php the_title(); ?></div>
                <div class="nav-tag__date"><?php the_time('Y/m/d'); ?></div>
            </a>
        </li>
<?php endwhile;?>
<?php endif;wp_reset_postdata();?>
    </ul>
</nav>

以下出力されたHTML。

    HTML
    コピー
<nav class="nav-tag">
    <ul>
        <li>
            <a href="https://keprate.com/web/wordpress/wp-pagination/">
                <div class="nav-tag__tit">WordPressでレスポンシブ対応のページネーション(ページ送り)をプラグインなしで実装</div>
                <div class="nav-tag__date">2018/05/18</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/ua-check/">
                <div class="nav-tag__tit">JavaScriptでuseragentを取得しviewportの設定やブラウザ判別する方法</div>
                <div class="nav-tag__date">2018/05/01</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/responsive-img/">
                <div class="nav-tag__tit">スマホ・PC用の画像をレスポンシブ対応させる方法　超簡単！</div>
                <div class="nav-tag__date">2018/04/25</div>
            </a>
        </li>
    </ul>
</nav>

これで基本的なタグ一覧ページは問題なく作成できます。

タグクラウド作成方法

サイドバーなどによく設置されるタグクラウドの作成方法。

wp_tag_cloud();で簡単に表示はされます。

ですが、

・大きさがデフォルトでまちまちになる。（cssなどで調整は可能そうですが）
・カウント数が取得できない。（おそらくですがパラメータを見る限りなさそう）

上記の理由から、wp_tag_cloud();を使わずにget_tags();を使用してタグクラウドを作成。
get_tags();を使用の場合は$tag->count;でカウント数を取得可能。

get_tags();にパラメータを渡しデータを取得。
下記、パラメータの場合は記事数（カウント）を元に降順で並べ替え。
あとは取得した値をループ処理。

    PHP
    コピー
<?php $posttags = get_tags('orderby = count & order = DESC'); ?>

下記は参考程度のHTML出力用のループ処理を加えたソース。

    PHP
    コピー
<?php $posttags = get_tags('orderby = count & order = DESC'); ?>
<nav class="nav-cloud">
    <ul>
<?php foreach ($posttags as $tag):?>
        <li>
            <a href="<?php echo get_tag_link($tag->term_id);?>">
                <span><?php echo $tag->name;?> （<?php echo $tag->count;?>）</span>
            </a>
        </li>
<?php endforeach; wp_reset_postdata(); ?>
    </ul>
</nav>

以下出力されたHTML。

    HTML
    コピー
<nav class="nav-cloud">
    <ul>
        <li>
            <a href="https://keprate.com/tag/original/">
                <span>自作 （6）</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/tag/responsive/">
                <span>レスポンシブ （4）</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/tag/form/">
                <span>フォーム （1）</span>
            </a>
        </li>
    </ul>
</nav>

あとはcssでデザイン調整。
ロールオーバーアニメーションもサイトのテイストに合わせてごにょごにょ。
これで基本的なタグクラウドは問題なく作成できます。

詳細ページでのタグ情報取得方法

ブログ詳細ページに該当するタグをタイトル下などに表示する方法。
下記赤枠の箇所になります。

get_the_tags();で取得。
（get_tags;と名前が似過ぎで嫌がらせですね・・・）

    PHP
    コピー
<?php $posttags = get_the_tags(); ?>

あとはいつものように動かざること山の如し取得した値をループ処理。

下記は参考程度のHTML出力用のループ処理を加えたソース。

    PHP
    コピー
<?php $posttags = get_the_tags(); ?>
<ol class="article-tags">
<?php foreach ($posttags as $tag):?>
    <li><a href="<?php echo get_tag_link($tag->term_id);?>"><?php echo $tag->name;?></a></li>
<?php endforeach; wp_reset_postdata(); ?>
</ol>

リンクが必要ない場合はaタグの箇所を削除。

注意点が一つ。。
リンク先を取得時にカテゴリの場合はcat_IDですがタグの場合はterm_idになります。
term_IDじゃぁないのかい！・・ガッテム・・・

以下出力されたHTML。

    HTML
    コピー
<ol class="article-tags">
    <li><a href="https://keprate.com/tag/responsive/">レスポンシブ</a></li>
    <li><a href="https://keprate.com/tag/original/">自作</a></li>
    <li><a href="https://keprate.com/tag/form/">フォーム</a></li>
</ol>

これで基本的な詳細ページでのタグ情報は問題なく表示できます。

まとめ

get_the_tags();とget_tags();が存在したり
get_tag_link($tag->term_ID);ではなくget_tag_link($tag->term_id);であったり
tag独特のツンデレな所もありますが上記を使い回しすればすれば問題なくtag（タグ）関連で悩む事はへるのではと思います。
以上。WordPressのtag（タグ）関連のまとめでした。

ハメカメ

ブラボーブラボー
今度わしも使わしてもらうわい。

ヒューヒューだよ。サトケン。

サトケン

・・・

今更・・・牧瀬・・・です・か？

・・・

ハメカメ

・・・す　すまん・・・
はしゃぎすぎたわい・・