WordPressの投稿をあいうえお順やアルファベット順でソートして見出しをつける

ワードプレスの記事一覧をあいうえお順やアルファベット順にソートして、あ行、か行などの見出しを付ける方法を説明します。

このサイトのインターネット用語辞典のように出力されます。

1.Advanced Custom Fieldsでふりがなを入力するフィールドを作成

まずソートするために、ふりがなを入力するカスタムフィールドを作ります。

タイトルでも良いですが、漢字が入るとソートできないので、ふりがな入力エリアを作っておきます。

プラグインは、Advanced Custom Fieldsを使用しています。

今回は、「ふりがな」というフィールドラベルに「d_furigana」というフィールド名をつけました。

フィールドタイプはテキストです。

2.投稿に作成したフィールドにふりがなを入力

設定が終わったら、投稿にふりがなを入力しておきます。

このサイトの相見積もりの投稿は、「あいみつもり」と入力しています。

英語の場合は小文字のアルファベットで入力で入力してください。

3.あいうえお順、アルファベット順のソースコード

設定が終わったら出力します。ソースコードはこちらです。

<?php
  $furigana =  'd_furigana'; //acfのフィールド名

  $en_abcd = "/[abcd]/";
  $en_efgh = "/[efgh]/";
  $en_ijkl = "/[ijkl]/";
  $en_mnop = "/[mnop]/";
  $en_qrst = "/[qrst]/";
  $en_uvwxyz = "/[uvwxyz]/";

  $jp_agyo = "/[あいうえお]/";
  $jp_kagyo = "/[かきくけこがぎぐげご]/";
  $jp_sagyo = "/[さしすせそざじずぜぞじゃじゅじょ]/";
  $jp_tagyo = "/[たちつてとだぢづでど]/";
  $jp_nagyo = "/[なにぬねの]/";
  $jp_hagyo = "/[はひふへほばびぶべぼぱぴぷぺぽびゅ]/";
  $jp_magyo = "/[まみむめも]/";
  $jp_yagyo = "/[やゆよ]/";
  $jp_ragyo = "/[らりるれろ]/";
  $jp_wagyo = "/[わをん]/";

  $mojilist = array($en_abcd,$en_efgh,$en_ijkl,$en_mnop,$en_qrst,$en_uvwxyz,$jp_agyo,$jp_kagyo,$jp_sagyo,$jp_tagyo,$jp_nagyo,$jp_hagyo,$jp_magyo,$jp_yagyo,$jp_ragyo,$jp_wagyo);
  $mojilabel = array("A-D","E-H","I-L","M-P","Q-T","U-Z","あ行","か行","さ行","た行","な行","は行","ま行","や行","ら行","わ行");

  $args = Array(
    'post_type' => 'dictionary', //投稿タイプを指定
    'meta_key' => $furigana,
    'orderby' => 'meta_value',
    'order' => 'ASC',
  );

  $wp_query = new WP_Query($args);

  $i = 0;

  if ( have_posts() ):
  while ( have_posts() ) : the_post();

  $first_word = get_field($furigana);
  $first_word = mb_substr($first_word, 0, 1);

  foreach ($mojilist as $value):
    if(strpos($value, $first_word)):

      //見出しをつける
      $arrayindex = array_search($value, $mojilist);

      if($i == 0){
        //最初のみ
        echo  '<h2>'. $mojilabel[$arrayindex] .'</h2><ul>';
        ${"count".$arrayindex} = ${"count".$arrayindex} + 1;
        $i = $i + 1;

      }else{

        if(${"count".$arrayindex} == 0){
          echo  '</ul><h2>'. $mojilabel[$arrayindex] .'</h2><ul>';
        }
        ${"count".$arrayindex} = ${"count".$arrayindex} + 1;

      }
  ?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  <?php endif; endforeach;  endwhile; ?>
<?php if ( have_posts() ): ?></ul><?php endif; ?>			
<?php endif; ?>

投稿タイプは、今回はカスタム投稿の「dictionary」です。ここは自分のソートしたい投稿タイプを選択してください。

今回はarchive.phpに記載していますが、index.phpやsingle.phpでも表示されます。

現状は「あ行」などのくくりにしていますが、増えたら「あ」「い」「う」「a」「b」「c」などに区切る予定です。

もしそのパターンにしたい人は、$agyoなどの変数を増やし、$mojilistと$mojilabelに設定するとそのまま使えます。