3分で解説！WordPress(ワードプレス)でページ内リンクを貼る方法【クラシックエディター】

 

こんにちは！さおりです！

ページ内リンクの設置の方法に困っている

そこのあなた！

 

この記事にたどり着いたということは、その悩みを3分で解決しちゃいます！

 

 

ページ内リンクを使いこなすことによって、記事の読みやすさが一気にアップしますので、読者の記事からの離脱を減らすことができるので、SEO対策としても期待できます！

 

WordPressで行うページ内リンク(アンカーリンク)の設置

ページ内リンク(アンカーリンク)は、記事の中で指定した位置に飛ばすことができるリンクです！

そのやり方としては2パターンあります。

ページ内リンクを設置する方法は2パターン：おすすめはHTMLで設置

HTMLとは、テキストモードで記事内を直接カスタマイズすることができるコードのことです！

おすすめはこのHTMLで設置する方法です！

 

実際、プラグインを使うと簡単にページ内リンクができます。

ただ、プラグイン自体はとても便利なのですが、多用することはサイトを重くする原因になります。

プラグインを増やして読者の利便性が欠けてしまうのは、なるべく避けたいところです。

 

プラグインを使わなくてもHTMLタグの設置は2ステップで完了できるので、HTMLタグの方法をおすすめします！

 

指定した場所から好きな場所にジャンプさせる方法：2ステップ

編集するときは、テキストモードで設定します！

使うコードは、下記の2種類！

 

 

ステップ１：出発点の位置にHTMLを設置

 まず、出発点としたい位置に、

例)「<a href=”#id名“>ジャンプ</a>」

を設置します。

その際、「#id名」を設定します。

例えば、「#jump」

 

ステップ２：到着点の位置にHTMLを設置

着地点としたい位置に、

例)「<div id=”id名“>到着！<div>」

を設置します。

その際の「id名」はステップ１で設定したid名と同じものにします！

 

以上！！！(笑)

プレビューで確認してみると「ジャンプ」から「到着！」まで記事の中で飛ぶことができます！

 

見出しへ飛ばしたい場合のページ内リンクの設置方法

ステップ１：出発点の位置にHTMLを設置

今回は本記事の見出し3の「まとめ」に飛ばしたい場合を説明

まず、出発点としたい位置に、

例)「<a href=”#id名“>まとめに飛びたい方はこちら</a>」

を設置します。

その際、「id名」を設定します。

例えば、「#matome」

 

ステップ２：到着点の位置にHTMLを設置

着地点としたい位置に、

例)「<div id=”id名“>見出しのタイトル<div>」

を設置します。

コピペ用：着地点のコード

その際の「id名」はステップ１で設定した「id名」と同じものにします！

 

この時にテキストモードでは「<h2>まとめ</h2>」見出しがすでに作られています！

なので、着地点のコードの○○○の部分に「<h2>まとめ</h2>」を当てはめてください！

 

ページ内リンクがうまくできていない時の注意点

ページ内リンクにHTMLを設置してみたけど、ちゃんと指定した位置に飛ばないなどうまく設定できていない時には、下記を確認してみてください！

1. 出発点と着地点の「id名」は同じものになっているか
2. 出発点の「#」が入力されているか
3. 着地点に「＃」が入力されてしまっている
   (出発点には＃が必要ですが、着地点は＃が不要です)