MENU

WordPressの目次でページ内リンク(アンカーリンク)をhtml的に正しく記述する

【PR】アフィリエイト広告リンクを含みます。

WordPressでサイトやブログを運営している皆様、目次は用意していますか?

僕はこのサイトでは目次を用意しています。

理由は簡単で、基本2,000字はコンテンツを書いているため、文章の概要を読者に知ってもらうためにも目次を置いています。

目次を置く際、ページ内リンク(アンカーリンク)をhtmlで記述することになると思いますが、その文法とWordPressで簡単に目次を生成できるプラグインについて紹介します。

htmlでリンクを生成するaタグ(アンカータグ)をSEO的に正しく使う!アンカーテキストの使い方まで

目次

アンカーリンクはアンカータグとは別物!指定の仕方は出発点と到達点で異なる

出発点では「href="#aaa"」とリンク先に#(ハッシュ)を付けて指定

具体的な書き方は以下になります。

<a href="#aaa">id="aaa"の位置へジャンプする</a>

到達点では「id=”aaa“」と出発点で#の後に付けたものを指定

具体的には以下になります。

<h2 id="aaa">aaaのジャンプ先</h2>

設置自体はすごく簡単だと思います。

これを見ると分かる通り、ページ内で1つしか同一のものを使用できないid“を利用しています。

また、idは英字で始めること大文字小文字の区別があることにも注意しましょう。

WordPressで簡単に目次(=アンカーリンク)を生成できるプラグイン「Table of Contents Plus

アンカーリンクの使い道は正直目次ぐらいですが、その場合WordPressのプラグインである「Table of Contents Plus」を使いましょう。

プラグインの管理画面は日本語になっており、簡単に使うことができます。

僕は最初の見出しタグ(h2)の前に目次を生成するようにしています。

インストール方法:プラグイン検索で「Table of Contents Plus」と検索するかWordPress公式ホームページからダウンロードする

個人的には、実装の難しく無い目次生成等のプラグインは極力減らしたいと考えており、WordPressのテーマをプラグイン無しで使えるよう鋭意製作中です。

WordPress(PHP)を挫折せずにできるだけ独学で勉強する方法・コツをまとめる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次