今回はWordpressにおいてプラグインを利用しないで目次を作成する方法についてです。
CONTENTS
1.はじめに
2.手順
2-1.目次を作成
2-2.目次に合わせて見出しを作成
2-3.目次にリンクを設定
2-4.見出しブロックにアンカーポイントを設定
3.設定結果確認
4.おわりに
1.はじめに
WordPressで作成されたブログをみていると、必ずといっていいほど目次が作成されています。
ブログの記事には目次を書かなければいけないというルールがあるわけではないですが目次があると以下のような利点があるため、作成しておいたほうが良いです。
①どんな内容が書いてあるか一目で把握できる。
②知りたい情報が記載された箇所にすぐに飛べる
基本は読み手側視点の利点です。
せっかくBlogを書いているなら、読んでくれる人が居てくれた方がいいので少しでも読み手が読みやすくなるようにして、読んでくれる人が増えたらやっぱり嬉しいので。
なお、今回使用したWordpressは「WordPress 6.0.1」で手順を実施しています。
2.手順
手段としてはアンカーリンクを使用する方法です。
目次側にリンクを設定し飛び先の見出しにアンカーポイントを設定します。
手順を箇条書きすると、以下の流れで行います。
1.目次を作成
2.目次に合わせて見出しを作成
3.目次にリンクを設定
4.見出しブロックにアンカーポイントを設定
この流れに沿って、手順を説明します。
2-1.目次を作成
まずは目次を作成します。
今回は例として以下の内容で目次を作成します。
1.はじめに
2.内容
3.おわりに
WordPress上で実際に作成してみた様子が以下の画像となります。
目次を作成するブロックは段落でもリストでもなんでもいいですが、ここでは段落ブロックを使っています。
2-2.目次に合わせて見出しを作成
目次を作成したら、目次に合わせて見出しブロックを作成します。
普通の事ですが図にするとこんな感じです。
2-3.目次にリンクを設定
リンクを設定したい目次を選択し、表示されたメニューのリンクボタンをクリックします。
リンクボタンをクリックすると、設定するリンクの入力欄が表示されるので、先頭に「#」（シャープ）＋設定したいポイントのIDを入力してエンターキーを押下してアンカーリンクを設定します。
リンクIDはおのおの自分の好きな名前で設定して問題ありません。
今回は以下の基準でリンクIDを設定しています。
| 見出し名 | リンクID |
| 1.はじめに | #1 |
| 2.内容 | #2 |
| 3.おわりに | #3 |
2-4.見出しブロックにアンカーポイントを設定
以下の流れで操作してアンカーポイントを設定します。
①アンカーポイントを設定したいブロックをマウスでクリックして選択状態にします。
②歯車マークのボタンをクリックしてブロックの設定画面を開きます。
③設定画面の「ブロック」タブをクリックしてブロックの設定画面を開きます。
④HTMLアンカーの入力欄に目次に設定したIDと同じIDを入力します。
※アンカーポイント側には先頭「#」（シャープ）は不要です。
「2.内容」「3.おわりに」も同様の操作でそれぞれ、ID「2」、「3」と設定すればアンカーリンクとアンカーポイントの設定手順は完了です。
3.設定結果確認
作成した目次にアンカーリンクが設定できていて、想定した飛び先にちゃんとジャンプしてくれるか確認します。
①画面上部にある「プレビュー」をクリックしてメニューを表示します。
②メニューにある「新しいタブでプレビュー」をクリックします。
実際に表示される記事画面が新規タブで作成されるので、目次にリンクが設定されていることを確認します。
リンクが設定されていることが確認できたら、挙動を確認するため実際にリンクをクリックします。
クリックした結果、想定した場所に画面がジャンプしてくれることを確認します。
今回の場合、目次部分にある「1.はじめに」のリンクをクリックした結果、見出し「1.はじめに」に画面がジャンプできていることを確認しています。
4.おわりに
リンクのついた目次の作成はわざわざ手作成しなくても、プラグインを使えば簡単に実現できる機能です。
ただ、僕個人の基本方針としてプラグインを極力使わずにブログを作成していたいと考えていため、今回の記事内容もプラグインを使用せずに目次を作成するという内容になっています。
あまりプラグインを使わないようにしている理由
- なんでもプラグインで実現していくとプラグインの数が増えて管理が面倒くさい
- ブログ記事の表示スピードに影響がある可能性がある
- WordPressの更新に合わせてプラグイン側も更新しないといけないけれどプラグイン側が必ず対応するは保証はない
- 単純にデフォルト好き（これは好みの問題）
とまあ、４点ほど挙げましたが一番の理由はたくさんプラグインの数が増えたら管理がめんどくさいからです。
とはいえやっぱり楽になったり、便利になったりするものなので使わない方がいいとまでは思っていないです。必要だと思うものだけ入れたらいいよ程度の温度感です。
なお、今回実施した手順は執筆時点で最新の「WordPress 6.0.1」で実施していますがバージョンの古いWordPressでは、今回のような各記事ブロックにアンカーポイントを設定する「HTMLアンカー」という項目がなかったので、HTMLエディターでコードを直接書いていました。
どんなコードが書かれていればいいのかは、今回アンカーポイントを設定した箇所をHTMLエディターでみてみれば分かります。
HTMLエディターの表示方法
①画面右上の…が縦に並んだ部分をクリックしてメニューを開きます。
②メニュー内の「コードエディター」をクリックします。
③文章を執筆しているエリアの表示が、HTMLコードの表示に変わります。
上の画像で青枠で囲った箇所の「id=”1″」が、「HTMLアンカー」入力欄にIDを入力した場合のコード部分です。
「HTMLアンカー」入力欄に「ID入力した場合」と「ID入力してない場合」で並べてみると以下の通りです。
並べてみると一目瞭然です。
古いバージョンでは毎回HTMLエディターを開いてこの「id=”1″」の部分を記述していました。
この作業が地味に面倒だったので、一時期はプラグインの導入も考えましたがWordpress側がGUIで設定できるように対応してくれたのは、結構ありがたいです。
もし古いバージョンのWordpressを使っている人は、Wordpressを最新版に更新するか。
更新するのが嫌な人（そんな人いるかな？）は上記のHTMLコードに直接記述する方法でも同じことができます。
今回は以上です。
それでは！