WordPress個別サポート

WordPressサイトの制作中は、投稿のカテゴリーを一覧表示して、ついでに投稿件数をつけたいこともあります。

カテゴリー一覧(投稿件数つき)

カテゴリー一覧(投稿件数つき)

このような柔軟なカテゴリー一覧を表示したい場合は、get_categories関数が役立ちます。上記のようなカテゴリー一覧を表示するサンプルコードは次のようになります。

<?php
$args = array(
    'orderby' => 'id',
    'hide_empty' => '0',
);
$categories = get_categories( $args ); 
?>

<ul>
<?php
foreach ($categories as $category) {
    if ($category->count) {
        $count = "({$category->count})";
    } else {
        $count = "";
    }
    echo "<li>{$category->name}{$count}</li>";
}
?>
</ul>

表示結果は冒頭の画像のようになります。

これで問題ありませんが、課題を挙げれば表示順です。たとえば、「お客様の声」を一番上に表示するなど、柔軟な順番で表示したいこともあるでしょう。

表示順を柔軟に変えたい

表示順を柔軟に変えたい

カテゴリーの表示順はget_categoriesのパラメータで指定できますが、通常はカテゴリーIDやカテゴリー名などになります。

つまり、「お客様の声を最初に表示」とか「新着情報を一番下に」のような自由な並べ替えには対応していません。

カテゴリーを並べ替えるプラグインと強引に連携できるかもしれませんが面倒です。

そこで単純なアイデアとして、カテゴリーに「表示順」のような項目を作って、その項目の順番に並べ替えできれば簡単そうです。

以下、カテゴリーに「表示順」というカスタムフィールドを使って、その順番でカテゴリーを並べ替える例を紹介します。

ここで紹介するのは、get_categoriesで取得したカテゴリー情報を柔軟に並べ替える方法です。ウィジェットなどに表示するカテゴリー一覧を並べ替える場合は、このような作業をしなくてもソート系のプラグインで対応できるはずです。
スポンサーリンク

カスタムフィールド「表示順」の作成

カスタムフィールドを作成するAdvanced Custom Fieldsプラグインをインストールして、「カスタムフィールド」メニューを開きます。

「カスタムフィールド」メニューを開く

「カスタムフィールド」メニューを開く

Advanced Custom Fieldsプラグインのバージョンによってメニュー名が異なる場合があります。

「フィールドグループ」の「新規追加」をクリックします。

「フィールドグループ」の「新規追加」をクリック

「フィールドグループ」の「新規追加」をクリック

フィールドグループの名前を入力します。ここでは「カテゴリー表示メニュー」としました。

フィールドグループ名を入力

フィールドグループ名を入力

「フィールドを追加」をクリックします。

「フィールドを追加」をクリック

「フィールドを追加」をクリック

「フィールドラベル」と「フィールド名」を入力(ここでは「表示順」)して「フィールドタイプ」から「数値」を選択します。

フィールド名などを設定

フィールド名などを設定

画面を下にスクロールして「必須か?」や「デフォルト値」を設定します。ここは要件に合わせて設定してください。

フィールド設定が必須か/デフォルト値も設定

フィールド設定が必須か/デフォルト値も設定

デフォルト値を「9999」のような大きな数値にしておけば、表示順が入っていないカテゴリーは最後の方で表示されることになります。

さらに画面を下にスクロールして、「位置」の「ルール」で次のように「Taxonomy Term」「等しい」「カテゴリー」を選択します。カテゴリー編集メニューのときだけ、このフィールドを表示するという意味です。

カテゴリーメニューのみに表示するというルールを設定

カテゴリーメニューのみに表示するというルールを設定

完了したら画面を上にスクロールして「公開」ボタンをクリックします。

カスタムフィールドの作成完了

カスタムフィールドの作成完了

これで、カスタムフィールド「表示順」は完成です。

個別カテゴリーの表示順を設定

「投稿」‐「カテゴリー」メニューから個々のカテゴリーの編集画面を開いて、表示順を設定しましょう。ここでは、先頭に表示したい「お客様の声」を「1」に設定しています。

「お客様の声」の表示順を「1」に設定

「お客様の声」の表示順を「1」に設定

設定後、「更新」をクリックします。その他のカテゴリーも同じように作業してください。

ここではわかりやすく「1」と入力しましたが、「表示順」入力のコツは「10」「20」など、間隔を空けておくことです。途中で間に差し込みたくなったカテゴリーにも対応できます。「1,2,3,4」のように間が空いていないと、2と3の間に1つ差し込む場合は、「3,4,5,6,7…」の全ての番号を振り直すことになるでしょう。

カテゴリーの表示順を変更

get_categoriesで取得したカテゴリー情報をカスタムフィールド「表示順」で並べ替えます。それには、冒頭で紹介したコードを次のように変更します。8行目~11行目のコード(「表示順で並べ替える」のコード)を6行目の後あたりに追加するのがポイントです。

<?php
$args = array(
    'orderby' => 'id',
    'hide_empty' => '0',
);
$categories = get_categories( $args );

usort($categories, function($a, $b) {
   return get_field("表示順", "category_".$a->term_id)
    - get_field("表示順", "category_".$b->term_id);
});
?>

<ul>
<?php
foreach ($categories as $category) {
    if ($category->count) {
        $count = "({$category->count})";
    } else {
        $count = "";
    }
    echo "<li>{$category->name}{$count}</li>";
}
?>
</ul>

カスタムフィールド名を「表示順」以外にした場合は、上記の「表示順」を修正してください。

以下のサイトを参考にさせていただきました。ありがとうございます!

How to create a custom sort for WordPress categories

ポイントはPHPのusort関数で、好きな基準で並べ替えたいときに役立つ関数です。用途や仕組みを紹介していると話が長くなるので省略します。

これで、カテゴリーが「表示順」で設定した順番に並べ替えられます。

カテゴリーに「表示順」が反映される

カテゴリーに「表示順」が反映される

カテゴリー一覧に「表示順」を追加

設定した表示順を「投稿」‐「カテゴリー」メニューで参照できると便利です。次のコードをテーマのfunctions.phpなどに入力すると、カテゴリー一覧に「表示順」が追加されます。

/* カテゴリーの表示順を表示 */
function add_category_columns($columns) {
    $index = 1; // 追加位置
    return array_merge(
        array_slice($columns, 0, $index),
        array('srt_order' => '表示順'),
        array_slice($columns, $index)
    );
}
add_filter('manage_edit-category_columns',
    'add_category_columns');

function add_category_custom_fields($d, $column_name, $term_id) {
    if ($column_name == 'srt_order') {
        echo get_field("表示順", "category_".$term_id);
    }
}
add_action('manage_category_custom_column',
    'add_category_custom_fields', 10, 3);
以下のサイトを参考に作成させていただきました。ありがとうございます!
WordPress で管理画面にカテゴリIDを表示

表示結果は次のようになります。

カテゴリーの表示順が追加される

カテゴリーの表示順が追加される

まとめ

これで作業完了です。get_categoriesで表示するカテゴリーの並べ替えに困っている方は参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート