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

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

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

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

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

スポンサーリンク

カスタムフィールドにヨミガナを入力する

まずは、記事に「yomi」という名前のカスタムフィールドを用意して、記事タイトルのヨミガナを入力します。

カスタムフィールドの設定は、プラグイン「Custom Field Template(カスタムフィールドテンプレート)」を使うと簡単です。

プラグインをインストールしたら、設定 > カスタムフィールドテンプレート に進みます。

カスタムフィールドテンプレート

以下のように、カスタムフィールドを設定します。

カスタムフィールドテンプレート

「size = 35」というのは文字数制限です。35なので、35文字までです。もっと長くしたい場合は設定値を大きくします。

入力したら、「オプションを更新する」ボタンを押して、カスタムフィールドの設定は完了です。

オプションを更新する

記事投稿ページの下部にカスタムフィールドテンプレートが表示されます。「読込」ボタンを押すと、入力欄が表示されます。

ヨミガナは全角カタカナで入力します。

カスタムフィールド

50音順表示用のショートコードを作成する

50音表示用の[yomilist]というショートコードを作成します。

function.phpに以下のコードを追記します。

ポイントは、ヨミガナ(カスタムフィールド「yomi」)を取得して、一度半角カタカナに変換していることです。全角カタカナの「ガ」や「パ」などは、半角カタカナに変換することで「カ + ゛」「ハ + ゜」のように濁点、半濁点が分離されます。こうすることで、「ガガーリン」を「カ」の欄に配置することができます。記事の50音順並び替えはこの前に行っているので、正しい50音順のルールにもとづいて、「カラス」→「ガガーリン」という順番で表示されます。

また、記事が存在しない見出しは表示されないので、記事数が少なくても、見た目がスカスカになることがありません。

あとは、記事を50音順表示したいページの記事本文に[yomilist]と記入することで、記事の50音順表示が可能になります。

50音順表示

以下のように「あ行」、「か行」のような行見出し、「ア」、「イ」のような50音見出し付きで、記事を50音順表示することができます。

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

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

目次付き50音順リスト

スポンサーリンク

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.11.02
  • Views 104