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

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

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

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

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

パンくずリストの作成

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

当サイトでも
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>

解説

  1. 4行目:
    現在のカテゴリーのオブジェクトをget_queried_object()で取得。
  2. 5行目〜14行目:
    親カテゴリーがある場合の処理
    その場合は必ずリンクが存在します。
  3. 6行目:
    get_ancestors()に必要になるパラメーター(カテゴリID、’category’)を渡し現在のカテゴリーの全ての親カテゴリーIDを配列で取得
  4. 7行目〜13行目:
    親カテゴリーがある場合のループ処理
    get_category()のパラメーターに$ancestor(親カテゴリIDが入っています)を渡しカテゴリ情報取得
    get_category_link()のパラメーターに$ancestorを渡しカテゴリーリンク取得
    何故ゆえにget_category()にリンク情報が入っていないのか謎・・・
  5. 15行目
    現在のカテゴリーはリンク指定は必要ないのでカテゴリー名のみ表示する。

以下出力された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()等で簡単に表示はされます。

ですが

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

上記の理由から、wp_list_categories()を使わずに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と名前が似過ぎでややこしや・・・)

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のcategory(カテゴリー)関連のまとめでした。

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