WordPressの目次表示をTOC+以外で実装

WordPressの目次表示をTOC+以外で実装

長い記事を書いた時、最初に

「このページは、こんなことが書いてありますよ」

と、目次で伝えておくと、読む側にとって安心感につながる時があります。

もちろん、内容によっては、即離脱に繋がりますが、しっかり記事を書いてあるならそんな心配は無用のはずです。

 

 

また、スマートフォンで読んでいると

「あれ・・? 今って、何のことを話してるんだっけ」

と思うことがありますよね。

 

この投稿では、

  1. WordPressの記事の上に目次を出したい
  2. スマートフォンで、今読んでいる部分がわかるようにした
  3. そもそも、なぜ目次を出したほうがいいの?

という内容について、書いていきます。

 

 

 

Table of Contents Plus(TOC+)という、便利なプラグイン

ご存知の方も多いと思いますが、WordPressには、

Table of Contents Plus(TOC+)

という、めちゃめちゃ便利なプラグインがあります。

https://ja.wordpress.org/plugins/table-of-contents-plus/

image-WordPressの目次表示をTOC+以外で実装 | サロンホームページにおすすめのWordPressテーマ salonote

 

このプラグインを使えば、知識がほとんどなくても、記事を書くだけでWordPressに目次を表示することができます。

ぼくも、以前は使っていましたし、「WordPressにシンプルに目次を表示したい」という場合には、すごく便利なプラグインだと感じています。

 

ただ、以下の点が少し気になりました。

  1. プラグインの最終更新が3年以上前で、WordPress5.0に対応できるのか?
  2. 目次の出し分けをもっと丁寧に行いたい場合は?
  3. さらに機能を拡張したい

 

できるだけ、プラグインの更新が1年以上滞っているものについては、利用しないようにしています。

それは、セキュリティリスクや、自分のクライアントの利便性に直結してくるからです。

 

この辺りは深くは触れませんが、
3年間の間に、WEBの世界はどれだけ変わってしまっているか。

そして、その機能を使う唯一の選択肢がそれだということに、どんなリスクがあるか。

 

何でも独自で作ればいいというものでもないのですが、
色々と考えた上で今回の目次機能はせっかくなので開発することにしました。

 

まずは、WordPressで目次を出す概要紹介

YouTube Movie

 

こんな感じで、PC/スマホ 両方ともに目次を表示し、
さらにスマートフォンでは、目次を上部に固定できるようにしました。


WordPressでは目次を出したほうがいいの?

そもそも・・・の話ですが、なぜ目次を出したほうがいいかについて、触れておきますね。

目次をただ表示するだけなのであれば、それは「読者にとって、わかりやすいかどうか」という判断となります。

 

例えば、

「目次があると、すぐに内容に入れないから、うっとうしい」

という声もあるのは事実です。

 

けれど、

「目次があったほうが、読むかどうかを判断できるから、ありがたい」

という声もあったりします。

 

つまりユーザーにとっては、個人の価値観にもよるし、記事にもよるので、一概には言えません。

 

ところが、Googleさんに対するSEOにとっては、メリットの方が強い印象です。

理由としては、「検索結果に、目次に使った見出しを表示してくれる」という点です。

 

お恥ずかしい話、まだ弊社の目次リンクは設置したばかりなので、

目次のメリットについては、以下のブログ記事様を引用させていただきます。

 

ブログに目次をつけるのはSEOに効果がある?

image-WordPressの目次表示をTOC+以外で実装 | サロンホームページにおすすめのWordPressテーマ salonote


サロンノートでは、WordPressの目次機能を標準搭載しました

上記にも書いた通り、プラグインに頼り切る目次に疑問を感じたので、独自開発をすることにしました。

そして、この記事でも表示されている通り、サロン用WordPressテーマの「サロンノート」では、目次機能を標準搭載しました。

機能の概要としては以下の通りです。

  • 目次のオンオフが自由に設定できる
  • スマートフォンでは、上部に「今読んでいる記事」を固定できる

とってもシンプルな機能ですが、意外と便利です。

以下は、その技術的な面について書いて行きます。

技術開発については興味がないという場合は、ここで離脱いただければと思います。

 

 


・・・・・・

 

・・・・・・

 

・・・・・・

えーと、ここからは難しいということをご理解いただいた上で、お読みいただいているはずなので

遠慮なく開発レベルの話をさせていただきます。

 

WordPressで、見出しの内容を目次として抽出する (難関)

以下は、functions.phpなどに記載する内容の概要紹介です。

 

 


少し説明をしていきます。

まずはおなじみ、add_filterでコンテンツの内容にフィルターをかけます

add_filter( 'the_content','get_index_essence',10);

そして、preg_match_allで、記事の内容の見出しだけを抽出ます。
さらに、$headline_listをリスト化して、それぞれを変数に格納します。

preg_match_all('/<(h[1-6]|div) class="lazy (.+)headline_nav(.+)?">(.+)<\/(h[1-6]|div)>/u', do_shortcode($content), $headline_list);
list($plane,$before,$class_1,$class_2,$body,$after) = $headline_list;

 

そうすると、各要素を$key(インデックス)で処理できるようになるので、

以下のように$replaceと、$li_list の配列に格納して行きます。

foreach ($body as $key => $val) {
$replace[] = sprintf('<div id="link%s" class="lazy ancor headline_nav_item" rel="headline_nav_item-%s"><'.$before[$key].' class="lazy '.$class_1[$key].' '.$class_2[$key].'">%s</'.$after[$key].'></div>', $key, $key, $val);
$li_list[] = sprintf('<li id="headline_nav_item-%s"><a class="lazy smoothscroll headline-type-'.$before[$key].'" href="#link%s">%s</a></li>', $key, $key, $val);
}

 

こうすると、各見出し要素にはアンカーを付ける準備ができて、

さらに$li_list配列には、それぞれの項目が<li>で入っているので

 

$index_nav .= '<ol class="lazy list-icon">' . implode("\n", $li_list) .'</ol>';

とかにすると、

$index_nav という変数には、リスト内容部分だけが入ります。

 

ラストは


$content = str_replace($search, $replace, do_shortcode($content));
$content = $index_nav . $content;

などで、コンテンツを置き換えて、目次をつけて$contentをreturnで返します。

 


そうすると、コンテンツに目次を出すことができます。

間は端折っているので、必要な変数の初期化や定義などはご理解ください。

 

この項目を読んで、わからないか
あるいは、読みたくもなくなってしまった方は、プラグインを使うか、
最寄りの業者様にご相談いただく必要がありそうです。

わかりづらく書いてしまって、申し訳ありません・・。

 

 

 

 

 

コンテンツSEOのために

最近、GoogleのSEOは本当に変化をしています。

「またGoogleの対応が変わった」という次元ではなく、どんどん検索に対する精度が増しているんです。

 

「対応が変わったからランクが落ちた」と感じている方は、
コンテンツマーケティングをぜひもう一度見直してみてください。

適切な記事を、キチンと圧倒的な詳細度で書いている方は、「ランクが落ちた」という感覚とは無縁で

おそらく「Googleに評価されるようになった」と感じているはずです。

 

繰り返しますが、Googleの検索への対応は、日に日に精度を増しています。

それって、SEOとかの小難しい知識が必要なのではなく

 

「読んでくださる方のことを、本当に思いやっている」という心の方が必要で
テクニック自体は、後からついてくる感じです。

 

それを、少しだけサポートするのが、今回のサロンノート標準にした、目次機能です。

あなたの毎日の想いが、少しでも結果に現れることを、サロンノートは応援しています。

 

 


この記事の内容についてのご質問

[essence-mailform-pro id=1181]