ワードプレスでページ内リンクを設定する方法を解説します。プラグインを利用する方法とHTMLコードを記述する方法を説明していますがどちらも簡単です。
はじめに
ページ内リンクとは、同じページ内の特定部分にスクロールして移動するリンクのことです。
以下の図のようなイメージです。
ページ内リンクを使うことで、「リンク元」というテキスト部分をクリックすると「リンク先」というテキスト部分に移動します。
具体的な使い方としては、h2、h3などの見出し部分に飛ばすという場合が多いです。
ページ内リンクを設定する方法
それでは、このページ内リンクを設定する方法を紹介したいと思います。
上記図のように、「リンク元」というテキストから「リンク先」というテキストに飛ばすのを例に説明していきます。
プラグインの「TinyMCE Advanced」を利用していれば、ビジュアルエディタで簡単に設定できます。
もちろん、プラグインを利用しなくても設定は可能です。「HTMLコードを直接入力する場合」を参照してください。
TinyMCE Advancedを利用している場合
TinyMCE Advancedを利用している場合は、ビジュアルエディタから以下のように設定できます。
リンク元の設定
外部リンクを張るのと同じ要領で、ページ内リンクを貼りたいテキストを選択し、「リンクの挿入/編集ボタン」をクリックします。
「リンクの設定」ボタンをクリックします。
リンク先URLに「#」から始まる任意の英数字を指定します。
ここでは「#link1」としました。「リンク追加」をクリックします。
リンクが追加されました。
リンク元の設定はこれで終わりです。
リンク先の設定
続いて、リンク先の設定です。
リンク元のテキストをクリックしたときに飛ばしたい場所（テキスト）を選択し、「挿入」→「アンカー」をクリックします。
IDにリンク先で指定したURLの#を除いたものを入力します。「#link1」と指定したのでここでは「link1」にします。
「OK」をクリックすれば完了です。
見出し部分に飛ばしたい場合もこれと全く同じ要領で設定すれば大丈夫です。
HTMLコードを直接記述する場合
コードを直接記述する場合は以下のように設定します。
リンク元の設定
外部リンクと同じ要領ですが、リンク先URLに「#」から始まる任意の英数字を指定します。
<a href="#xxx">リンク元</a>（例）”#link1″と指定する場合は以下のようになります。
<a href="#link1">リンク元</a>リンク先の設定
リンク先の設定は、リンク先のテキストの前に以下のようなコードを追加します。”xxx”の部分はリンク元で指定したリンク先URLから「#」を取ったものです。
<a id="xxx"></a>リンク先（例）リンク元で”#link1″と指定した場合はリンク先は以下のようになります。
<a id="link1"></a>リンク先見出し部分に飛ばしたい場合は、以下のようにhタグ内の文字列の前にコードを追加します。
<h2><a id="xxx"></a>見出し</h2>また以下のように指定することもできます。
<h2 id="xxx">見出し</h2>おわりに
ページ内リンクを設定することで、訪問者が目的の情報を探しやすく読みやすくなるため以下のような効果が期待できます。
・ユーザビリティの向上
・直帰率や滞在時間の改善
ちょっとした設定で済むので、一記事の文章が長い場合など、適時ページ内リンクを設定し訪問者が見やすくなるようにすることをおすすめします。
