この記事では、Wordpressでページ内リンクを設定方法を紹介していきます。
WordPressのブロックエディタとテキストエディタでは、記述方法が異なります。
今はブロックエディタが主流ですが、テキストエディタでのやり方も紹介しているので、参考にしてみてください。
ブロックエディタでページ内リンクを設定する方法
WordPressのブロックエディタで、ページ内リンクを設定する手順は上記のとおりです。
やることは簡単ですが、実際にどうやるのか画像を交えて確認していきましょう。
①リンク先にHTMLアンカーを設置する
まずリンク先にHTMLアンカー(id)を設置しましょう。
上記のh3見出しにアンカーを設置します。
手順は以下の通り。
- 見出しのブロックを選択肢
- 右の設定バーがブロックになっているのを確認
- 設定バー下部の高度な設定でHTMLアンカーを入力
今回は、『pagelink1』、と入力しました。
これでリンク先へのHTMLアンカーの設置は完了です。
編集画面は、下記画像のようになります。
②アンカーテキストにリンクを設置する
リンク先にHTMLアンカーを設置したら、アンカーテキストにリンクを設置します。
リンクを設置したい文字列を指定して、リンクボタンでリンクを入力します。
この時、HTMLアンカーの頭に『#』を付けた文字列を入力しましょう。
上記の例で言えば、『#pagelink1』、と入力して決定です。
⇩
設定ができていれば下記画像のようになり、ページ内リンクができるようになります。
もちろん設置した後は、プレビュー画面でページ内リンクがちゃんと設定されているか確認しましょう。
テキストエディタでページ内リンクを設定する方法
- ページ内リンク先にidを指定
- アンカーテキストにリンクを設置
テキストエディタでページ内リンクを設定する方法も、ブロックエディタと変わらないです。
しかし、テキストエディタは、HTMLで記述する必要があります。
ページ内リンク先がhタグなら<h3 id=”komidashi1″>小見出し</h3>と、pタグなら<p id=”pragraph1″>段落</p>といった感じです。
しかし、これらを記述するのは結構面倒なんですよね…。
さらに、アンカーテキストはリストから飛ぶなら、<li><a href=”id名”>テキスト</a></li>と記述する必要があります。
また、リンクを入れるときは、必ず閉じタグとして、</a>で閉じなければいけません。
テキストエディタはHTMLで記述するので、閉じ忘れがあると悲惨です…。
まとめ
この記事では、Wordpressでページ内リンクを設定する方法を紹介しました。
お気づきのように、テキストエディタよりブロックエディタの方が断然わかりやすいですよね。
ブロックエディタはミスも少なくなるので、早めに慣れておきましょう。
また、ページ内リンクで指定したidは、ページ内で1ヶ所しか指定できません。
間違って同じidを付けると、飛んでほしいところに飛んでくれないので注意しましょう。
コメント