Zenn
📘

WordPressのカテゴリーを任意の順番で表示させる（プラグイン未使用）

2023/08/13に公開
WordPress
acf
カテゴリー
tech

プラグインを使用せず、WordPressのカテゴリーを任意の順番で表示させます

以下だとカテゴリーの並び替えは実現できません
かと言って、そのためだけにプラグインもなあ...ということでプラグインなしで実装します

<?php
$cats = get_categories(array(
  'orderby' => 'name',
  'order' => 'ASC'
));
foreach ($cats as $cat) :
?>

参考

https://wordpress.stackexchange.com/questions/109356/how-to-create-a-custom-sort-for-wordpress-categories
https://changeup.tech/article/wp-category-orderby-noplugin/
https://www.nishi2002.com/14929.html

順番用のACFを設定する

フィールドタイプを数値、カテゴリー編集画面に表示させます

usortを使用し任意の順番のカテゴリーリストを生成し、ループさせる

front-page.php
<!-- タブ -->
<ul class="p-post-tab">
  <li class="p-post-tab__item p-post-tab__item--all js-news-tab is-active">
    全て
  </li>
  <?php
  //ACFで順番用の項目を作成し、その順番で表示する
  $categories = get_categories();
  usort($categories, function($a, $b) {
    //順番の数値が未入力の場合は0とする
    if(!get_field("cat_order", "category_".$a->term_id)) $a->term_id = 0;
    if(!get_field("cat_order", "category_".$b->term_id)) $b->term_id = 0;

    return get_field("cat_order", "category_".$a->term_id) - get_field("cat_order", "category_".$b->term_id);
  });
  foreach ($categories as $cat) :
  ?>
  <li class="p-post-tab__item <?php
    if($cat->slug === "hoge") {
      echo "p-post-tab__item--hoge";
    } else if($cat->slug == "fuga") {
      echo "p-post-tab__item--fuga";
    } else if($cat->slug == "piyo") {
      echo "p-post-tab__item--piyo";
    }
    ?> js-news-tab">
      <?php echo $cat->name; ?>
  </li>
  <?php
  endforeach;
  ?>
</ul>

<!-- 投稿 -->
<?php
  //ACFで順番用の項目を作成し、その順番で表示する
  $categories = get_categories();
  usort($categories, function($a, $b) {
    //順番の数値が未入力の場合は0とする
    if(!get_field("cat_order", "category_".$a->term_id)) $a->term_id = 0;
    if(!get_field("cat_order", "category_".$b->term_id)) $b->term_id = 0;

    return get_field("cat_order", "category_".$a->term_id) - get_field("cat_order", "category_".$b->term_id);
  });
  foreach ($categories as $cat) :
?>
<li class="post__item">
  <?php echo $cat->name; ?>
</li>
<?php
  endforeach;
?>

カテゴリー編集画面で順番を設定する

空の場合は0と認識するようにしてます

編集画面に順番を表示させるコードを追加する

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("cat_order", "category_".$term_id);
  }
}
add_action('manage_category_custom_column', 'add_category_custom_fields', 10, 3);

左端に設定した順番が表示されている

20230814追記 ACFを使用し、自作関数cmpを使用する場合

ドキュメントにあるcmpを拝借します
https://www.php.net/manual/ja/function.usort.php

front-page.php
<?php
  //カテゴリー説明欄の数値で並び替えを実行するusort用のcb
  function cmpACF($a, $b) {
    //順番の数値が未入力の場合は0とする
    if(!get_field("cat_order", "category_".$a->term_id)) $a->term_id = 0;
    if(!get_field("cat_order", "category_".$b->term_id)) $b->term_id = 0;
        
    if (get_field("cat_order", "category_".$a->term_id) == get_field("cat_order", "category_".$b->term_id)) return 0;
    return (get_field("cat_order", "category_".$a->term_id) < get_field("cat_order", "category_".$b->term_id)) ? -1 : 1;
  }
  //カテゴリーリスト取得
  $categories = get_categories();
?>
<!-- タブ -->
<ul class="p-post-tab">
  <li class="p-post-tab__item p-post-tab__item--all js-news-tab is-active">
    全て
  </li>
  <?php
  //ACFで順番用の項目を作成し、その順番で表示する
  usort($categories, "cmpACF");
  foreach ($categories as $cat) :
  ?>
  <li class="p-post-tab__item <?php
    if($cat->slug === "hoge") {
      echo "p-post-tab__item--hoge";
    } else if($cat->slug == "fuga") {
      echo "p-post-tab__item--fuga";
    } else if($cat->slug == "piyo") {
      echo "p-post-tab__item--piyo";
    }
    ?> js-news-tab">
      <?php echo $cat->name; ?>
  </li>
  <?php
  endforeach;
  ?>
</ul>

<!-- 投稿 -->
<?php
  //ACFで順番用の項目を作成し、その順番で表示する
  usort($categories, "cmpACF");
  foreach ($categories as $cat) :
?>
<li class="post__item">
  <?php echo $cat->name; ?>
</li>
<?php
endforeach;
?>

20230814追記 カテゴリーの説明欄の数値で並び替えする場合で自作関数cmpを使用する

ACFではなく、カテゴリーの説明欄の数値に基づき並び替えを行う場合です

以下のコードでも意図した通りの順番にはなりましたが、公式にあるのでcmpを採用しました

...

usort($categories_list, function($a, $b) {
  return $a->description - $b->description;
});

...

説明欄には文字ならなんでも入ってしまいます。
エラー防止のため数値ではない場合、もしくは負の数値の場合は1として設定するようにしています
https://www.php.net/manual/ja/function.ctype-digit.php

front-page.php
<?php
//カテゴリー説明欄の数値で並び替えを実行するusort用のcb
function cmp($a, $b) {
  //説明欄が数値ではない場合、もしくは負の数値の場合は1として設定する
  if (!ctype_digit($a->description) && ctype_digit($a->description) < 0) $a->description = 1;
  if (!ctype_digit($b->description) && ctype_digit($b->description) < 0) $b->description = 1;
  if ($a->description == $b->description) return 0;
  return ($a->description < $b->description) ? -1 : 1;
}

//カテゴリーリスト取得
$categories_list = get_categories();
?>
<!-- タブ部分 自作関数cmpを使う場合 -->
<ul class="p-post-tab">
  <li class="p-post-tab__item">
    全て
  </li>
  <?php
  //説明欄に数値を入力し、任意の順番で出力する
  usort($categories_list, "cmp");

  foreach ($categories_list as $cat) :
  ?>
  <li class="p-post-tab__item <?php
    if($cat->slug === "hoge") {
      echo "p-post-tab__item--hoge";
    } else if($cat->slug == "fuga") {
      echo "p-post-tab__item--fuga";
    }
  ?>">
    <?php echo $cat->name; ?>
  </li>
  <?php
  endforeach;
  ?>
</ul>

Discussion