【WordPress】見出しにアンカーリンクのid属性を付けるプラグイン

見出しにアンカーリンクのid プラグイン

アンカーリンクとは、ページ内でジャンプするリンクのことです。
ページ外から訪問すれば、指定された場所に飛ばすことができます。

以下のようにidを付けることで、指定された見出しにジャンプできます。

<h2 id=”anchor-1”>見出し</h2>

目次プラグイン(もしくは目次のあるテーマ)を導入すれば、このidは自動で付きます。

しかし、問題があります。
目次の設定を変えたり、見出しの順番を変えると、idの名前が変わるので、正しい位置にジャンプできなくなるのです。

そこで、記事内にidを付けるプラグインを作りました。

※一部の環境でエラーメッセージが出る問題に対処しました。(2019.11.7)

Downloadボタンを押して解凍後、FTPでフォルダごとアップしてくださいませ。

githubからダウンロードする

使い方

  1. FTPでwp-content/plugins/のフォルダにアップする。
  2. プラグイン管理画面でtkama_heading-add-link-idを有効化する。
  3. 記事編集画面で更新ボタンを押す。
  4. h2〜h6までの見出し要素にid=”hd-id-番号”が付く。

以下のように、記事編集画面で更新ボタンを押すと、h2〜h6までの見出し要素にid=”hd-id-番号”が付きます。

更新ボタンを押す

ただし、記事の中身を更新した場合は、記事の更新が優先されます。
そのため、もう一度更新ボタンを押す必要があります。

プラグインの仕様について

  • h2〜h6の要素にidが付く。
  • すでに見出し要素にidがある場合は、そちらが優先される。
  • 見出し構造が変わっても、idは変更しない。
  • 新しく見出しを追加すると、重複しない番号が付く。
  • このプラグインは、データベースを新規で追加しません。
  • 記事の中身に直接idが付く。

目次プラグインは、見出し要素の中にspanを生成するので、このプラグインとのバッティングはありません。

確認方法

ブラウザがChromeであれば、見出しを右クリックして、検証を選びます。

Chromeでidを確認する

ソースコードが出てくるので、idをコピーしてください。

リンクは以下のように、URLの末尾に#id名を後ろに付けます。

SEOにもメリット

SEOにもメリットがあります。

検索結果に見出しのショートカットが出る可能性があるからです。

検索結果のスニペット

このショートカットを出す条件は、アンカーリンクがあることです。
idだけでは出てこない可能性が高いので、ご注意ください。

ユーザーにとっても便利ですし、サイト運営者にとっても、訪問者を増やしたり、余計な離脱を防ぐことができるので、大きなメリットになるでしょう。

ご使用にあたって

入念にテストしていますが、何かあったときのために、ご使用は自己責任でお願いいたします。

PHPの初学者が作っておりますので……ご不安な方はバックアップを取ってからご使用くださいませ。

アンカーリンクを作るときだけ、このプラグインを有効化しても良いですね。