【WordPress】あいうえお順で記事を一覧表示する方法【漢字を含む】

2024.11.07

WordPressで記事を「あいうえお」順に表示する方法を紹介します。
今回の方法を使えば『漢字』を含めた場合でも表示できます。

カスタムフィールドプラグインのACFを使って実装します。

参考の記事は下記になります。

【WordPress】投稿記事を『あいうえお順』で並べ替える方法

『国名』を参考例にあいうえお順を実装していきます。
国名は「日本」「韓国」「南アフリカ」「アメリカ」など漢字を含む場合があるのでちょうどいいサンプルです。

なお、記事は「CPT UI」というプラグインを使ったカスタム投稿タイプになります。

管理画面、記事ページに、ひらがなの入力欄を作る。

ACFで下記のように設定します。

フィールドタイプ:テキスト
フィールドタイプ:国名ふりがな
フィールド名:country_furigana

ACF管理画面スクリーンショット

どの投稿タイプに反映させるかも忘れずに。
これで各投稿タイプの記事入力画面にふりがな入力欄が作成されました。

コードをソースコードに貼り付ける

管理画面に設定ができたら次にソースコードです。

<ul>
 <?php
   $args = array(
    'paged' => $paged,
    // 国の投稿タイプ
    'post_type' => 'countries',
    'posts_per_page' => -1,

    /* ACFコードを追加 */
    'order' => 'ASC', // 昇順(あ → ん)
    'orderby' => 'meta_value', // カスタムフィールドで並べ替える
    'meta_key' => 'country_furigana', // カスタムフィールドのフィールド名


    /* 必要であれば使用。タクソノミー別に限定して表示したい場合使用 */
    'tax_query' => array(
     array(
      // タクソノミー,
      'taxonomy' => 'country_kinds',
      // カテゴリーを指定,
      'terms' => array('asia'),
      'field' => 'slug'
     ),
    )
    // 必要であれば使用。非公開の投稿を含める。記事へのリンクがなくても一覧では表示したい場合に使用。
    'post_status' => array('publish', 'private'),
   );
   $the_query =  new WP_Query($args);
  ?>
  <?php if ( $the_query->have_posts() ) : ?>
   <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

    <li>
     <?php $post_status = get_post_status();// 現在の投稿のステータスを取得、公開記事ならリンクあり表示、非公開記事ならリンクなし表示 ?>
     <?php if  ($post_status == 'publish'): ?>
       <a href="<?php the_permalink(); ?>">
        <h2><?php the_title(); ?></h2>
        <div><?php the_date(); ?></div>
       </a>
      <?php else: //非公開記事の場合は記事タイトルだけ表示?>
       <h2><?php the_title(); ?></h2>
       <div><?php the_date(); ?></div>
     <?php endif; ?>
    </li>

   <?php endwhile; ?>
  <?php endif; wp_reset_postdata(); ?>
</ul>

大事なのはサブループ部分です。
ここを記述することでカスタムフィールドで入力した「あいうえお」順に記事が表示されます。
↓サブループ部分

〜〜 略 〜〜
/* ACFコードを追加 */
'order' => 'ASC', // 昇順(あ → ん)
'orderby' => 'meta_value', // カスタムフィールドで並べ替える
'meta_key' => 'country_furigana', // カスタムフィールドのフィールド名
〜〜 略 〜〜

完成!!

以上で完成です!
これで記事タイトルに漢字とカタカナが混じっていても、管理画面でひらがな入力をしているので「あいうえお」順に表示されます。

↓サンプル

漢字を含めてあいうお順に表示がされます。
totop Page Top