WordPressの用語解説プラグイン「CM Tooltip Glossary」で用語一覧ページをカスタマイズした件

WordPressで用語解説といえばこのプラグイン!「CM Tooltip Glossary」です。

用語登録はもちろん、登録した用語は全ページに渡ってマウスオーバーでツールチップ(解説の吹き出し)が出るという優れもの!!

しかしこのプラグイン、デフォルトで用語一覧ページも用意されているのですが、用語一覧のデザインがちょっと古い感じなのと、CSSで非常にカスタマイズがしにくい!という惜しい点があります。

そこで今回は、「CM Tooltip Glossary」の用語一覧ページのテンプレートを一から作ってみようということで挑戦しました。

基本的な考え方

「CM Tooltip Glossary」は用語登録にカスタム投稿を使っています。つまり構造は通常の投稿記事と変わらないんですね。なので基本は用語のpost_type指定で投稿データを絞り込んで取得、整形すればよいということです。

ただその際ソートに通常の投稿タイトルを使ってしまうと漢字のときに困ってしまいます。ですので、頭文字でソートをかけるための情報をカスタムフィールドで別に持っておく必要があります。

つまり下準備として、カスタムフィールドのプラグインの導入と、フリガナ用のカスタムフィールドの設置~登録が必要ということになります。

そして実際にコーディングした用語一覧ページのテンプレートがこちら!

page-glossary.php

<?php
/**
* Template Name: page-glossary
**/
get_header(); ?>

<?php
$furigana = 'd_furigana';
$nav_id   = 'furigana_nav_';

$en_a = "a";
$en_b = "b";
$en_c = "c";
$en_d = "d";
$en_e = "e";
$en_f = "f";
$en_g = "g";
$en_h = "h";
$en_i = "i";
$en_j = "j";
$en_k = "k";
$en_l = "l";
$en_m = "m";
$en_n = "n";
$en_o = "o";
$en_p = "p";
$en_q = "q";
$en_r = "r";
$en_s = "s";
$en_t = "t";
$en_u = "u";
$en_v = "v";
$en_w = "w";
$en_x = "x";
$en_y = "y";
$en_z = "z";
$en_0123456789 = "0123456789";

$jp_agyo = "あいうえお";
$jp_kagyo = "かきくけこがぎぐげご";
$jp_sagyo = "さしすせそざじずぜぞじゃじゅじょ";
$jp_tagyo = "たちつてとだぢづでど";
$jp_nagyo = "なにぬねの";
$jp_hagyo = "はひふへほばびぶべぼぱぴぷぺぽびゅ";
$jp_magyo = "まみむめも";
$jp_yagyo = "やゆよ";
$jp_ragyo = "らりるれろ";
$jp_wagyo = "わをん";

$mojilist = array(  $jp_agyo,
$jp_kagyo,
$jp_sagyo,
$jp_tagyo,
$jp_nagyo,
$jp_hagyo,
$jp_magyo,
$jp_yagyo,
$jp_ragyo,
$jp_wagyo,
$en_a,
$en_b,
$en_c,
$en_d,
$en_e,
$en_f,
$en_g,
$en_h,
$en_i,
$en_j,
$en_k,
$en_l,
$en_m,
$en_n,
$en_o,
$en_p,
$en_q,
$en_r,
$en_s,
$en_t,
$en_u,
$en_v,
$en_w,
$en_x,
$en_y,
$en_z,
$en_0123456789);

$mojilabel = array( "あ行",
"か行",
"さ行",
"た行",
"な行",
"は行",
"ま行",
"や行",
"ら行",
"わ行",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
"0-9");

$args = Array(
  'post_type' => 'glossary',
  '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>';
  }
  ?>

  <?php get_footer(); ?>

テーマフォルダの直下にアップロードして、固定ページに出てくるこちらのテンプレートを指定すればOKです。

クラス名も番号で分かれているのでCSSでのデザイン調整もできるかと思います。

ぜひ試してみてくださいね!

執筆者情報

田所雄介

田所雄介

Web制作事務所タドワークス代表。Webマーケティングをベースにしたコンテンツ設計からWeb開発まで、幅広い実践的スキルを持つジェネラリスト。
https://tadworks.jp/