WordPress設定

Multi-column Tag Map タグの索引を表示するプラグイン 設定方法と使い方読み終わるまで 2

Multi-column Tag Map タグの索引を表示するプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(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にインストールする方法を解説します。

  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規プラグインを追加」をクリックします
  3. 検索ボックスに”Multi-column Tag Map”と入力すると下に検索結果が表示されます
  4. ”Multi-column Tag Map”の今すぐインストールボタンをクリックします
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面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のインストールと有効化は完了です。

Multi-column Tag Mapの設定と使い方

Multi-column Tag Mapプラグインを有効化するとダッシュボード(管理画面)の設定の中に「MC Tag Map」が表示されます↓

WorPressのダッシュボード(管理画面)の設定にある「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(複数列のタグマップのオプション)"画面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のタグ索引をサイドバーに表示させた実際の画面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のオプションパラメーターを使ってタグ索引を記事下部に表示させた実際の画面Multi-column Tag Mapのオプションパラメーターを使ってタグ索引を記事下部に表示させた実際の画面

↑デフォルトの2列から3列になり、()内の数字はタグの記事数が表示されています。

Multi-column Tag Mapのショートコード用オプションパラメーター

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_numbers0~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より大きく設定すると、指定した数以上ある投稿のみを表示
moreView 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”設定時、アコーディオンを閉じるためのリンク文字
width190px例: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はタグ索引を簡単に作成できるプラグインです。

固定ページでタグ索引ページを作り、グローバルナビゲーションメニューで表示させる使い方もできます。

ショートコードのオプションパラメーターを使って、自由自在に表示を変更するのは、やや難易度は高めですが、必要最低限の表示は基本のショートコードだけで十分です。

タグ索引が作れるのは当プラグインだけです。
とくに、タグ数が多いサイトやブログの場合には、サイト閲覧者の利便性が向上するのでおすすめです。