【WordPress】記事に目次を付けたい!同じページ上の好きな箇所にリンクで移動させる方法

WordPress 目次 WordPress

webページの一番上に目次があって、リンクをクリックするとその内容の箇所に移動するのを見たことないでしょうか?

WordPressには他ページに移動するリンクを作る機能はありますが、同一ページ上の指定箇所に移動するリンクを貼る機能は備わっていません。

 

今回はWordPressの機能に頼らず、同じwebページ上の好きな箇所にリンクで移動する方法を紹介します。

スポンサーリンク

WordPress ページの好きな箇所に移動するリンクを貼る方法

まずはこちらをご覧ください。

当サイトで実際に使っているものが確認できます。

そしてこちらがそのコードです。

※WordPressでHTMLを直接記述する際は、編集画面右上の「テキスト」タブより記述してください。

<div id="table_of_contents" style="background-color: #f7f7f7; width: 300px; border: solid 1px #c6c6c6; border-radius: 4px;">
<p style="text-align: center;">目次</p>
<ol>
   <li><a href="#table_of_contents1">目次1のタイトル</a></li>
   <li><a href="#table_of_contents2">目次2のタイトル</a></li>
</ol>
</div>


<h2 id="table_of_contents1">目次1のタイトル</h2>
~

<h2 id="table_of_contents2">目次2のタイトル</h2>
~

divタグは目次の枠を作るために記述しています。CSSで適当に線やサイズ等を指定しておきました。

それは置いておいて、色の付いている部分に注目してください。

今回のポイントとなる部分です。

リスト(liタグ)で表示しているリンク(aタグ)の「目次1のタイトル」と「目次2のタイトル」をクリックすることで、それぞれが対応している見出し2(h2タグ)の「目次1のタイトル」と「目次2のタイトル」の箇所に飛ぶようになってます。

リンクで飛ばしたい箇所のHTMLタグにID名を付けて、リンクにはそのID名を指定。

これだけで同一ページ内の好きな箇所に飛ばすことが出来ます。

当然ID名は自由に決めてOKです。

簡単なのでぜひこのコードと照らし合わせながら自分のサイトに実装してみてください。

最後に

記事が長くなる場合は目次があった方が、よくまとめてあるように見えます。

それに限らず、ユーザーを同一ページ内でスムーズに誘導する機能は案外使いどころがあると思います。

ユーザーがより利用しやすいサイトを作るための1機能として覚えておきたいですね。