ブログ

内部リンクを可視化させマップを作成するプラグイン「Show Article Map」

 

サイトやブログを作成していく中で重要な内部リンク。

そんな内部リンクをマップ化して表示することができる便利な
プラグインを試してみました。

NAEさん作成のプラグイン「Show Article Map」です。

 

Show Article Mapの導入方法

 

サクッと説明していきましょう

まずは、開発者のNAEさんのHPからzipファイルをダウンロードしてきます。

https://www.naenote.net/entry/show-article-map#i-7

 

wordpressで
プラグイン>新規追加>プラグインのアップロードと進みます。
(zipファイルのままで大丈夫です。DLしてきてそのままでOK)

wordpressでプラグインを新規追加する画像

WordPressからプラグイン>新規追加へと移動

wordpressでプラグインをアップロードする画像

上の方にある、「プラグインのアップロード」を選択し、
先ほどダウンロードしてきたZipファイル(show-article-map-0.7.zip)を指定。

 

これだけで設定は完了です。

Show Article Mapの使用方法

 

使用方法は

ざっくり言うと
新規記事の上でこのプラグインを実行し、
プレビュー画面で見ていきます。

 

新規記事のテキスト内に






と入力し、プレビュー画面で見るだけです。

Wordpressで内部リンク可視化プラグインを使用する手順

 

注意するべき点として、このように
公開状態は「非公開」にすることで、間違って公開するのを防げます。

公開してしまうと、

サイトの構造自体が外部に流出してしまうことに加え
読み込みのたびにプラグインが走り、サーバーに負担がかかってしまうので
非公開の使用を推奨しています。

Wordpressで内部リンク可視化プラグインを非公開で使用する手順

設定をすべて終わり、プレビュー画面で見ると
ページの読み込みに多少時間がかかりますが
このように表示されます。

show-article-mapを実行した時の内部リンク画像

す、すげぇ。。。。

カテゴリ別に色分けされており、
内部リンクを張った生地同士には、矢印で結び付けられ
なるべく近くに配置されています。

逆に右下の方などは
何も内部リンクを張っていない+貼られていないため
離れ小島担っていますね。

理想としては、ここからなるべく同じ色のカテゴリを集め、
集合体を作るイメージで内部リンクを張って行ければ御の字です。

Show Article Mapのカスタマイズ

 

製作者のHPにも書いてある内容ですが
2点ほどプラグインに手を加えましたので、
記憶がてら書いておきます。

1. 記事タイトルを表示させ、わかりやすくする

 

初期設定では、パーマネントリンクが表示されているので
日本語でパッっと見たかったので、リンク名ではなく

記事タイトルで表示させるようにしています。

対応は以下の通り。

プラグインファイル(showAticleMap.php)の72行目を下記のように変更してください

  • Before:'label' => nae_insert_str(urldecode($post->post_name), "rn", 20),
  • After:'label' => nae_insert_str(urldecode($post->post_title), "rn", 20),

ただし、記事タイトルにした場合ノードが多少縦長になるのでご注意ください。

 

先ほどと同様に
プラグイン>プラグイン編集と進み

wordpressでプラグインを新規追加する画像

右端にある
編集するプラグインを選択から「Show Article Map」へ変更

wordpressでのShow-Article-mapの設定方法

公式HPでは72行目でしたが、
私の端末では、75行目でした。

wordpressでshow-article-mapのPHPを変更する画面

 

これで終了です。

 

2. 子カテゴリで色分けするようにする

 

2つ目の変更点として、
標準設定では親カテゴリで色分けされていますが、
その色分けを、子カテゴリで行います。

これにより、より明確なカテゴリ構造と関連記事がわかるようになるため
子カテゴリまで設定している方は、有用ですよ。

実装方法は先ほどと同様に
プラグイン>プラグイン編集>騙取するプラグインを選択へ

今回の変更場所は66行目ですね

プラグインファイル(showAticleMap.php)の66行目付近を下記のように変更してください

  • Before:$group_name = !empty($category) ? $root_category->slug : "固定ページ";
  • After:$group_name = !empty($category) ? $category[0]->name : "固定ページ";

ただし、子カテゴリの色が多いと違うカテゴリでも同じ色に塗られることがありますのでご留意ください。

 

実際には

71行目でした。

wordpressでshow-article-mapのPHPを変更する画面

 

最後に

このプラグイン非常に便利ですが、

触っている中で、カテゴリーを増減してしまうと
色が変わってしまうみたいです。

綺麗にBefor,Afterで比較している場合は、
カテゴリーを整理した上で、使っていくようにしてください。

ちなみに

この記事執筆時は、カテゴリーを増やしてこのような内部リンクになっています。

show-article-map 2018-12-30

まだまだぐちゃぐちゃですね。
年末年始で仕上げていきます 笑

mac-key
macの変なショートカットキーが分からない!⌘などの特殊キーまとめ1年前にmacbookを買いましたが、 使いこなすのにぶっちゃけ苦労しているmaruko(@yamato13n)です 笑 ブログ...
image clickable
ワードプレス(JIN)で画像をクリッカブルにする方法。どうも、マルコです。 あまりにもワードプレスで いじる項目が多すぎたため、 修正点だけでもちょくちょく 書いていこうと思...

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です