WordPressで記事を見出し付きで50音順に一覧表示する方法

WordPressで記事を50音順に一覧表示する方法を紹介します。

WordPressで記事を見出し付きで50音順に一覧表示する方法

「あ行」、「か行」、「さ行」のように行ごとの見出しを設けて、さらにその中に「ア」、「イ」、「ウ」と50音見出しを用意して、それぞれに記事を表示します。

最終的にはこのようなコードで表示されます。

<h2>あ行<h2>
  <h3>ア<h3>
  <ul>
    <li><a href="https://www.webtoolnavi.com/post1/">アーサー王物語</a></li>
    <li><a href="https://www.webtoolnavi.com/post2/">愛読癖</a></li>
    <li><a href="https://www.webtoolnavi.com/post3/">「愛と死」</a></li>
    <li><a href="https://www.webtoolnavi.com/post4/">アイヌ語のおもしろさ</a></li>
    <li><a href="https://www.webtoolnavi.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]というショートコードを作成します。

function.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); // 先頭の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音見出し付きで、記事を50音順表示することができます。

WordPressで記事を見出し付きで50音順に一覧表示する方法

プラグイン「Table of Contents Plus」を使えば、ページ先頭にページ内リンクつきの目次を自動生成することも可能です。

目次付き50音順リスト

WordPressテーマの人気記事

おすすめのWordPressテーマ105選【2017年版】
おすすめのWordPressテーマ105選【2017年版】
2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

コメント

  • Posted on
  • Updated on
  • Views 1,545