ワードプレス(WordPress)のMulti-column Tag Mapプラグインの設定方法と使い方を解説します。
- Multi-column Tag Mapの使い方と詳細な設定方法がわかります
Multi-column Tag Mapで実現できること
Multi-column Tag Mapを導入すると、ショートコードを使ってタグの索引を表示することができます。
Multi-column Tag Mapの機能
Multi-column Tag Mapの主な機能は下記の2つです。
- ショートコードを利用して任意の位置にタグの索引を表示する
- オプションパラメーターを使って表示項目等をカスタマイズできる
Multi-column Tag Mapのマニュアル
Multi-column Tag Map公式サイトのオンラインマニュアルに各オプションパラメーターの説明が載っています↓
https://mctagmap.tugbucket.net/options/
英語ですが日本語に翻訳すれば理解できる内容です。
Multi-column Tag Mapのインストール方法
Multi-column Tag MapプラグインをWordPressにインストールする方法を解説します。
- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規プラグインを追加」をクリックします
- 検索ボックスに”Multi-column Tag Map”と入力すると下に検索結果が表示されます
- ”Multi-column Tag Map”の今すぐインストールボタンをクリックします
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面↑Multi-column Tag Mapのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Multi-column Tag Map”のインストール完了画面
“Multi-column Tag Map”を有効化すると表示されるプラグイン画面これでMulti-column Tag Mapのインストールと有効化は完了です。
Multi-column Tag Mapの設定と使い方
Multi-column Tag Mapプラグインを有効化するとダッシュボード(管理画面)の設定の中に「MC Tag Map」が表示されます↓
WorPressのダッシュボード(管理画面)の設定にある「MC Tag Map」Multi-column Tag Mapプラグインの設定画面はダッシュボード(管理画面)の設定の中の「MC Tag Map」をクリックします。
Multi-column Tag Mapの設定項目
Multi-column Tag Mapの設定画面は下記の1項目です。
※一部の項目名は日本語に翻訳しています。
- 複数列のタグマップのオプション：
∟ メディア クエリを含むカスタム CSS：
∟ 条件付き CSS：
複数列のタグマップのオプション
Multi-column Tag Mapプラグイン「MC Tag Map」の”Multi-Column Tag Map Options(複数列のタグマップのオプション)”画面↑タグの索引のデザインを変更したい場合はこのページでCSSを変更します。
Multi-column Tag Mapのショートコード
Multi-column Tag Mapは基本のショートコードに、オプションのパラメーターを追加してカスタマイズすることができます。
基本のショートコード：
[mctagmap]
↑このショートコードを任意の箇所に記述すると、2列のタグ索引が表示されます。
基本のショートコードを使ってタグ索引を表示させた実際の画面
ウィジェットのショートコードを機能を使ってMulti-column Tag Mapの基本のショートコードを埋め込む↑ウィジェット機能で基本のショートコードを使ってタグ索引を表示させてみました。
Multi-column Tag Mapのタグ索引をサイドバーに表示させた実際の画面
Multi-column Tag Mapのタグ索引を記事下部に表示させた実際の画面オプションパラメーターを追加してカスタマイズ
オプションのショートコード用パラメーターを追記することでカスタマイズできます。
[mctagmap columns="3" tag_count="yes" ]↑columns=”3″は3列表示、tag_count=”yes”はタグに紐づいている記事数を表示するオプションパラメーターです。
オプションのショートコード用パラメーターを使ってタグ索引を表示させた実際の画面
Multi-column Tag Mapのオプションパラメーターを使ってタグ索引を記事下部に表示させた実際の画面↑デフォルトの2列から3列になり、()内の数字はタグの記事数が表示されています。
Multi-column Tag Mapのショートコード用オプションパラメーター
| パラメーター名 | 初期値 | 入力値 | 意味 |
|---|---|---|---|
| author_avatar | なし | “yes” or 数文字列 | 著者のアバター画像を表示 |
| author_avatar_linked | “no” | “no” or “yes” | 著者アバター画像にリンクを追加 |
| author_bio | “no” | “no” or “yes” | 著者の経歴情報を表示 |
| authors_sort_last | “no” | “no” or “yes” | ユーザー名の姓で並び替えし、姓名の間をカンマで区切る |
| basic | “no” | “no” or “yes” | 英数字の見出しを全て削除 |
| basic_heading | “no” | “no” or “yes” | 英数字の見出しをオンまたはオフ |
| child_of | “0” | 数値 or スラッグ | カテゴリIDまたはスラッグをカンマ区切りで入力すると、リストされた親の子カテゴリまたは子ページのみを表示 |
| class | なし | テキスト文字列 | CSSコンテナにクラス追加で個々のタグマップに異なるスタイルを設定 |
| columns | “2” | “1”～”5″ | タグを表示する列数 |
| count_order | なし | “ASC” or “DESC” | tag_countと同時使用で並び替える |
| css3 | なし | “no” or “yes” | 列を作成するdivを削除 |
| denote_numbers | 0～9 | 文字列 | 見出しの数字を文字列に変更 |
| descriptions | “no” | “no” or “yes” | タグの説明を表示 |
| equal | “no” | “no” or “yes” | 行内の最も高いセクションに基づいて、水平セクションの高さを等しくする |
| exclude | なし | 文字列 | リストに表示したくないタグに含まれる文字列をカンマで区切って入力 |
| force_first | なし | 文字列 | 先頭に表示したい文字を入力 |
| force_first_nav | なし | 文字列 | show_navigationがyesに設定されている場合、 force_firstで設定されたグループが先頭に移動 |
| from_category | なし | IDorスラッグ | カテゴリIDまたはスラッグのカンマ区切りリストを入力 |
| from_current | なし | tags,categories,taxonomies | 現在の投稿のタグ、カテゴリー、タクソノミーを表示 |
| group_numbers | “no” | “no” or “yes” | 数値見出しを持つ全てのグループをグループ化 |
| hide | “no” | “no” or “yes” | 余分な結果が非表示になり、アコーディオンを使用して「もっと見る」のリンクを作成 |
| ie9 | “no” | “no” or “yes” | 閲覧者がブラウザのInternet Explorer9を使用している場合、ユーザー列を作成するdivを保持 |
| manual | “no” | カンマ区切りの文字列 | 各文字によって新しい列の始まりを作成 |
| minimum_count | 全て表示 | 数値 | 0より大きく設定すると、指定した数以上ある投稿のみを表示 |
| more | View More | 文字列 | hide=”yes”設定時のリンク文字列を変更 |
| multi_page | “no” | “no” or “yes” | show_navigation=”yes”設定時、各グループを独自のページで表示 |
| multisite | なし | “all” or カンマ区切りの文字列 | ネットワーク内のサイトのリストを表示 |
| name_divider | “|” | 文字列 | 複数単語のタグを最初の単語以外の単語で並べ替える |
| num_show | “5” | 数値 | hide=”yes”設定時「もっと見る」リンクを作成する前に表示する項目数 |
| numbers_first | “no” | “no” or “yes” | 番号をリストの最初に表示 |
| order | “ASC” | “ASC” or “DESC” | “DESC”で逆アルファベット順に表示 |
| page_excerpt | “no” | “no” or “yes” | マニュアルページがある場合は抜粋を表示 |
| page_hierarchy | “no” | “no” or “yes” | 子ページを階層表示 |
| post_tags | なし | カンマ区切りのタグ名 | show_posts設定時、指定したタグの投稿のみを表示 |
| post_type | なし | 文字列 | show_posts設定時、単一のカスタム投稿タイプを表示 |
| responsive | “no” | “no” or “yes” | widthとcolumns設定時、指定した幅と列で動的に配置 |
| search | “no” | “no” or “yes” | URLを標準のWordPress検索URLに置き換え |
| show_authors | “no” | “no” or “yes” | 投稿を公開したユーザーリストを表示 |
| show_categories | “no” | “no” or “yes” | タグではなくカテゴリを表示 |
| show_child_pages | “no” | “no” or “yes” | show_pages設定時、子ページも表示 |
| show_empty | “no” | “no” or “yes” | リンク先の投稿やページが無い場合、その旨を表示 |
| show_navigation | “no” | “no” or “yes” | force_first_nav設定時、リンクナビゲーションを表示 |
| show_pages | “no” | “no” or “yes” | デフォルトのタグの代わりにページを表示 |
| show_posts | “no” | “no” or “yes” | デフォルトのタグの代わりに投稿を表示 |
| sort_alpha | なし | カンマ区切りの文字列 | 英語以外のアルファベットを並べ替える |
| sort_alpha_extras | “no” | “no” or “yes” | sort_alpha設定時、残った文字をソートの最後に追加 |
| sort_alpha_groups | なし | グループ化する文字を | で区切ったカンマ区切りの文字列 | 英語以外のアルファベットを並べ替える |
| sort_alpha_numbers | “yes” | “no” or “yes” | “no”に設定すると、並べ替えから数値を削除 |
| tag_count | “no” | “no” or “yes” | 投稿数を表示 |
| taxonomy | なし | タクソノミーのカンマ区切り文字列 | タクソノミーを表示 |
| thumbnail | なし | 文字列 | 表示するサムネイルのサイズを指定 |
| thumbnail_linked | “no” | “no” or “yes” | thumbnail設定時、リンクにする |
| title_divider | なし | カンマ区切り文字列 | タグ名の先頭の指定文字列を除外して並び替え |
| toggle | “no” | 文字列 | hide=”yes”設定時、アコーディオンを閉じるためのリンク文字 |
| width | 190px | 例:calc(30% – 12px) | 幅をCSSを変更することなく設定 |
実際にMulti-column Tag Mapを使った感想とメリットデメリット
実際にMulti-column Tag Mapを使ってみた感じたメリットとデメリットです。
Multi-column Tag Mapのメリット
導入が簡単で、オプションパラメーターの工夫次第で、表示させる順番や内容などを変更できます。
さらに、CSSでデザインも変えることができ、カスタマイズ範囲が広いことがメリットです。
Multi-column Tag Mapのデメリット
デザインの変更はCSSの知識が必要で、オプションパラメーターも、やや導入の敷居が高いことがデメリットです。
まとめ
Multi-column Tag Mapはタグ索引を簡単に作成できるプラグインです。
固定ページでタグ索引ページを作り、グローバルナビゲーションメニューで表示させる使い方もできます。
ショートコードのオプションパラメーターを使って、自由自在に表示を変更するのは、やや難易度は高めですが、必要最低限の表示は基本のショートコードだけで十分です。
タグ索引が作れるのは当プラグインだけです。
とくに、タグ数が多いサイトやブログの場合には、サイト閲覧者の利便性が向上するのでおすすめです。
