WordPressカスタマイズ 2017/07/23 2017-07-25

【WordPress】プラグインなしで目次の出力に挑戦してみた

Contents

SEOに効果ありと言われる目次機能をプラグインレスで

こん…にちはかな？

夏は日照時間が長く紛らわしいですね。

近頃、ウェブサイトの最適化（高速化？）を中心に頑張っているヨリアログ（@yorealog）です。

すでに表示されている状態ですが、今回はプラグインを使わずに目次を実装しましたという事後報告の記事です（笑）これです

当ウェブログでは結構な期間、プラグイン「Table of Contents Plus」（以降「TOC+」）のお世話になって参りました。インストールするだけで目次を自動生成してくれるという、本当に便利なプラグイン。

ところがですよ。

ウェブサイトの表示速度を評価するPageSpeed Insightsでは毎回、このプラグインがファーストビューの読み込みを妨げている（レンダリングブロック）ということで改善しなさいと言われてしまうのです。

思い切って、TOC+をはずそうと考えました。ですが目次はSEOを考えるとあった方が良いようなのです。

こちらでも「TOC+」を紹介されていますように、目次生成には定番のプラグインなのです。

プラグインを使わずに目次機能を実装する方法はたくさんあるようなのですが、私はこちらを参考にしました。

コピペでできる……なんて素晴らしい響き。記載の通りに手順を踏めば、プラグインなしで目次が作れるようになりますよ。そのままでも使えますが、CSSをいじくって雰囲気を自サイトに近づけるのも楽しそうですね。

CAUTION！

テーマファイルをさわる前に必ずバックアップを取りましょう。

このカスタマイズは、目次に番号が割り振られないパターンのようですのでそこだけご注意ください。SEOにおいては目的さえ果たせれば良いかな、とも思ったり。読み手の見やすさも大事そうなのですけれど……。

本当はこちらを実装したかったのですが、知識不足ゆえに半分以上何が書いてあるのか分からないのと、コードが書いてあるもののどこに入れれば良いのか判断ができなかった+試したところエラーが出たため断念いたしました。

もう少し知識を増し加えることができましたら、いつかは実装したいと思います。こちらのウェブサイト様もすごくディテールがかわいいので（そこか）。マテリアルデザインって、デザイナーのセンスがもの凄く問われますよね……。

さて、問題なく実装できたわけですが、「TOC+」のように放っておけば勝手に目次が挿入されるわけではありません。目次を表示させるためのdivタグを自分自身で追加していく必要があります。

そこはAddQuickTagに登録してしまえばそれほど苦ではございません。

ネックとしましては、当ウェブログは（内容はさておき）記事数だけはかなり多いため、目次が必要な記事の洗い出しからじっくり腰を据えて少しずつ処理していく必要がありそうです。アクセスの多い記事を優先して進めていこうと思います。

私が現在使わせていただいているWordPressテーマ「yStandard」には、スクロールに追従してくれるウィジェットもございますのでそこに表示させるのもアリでしょうか？（できるのかな？）