WordPressで記事を作成していると同一サイト（ブログ）内の別ページの任意の場所にジャンプさせたくなることがありますよね。今回は、サイト内別ページにジャンプする方法をご紹介します。
ジャンプする先のことを「アンカー」、ジャンプするために設置する仕掛けのことを「リンク」といいます。
ページ内でジャンプする方法はこちらで紹介しています。
＞＞【WordPress】ページ内の任意の位置にジャンプする＜＜（クリックするとジャンプします）
【HTML】別ベージの任意の場所にジャンプする方法
大きく2つあります。
- TinyMCE Advancedプラグインを設置する
- HTMLで記入する
TinyMCE Advancedプラグインを設置する方法は他のサイト様にお任せして、本ページではHTMLで記入する方法をご紹介します。
【HTML】別ページの任意の場所にジャンプする設定の流れ
手順は2つです。
１．着地するページの任意の場所に「アンカー」を設置する。
２．飛びたい場所に「リンク」を貼る。
アンカーを設置する
着地したいページの編集画面を開きます。
着地したい行と行のあいだに下のコードを挿入してください。
<a id=“半角英数字”></a>
「英数字」に任意の英数字を入れてください。このとき英数字は半角です。
また、ページ内に複数のアンカーが存在する場合は、他と被らないように設定してください。コツとしては、記事上部からの番号（01、02、・・・、〷）やジャンプする場所の名称(Point、Reazon1、Reazon2、Example、Point2)等にすると、ダブりなく設定しやすいです。
以下で手順を一つずつ説明します。
１．ジャンプ先にしたい場所（着地したいところ）に空欄を挿入。「＋」を押して、「カスタムHTML」をクリック。よく使うものの中にカスタムHTMLがない場合は、ブロックの検索に「HTML」と入力して検索すると見つけることができます。（環境はWindows、ビジュアルエディター、テーマはCcoonです）
２．上で示したコード（<a id=“半角英数字”></a>）を入力
リンクを貼る
どこからジャンプするのかを決めます。
手順を一つずつ説明します。
１．クリックしてジャンプさせたい文章を選択し、リンクボタンを押します（Ctrl＋Kでもよい）
２．リンクボタンをクリックすると、入力するための空欄が出てくるので、そこに「#英数字」を入力し、Enterキーを押す。
※ここで入力する英数字は、アンカーと同じもの
動作確認
アンカー設置と、リンク貼り付けができたら、プレビュー等で動作確認することをお勧めします。
ちなみに、本ページにも別ページの任意の場所にジャンプする仕掛けを設置しております
↓↓↓
うまく動作しないときの対処方法
動作確認してみてうまくいかないときは、以下の点を確認してみてください。
・入力したコードは半角か
よく間違える原因の一つです。「”」や「#」スペースが全角になっていないでしょうか。
・「#」があったり、なかったり
#はアンカーには不要です。リンクには必要です。
コメント