WordPressのcategory関連【カテゴリー】のまとめ（一覧ページ・カテゴリーリンクなど） | WordPress | Web関連

2018/05/23

Category :

WordPress

Tags :

まとめ

WordPressのcategory（カテゴリー）に関する個人的なまとめ。

カテゴリー一覧ページ作成

テンプレートファイルとしてcategory.phpを作成。
カテゴリーに関しては階層が存在するので少々やっかい。

get_queried_object()でカテゴリー情報取得

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

個人的によく使うカテゴリー要素。

カテゴリー名: name（cat_nameでも可）

カテゴリーID: term_id（cat_IDでも可）

カテゴリー投稿数: count（category_countでも可）

親カテゴリーID

parent（category_parentでも可）

※親がなければ0が入る

※個人的にcatがつかない方を使用するのがよいかと（タグ情報なども同じ値で取得できるので）。

以下、参考コード

$cat_o = get_queried_object();
$cat_name = $cat_o->name; //カテゴリー名
$cat_id = $cat_o->term_id; //カテゴリーID
$cat_count = $cat_o->count; //カテゴリー投稿数
$cat_parent_id = $cat_o->parent; //親カテゴリーID

参考サイト

WordPress Codex 日本語版 : 関数リファレンス/get queried object
WordPress Codex 日本語版 : テンプレートタグ/get the category

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

パンくずリストの作成

パンくずリストは、おそらくほとんどのサイトで階層が存在すると思います。

当サイトでも
Web関連＞ CSS
Web関連＞ WordPress
Web関連＞ Javascript
と現在の所、2階層ですが階層があります。

作りによってはもっと深い階層も考えられ静的に作成していたらヒステリックになりかけ3秒前ですので動的に作成します。

下記コードサンプルになります。

<div class="breadcrumb">
    <ol>
        <li><a href="/">TOP</a></li>
<?php $cat_current = get_queried_object();?>
<?php if($cat_current->parent): ?>
<?php $ancestors = array_reverse(get_ancestors($cat_current->term_id, 'category' ));?>
<?php foreach ($ancestors as $ancestor):?>
<?php
    $cat_parent=get_category($ancestor);
    $cat_parent_link=get_category_link($ancestor);
?>
        <li><a href="<?php echo $cat_parent_link;?>"><?php echo $cat_parent->name;?></a></li>
<?php endforeach;?>
<?php endif;?>
        <li><span><?php echo $cat_current->name;?></span></li>
    </ol>
</div>

解説

4行目：

現在のカテゴリーのオブジェクトをget_queried_object()で取得。
5行目〜14行目：

親カテゴリーがある場合の処理。
その場合は必ずリンクが存在します。
6行目：

get_ancestors()に必要になるパラメーター（カテゴリID、’category’）を渡し現在のカテゴリーの全ての親カテゴリーIDを配列で取得。
7行目〜13行目：

親カテゴリーがある場合のループ処理。
get_category()のパラメーターに$ancestor（親カテゴリIDが入っています）を渡しカテゴリ情報取得。
get_category_link()のパラメーターに$ancestorを渡しカテゴリーリンク取得。
何故ゆえにget_category()にリンク情報が入っていないのか謎・・・
15行目

現在のカテゴリーはリンク指定は必要ないのでカテゴリー名のみ表示する。

参考サイト

WordPress Codex 日本語版 : 関数リファレンス/get ancestors
WordPress Codex 日本語版 : 関数リファレンス/get category
WordPress Codex 日本語版 : 関数リファレンス/get category link

以下出力されたhtml。

<div class="breadcrumb">
    <ol>
        <li><a href="/">TOP</a></li>
        <li><a href="https://keprate.com/web/">Web関連</a></li>
        <li><span>WordPress</span></li>
    </ol>
</div>

※あとは見た目はCSSでごにょごにょしてください。

KEPRATEの下記ページでパンくずリストの作り方を説明しています。

超便利！レスポンシブでスクロールバー対応のパンくずリスト

カテゴリー一覧リストの作成

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

<?php

    global $paged;

    $page_range = get_query_var('posts_per_page');

    $cat_current = get_queried_object();

    $args = array(
        'cat' => $cat_current->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; ?>
    </ul>
</nav>

以下出力されたhtml。

<nav class="cms-nav">
    <ul>
        <li>
            <a href="https://keprate.com/web/javascript/js-onload/">
                <div class="cms-nav-tit">window.onloadに関する個人的なまとめ</div>
                <div class="cms-nav-date">2018/05/14</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/js-debug/">
                <div class="cms-nav-tit">JavaScriptのalertの代わりになる簡易デバッグツール</div>
                <div class="cms-nav-date">2018/05/11</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/js-url-get-param/">
                <div class="cms-nav-tit">JavaScriptでGET形式のURLパラメーターを取得する方法</div>
                <div class="cms-nav-date">2018/05/11</div>
            </a>
        </li>
    </ul>
</nav>

これで基本的なcategory（カテゴリー）一覧ページは問題なく作成できます。

サイドバーにカテゴリーリンク作成

サイドバーなどにカテゴリーのリンクを作成する方法。
wp_list_categories()等で簡単に表示はされます。

ですが

出力されるソースが美しくない。
裏の処理が不明過ぎて個人的にあまり扱いたくない。

上記の理由から、wp_list_categories()を使わずにget_categories()を使用してカテゴリーリンクを作成。
（現状特に必要ないのでカテゴリ階層はなしの想定）

参考サイト

WordPress Codex 日本語版 : テンプレートタグ/wp list categories
WordPress Codex 日本語版 : 関数リファレンス/get categories

get_categories()にパラメータを渡しカテゴリー情報を取得。

<?php $categories = get_categories('child_of=3&orderby=count&order=DESC'); ?>

上記パラメータですと、カテゴリーIDが3に属する全てのカテゴリーを記事数（カウント）を元に降順で並べ替え。
あとは取得した値をループで処理すれば問題ないです。

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

<?php $categories = get_categories('child_of=3&orderby=count&order=DESC'); ?>
<nav class="cms-nav-cat">
    <ul>
<?php foreach ($categories as $cat):?>
        <li>
            <a href="<?php echo get_category_link($category);?>">
                <span><?php echo $cat->name;?>（<?php echo $cat->count;?>）</span>
            </a>
        </li>
<?php endforeach;?>
    </ul>
</nav>

get_category_link()が大活躍。
やはりカテゴリーリンク先を取得するのに別関数の必要性が不明。。。

以下出力されたhtml。

<nav class="cms-nav-cat">
    <ul>
        <li>
            <a href="https://keprate.com/web/css/">
                <span>JavaScript（7）</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/css/">
                <span>WordPress（5）</span>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/css/">
                <span>CSS（4）</span>
            </a>
        </li>
    </ul>
</nav>

あとはcssで見た目やロールオーバーアニメーションをサイトのテイストに合わせてごにょごにょ。
これで基本的なシンプルなカテゴリーリンクは問題なく美しいソースで作成できます。

詳細ページでのカテゴリー情報取得

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

get_the_category()で取得します。
（get_categoriesと名前が似過ぎでややこしや・・・）

参考サイト

WordPress Codex 日本語版 : テンプレートタグ/get the category

get_the_category()でカテゴリー情報を取得。

<?php $categorys = get_the_category(); ?>

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

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

<ol class="cms-article-herder-cat-items">
<?php $categorys = get_the_category(); ?>
<?php foreach ($categorys as $cat):?>
    <li><a href="<?php echo get_category_link($cat->term_id);?>"><?php echo $cat->name;?></a></li>
<?php endforeach; ?>
</ol>

リンクが必要ない場合はaタグの箇所削除してください。

以下出力されたhtml。

<ol class="cms-article-herder-cat-items">
    <li><a href="https://keprate.com/web/javascript/">JavaScript</a></li>
</ol>

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

ページネーションが必要な場合はKEPRATEの下記ページでページネーションの作り方を説明しています。

WordPressでレスポンシブ対応のページネーション(ページ送り)をプラグインなしで実装

以上。
WordPressのcategory（カテゴリー）関連のまとめでした。

※ソースの流用、改変は自由ですが自己責任とさせていただきます。

トラックバック URL

https://keprate.com/web/wordpress/wp-category/trackback/