WordPressで目次を自作する方法＋「プラグインを避けるべき話」
駆け出しブロガー
WordPressで目次を導入してみようかなって思うんだけど、可能であれば自作してみたい。難しそうならプラグインを使って目次を作ろうと思う。とりあえず自作するにはどうすればいいか教えてほしい。
こんな要望に応える記事になります。
本記事では、WordPress利用者向けに目次を自作する方法について解説しています。難しい言葉をなるべく省いた上で分かりやすいように解説していますので、初心者の方でも大丈夫かと思います。
「目次を作ればアクセスも増える」
目次【本記事の内容】
WordPressのカスタマイズが苦手だからといって目次の自作が難しいわけではありません、分かりやすいよう段階的に解説していますのでご安心ください。
それでは見ていきましょう。
WordPressで目次を自作する方法
まず目次を自作するにあたって、記事を作る際にビジュアルエディタを使用している方はテキストエディタに切り替えましょう。
ビジュアルエディタでも可能ですが柔軟さに欠けます、プラグインを使う人はテキストエディタを触りたくないという理由もあるんでしょうね、、、。
これについては「待った！」と言いたいところですが今は置いておきます（後述します）
目次を自作するといっても種類は様々ですが、それぞれ違う点としてはかかる手間が違うくらいです。
スキルに合わせて作り方を選択
- 初級：ページリンク無【超簡単＆必読】
- 中級：ページリンク有【ひと手間】
- 上級：ページリンク有＋入れ子【大手間】
それぞれ解説します。
初級：ページリンク無【超簡単＆必読】
一番簡単なのが、ページリンクなしのシンプルなリスト形式の目次です。
ulボタンを１回 → liボタンを２回（×見出しの数） →/ulボタンを１回】ビジュアルエディタであればリストボタンから装飾してあげれば簡単ですね。
HTMLが苦手な方の為に補足、<ul>と</ul>の間に<li>ここに見出しを書く</li>を記述することでリストになるという事ですね。
ポイントは記事の内容を読者に伝える為に作るという事、目次の内容は見出し（h2～h4タグ）に合わせるのが基本ですが無理に合わせる必要はありません、「何について書いているか」を読者が理解できればそれでOKです。
※そのリストが目次であるという事を読者に伝える事も大事です（本記事を例にすると、目次の上に「目次【本記事の内容】」と記述している）
それってただのリストじゃん、ページリンク付けないと目次の意味なくね？
確かに目次にはページリンクを付けるのが定番であり、目次から読みたい項目に飛べた方がユーザビリティが上がるのでいいのですが、実は無くても効果は十分あるんです。
その理由は簡単で、記事の内容を示すリストの中に期待する情報があれば、読者は離脱することなく読み進めてくれるからです。
「要点把握からの時短 ＞ ページリンクによる手軽さ」※要点把握からの時短について、記事に期待する情報があるのかを先に知りたい、仮に期待した情報がないと判断したら離脱して他を探したいという読者の心理（時間を無駄にしたくない）
ですので、プラグインを使わず手軽に目次を設置したいという方は、記事の内容をリスト形式でまとめたものを記事の冒頭に置いておくだけでOK。
中級：ページリンク有【ひと手間】
先ほどのリストにページリンクを付けてそこから任意の項目まで飛べるようにしましょう。
編集する箇所は目次の<li>ここに見出しを書く</li>の部分と見出し（h2～h4）の部分です。
「ここに見出しを書く」をaタグで囲みましょう、下記例。
（<a href="#">ここに見出しを書く</a>）
「ここに見出しを書く」をドラッグし上にあるlinkボタンを押してURLの欄に「#」と入力しリンク追加ボタンを押すことでも同じ結果を得られます。
一つ作れば後はコピペすればOKですね。
次にリンク先である見出しの部分を編集します、今回はh2タグを例に見てみましょう（h3,h4でも同じ）
<h2>にid=""を追加します（<h2 id="">）
そして、id=""にリンク先の目印を付けましょう、半角英数字であればなんでもOKです（例：<h2 id="anker1">）
もう一度目次に戻りましょう。
目次の<a href="#">のhref=""に先ほどidで指定した英数字を先頭に「#」を付けた形にしましょう（例：<a href="#anker1">）
これで完成、目次をクリックするとリンクとして繋がっているはずです。
上級：ページリンク有＋入れ子【大手間】
ぶっちゃけ中級で十分なんですが、完璧主義者のために入れ子についても触れておきます。
本記事の目次でもそうなんですが、大見出し（h2）に続く中見出し（h3）は入れ子表示なっています、中見出しの部分にスペースを入れるなりで対応できそうですがスマートじゃないですよね。
そんな時はliタグ内にulタグを入れて対応しましょう、これは本記事のソースコードを参考にしていただければいいかと（下記）
実はここまでする必要なし
実はここまでする必要はなかったりします。
SEO界隈で有名なバズ部が良い例でして、SEO対策｜検索上位を独占するために弊社が行っている36の手順という記事の目次を参考に見てみます。
目次の大見出し（h2）にあたる部分はpタグを使い、それに続く中見出し（h3）をリストにするという手法を取っている事が分かります。
つまり、入れ子をそこまで厳密に書く必要はないんですね、とりあえずリスト形式で書くだけで大丈夫ということです、私は中途半端に完璧主義者なだけですね。
目次にプラグインを使わない理由
ここまで読んでくれた方の中には「目次の自作って意外と面倒くさいな」と感じた方や「プラグインでいいや」と思った方もいると思います。
これについては言いたい事が何点かありまして、以下になります。
- セキュリティ的によろしくない
- プラグインの数に比例してサイトが重くなる
- プラグインを使う程のことじゃない
それぞれ簡単に解説します。
セキュリティ的によろしくない
WordPressを使うからにはプラグインを使いたいという気持ちは分かりますが、プラグインを使う大きなデメリットとしてセキュリティ面の不安が挙げられます。
プラグインを使うことで便利な機能を使える恩恵の裏に悪さをする人間が入り込む隙を作ってしまう場合があります、更新頻度が高く定期的にチェックされているプラグインでも安心できません。
過去に「Jetpack」と呼ばれる100万サイト以上で使用されている有名なプラグインでも、サイトが乗っ取られる可能性があるセキュリティの不備がありました（参考：有名プラグイン「Jetpack by WordPress.com」に複数の脆弱性。修正版リリース済み。）
これを防ぐにはプラグインを使わない事が一番なんですがそれは現実的ではありません、ですので可能な限りプラグインに頼らずスキルを身に付け自分で何とかする姿勢が求められます。
プラグインの数に比例してサイトが重くなる
プラグインは簡単に入手できて便利だからって15個や20個とたくさん使っていませんか？
プラグインを使えば使うほどサイトは重たくなります、サイトが重いとSEO的に良くありません、その結果グーグル検索上位表示されにくいサイトとなりアクセスも落ちます。
これも先ほどセキュリティの話をした時と同じで、なるべくプラグインに頼らないようにする事が大事です、プラグインは１０個以下を目安に使う様にしましょう。
プラグインを使う程のことじゃない
（目次の実装に）プラグインを使う程のことじゃない、正直これに尽きます。
これくらい自分で作りましょうというのが本音でして、ちょっと調べて勉強すれば出来るレベルのことです、「とりあえずプラグインで」ってのはさすがに怠けすぎではないかと思うんです。
どうしてもという理由がない限りは自作しましょう、WordPressを使っているからこそプラグインに依存しないようにするべきです。
目次の自作を簡単にする小技【オススメ】
「目次を自作するって言っても面倒くさいんだよ」というのはおっしゃる通りでして、そんなあなたの為に目次を簡単に自作する小技を教えます。
目次と見出しを先に作る
先に目次と見出しを作るようにすれば簡単です、本文を書いてからだと二度手間です。
私が記事を書く際に取っている手順ですね、まず何を書くかを決めてから目次と見出しを作ります（上記）、その後に本文を書くといった感じですね。
こうすれば目次の作成もそこまで面倒くさくないんですよね、書く内容が決まっているのであれば数分でできます。
さらに、本文を書く際にあれも書きたいこれも書きたいという寄り道が減るので良質な記事を作りやすくなるかと思います。
AddQucktagを使う
それはAddQucktagというプラグインを使うことで可能です。
プラグイン使ってんじゃん！怒
確かにそうなんですが、このプラグインに関してはWordPressユーザー必須プラグインと考えているので問題なし、私も使用していますがプラグインは１０個以内に収まっています。
このプラグインは「効率化を図るプラグイン」であって「目次を作るプラグイン」ではありません、目次のテンプレートを予め登録しておくことで作成時間を短縮することができるというものです。
これを使えばテキストエディタが快適になります、見出しタグを追加するもよしid付きで登録するのもありですね（<h2 id="anker番号"></h2>）
登録用の目次テンプレートも置いておきますのでよければ参考にしてください。
「目次＆見出し」ボタン登録用テンプレート
<p style="font-size: 145%;font-weight: 600;">目次【本記事の内容】</p>
<ul>
<li>1.<a href="#anker1">ここに見出し２</a></li>
<li> 1-1.<a href="#anker11">ここに見出し３</a></li>
<li> 1-2.<a href="#anker12">ここに見出し３</a></li>
<li>2.<a href="#anker2">ここに見出し２</a></li>
<li> 2-1.<a href="#anker21">ここに見出し３</a></li>
<li> 2-1.<a href="#anker22">ここに見出し３</a></li>
<li>3.<a href="#anker3">まとめ</a></li>
</ul>
<h2 id="anker1">ここに見出し２</h2>
<h3 id="anker11">ここに見出し３</h3>
<h3 id="anker12">ここに見出し３</h3>
<h2 id="anker2">ここに見出し２</h2>
<h3 id="anker21">ここに見出し３</h3>
<h3 id="anker22">ここに見出し３</h3>
<h2 id="anker3">まとめ</h2>AddQucktagでボタン名「目次＆見出し」で登録し、上記コードを開始タグ欄にコピペすればOKです、詳しい事は下記の記事をどうぞ。
＞＞まだ書き方で消耗してるの？プラグイン1つで記事効率爆上げ
終わりに：目次くらい自作しましょう
いかがでしたでしょうか。
そこまで知識がなくても目次を自作する事は可能です、そして、目次を設置する一番の目的は「読者に記事の内容を簡単に伝える」ことにあります。
ここを忘れるとただのリストになってしまうので気を付けておきましょう。
目次のデザインについてはCSSの知識が必要となるので今回は割愛させて頂きました、もしその解説もしてほしいということであれば次の機会にでも書こうかなと思います。
チャンネル登録はこちら
うぇぶとまと
YouTubeチャンネルでは日々の暮らしをVlog形式で発信しています！ブログよりブログらしい内容になっていますので是非見てみて下さい！