WordPressで索引を簡単作成、「タグ」をリスト化するプラグイン[Multi-column Tag Map]が便利

2019年10月18日

WordPressで簡単に索引が作れるプラグインの紹介です。索引(さくいん)があると「単語」から該当のブログ記事を探すことができ、調べ物をしたい時にとても便利です。タイトルに含めることができなかった単語などを登録して検索できるようにしたり、一つの記事に複数設定できるのも使い勝手がよいですね。
 この記事では Multi-column Tag Map というプラグインを利用することでとても簡単に索引ページを作ることができます。また自動で更新されるので、操作はタグを設定するだけ、手間いらずなのが嬉しいです。今回は固定ページで索引ページを作成して、サイドバーに索引ページへのリンクを貼ったバナーを設置しました。
 自分のブログでも、どこに書いてあったかを探すことがちょくちょくあり、「索引があったら便利だな〜」と思ったのがきっかけです。ブログを訪れてくれたユーザーが、サイト内をしっかり回遊してくれるきっかけにもなるので、SEO対策やPVの獲得にも効果がありそうです。

 

Multi-column Tag Map

索引を自動で作成してくれるプラグインがありました。記事に設定する「タグ」情報から自動的に索引を作ってくれ、追加や削除も「タグ」操作のみでOKです。とても簡単です(^^)

 

Multi-column Tag Mapのインストール

まずは、プラグイン「Multi-column Tag Map」のインストールをします。

ダッシュボード左メニューより [プラグイン]>>[新規追加]をクリックします。

キャプチャー、プラグイン

 

①検索ウィンドウに[Multi-column Tag Map] と入力します。
②検索結果に表示された「Multi-column Tag Map」の[今すぐインストール]をクリックします。

キャプチャー、プラグインのインストール

インストールが終了すると、ボタンが [有効化]に変わります、
[有効化]をクリックします。
キャプチャー、プラグインの有効化

ボタンが[有効]となればインストールと有効化は完了です。
キャプチャー、インストール完了

Multi-column Tag Mapの設定

「Multi-column Tag Map」には、プラグインそのものの設定画面はありません。利用方法は「索引」を表示したいページに、以下のコードを貼り付けることで索引が作成されます。今回は、固定ページを作成し「索引を表示させます。」

ダッシュボード左メニューより [固定ページ]>>[新規追加]をクリックします。

キャプチャー、固定ページ新規作成

 

①タイトルを入力します
ここで一旦下書き保存します。
②パーマリンクを編集します(下書き保存をするとパーマリンクが表示されます)
③ビジュアルの編集画面を選択します
④コードを貼り付けます。
*コードは以下からコピペしてください

キャプチャー、索引用の固定ページ作成

 

貼り付けコード(以下のコードをコピペしてください)

[mctagmap columns=“3” hide=“yes” num_show=“3” more=more »
toggle=”« less” show_empty=”yes” name_divider=”|” tag_count=”yes
exclude=”2015, exposition” descriptions=”yes” width=”170” equal=”yes
manual=”” basic =”no” basic_heading=”no]

上記のコードはカスタマイズ(表示内容の変更)ができます。以下を参照ください

主に変更する部分を抜粋しています。

mctagmap columns=3“ :カラムの数(索引の段組み数)
hide=yes“ :タグが表示行数以上の場合隠す設定(yes=隠す、no=隠さない)
num_show=3“ :表示行数
tag_count=yes”  :単語の後ろに該当記事数表示 (yes=表示、no=非表示)
width=170“ :カラムの横幅(1行の幅をpxで設定)

まずは、デフォルトのまま設定し表示を確認しながら調整してみてください。

表示結果を確認

固定ページを下書きから[公開]にし、表示結果を確認します。

レスポンシブにも対応していて、バッチリです!
*アンダーラインやサイドのバーはCSSで調整できるようです。

キャプチャー、表示結果

P.s 記事数が表示されていない?ちょっと様子をみることにします。

 

漢字を使用した場合の表示

索引に漢字を使用すると、最初の漢字一字で索引が作られます。索引に漢字は使用せずひらがなまたはカタカナ表記をお勧めします。

漢字を使用した場合の表示例

以下のように、漢字一字でインデックスが作成されます。

キャプチャー、漢字のインデックス

ひらがな表記に変えてみました。
*語句として探しやすいように、後ろに漢字を表示しています。
キャプチャー、インデックスのひらがな表記

表示結果は以下です。
キャプチャー、表示結果

 

サイドバーにリンクのバナーを設定

索引ページへのリンクを作成します、今回はサイドバーにバナーを設置してリンクを貼りました。

リンクを貼る画像の作成

リンクを貼る用の画像を作成、もともと設置していたタグクラウドのウイジェットをキャプチャーして作ってみました。(タグクラウドのウイジェットは索引と同じ働きなので、削除します)

<作成した画像>
キャプチャー、リンクを貼る画像

 

サイドバーへウイジェット設置

サイドバーへの設置は、ウイジェットの[テキスト]を使用します。

タイトルを入力します
②画像を挿入します
 *画像の編集画面でサイズ表示位置リンク設定をします
③説明を画像のキャプションでいれました
④完了したら、[保存]ボタンをクリックします
キャプチャー、テキストウイジェットの設定

 

サイドバーの表示です。
キャプチャー、サイドバーの表示

 

サイドバーに自由入力の[検索欄]と[カテゴリー]と並べて、用途に応じた検索ができるよう探し方の説明を補足記載しました。

キャプチャー、サイドバーのその他の検索