ワードプレスで目次をプラグインなし(functions.php)で実装する方法

ワードプレスで目次の表示といえばTableOfContentsPlusというプラグインを利用するのが最も楽で間違いの無い方法ですが、プラグインなしで表示する方法がないかと考えたことはありませんか?プラグインなし、phpとcssカスタマイズで表示する方法について解説します。

 

どうも!

Ganapatiです。

今回はプラグインなしでワードプレスに上で目次(Table Of Contents)を表示する方法についてご紹介します。

 

プラグインなしで目次表示するメリット・デメリット

 

メリット

まずメリットとしては一般的には「軽快な表示」があります。プラグインを利用するとどうしても「プラグインが読み込まれて目次が生成されるまで」の時間が必要となります。

この辺りはキャッシュ系のプラグインを利用していれば特に問題となることはありませんが、キャッシュ系のプラグインを使っていても、目次生成に関連してJavaScript(JQuery)を利用することがほとんどですので、目次生成プラグインありの場合はキャッシュ系プラグインを利用しようがしまいが読み込みのための時間がかかるために結果として表示が遅くなります。

また、プラグインを利用するとどうしてもプラグインの機能以上の動作はしませんので、より高度な目次表示をしたい場合にはプラグインなしで目次表示したほうが自由度が高くなる可能性があります。(そこまで自由な表示は不要だと思いますが・・・。)

デメリット

プラグインを利用せず目次表示をするデメリットは「手間」もしくは「技術」もしくは「その両方」を必要とすることです。

また、私のように技術を自分で持たない場合は基本的にはコードをコピペで済ますことになります。その場合は、むしろ自由にカスタマイズできずに不便度が増すということになります。

ではそこまでしてプラグインを使わずに目次を表示するメリットのあるサイトはどんなものでしょうか?

私は次のように考えます。

 

 

プラグインなしでの目次表示が向いているサイト

 

① 見出し構造が素直にできている

まずは見出し構造が素直にできているサイトはプラグインなしでの目次表示の手間が少なく、整った見た目にもなるので向いています。

見出し構造が素直というのはh2/h3/h4という順番で記述がなされているということです。h2からいきなりh4に飛ぶような(当サイトのような)ものの場合は調整をしようと思うと結構面倒になります。

② 目次デザインがシンプルでOKなサイト

自分でカスタマイズする技術のある方はともかく、技術のない人はカスタマイズの情報が少なすぎて調整が難しいです。目次デザインのカスタマイズがシンプルなものでも十分だというサイトはプラグインなしでの表示に向いています。

③ 自分で目次を調整したいサイト

逆に自分で調整するだけの技術がある人はプラグインなしで目次生成をしたほうがむしろメリットがありそうです。デザイン的にも自分らしさをアピールしたいのであればプラグインを使わないほうが「らしく」できます。

 


方法その1:手入力で目次を作る方法

おそらくこの記事をご覧の方は「この方法を探しているわけではない」と思っているはずですが、念のためご紹介しておきます。もともとそれほど見出しを多く使わない方や、逆に使いすぎて目次だけで長くなってしまう人はこちらの方法でむしろ割り切って必要な見出しだけを表示したほうが良い可能性があります。

基本的には以下の参考記事をご覧ください。

Step1:まずは目次用のCSSを作る

この方法で一番大変なのがCSSを作る工程。例えばですがTableOfContentsPlusのカスタマイズ記事を探してそのCSSをコピペするのがかなり手っ取り早いです。

例えばデザインで優れたSANGOというテーマの目次部分の主要なCSSは以下の通りです。(簡単にパクる調べることができます。)

この他ワードプレステーマJINあたりの目次デザインがパクリ元としておすすめです。

 

Step2:手入力で目次を作る

例えばTableOfContentsPlusのCSSをコピペした場合は以下のような構造で目次を作りましょう。(CSSをパクったサイトの目次のHTML部分を一度そのままコピペしてテンプレートを作ってしまうと楽です)

 

このようにTabaleOfContentsPlusと同じように記載すればそのままCSSをコピペで使っても大丈夫です。

ただ、ulとかliとか自分で「入れ子」を調整するのが面倒だという人もいると思います。そういう場合は前述の参考記事のようにシンプルに表示するのが良いと思います。

 

Step3:必要に応じてページ内リンクを貼る

上記コードの中では#3とか#4とか#i-2というページ内リンクを使用しています。

目次の中にhrefでリンク先を設定したうえで、実際の見出し内に<h3 id=#3>見出し</h3> のような記述をしてあげればページ内リンクの完成です。

とまあいろいろ考えますと、手入力は本当に手間です。「丁寧に作り上げる」ことに喜びを感じる人向けですね。

 


方法その2:PHP+JQuery+CSSで作る方法

この方法は「ワードプレス 目次 プラグインなし」で検索するとよく表示される方法です。

正直な感想としては「JQueryを使うならTOC+プラグイン使っても同じじゃない?」と思うのですが、少しでも軽快な表示を実現したい人や、目次表示する記事を個別に指定したいのであればおススメします。

なお、調べてみるとPHPの記述個所としてfunctions.phpに記述するタイプとfooter.phpなどの</body>内に記述する方法の2種類が主に検索でヒットしますが、functions.phpを記述するならこの後紹介する方法のほうがおススメなのでここではより簡単なfooter.php内に記述する方法をご紹介します。

 

Step1:footer.phpに以下のコードをコピペする

とりあえずコピペコードをパクったのがあるので以下紹介しておきます。

 

上記コードの前半は目次表示のデザイン、後半はh2~h5に該当する見出しを拾って目次を生成するためのものになっています。

h4までで十分な人は以下の部分を削ればOKです。

 

 

FTPで接続してファイルをダウンロードして編集して・・・という作業ができない人・面倒な人はダッシュボードから直接テーマの編集画面にアクセスして編集してしまいましょう。

 

Step2:記事編集時に以下のコードを目次表示させたい場所に記述

以下のコードを記述してください。

 

これだけで後はStep1で記述したコードをもとに目次が生成されます。

あとは適当にデザインを調整してください。

なお、最初のh2の直前に目次を自動表示させたい場合はfunctions.phpに以下を記述します。

 

結局funcitions.phpを編集することになってしまいますけどね・・・。

 


【おススメ】方法その3:functions.php+CSSで作る方法

最後にお勧めの方法をご紹介します。JQueryを使わない方法です。軽量表示にこだわる人はこの方法が良いです。当サイト(2018年6月現在)のコードを紹介します。ちなみにネタ元はLionブログというワードプレステーマです。Lionブログのコードをベースにデザインなどをいじっています。

※すでに人気記事ランキング用のプラグインでJQueryを使用している人はこの方法を使う意味はあまりないのでプラグインを素直に使うか方法2をお勧めします。

完成見本

Step1:CSSを以下追加する

カスタマイズ画面からでも、(子)テーマのstyle.cssでもどちらでも構いませんので以下のCSSコードを追加してください。

 

 

冗長なコードで申し訳ないのですが、とりあえずコピペをお願いします。もう少しカラフルにしたい人は自分でカスタマイズしてくださいね。

 

Step2:functionas.phpに以下のコードをコピペ

※functions.phpはちょっと記述を間違うとサイトが動かなくなるので必ず編集前のものをバックアップしておいてください。おかしいな?とおもったらFTPソフトでバックアップしたファイルで上書きすれば元に戻ります。

準備ができたら以下のコードをコピペしてください。ちなみにh2~h4に該当したものを拾うようにしています。

なお、functions.phpをローカルで編集してFTPでアップロードする際は必ず文字コードをUTF-8形式にして保存してからアップロードしてください。

また、上記コードはデモサイトで動作を確認していますが、コピペという作業のなかで一部のコードが勝手に変換されてしまう方がたまにいます。そういう場合はLionブログのサイトからテーマをダウンロードしてfunctions.phpをテキストエディタで開いてから上記に該当する部分を抜き出して直接コピペしてください。

 

Step3:外観→カスタマイズ画面で表示条件の設定をする

functions.phpがうまく動作すればワードプレスのダッシュボードから設定ができるようになります。

まずはデフォルトの設定をします。

「外観」→「カスタマイズ」→「投稿ページ設定[Lion用]」に進みますと以下のような設定画面が表示されます。

 

 

設定項目1:標準で目次を表示するか?

この項目は基本的には「表示」でよいと思います。たまにしか目次が必要ではないという場合のみ「非表示」に。

 

設定項目2:見出しの数が何個あったら目次を表示するか?

3~5くらいが標準的な数だと思います。仮に3にした場合は1個か2個しか見出しがないときは目次は生成されません。

設定項目3:目次欄をデフォルトで最初から閉じた状態にするか?

この項目はチェックをしない状態(つまり「閉じない」)でよいと思います。しかし、この辺りは好みなので最初から閉じた状態にしたい人はチェックを入れてください。

 

Step4:個別記事内で表示・非表示の調整をする

基本的には操作することはめったにないのですが、例えば見出しの数が多く標準で目次が表示されてしまうものの投稿内のデザイン・見た目の関係上非表示にしたいことがあります。そういう場合は個別記事内に上記のようなチェックボックスがありますのでチェックを入れてください。

 

この方法の欠点

上記コードを使用した場合、h2のあといきなりh4という構造にすると目次欄で「-(ハイフン)」が間に1行入ります。(当サイトのいくつかの投稿をご覧いただければわかると思います。)

 

最後に・・・

プラグインなしで目次を表示するのは結構面倒です。それでも「少しでも軽くしたい」という人は是非チャレンジしてみてください。




コメントを残す

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

*

© 2019 ~いまどきワードプレスデザイン研究所 by Ganapati