こんにちは、解説ゾロです！
例えば、本サイト「解説ゾロ」の、ある記事から、同じ「解説ゾロ」の「別の記事の途中にリンクを飛ばす」の解説です。
WordPressの「リンク」には「ページ内リンク」や「アンカーリンク」と呼ばれるリンク「内部リンク」「外部リンク」といくつかありますが、それぞれの定義はさて置き、
通常、別の記事にリンクを飛ばしますと、その記事の先頭に飛びますが、今回はユーザビリティを高めるために先頭に飛ばすのではなく、ピンポイントで必要な場所に飛ばせるというリンクです。
WordPressで「別ページの記事の途中」にリンクを飛ばす方法
前回の記事に「別ページの記事の途中」に飛ばす場面がありますので、そのリンクをサンプルとして解説していきます。
⇩まず、何処から何処へ飛ばす設定をするのかを、わかりやすいように図解いたします。
左側の【WordPressで画像を使った「ページ内リンク」のコードの書き方】の記事の、
①の「前回の記事で詳しく解説しています」の文字をクリックしますと、同じサイト内の違う記事である、
右側の【WordPress「ページ内リンク」で好きな場所へ飛ばす方法】の記事の途中にある、
②のWordPressの「ページ内リンク」のジャンプをゆっくりという「見出し2」に飛ぶ設定です。⇩
「別ページの記事の途中」にリンクを飛ばすコード
⇩ここから飛ばすためのリンク文字を、
①の「前回の記事で詳しく解説しています」に設定しますので、
⇩いつも記事を書いているWordPress「投稿を編集」の画面の右上の、
①の「コード」をクリックしてください。⇩
すると「コード」を入力する画面に変わりますので「コード」を書いていきます。リンクにする文字列「前回の記事で詳しく解説しています」の前後を下記のように赤い色のコードで囲みます。
「別ページの記事の途中」にリンクを飛ばす「コード」の解説
ざっとその「コード」の意味を解説いたしますと、
①の「a href」は「アンカーエイチレフ」と読み、a（アンカータグ）とセットで、リンク先を指定しますという感じの意味です。
②の「https://kaisetsuzoro.com/page-internal-links/」は、同一サイトにある飛ばしたい別ページの記事のURLです。
③の最後尾の「#a03」は、飛ばしたい、別ページの記事の途中の着地点のID名です。ID名は「a03」です。＃を付けてお好きな半角英数字でOKです。「＃a1」でもオッケーです。これで「前回の記事で詳しく解説しています」のように文字が青くなるリンクボタンに変わります。
この前回の記事で詳しく解説していますの文字をクリックしますと、別の記事のhttps://kaisetsuzoro.com/page-internal-links/の記事の#a03という途中の場所に飛ばしますよ！という意味です。これで出発点の作業は準備ができました。
実際に「別ページの記事の途中」に飛ばすコードを書く
実際にここから飛ばす「コード」を書きますと下記のようになります。
①がここから別の記事に飛ばす出発点のコード全文で、
②は、着地点のID名（a03）です。「#」をお忘れなく。
「別ページの記事の途中」を着地点にするコード
次は、ここに飛んで来て（着地点）のコードです。着地点は、別の記事である【WordPress「ページ内リンク」で好きな場所へ飛ばす方法】という記事の途中の、
①の WordPressの「ページ内リンク」のジャンプをゆっくり という「見出し2」の場所にリンクが着地するように「コード」を書きますので、まず、その着地する別の記事を開き、着地点にしたい見出しや文字を決めて、その文字にコードを書いていきますので、先ほどと同じように「コード」を入力できる画面にしてください。
「コード」の画面に変わりましたら書いていきます。下記がコードです。
<h2 id="a03">WordPressの「ページ内リンク」のジャンプをゆっくり</h2>
「別ページの記事の途中」を着地点にするリンクのコード解説
ここに飛ばしたいという場所に着地するコードを書きます。ここでは、別ページの記事途中の「見出し2」の「WordPressの「ページ内リンク」のジャンプをゆっくり」という文字列に飛ばします。「見出し2」の着地するコードを書く前は、下記のコードが書かれています。
<h2>WordPressの「ページ内リンク」のジャンプをゆっくり</h2>
このコードに、リンクが飛んで来て着地するための「id」というコード「id=”a03″」を書きますと、下記のコードになります。
<h2 id="a03">WordPressの「ページ内リンク」のジャンプをゆっくり</h2>
⇩こちらも簡単に解説いたしますと、両端にある、
①の「h2」は、この文字列は「見出し2」に設定しています！ということです。「h3」「h4」の見出しでも、見出しではなく、<p>や<div>にも設定はできます。
②の青字の「id=”a03“」は、ここが飛んでくる着地点ですよ！という意味で、飛ばす時の出発点の時に書いたにURLの最後尾に同じ「id」の「a03」を書いたと思います。ですので、飛ばす「出発点」と飛んでくる「着地点」とが「id」でセットになって繋がっていますので、ここに飛んでこれるわけです。
③は、着地する「見出し2」に書かれている「WordPressの「ページ内リンク」のジャンプをゆっくり」の文字列です。⇩
実際に「別ページの記事の途中」を着地点にするリンクのコードを書く
⇩実際に「コード」の画面に書きますと下記のようになります。
①が、ここに着地させるコードの全文で、
②は、ここを着地点にするためのID名である、id=”a03″を書いています。「#」や「” ”」をお忘れなく。⇩
まとめ
リンクの中でも特に閲覧者様に少しでもストレスを与えない、ユーザビリティの高いサイトにするための解説でした。
より、求めている内容の記事に、より、ピンポイントに飛ばすことができるリンクですので、とても重宝するリンクの1つです・・・よね！笑
ユーザーファースト！
今年は流行りですね、○○〇ファースト！笑
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：WordPress「ページ内リンク」で好きな場所へ飛ばす方法
関連記事：WordPressで画像を使った「ページ内リンク」のコードの書き方
関連記事：リンクの貼り方｜WordPressで好きな所へ飛ばせる方法
