[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に設定するとそのまま使えます。

4.ナビゲーション付きのソースコード

リクエストいただきましたので、ナビゲーション付きのソースコードも作成しました。コンテンツの上部に、各見出しにページ内リンクするナビゲーションが付きます。

<?php
    $furigana = 'd_furigana'; //acfのフィールド名
    $nav_id = 'furigana_nav_'; //ナビゲーションID　冒頭

    $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;
    $display = [];
    $nav_list = [];

    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){
                //最初のみ

                //見出し
                $heading = '<h2 id="'.$nav_id.$index.'">'. $mojilabel[$index] .'</h2><ul>';
                array_push($display, $heading);

                //ナビゲーション
                $nav = '<li><a href="#'.$nav_id.$index.'">'. $mojilabel[$index] .'</a></li>';
                array_push($nav_list, $nav);

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

            }else{

                if($num != $index){
                    //見出し
                    $heading = '</ul><h2 id="'.$nav_id.$index.'">'. $mojilabel[$index] .'</h2><ul>';
                    array_push($display, $heading);

                    //ナビゲーション
                    $nav = '<li><a href="#'.$nav_id.$index.'">'. $mojilabel[$index] .'</a></li>';
                    array_push($nav_list, $nav);

                    $num = $index;
                }
            }

            $single_link = get_permalink();
            $single_title = get_the_title();

            $single = '<li><a href="'.$single_link.'">'.$single_title.'</a></li>';

            array_push($display, $single);
        }

     endforeach;  endwhile; endif;

    //ナビゲーション　出力
    if($nav_list){
        echo '<nav><ul>';
        foreach ($nav_list as $value){
            echo $value;
        }
        echo '</ul></nav>';
    }

    //コンテンツ　出力
    if($display){
        foreach ($display as $value){
            echo $value;
        }
        echo '</ul>';
    }
?>

$nav_idは、ページ内リンクに使用するid名の冒頭の文字を設定してください。語尾にインデックスが付くようにしており、この場合「furigana_nav_1」「furigana_nav_2」になります。

ソースコードは、記事取得のwhile文を2度ループしたくなかったので、1度のループ時にナビゲーションとコンテンツのそれぞれのソースを格納してから出力しています。

ホームページ作成「ホムペCreate」トップに戻る