目次からのリンクで同じページ内の特定の位置にジャンプさせたい場合にhtml記述で行う方法とプラグインで内部リンクにつなげる方法があるのでその種類とやり方を詳しく紹介します。
アンカーリンクとは
アンカーリンクとは、HTMLでどこかにリンクさせたい時に使う<a>タグで
<a>リンクさせたい何か</a>
といった具合で使います。
anchorの頭文字のaが使われています。
アンカーリンクを使う方法
リンク元から行っていきましょう。
まず、ダッシュボードの左のメニューから投稿→投稿一覧を選択します。
そしてアンカーリンクを適用したい投稿のタイトルにカーソルを合わせて下記の画像の赤丸の編集をクリックします。
そして移動元(ボタン)にしたいブロックを選択し、右クリックするとHTMLとして編集とあるので洗濯するとブロックが<p>タグで囲まれたHTML記述になります。
<p>移動元</p>となっていると思いますがこれを
<a href="#anchor1"><p>移動元</p><a>とします。#をつけて「移動先」は任意の文字列で結構です。ただし複数のリンクを作る際はそれぞれ別の文字列にしてください。
これで移動元の設定は完了です。次は移動先の設定にいきましょう。
移動先はブログだと見出しになることが多いので、見出しを使った手順で説明します。
まず、先ほどと同じように移動先の文をHTML編集モードにします。
そしてこのコードを以下のようにします。
<h2 id="anchor1">移動先</h2>これで完了です。
プラグイン「TinyMCE Advanced」を使う方法
正直、いちいちhtmlでコード書くのはめんどくさい。どうにかして効率化したいと思っている方にwordpressプラグインの「TinyMCE Advanced」を使う方法を紹介します。
ですがその前にwordpressをクラッシックモードにしないといけません。ダッシュボードからプラグイン→新規追加でプラグインの検索から「classic editor」で検索すると
上の画像のようなのがあると思うのでインストールして有効化してください。あとは投稿編集の際に下の画像のように自動で切り替わっているのでそのままで結構です。
まず、ダッシュボードの左側のメニューからプラグイン→新規追加を選択します。そして画像の右上にあるように「プラグインの検索...」にTinyMCE Advancedと入力します。tinymceでも出てきます。
画像左上のTinyMCE Advancedをインストールし、完了したら有効化ボタンが出てくるので有効化します。
そしたら、ダッシュボード→プラグイン→インストール済みプラグインを選択します。そしてTinyMCE Advancedを探して「停止」と書いてあるボタンの横の「設定」のボタンを押してください。
するとエディター設定と言う項目になるのでブロックエディターのタブから旧エディターのタブにし、したからアンカーアイコンをドラックして上のメニューにドロップします。最後に変更の保存をクリックします。
するとアンカーが追加されていることが分かります。
いよいよリンク元を設定していきます。リンクさせたい文字列を選択して上のメニューバーのリンクアイコン🔗をクリックします。するとurlを入力と出るので「#aaa」と「＃」をつけて半角英数字の文字列を適当に入力します。
次にリンク先の設定です。
同様に文字列を選択して今度はメニューのアンカーアイコンをクリックします。そして入力欄が出るのでそこに「aaa」と先ほどリンクでつけたIDのシャープをとった文字列を入れます。
以上で完了です。最初の設定こそ面倒ではありますが、あとはHTMLタグを打たずに済むのでどちらでやりたいかは人それぞれな感じがありますね。
あと、クラッシックエディターとビジュアルエディターを設定で切り替えることもできるので適宜使い分けることも可能です。
