WordPressで記事を50音順に一覧表示する方法を紹介します。
「あ行」、「か行」、「さ行」のように行ごとの見出しを設けて、さらにその中に「ア」、「イ」、「ウ」と50音見出しを用意して、それぞれに記事を表示します。
最終的にはこのようなコードで表示されます。
<h2>あ行<h2>
<h3>ア<h3>
<ul>
<li><a href="https://www.wp-benricho.com/post1/">アーサー王物語</a></li>
<li><a href="https://www.wp-benricho.com/post2/">愛読癖</a></li>
<li><a href="https://www.wp-benricho.com/post3/">「愛と死」</a></li>
<li><a href="https://www.wp-benricho.com/post4/">アイヌ語のおもしろさ</a></li>
<li><a href="https://www.wp-benricho.com/post5/">アイヌ族の俚謡</a></li>
<h3>イ<h3>
<ul>
<li><a href="https://www.animenomori.com/post6/">いいおじいさんの話</a></li>
<li><a href="https://www.animenomori.com/post7/">伊賀、伊勢路</a></li>
<li><a href="https://www.animenomori.com/post8/">医学の歴史</a></li>
<li><a href="https://www.animenomori.com/post9/">イギリス海岸</a></li>
<li><a href="https://www.animenomori.com/post10/">イーサル川</a></li>
</ul>
<h3>ウ<h3>
・・・
<h3>エ<h3>
・・・
<h3>オ<h3>
・・・
<h2>か行<h2>
<h3>カ<h3>
・・・
<h3>キ<h3>
・・・
・・・
・・・
<h2>わ行</h2>
<h3>ワ</h3>
・・・
<h3>ヲ</h3>
・・・
<h3>ン</h3>
・・・
カスタムフィールドにヨミガナを入力する
まずは、記事に「yomi」という名前のカスタムフィールドを用意して、記事タイトルのヨミガナを入力します。
カスタムフィールドの設定は、プラグイン「Custom Field Template（カスタムフィールドテンプレート）」を使うと簡単です。
プラグインをインストールしたら、設定 > カスタムフィールドテンプレート に進みます。
以下のように、カスタムフィールドを設定します。
[yomi] type = text size = 35 label = ヨミ
「size = 35」というのは文字数制限です。35なので、35文字までです。もっと長くしたい場合は設定値を大きくします。
入力したら、「オプションを更新する」ボタンを押して、カスタムフィールドの設定は完了です。
記事投稿ページの下部にカスタムフィールドテンプレートが表示されます。「読込」ボタンを押すと、入力欄が表示されます。
ヨミガナは全角カタカナで入力します。
50音順表示用のショートコードを作成する
50音表示用の[yomilist]というショートコードを作成します。
functions.phpに以下のコードを追記します。
function yomilistFunc( $atts ) {
// インデックス（行）
$indexes_parents = array(
"あ行" => "[ア-オ]",
"か行" => "[カ-コ]",
"さ行" => "[サ-ソ]",
"た行" => "[タ-ト]",
"な行" => "[ナ-ノ]",
"は行" => "[ハ-ホ]",
"ま行" => "[マ-モ]",
"や行" => "[ヤ-ヨ]",
"ら行" => "[ラ-ロ]",
"わ行" => "[ワ-ン]",
"その他" => ".*"
);
// インデックス（50音）
$indexes = array(
"ア" => "[ア]", "イ" => "[イ]", "ウ" => "[ウ]", "エ" => "[エ]", "オ" => "[オ]",
"カ" => "[カ]", "キ" => "[キ]", "ク" => "[ク]", "ケ" => "[ケ]", "コ" => "[コ]",
"サ" => "[サ]", "シ" => "[シ]", "ス" => "[ス]", "セ" => "[セ]", "ソ" => "[ソ]",
"タ" => "[タ]", "チ" => "[チ]", "ツ" => "[ツ]", "テ" => "[テ]", "ト" => "[ト]",
"ナ" => "[ナ]", "ニ" => "[ニ]", "ヌ" => "[ヌ]", "ネ" => "[ネ]", "ノ" => "[ノ]",
"ハ" => "[ハ]", "ヒ" => "[ヒ]", "フ" => "[フ]", "ヘ" => "[ヘ]", "ホ" => "[ホ]",
"マ" => "[マ]", "ミ" => "[ミ]", "ム" => "[ム]", "メ" => "[メ]", "モ" => "[モ]",
"ヤ" => "[ヤ]", "ユ" => "[ユ]", "ヨ" => "[ヨ]",
"ラ" => "[ラ]", "リ" => "[リ]", "ル" => "[ル]", "レ" => "[レ]", "ロ" => "[ロ]",
"ワ" => "[ワ]", "ン" => "[ン]",
"その他" => ".*"
);
global $post;
// 記事データを取得
// 記事の取得条件
$args = array(
'posts_per_page' => '-1', // 取得記事数無制限
'post_status' => 'publish', // 公開中
'meta_key' => 'yomi', // カスタムフィールドyomiを持っている記事
'meta_value' => '', // カスタムフィールドyomiの値は指定しない
'orderby' => meta_value, // カスタムフィールドyomiの値を基準に並び替え
'order' => asc // 昇順に並び替え
);
$my_posts = get_posts($args); // 上記条件で記事を取得
$post_data_set = array(); // 配列$post_data_setを用意
// 上記条件の投稿があるなら
if ($my_posts) {
foreach ($my_posts as $post) : // ループスタート
setup_postdata($post); // get_the_title() などのテンプレートタグを使えるようにする
// ヨミガナの1文字目を取得する（濁点、半濁点は分離）
$yomi = get_post_meta($post->ID, 'yomi', true); // カスタムフィールドyomiの値を取得
$yomi_conv = mb_convert_kana($yomi, 'k', 'UTF-8'); // 全角カタカナを半角カタカナに変換（濁点、半濁点を分離）
$yomi_conv = mb_convert_kana($yomi_conv, 'K', 'UTF-8'); // 半角カタカナを全角カタカナに変換
$yomi_first = mb_substr($yomi_conv, 0, 1); // 先頭の１文字を取得
// 配列に格納する
$posts['title'] = get_the_title(); // タイトル
$posts['permalink'] = get_permalink(); // URL
$posts['yomi'] = $yomi; // ヨミガナ
$posts['yomi_first'] = $yomi_first; // ヨミガナ1文字目
$post_data_set[] = $posts; // 配列に格納
endforeach; // ループ終わり
}
// インデックス（50音）ごとの配列に格納する
$post_data_set_index = array();
foreach ( $post_data_set as $key => $val) {
$char = mb_substr( $val['yomi_first'], 0, 1);
foreach ( $indexes as $index => $pattern ) {
if (preg_match("/^" . $pattern . "/u", $char)) {
$post_data_set_index[$index][] = $post_data_set[$key];
break;
}
}
}
// インデックス（行）ごとの配列に格納する
$post_data_set_index_parent = array();
foreach ( $post_data_set_index as $key => $val) {
foreach ( $indexes_parents as $indexes_parent => $patterns ) {
if (preg_match("/^" . $patterns . "/u", $key)) {
$post_data_set_index_parent[$indexes_parent][$key] = $post_data_set_index[$key];
break;
}
}
}
// HTML出力
$output = "";
if ($post_data_set_index_parent) {
// 行ごとに展開
foreach ($post_data_set_index_parent as $indexes_parent => $posts) : // ループスタート
$output .= '<h2>'.$indexes_parent.'</h2>';
// 50音ごとに展開
foreach ($posts as $index => $post) : // ループスタート
$output .= '<h3>'.$index.'</h3>';
$output .= '<ul>' . "\n";
foreach ($post as $key => $val) {
$output .= '<li>';
$output .= '<a href="' .$val['permalink']. '">' .$val['title']. '</a>';
$output .= '</li>' . "\n";
}
$output .= '</ul>' . "\n";
endforeach; // ループ終わり
endforeach; // ループ終わり
}
// クエリのリセット
wp_reset_postdata();
return $output;
}
add_shortcode('yomilist', 'yomilistFunc');
ポイントは、ヨミガナ（カスタムフィールド「yomi」）を取得して、一度半角カタカナに変換していることです。全角カタカナの「ガ」や「パ」などは、半角カタカナに変換することで「ｶ + ゛」「ﾊ + ゜」のように濁点、半濁点が分離されます。こうすることで、「ガガーリン」を「カ」の欄に配置することができます。記事の50音順並び替えはこの前に行っているので、正しい50音順のルールにもとづいて、「カラス」→「ガガーリン」という順番で表示されます。
また、記事が存在しない見出しは表示されないので、記事数が少なくても、見た目がスカスカになることがありません。
あとは、記事を50音順表示したいページの記事本文に[yomilist]と記入することで、記事の50音順表示が可能になります。
以下のように「あ行」、「か行」のような行見出し、「ア」、「イ」のような50音見出し付きで、記事を50音順表示することができます。
プラグイン「Table of Contents Plus」を使えば、ページ先頭にページ内リンクつきの目次を自動生成することも可能です。
