プラグインなしでWordPressの目次をリンクさせる方法を現役Webデザイナーが解説
プラグインなしでWordpressの目次をリンクさせる方法を知りたい！
今回はこのような悩みを持つ方のために、
・元東証一部上場企業のインハウスWebデザイナー(6年)
・在宅勤務(リモートワーク)
・Webデザインオンラインスクールのメンター
・秘書技能検定１級、色彩検定１級を保持
・Webデザイナー新卒採用にも携わっていた
が「プラグインなしでWordpressの目次をリンクさせる方法」をご紹介していきます。
目次
目次プラグインなしでWordpressの目次をリンクさせる方法
- WordPressの投稿ページで、目次にリンクさせたいテキストを選択する(下図の場合、見出しの結論を選択している)
2. 目次にリンクさせたい見出しを選択した状態で、右側にある「ブロックタブ」⇨「高度な設定」をクリックして「HTMLアンカー」を表示させる。この状態で、目次とリンクさせるために文字列を入力する。(例では結論を意味する英語「Point」を入力している)
3. 目次に戻り、先ほどのテキストとリンクさせるために「#Point」を入力しエンター。
なぜ先頭に「#」を付けるのか分からない方は、目次と見出しを繋げる「おまじない」と思っておいてください。細かく説明すると「#」はidタグと呼ばれており、このページ内に１つしかない固有(ユニーク)の文字列リンクという意味です。
プラグインなしでWordpressの目次をリンクさせるときの注意点
「HTMLアンカー」で設定する文字列にはルールがあるので注意しましょう。
そうしないと、ちゃんと目次と見出しがリンクされず、クリックしても見出しに移動しません。
HTMLアンカーのルール
- HTML アンカーは１つの記事内で固有であること。 (使っている文字列は１つの記事内で２度使えない)。
- HTML アンカーでは大文字と小文字が区別される。 (例：Pointとpointは別物として扱われる)
- HTML アンカーには、ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができる。
- HTML アンカーには、スペースを使うことはできない。
- HTML アンカーの先頭はアルファベットでないといけない。
他のページのアンカー(見出しやテキスト)にジャンプさせる方法
他のページのアンカーにジャンプしたい場合は、他のページのURLと、HTML アンカーを含むをリンク先に指定します。例えば、example.com/anotherpage#Point などです。
まとめ
今回は、プラグインなしでWordpressの目次をリンクさせる方法を説明しました。
プラグインを入れなくても簡単に目次とリンクさせることができるので、やってみてくださいね。
