2021/04/18追記)
WordPressテーマをCocoon(目次を持つテーマ)に変更したので、この記事で紹介している目次の書き方は現在のサイトの目次とは異なる形式となります。
(追記終わり)
こんにちは。
最近やっとWordPressの勉強を再開したマスクロです。
このサイトでは以前から目次を自作していたのですが、その方法が無駄に複雑だったことに気がつきました。
試行錯誤を行った結果、目次をビジュアルエディタだけで簡単に自作する方法にたどり着いたので、ご紹介したいと思います。
リンク付き目次や目次の入れ子も簡単に設定できるのでオススメです。
また、Googleの検索結果には以下のように見出しが表示されるので、SEOの観点でプラグインと比較しても遜色ないかと思います。
目次
これまでの経緯
以前は↓の記事を参考に目次を自作していました。
具体的には以下をテキストエディタで書いていき、目次を自作していました。
①目次のリスト
②見出し
③見出しにアンカーを設定
④目次にアンカーへのリンクを設定
目次は正しく作られていたので、今まで疑問に思わずこの方法を続けてきました。
が、どうやら記事が古かったようで、無駄に複雑な作業をしてしまっていたようなのです。
(記事自体はプラグインを避ける理由等がちゃんと書いてあって分かりやすかったです)
と言うことで、以降の章でとても簡単な書き方を説明していきます。
簡単過ぎる書き方
以前の書き方だと、HTMLでゴリゴリ書いていましたが、WordPressのビジュアルエディタを使えばそんな必要はもうありません。
次の方法で簡単に目次を作成することができます。
流れ自体はHTMLでゴリゴリ書く時と同じで、
①目次作成
②見出し作成
③見出しにアンカーを設定
④目次にアンカーへのリンクを設定
の４ステップです。
リンク付き目次や目次の入れ子なども画面操作で設定できます。
それでは、以下に各操作の詳細を書いていきます。
①目次作成
目次作成はブロック一覧からリストを選び追加するだけです。
入れ子や番号付きリストも画面操作で設定できます。
これで↓のような目次のベースが簡単にできるかと思います。
(見出しへのリンクが不要な場合はこれで完成ですね)
②見出し作成
次に見出しを作成していきます。
これも、ブロック一覧から見出しブロックを選択し追加するだけの簡単なお仕事です。
ツールバーから見出しの大きさ(H1〜H6)を変更できます。
(上の図はH3とH4の例です)
③見出しにアンカーを設定
次に見出しに目次からのリンク先となるアンカーを設定していきます。
まず、見出しブロックを選択した状態でビジュアルエディタ画面の右側にある設定を開きます。
設定の中にある高度な設定の項目を開くと、HTMLアンカーという項目が表示されるはずです。
ここにアンカーの名前を記入します。
このアンカーはリンクとして使用するのでちゃんとした名前を付けましょう。
また複数の見出しで名前が被るのはNGです。
④目次にアンカーへのリンクを設定
最後に①で作成した目次のベースにアンカーへのリンクを設定していきます。
まず、リンクを設定したい文字列をドラッグで選択し、ツールバーにあるリンク設定のアイコンをクリックします。
すると、以下のようなリンク設定画面が開きます。
この時、リンクに設定するのは'#' + '③で設定した名前'です。
アンカーの名前がaaaaの場合は#aaaaと設定します。
※#が大文字になっていたり、スペルを間違えたりするとリンク切れするので注意です。
後は目次の項目毎に同様の設定を行っていくだけです。
最後に完成イメージのサンプルを載せておきます。
サンプル
目次
見出し１
あいうえお
かきくけこ
見出し２
サンプルは以上です。
参考
https://macoblog.com/wordpress-mokuji-jisaku/
https://wordpress.org/support/article/page-jumps/
コメント