WordPressで、同一記事内の文章に移動する、ページ内リンク（アンカーリンク）の設定方法には、いくつかやり方があります。
ここでは、3つの設定方法をご紹介します。
- 新エディター（Gutenberg）のブロックエディターを使用する方法
- クラシックエディターを使用する方法
- HTMLコード編集でタグを直接入力する方法
おすすめの設定方法は、ブロックエディターを使用したやり方です。
ブロックエディター（Gutenberg）でページ内リンク設定する方法
WordPressの新エディター（Gutenberg）には、従来とは違うブロック単位で記事を作成していくブロックエディターが採用されています。
その新エディターを使用したアンカーリンクの作成方法を説明していきます。
リンク元の設定
エディター画面を表示して、リンク元となる文字列（テキスト）をマウスでドラッグして、そのまま「リンク」をクリックします。
「リンク」をクリックするとリンク先を設定するためのウインドウが表示されます。
ここに#（シャープ）から始まる任意の文字（アルファベット）を入力して「internal」の列をクリックします。
例：#goto
リンク先の設定
リンク元をクリックすると移動するリンク先を設定します。
リンク先のどこでもいいのでクリック（またはフォーカス）します。
右側サイドバーの「ブロック」を開き、「高度な設定」にある「HTMLアンカー」に#（シャープ）無しで、リンク元で設定した任意の文字を入力します。
例：goto
ブロックエディターを使用したページ内リンク（アンカーリンク）は、ここまでの設定で完了です。
リンク元の編集
リンク元に設定した文字を変更したいときは、リンク元をクリックします。すると、リンク先を設定するウインドウが表示されるので、任意の文字を入力して「internal」をクリックします。
また、リンク元の任意の文字を変更したときは、リンク先の設定も変更することを忘れないでください。
リンク元のリンク解除
リンク元のリンクを解除するには、リンク元をクリックして「リンク解除」をクリックするとリンク解除されます。
リンクを解除したとき、「HTMLアンカー」で設定したIDを使用しないなら、設定した任意の文字を削除しておくといいです。
クラシックエディターでページ内リンク設定する方法
現在、新エディターでは、以前使用されていたクラシックエディターも使用できます。
このクラシックエディターを使いページ内リンク（アンカーリンク）を設定する方法をご紹介します。
「TinyMCE Advanced」プラグイン
クラシックエディターを使用してページ内リンク（アンカーリンク）を作るには、「TinyMCE Advanced」プラグインを使用します。
ページ内リンクを作るには、プラグインをインストールして有効化するだけです。
クラシックエディターの設定
クラシックエディター使用するには、「プラス」をクリックして、さらに「クラシック」をクリックします。
リンク元の設定
リンク元となる文字列（テキスト）をマウスで設定して、「リンクの挿入/編集」をクリックします。
リンク先を設定するためのウインドウが表示されます。
ここに#（シャープ）から始まる任意の文字（アルファベット）を入力して「適用」をクリックします。
例：#goto
リンク先の設定
リンク元をクリックすると移動するリンク先を設定します。
リンク先の先頭をクリック（またはフォーカス）します。
エディターメニューの「挿入」をクリックして、「アンカー」をクリックします（ツールバーにアンカーボタンを追加する方法もあります）。
「アンカー」のIDに、#（シャープ）無しで、リンク元で設定した任意の文字を入力して「OK」ボタンを押してページ内リンクの設定完了です。
リンク元の編集
リンク元に設定した文字を変更したいときは、リンク元をクリックして、「編集」をクリックします。
リンク先を設定するためのウインドウが表示されるので、ここに#（シャープ）から始まる任意の文字（アルファベット）を入力して編集をして「適用」をクリックします。
例：#goto
また、リンク元の任意の文字を変更したときは、リンク先の設定も変更することを忘れないでください。
リンクの削除
リンク元をクリックして「リンクの削除」で、リンクの解除ができます。
「リンクの削除」をしたら、使用しないリンク先のアンカーリンク（いかりマーク）を削除します。
HTMLコードを編集してページ内リンクを設定する方法
HTMLを編集してページ内リンクを作成するには、HTMLの知識が必要になります。ここでは、細かな部分の説明は省略して簡単に説明をしています。
リンク元のHTMLを編集する
「ブロックエディター」や「クラシックエディター」のツールバーから「HTMLとして編集」をクリックすると直接HTMLの編集ができます。
例えば、「リンク元」にリンクを設定するには、下のコードのようにaタグのhref属性に#と任意の文字を入力します。
リンク元には必ず先頭に#（シャープ）を入力してから文字（値）を設定します。
<a href="#goto">リンク元</a>リンク先のHTMLを編集する
次に、リンク先になるHTMLの書き方は、下のコードのようになります。
aタグを使用したアンカーリンクの場合、タグで文字を囲まず先頭にaタグを設定します。
<a href="#goto"></a>リンク元または、上のaタグではなく、pタグなども使用できます。
また、PやHタグなどを使用する場合は、リンク先になる文字をタグで囲みます。
<p id="goto">リンク先</p>タグにより、文字を囲んだり囲まなかったりしていますけれど、HTMLを編集してページ内リンクを作成するときの重要な部分は2つです。
- リンク元になるaタグのhref属性の値の先頭に#を入れること
- リンク元のhref属性の値とリンク先のid属性の値を同じにすること
リンク実例
「リンク元」をクリックすると下の「リンク先」に移動します。
・・・
・・・
・・・
リンク先
最後に｜ページ内リンクの作成方法について
ページ内リンクについて、「ブロックエディターを使用する方法」、「クラシックエディターを使用する方法」「HTMLを編集して作成する方法」の3つの作成方法をご紹介しました。
現在、新エディター（Gutenberg）では、ブロックエディターとクラシックエディターの2つが混在して利用できます。また、HTMLのコードを直接編集してページ内リンクを作成することもできます。
これによって、ページ内リンク（アンカーリンク）を色々なやり方で作成できるので、便利な反面、慣れていないと混乱してしまうかもしれません。
将来、クラシックエディターがなくなるようなので、できればブロックエディターを使用してページ内リンクを作成するといいと思います。
コメント