WordPressのブロックエディターでページ内リンク(アンカーリンク)を設置する方法を紹介します。
ページ内リンクとは？記事内の任意の箇所にジャンプできる機能
ページ内リンクとは、同じページ内の任意の箇所にリンクを設置することが出来る機能です。アンカーリンクとも言われます。
たとえば、以下のリンクをクリックしてみてください。記事の最後までジャンプします。
記事の中でうまくページ内リンクを活用すると、読者にとって見やすい記事になるので、ぜひ作り方を覚えておきましょう。
ちなみに、旧エディター(クラシックエディター)では、HTMLコードの編集が必要でしたが、ブロックエディターではより簡単にリンクが設置できるようになっています。
ブロックエディターのページ内リンクの作り方
以下の2つについて解説します。
- 同じページ内でページ内リンクを設置する方法
- 別記事の任意の箇所にリンクを貼る方法
同じページ内でページ内リンクを設置する方法
以下の手順でページ内リンクを設定できます。
日本語でも英数字でもOKですが、先頭の文字はアルファベットにしてください。
ちなみに私は全て英数字にします。ここでは「last」と入力しました。
この例では、「#last」と入力すればOKです。
これでページ内リンクが完成です。プレビュー画面で動作を確認してみてください。
別記事の任意の箇所にリンクを貼る方法
別のページの任意の箇所にリンク貼る方法もご紹介します。
たまにですが、別の記事の途中の部分にリンクを飛ばしたいというケースもあるかと。
そういうときは、まず、別記事のリンクを設置したいブロックにHTMLアンカーを入力します(上記のステップ1〜ステップ3と同様)。
次に、リンク元のブロックの「リンク」に、記事のURL+#+HTML アンカーを入力すればOK。
たとえば、
- 別記事のリンク先のHTMLアンカー：link1
- リンク元の記事URL：https://example.com/test/
だった場合に、リンク元は、以下のように入力します(上記のステップ4〜ステップ5)。
最後に
本記事では、WordPressのブロックエディターでページ内リンクを設置する方法をご紹介しました。
記事の中でページ内リンクを活用すると、読者にとって見やすい記事になるので、ぜひ作り方を覚えておきましょう。
なお、当サイトで使用しているWordPressテーマ「SWELL
」は、ブログ向けで開発されたブロックエディター完全対応のテーマです。
もしWordPressテーマをどれにするか検討中の方はSWELLの導入を検討してみてはどうでしょうか？
