WordPressで用語集を作る

最近、「それって、何？」「Blockchain MEMO」という新しいWebサイトを作りました。

「それって、何？」は、自分にとって初耳の言葉を調べて詳しく紹介するサイトなんだけど、紹介する言葉が増えてきたので索引を作りたいなと思ったのと、「Blockchain MEMO」は、ブロックチェーンについて調べたことをメモしておくサイトなんだけど、せっかくだからこれに用語集を入れたいなと思ったんです。

そこで、WordPressで用語集を作りたいときは、どうしたらいいんだろうということで探して、見つけ出したのが「CM Tooltip Glossary」というプラグインでした。

CM Tooltip Glossary

「CM Tooltip Glossary」は、用語をばんばん入力していくと、それに併せて索引を作ってくれる便利なプラグインです。しかも、投稿記事の中に用語集に登録された用語が出てくると、マウスオーバーで解説が吹き出し表示してくれる（オン、オフあり）という優れものでした。

だが、しかし、これ日本語も対応しているんだけど、自動的に作られる索引が、アルファベットでしか分類できはないという仕様でした……。

ちなみに上の画像は、日本語に対応させるために固定ページを力づくで作り、それらしくなった完成形です。

デフォルトでは、こうなります。

このページは、用語を入力するだけ自動で作ってくれるので便利なんですが、インデックスがアルファベットでしか分類されないという問題がありました……。しかも入力タイトルの頭文字を勝手に見て、それで分類をしてくれるので、日本語の場合は、全部「ALL」にまとめられてしまうんです。

やっばり、50音順もほしいですよね。

ということで、索引となる固定ページは人力なんですが、それでもその他の機能が用語集として魅力的なので、やっぱり「CM Tooltip Glossary」を使うことにしました。というわけで、インストールと設定について、忘れちゃわないようにメモしておきます。

まずはプラグインをインストール

プラグイン名は、「CM Tooltip Glossary」。名前がわかっているのでWordPressのダッシュボード→プラグイン→新規追加のページに移動して「キーワード」に「CM Tooltip Glossary」を入れて検索をします。

あとは、「今すぐインストール」ボタンを押して、そのままインストール。インストール後は、「有効化」をオンにします。

有効にしたら「Setting」で設定

有効にすると、ダッシュボードにCM Tooltip Glossaryの項目が追加され、次の画面に移行します。移行しない場合は、ダッシュボードのメニューから選択しましょう。

この画面は、今後、更新情報をもらったり、Pro版にアップグレードしますかという案内等ですので、特に何もする必要はありません。サクッと「Skip」を選択しちゃってもかまいません。

Skip後の画面には、英語ですがCM Tooltip Glossaryの使い方も載っています。ちなみに上部のリンクをクリックすることで、Skip前の画面に戻れます。

まずは「Installation Guide」を確認しましょう。ここで、用語集の使い方、用語登録の方法がわかります。

では、流れをメモしておきます。

まずは用語を登録します。

用語の登録は「CM Tooltip Glossary menu」の「Add New」を選択します。

Add Newで記事投稿のような画面になるので、タイトルとコンテンツを入力しましょう。

ちなみに、このサイトは用語集ではなく初耳の言葉を紹介する記事の索引なので記事で紹介している言葉をタイトルにして、中身は簡単な説明にとどめ、詳細は記事に飛ばしています。

ちなみに、用語集のほうはこんな感じに入力してます。

コンテンツを入力したら、記事と同様に「公開」を押して終了です。

CM Tooltip Glossary menuの「Glossary」を選択すると、入力済みの用語の一覧が見られます。投稿の一覧と同様、入力後の内容変更は一覧から、再度アイテムを選択することになります。

おさらいです。用語の入力は「Add New」、確認は「Glossary」にて一覧表示です。

この段階で、固定ページを確認すると「Glossary」というインデックスページが勝手に作られています。

この固定ページのタイトルを「用語集」や「索引」に変え、表示させることで用語集のインデックスが完成します。「Add New」で追加した用語も自動で追加されていくのですが、冒頭でいったように日本語はひとまとめに「ALL」でくくられてしまいます。

こんな感じになってしまうんですよね。アルファベット表記の用語なら勝手にABC順にわけてくれるんですが……。

こんなふうに用語を追加するとインデックスにも自動追加してくれるんですが……。美しくない。ここは、やっぱり固定ページを作って、自分で分類することにしました。手間ですが、そっちのほうが使いやすいし、わかりやすいと思います。

索引用固定ページを作る

それが、これです。

50音順とABC順のインデックスをページ内リンクで作ります。「あかさたな」「ABC」それぞれのラベルを貼って、ジャンプさせます。

で、各用語を自分で50音順もしくはABC順に分類し、手作業でキーワードを追記していきます。

幸い、CM Tooltip Glossaryは、記事内、固定ページ内に、「Add New」で登録した文字列があると、従来のインデックスと同様に、その用語に飛ぶこともできれば、マウスオーバーによる吹き出しの表示も可能です。ですので、ひとことキーワードを追記していけばいいんです。簡単ですよね。

用語を追加したときに、自分で作ったインデックスページに用語も追記すればいいだけです。

その完成形が、こちらです。

なんならボトムにもインデックスを追加しておきましょう。

以上が、CM Tooltip Glossaryの用語登録の方法とインデックスの使い方です。あとは、細かい設定ありますので、そっちもちょっとメモしておきましょうかね。

CM Tooltip Glossaryの設定

CM Tooltip Glossaryの設定はダッシュボードから「Settings」を選択します。で、一般的な設定は「General Settings」タブをクリックします。

上から順番に説明します。

「Glossary Index Page ID」は、固定ページのどのページをインデックスにするかを設定できます。デフォルトは「Glossary」でしたが、ここでは自分で作った固定ページに手作業で入力することを選んだので「None」としました。

「Glossary Terms Permalink」は、パーマリンクです。通常はそのままでよいでしょう。変えたい人は、適宜どうぞ。

「Highlight terms on posts?」は、記事内の用語を強調するか否か。強調したいときは、チェックを入れます。

「Highlight first term occurance only?」は、用語が複数回登場する場合、初出のみ強調したい場合にチェックを入れます。ちなみに用語が日本語の場合、うまく2度目以降の用語が強調されない場合がありますが、その場合は用語の前に半角スペースを入れるとうまくいくことがあります。

「Only show terms on single posts/pages (not Homepage, authors etc.)?」は、投稿ページと固定ページの用語のみを強調する際にチェックを入れます。今回のように固定ページに手動でインデックスを作った場合は、チェックを入れる必要があります。

「Highlight terms on pages?」は、登録用語が固定ページに出てきた場合にも強調したい場合は、チェックを入れます。

「Terms case-sensitive?」は、大文字、小文字を区別したいときにチェックを入れます。

ちなみに、ここでの強調は用語集に登録されている単語としてリンクが貼られることを意味しています。太文字の強調ではありません。

「Debug/Conflict Settings」は、デバッグ用です。他のプラグインやテーマと競合（ぶつかっているともいう）し、うまく動作しないときに試すモードです。

「Only highlight on “main” WP query?」は、テーマとの衝突が考えられる場合にチェックを入れるとうまくいくことがあるようです。

「Run the function outputting the Glossary Index Page only once」は、たのプラグイン（翻訳系など）との衝突が考えられる場合にチェックを入れるとうまくいくこともあるようです。

「Page Builder Support」は、プレミアム版のサポート用です。

「Referrals」は、プレミアム版を紹介することで報酬がもらえるプレミアム版購入者向けのアフィリエイト用です。

「Author attribution」は、プラグインの情報拡散用著作権者リンクです。

「Glossary Index Page Settings」は、インデックスページの設定用タブです。

「Style glossary index page differently?」は、チェックを入れることで、インデックスのスタイルを変更できます。
用語集のインデックスのリンクスタイルを通常の用語リンクのスタイルとは異なるものにする場合は、このオプションを選択します。 オプションを選択すると、クラス ‘glossaryLinkMain’を使用して、用語集インデックスのリンクのみのスタイルを設定できます。それ以外の場合、クラス ‘glossaryLink’は保持され、他のすべてのページのリンクされた用語と同じになります。

「Tile width」は、タイル幅の指定ができます。

「Show glossary index page as tiles」は、用語集をタイル表示にする場合にチェックを入れます。通常は、箇条書き表示です。

「Glossary Term – Links」は、用語集の用語リンクの設定タブです。

「Remove link to the glossary term page?」は、用語リンクを削除します。マウスオーバーの吹き出しのみ動作します。

「Show HTML “title” attribute for glossary links」は、用語集リンクのHTML「タイトル」属性を表示します。吹き出しのほかに、小さくタイトルが表示されます。

「glossary term page? Open glossary term page in a new windows/tab?」は、新しいウィンドウ/タブで用語集リンクを開きます。

「Show back link on the bottom」は、チェックを入れることで、用語集ページの下部に索引へのリンクを自動的に貼ります。今回のような索引には、使えません（オリジナルのインデックス用）。

「Tooltip – Content」は、ツールチップ、つまり吹き出しの設定用タブです。

「Show tooltip when the user hovers over the term?」は、マウスオーバー時に吹き出しを表示するか否かです。チェックを入れると用語集の吹き出しを表示します。

「Use term excerpt for hover?」は、吹き出しの内容を要約にしたい場合にチェックを入れます。

「Limit tooltip length?」は、ツールチップの長さを指定できます。限られた数の文字のみを表示し、ツールチップテキストの最後に「（…）」を追加する場合は、このオプションを選択します。 最小文字数は30文字です。

「Clean tooltip text?」は、ツールチップテキストから余分なスペースや特殊文字を削除したい場合に、このオプションを選択します。

「Avoid parsing protected tags?」は、Script, A, H1, H2, H3, PREのタグに用語集を使用しないようにするオプションです。

以上、CM Tooltip Glossaryの導入、使い方メモでした。