[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', //投稿タイプを指定
    'posts_per_page' => '-1',
    '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 $index=>$value):
		$pos = strpos($value, $first_word);

		if($pos !== false):

			if($i == 0){
				//最初のみ
				echo  '<h2>'. $mojilabel[$index] .'</h2><ul>';

				$num = $index;
				$i = $i + 1;

			}else{

				if($num != $index){
					echo  '</ul><h2>'. $mojilabel[$index] .'</h2><ul>';
					$num = $index;
				}
			}
	?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endif; endforeach;  endwhile; ?>
</ul>			
<?php endif; ?>

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

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

現状は「あ行」などの括りにしていますが、「あ」「い」「う」「a」「b」「c」のパターンにしたい人は、$agyoなどの変数を増やし、$mojilistと$mojilabelに設定するとそのまま使えます。

• ワードプレス