独学 [ Word Press ]
2021/03/23 更新
[WordPress]投稿をあいうえお順やアルファベット順でソートして見出しをつける
![[WordPress]投稿をあいうえお順やアルファベット順でソートして見出しをつける](https://hp-maruwakari.com/wp-content/uploads/2019/07/img_wp_aiueo-1024x640.png)
ワードプレスの記事一覧をあいうえお順やアルファベット順にソートして、あ行、か行などの見出しを付ける方法を説明します。
このサイトのインターネット用語辞典のように出力されます。
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に設定するとそのまま使えます。