KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

WordPressのtag関連【タグ】のまとめ(一覧・タグクラウドなど)

2018/05/22
Category :
  1. WordPress
Tags :
  1. まとめ

WordPressのtag(タグ)に関連する個人的なまとめ。

タグ一覧ページ作成

テンプレートファイルとしてtag.phpを作成。

get_queried_object()でタグ情報取得

get_queried_object()とは戻り値のオブジェクトに必要になる全ての情報が入っています。
タグアーカイブで使用中ならタグオブジェクトの値が返ってくる優秀な関数

個人的によく使うタグ要素。

タグ名
name
タグID
term_id
タグ投稿数
count

以下、参考コード

$tag_o = get_queried_object();
$tag_name = $tag_o->name; //タグ名
$tag_id = $tag_o->term_id; //タグID
$tag_count = $tag_o->count; //タグ投稿数

値の取得方法は他にも
タグ名 : single_tag_title(“”, false);やsingle_term_title();
タグID : $wp_query->query_vars[‘tag_id’];

などありますがcategory情報を取得する時と同じやり方の方が美しいので統一。

KEPRATEの下記ページでcategory関連の説明しています。

これらの値を元にパンくずリストカテゴリー一覧リストを作成します。

  1. パンくずリストはタグの場合、階層もなく単純なので省略します。

タグ一覧リストの作成

タグIDをWP_Queryのパラメータに渡し一覧リストを作成します。

<?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出力用のループ処理部分のコード。
これがあくまでベースの形ですので、新着アイコンやカテゴリ名など必要になれば追加していきます。

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

以下出力されたhtml。

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

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

タグクラウド作成

サイドバーなどにタグクラウドの作成方法。
wp_tag_cloud()で簡単に表示はされます。

ですが

  1. 大きさがまちまちになる。(cssなどで調整は可能そうですが)
  2. カウント数が取得できない。(おそらくですがパラメータを見る限りなさそう)

上記の理由から、wp_tag_cloud()を使わずにget_tags()を使用してタグクラウドを作成。

$tag->count;でカウント数は取得可能です。

get_tags()にパラメータを渡しデータを取得。

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

上記パラメータですと、記事数(カウント)を元に降順で並べ替え
あとは取得した値をループで処理すれば問題ないです。

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

<?php $posttags = get_tags('orderby = count & order = DESC'); ?>
<nav class="cms-nav-cat">
    <ul class="clearfix">
<?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。

<nav class="cms-nav-cat">
    <ul class="clearfix">
        <li>
            <a href="https://keprate.com/tag/form/">
                <span>フォーム (1)</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/tag/responsive/">
                <span>レスポンシブ (4)</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/tag/original/">
                <span>自作 (6)</span>
            </a>
        </li>
    </ul>
</nav>

あとはcssで見た目やロールオーバーアニメーションをサイトのテイストに合わせてごにょごにょ。
これで基本的なタグクラウドは問題なく作成できます。
下記サンプル画像になります。
(記事が少なくタグが充実していなくてショボショボですが・・・)

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

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

get_the_tags()で取得します。
(get_tagsと名前が似過ぎでややこしや・・・)

get_the_tags()でタグ情報を取得。

<?php $posttags = get_the_tags(); ?>

あとは取得した値をループで処理すれば問題ないです。

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

<?php $posttags = get_the_tags(); ?>
<ol class="cms-article-herder-tag-items">
<?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タグの箇所削除してください。

余談ですがタグの場合のIDはterm_idになります。
カテゴリの場合はcat_IDも存在しますが
term_IDでもいけます・・・知らずに長い間cat_IDを使用しておりました・・・ガッテム・・・

以下出力されたhtml。

<ol class="cms-article-herder-tag-items">
    <li><a href="https://keprate.com/tag/responsive/">レスポンシブ</a></li>
    <li><a href="https://keprate.com/tag/original/">自作</a></li>
</ol>

あとはcssで見た目やロールオーバーアニメーションをサイトのテイストに合わせてごにょごにょ。
これで詳細ページでのタグ情報は問題なく表示できます。

以上。
WordPressのtag(タグ)関連のまとめでした。

  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/wordpress/tag/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP