Wordpressで用語集システムを自作する方法

Wordpressサイトに用語集コンテンツを構成する方法をご紹介します。

構成は用語の詳細ページ・選択カテゴリ記事一覧・用語集TOPのカテゴリ一覧ページ3種です。

現場では既にカスタマイズされたテーマに対して、改変・追加する形でご紹介しています。

Wordpressで用語集システムを自作したい

本記事は、Wordpressで用語集ページを作る方法に関する覚書です。

用語集とはその言葉通り、用語を項目別に分類・掲載したページ群の事ですね。

「あ行」「い行」「う行」等のひらがな（カタカナ）、さらにA-Zのアルファベットなど様々な頭文字で始まる用語を分類・表示させます。

頭文字以外にも、特定ジャンルやカテゴリ別に用語を並べたものもありますね。

制作ページ構成

今回の用語集は、以下の様なページ構成を予定しています。

個人的にはこの様に3段構成になるのが望ましいと思います。

従来使っているテンプレートに対し、オリジナルでphpファイルや設定を加えて構築していく手順例をご紹介します。

ページ数を稼いで検索評価を高める

少し前まではWEBサイトに用語集はよく掲載されていました。

今はあまり見かけませんが、用語集を作るのはページボリュームの増大につながりますので、検索順位への良い影響が期待できます。

ページ数を稼げる理由

ポイントになるのは選択されたカテゴリ別の一覧ページです。

今回の方法で作ると上の項目一覧ごとにパラメータ無しのURLがつきますので、ページボリュームを最大限に増やす事ができるためです。

項目が増えれば増えるほど、項目の一覧ページ自体が増えていく仕組みです。

作る順番

順番は上記の3段構成の下から構築していきます。

以上の順番です。では早速作成してきましょう。

カスタム投稿タイプの作成

まずは、カスタム投稿タイプで「用語集」追加します。

functions.phpへの追加

今回は、選択しているテーマのfunctions.phpに追記する形を取ります。

もちろんプラグインの「Custom Post Type UI」で作成する事もできますので、作成・管理しやすい方を選択ください。

今回の現場は既にfunctions.phpにカスタム投稿タイプが追加してあったので、そこにさらに追加しただけです。

functions.php記述例

function my_cutom_post_type() { // add post type register_post_type( 'yougo', array( 'labels' => array( 'name' => '用語集', //管理画面などで表示する名前 'singular_name' => '用語集', //管理画面などで表示する名前（単数形） 'all_items' => '用語集一覧',//管理画面サイドの投稿名下の表示 ), 'public' => true, 'has_archive' => true, //アーカイブページ有り 'hierarchical'=> false,//コンテンツを階層構造にするかどうか 'menu_position' => 5, 'supports' => array( //編集画面に表示するもの 'title', ), ) ); // add taxonomy register_taxonomy( 'yougo-cat', 'yougo', array( 'label' => 'カテゴリ', 'labels' => array( 'all_items' => 'カテゴリ一覧', 'add_new_item' => '用語集に新規カテゴリを追加' ), 'hierarchical' => true, 'rewrite' => array('slug' => 'yougos'), ) ); } add_action( 'init', 'my_cutom_post_type' );

上記では「用語集」専用のカテゴリも作る設定しています。

post_typeの「yougo」と、taxonomyの「yougo-cat」はきちんと入れる様にしましょう。

functions.phpを更新すると、管理画面上に「用語集」ができていると思います。

さらにカテゴリも作成できるようになっているはずです。

用語集向けカスタムフィールドの作成

用語集で入力する専用の入力ボックス（カスタムフィールド）を作成するため、今回はAdvanced Custom Fieldsプラグインを使います。

おなじみのプラグインかと思いますが、利用していない場合はインストール・有効化して下さい。

カスタムフィールドの新規追加

管理画面メニューに「カスタムフィールド」の項目が表示されていると思います。

「新規追加」を押すと「フィールドグループを新規追加」の画面になります。

タイトルと位置の設定

まずすぐ下の「タイトル」部分は、「用語集」等にしましょう。

次に「位置」の欄では、今回追加する投稿タイプは「用語集」ですので、上記の様に選んで紐づけます。

用語集のカスタムフィールド作成

では用語集の中で使うカスタムフィールドを作っていきましょう。

右下にある青いボタンの「フィールドを追加」をクリックします。

追加フィールド設定例

今回は用語集ですから、そんなにたくさんの項目は使わないはずです。

用語のタイトルとなる部分は、従来からある投稿タイトルをそのまま使っても良いと思います。

となれば後は、「説明欄」などの名前でテキストエリアを一つ増やすだけで良いでしょう。

※もちろん専用に「用語名タイトル」フィールドを作ってもOKです。

入力したら、右下の「フィールドを追加」を押して追加をします。

最後にページ右にある「追加」「更新」を押して反映させましょう。

これで用語集の投稿画面に「説明欄」という専用フィールドが表示されるようになります。

用語集記事の作成

では用語集の記事を実際に投稿してみます。

カテゴリ・スラッグの登録

用語集を投稿する前にまずはいくつかカテゴリを登録しておきましょう。

実際には「あ行」から「わ行」まで50個ちかく、AからZまでやはり50個近く登録する事になります。

※他に専用ジャンル名を入れてもOKです。

カテゴリの登録数上限としては余裕なので、気にする必要はありません。

まずは2～3個で良いので入れておいて下さい。

スラッグについて

カテゴリの登録時に、同時にスラッグ名も必ず設定します。

その際、カテゴリ名が「あ」ならスラッグは「yougo_a」など、一定の規則性を持たせましょう。

このスラッグ名が、項目別一覧ページを表示する時のURLに使われるようになるためです。

テスト記事を入れる

登録が済んだら用語集の記事を一つ書いてみます。

タイトルとカスタムフィールドの「説明欄」にそれぞれ情報を入れましょう。

そのあと右欄から必ずカテゴリを選択しなければなりません。

登録カテゴリが多くなれば当然選択しずらくなりますが、用語集ですから仕方ありませんね。

これで用語集のテスト記事の投稿までが終了しました。

用語集詳細ページの作成

ではいよいよ、用語タイトルの説明が表示される「詳細ページ」から作っていきます。

single-〇〇〇.phpの作成

functions.phpで設定した用語集のpost_typeは「yougo」でしたよね。

基本的に投稿ページの詳細は、single.phpで表示させるのがWordpressのシステムルールです。

さらにカスタム投稿タイプが「yougo」の投稿記事なら、「single-yougo.php」を準備することで自動で表示されるようになっています。

カスタム投稿タイプを「yougo」に指定する様なクエリを書く必要がない訳です。

single.phpから複製して作る

テーマ内のsingle.phpを複製してリネームし、single-yougo.phpを作りましょう。

single-yougo.php中のクエリ記述部分に関しては、特に触る必要は無いと思います。

自動でカスタム投稿タイプの「用語集」に限定したクエリが実行されるためです。

single-yougo.phpの記述例

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <div class="post"> <?php the_field('text'); ?> </div> <?php endif; ?>

カスタムフィールドの出力「get_field」

用語集の詳細では、先程設定したカスタム投稿フィールド「説明欄」を表示させる必要があります。

この説明欄のフィールド名は「yougo_text」にしていましたよね。

ですので出力するPHPコードは以下の様になります。

<?php the_field('yougo_text'); ?>

上記の様にthe_fieldを使って出力するようにしましょう。

タイトル部分は従来のタイトルを使っているのであれば、php the_title();がそのまま使えます。

これで一応、用語集の詳細ページを作ることができました。

表示チェック

先程登録した用語集の説明ページが表示されるかどうかを確認してみましょう。

投稿画面の上部にあるリンクを押すと確認できます。

タイトルと説明欄が表示されていることを確認してくださいね。

選択項目一覧ページの作成

次に、選択されたカテゴリ項目にマッチする用語集の一覧ページを作成します。

た行を選択した記事の場合

例えば「た行」を選択した場合、「た」で始まる用語タイトルが並ぶ訳ですね。

この時、投稿した用語集記事に対して「た」のカテゴリを選択しておかないと、項目に表示されませんので注意して下さい。

た行の場合の項目一覧ページURL例

用語集のカテゴリ名「た」のスラッグ名は、「yougo_ta」としています。

項目一覧ページは「yougo」のカスタム投稿タイプ名の後ろに、「yougo_ta」スラッグ名がついた形になるのがわかります。

タームごとの記事はtaxonomy.phpを使う

今回出力するのは、カスタム投稿タイプに登録したカテゴリ別の一覧になりますよね。

カスタム投稿タイプのカテゴリ群を、一般に「カスタムタクソノミー」と呼び、さらにその中のカテゴリ名称の事を「ターム（term）」と呼びます。

カスタムタクソノミーの各タームごとに記事を出力する場合は「taxonomy.php」を使います。

taxonomy-yougo.phpの作成

今回の現場では、カスタムタクソノミーごとにそれぞれ別ファイルで分けられていました。

taxonomy.phpの中でその条件分岐がされていましたので、条件自体を追加しています。

taxonomy.php内記述例

…if条件文 <?php elseif(is_tax('yougo-cat')): ?><?php get_template_part('taxonomy-yougo');?> <?php endif; ?>

その上で「taxonomy-yougo.php」を別途用意して、用語集向けに出力する事にします。

taxonomy-yougo.php内記述例

<?php if (have_posts()) : while (have_posts()) : the_post();?> <div> <?php $terms = get_the_terms($post->ID,'yougo-cat'); ?> <?php if($terms) { foreach( $terms as $term ) {echo $term->name;} } ?> </div> <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4> <p><?php the_content(); ?></p> <?php endif; ?> <?php wp_reset_postdata(); ?>

termの把握と名称

<?php $terms = get_the_terms($post->ID,'yougo-cat'); ?><?php if($terms) { foreach( $terms as $term ) {echo $term->name;} } ?>

上記の記述でtermの存在を把握し、そのtermのついた名前を呼び出しています。

例えばyougo_taのterm名のついた「た行」のカテゴリ名を表示する事になります。

続けてそれに属する記事タイトルを並べていく訳ですね。

記事リストの表示デザインは適宜変更しましょう。

用語集TOPページの作成

ではいよいよ用語集のTOPページの作成です。TOPのURLは以下の様になります。

カテゴリ名のみが表示されるページ

用語集のTOPページですから、各カテゴリ名のみが表示された状態にする必要があります。

あ行～わ行、A-Zのアルファベット、そしてその他オリジナルジャンルの名称が並ぶことになります。

archive-yougo.phpが必要

既存のテンプレートでは、index.phpが投稿記事を表示する様になっています。

ですので何も準備をしなければ、index.phpが表示されてしまいます。

archive.phpは通常の投稿一覧を表示するためだけに使われるので、ここでは影響しません。

別途archive-yougo.phpを作る必要があります。

archive-yougo.phpの作成

archive.phpを複製リネームしても良いですが、ここでは記事の一覧を表示する訳ではないので中身はごっそり変える必要があります。

カテゴリ一覧を表示するphp出力が必要になります。

archive-yougo.php内記述例

<ul> <?php $taxonomy_terms = get_terms('yougo-cat','orderby=id&hide_empty=0'); if(!empty($taxonomy_terms)&&!is_wp_error($taxonomy_terms)){ foreach($taxonomy_terms as $taxonomy_term): ?> <li><a href="<?php echo get_term_link($taxonomy_term); ?>"><?php echo $taxonomy_term->name; ?></a></li> <?php endforeach; } ?> </ul>

上記は用語集のカテゴリ名を、ulのliリスト形式で表示させています。

カスタムタクソノミーがyougo-catになっているtermを全て抽出している訳ですね。

これで用語集TOPにカテゴリ名のリンクを並べる事ができたと思います。

デザインは自分の環境に合わせて適宜変更してくださいね。

一押し人気コーナー紹介