こんにちは! 夜中、犬に起こされ寝不足の千明です。
ワードプレスの投稿内で
- 読者さんの興味によってAの箇所は飛ばして、Bから見てほしい、というとき
- 別記事の特定箇所を見てほしいとき
ページ内の特定の箇所までワープできると、とても見やすい記事になりますよね。
そんな時に使える、ページ内の特定箇所へのリンクの張り方をご紹介しますね。
ワードプレスでページ内リンクを張るには
普通のリンクでは、ページの先頭にリンクになりますが、ワードプレスでは、簡単にページ内の特定箇所に対するリンクが張れるのです。
ページ内の特定箇所リンクが張れると、
- 読者さんの必要に応じて省略したり、
- ほかのページの必要箇所だけ読んでもらうなど、
読むときの快適度が上がります。
やり方は簡単で、
- ジャンプ先にアンカー(錨)をつける
- ジャンプ元はアンカーを設定する
という流れです。

プラグインつけるとサイトが重くなるので嫌だな
という方には、
HTMLでやる方法と、



HTMLなんてわからん!面倒だわ。
という方には、
プラグインでやる方法をご紹介しますね。
あと、最後には、見た目をよくするために、スクロール動作をつける方法もご紹介しています。
phpを追記する方法と、プラグインを使う方法がありますよ。
次の章は、htmlでやる方法です。プラグインでやりたい方は、プラグインでやる方法までジャンプしてくださいね!
ページ内リンクをhtmlで
例として、HTMLで「ここから」というテキストから、
- リンク先テキストがない場合と、
- 「ジャンプ先!」というテキストがある場合の
ページ内リンクを張っていきます。
1.アンカーをつける
最初にジャンプ先にアンカーをつけます。
アンカーの形はこのようになります。



アンカーには半角英数字で名称をつけます。今回はjumpですね。
1.アンカーにテキストがないときは、この形のまま、
<a id="jump"></a>
となります。
2.アンカー先にテキストがある場合(今回はジャンプ先!)
<p><a id="jump"></a>ジャンプ先!</p>
という形になります。
アンカーにリンクを張る
リンクを張るテキスト(今回はここから)を指定して、このような形になります。



通常のリンクと違う点は、#jumpと、アンカーを#で指定していることですね。
他のページ内の特定箇所にリンクを張る場合
別のページの特定箇所にリンクを張りたい場合、アンカーはページ内リンクと同じように、作ります。
ページ内リンクと違う点は、リンク元の書き方です。この場合は、アンカーの前に、URLを足します。
こんな形ですね。今回は「別ページへ」というテキストがリンク元です。



コードにすると、こうなります。
<a href="https://sample.com/page/#jump2">別ページへ</a>
新しいタブを開いてリンクしたいときは、オレンジ部分を付け足します。



コードにすると、こうなります。
<a href="https://sample.com/sample1/#jump2" target="_blank">別ページへ</a>
ページ内リンクをプラグインで
今度はHTMLを使わずに、プラグインでやる方法です。
使うプラグインはTinyMCE Advanced です。
TinyMCE Advancedは、クラシックエディターでもブロックエディターでも使えるようになっていますよ。
TinyMCE Advancedインストールと設定
インストールからやりましょう。
ダッシュボードのプラグインから新規追加に入ります。
新規追加ページ右手の検索窓にTinyMCE Advancedと入れると、出てくるので、今すぐインストールを押します。



インストール出来たら、有効化を押します。



有効化を押すと、自動的に来るプラグインのページから設定に行きます。



初期設定だとページ内リンク用のアンカーができないので、アンカーを有効にします。
アンカーのマークを上の欄にドラッグアンドドロップすると、使えるようになりますよ。変更を保存をお忘れなく。



このようになったらOKです!



これで設定は終わり。使ってみましょう!
TinyMCE Advancedを使用したアンカー設定
まずアンカーを設定からやりますよ。
ブロックエディターを使っている場合は、ちょっとしたコツがあります。
基本的にTinyMCE Advancedはクラシックエディター用のプラグインなんです。でも、ブロックエディターでもブロックごとにクラシックエディターへの切り替えができるんです。
なので、最初にアンカーを入れたいブロックをクラシックエディターに変換します。
ブロックの左上のマークを押します。



上の方に出てくるクラシック版の段落をクリックします。



すると、灰色部分が出てくるので、クラシック版の段落というあたりをクリックします。



そうすると、懐かしい~クラシック版のツールバーが出てきます。その中に、先ほど設定したアンカーのマークがありますね。
アンカーを設定したいところ☆をクリックしたら、アンカーマークを押しましょう。



アンカーを入れる欄が出てくるので、名前を半角英数字で設定し、OKを押します。



するとこのように、ちっちゃい印が現れます。



これでアンカーの設定は終わりです。
TinyMCE Advancedを使用したリンク元の設定
次に、リンク元を設定しましょう。これは、普通のリンクの挿入とほぼ同じです。
リンクを入れたい文字を反転させて、リンクマークをクリック。



普通のリンクと違うのは、ここで、先ほど設定したアンカー名の先頭に#を入れて、記入します。「#アンカー名」ですよ。(すべて半角英数字で)



こんな感じです。



エンターを押します。
このように普通のリンクと同じように張れました。



他のページ内の特定箇所にリンクを張る場合
他のページの特定箇所にもアンカーを設定すれば、同じようにリンクが張れます。
アンカーの張り方は同じです。
リンク元の設定は、URL/#アンカー名となります。
こんな感じです。



新しいタブを開く場合は、下の新しいタブで開くボタンをクリックして青くしてくださいね。



以上でページの特定箇所にリンクを張るやり方は終わりです。



あの~、このままでもいいんだけど。
するする~っとスクロールするとかっこいいなあ。それやりたいな!
という方には、さらにスクロールするやり方をご紹介しますね!
スクロール動作をつける方法
スクロールの動作をつけるには、Easy Smooth Scroll Linksというプラグインを使います。
インストール方法はTinyMCE Advancedと同じです。
インストールしたら有効化します。
それだけで、スクロールするようになりますよ!



簡単でいいわ~!
プラグインを使わずにphpを書く方法もあります。これは、TCDさんのサイトからお借りしています。
header.php内に記述します。
<script>
jQuery(function(){
jQuery('a[href^="#"]').click(function() {
var speed = 800;
var href= jQuery(this).attr("href");
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
phpを変更する前に、現行のphpを保存しておいてくださいね。自信がない方はやらないようにしてください!
当サイトでは、この方法を使っています。
ワードプレスでページ内リンクの張り方のまとめ
ワードプレスでは簡単にページ内の特定箇所にリンクを張ることができますね。
やり方としては、
- アンカーを設定する
- #アンカー名でリンクを張る
でした。
HTMLでも簡単にできましたし、TinyMCE Advancedというプラグインを使うともっと簡単にできましたね。
一瞬でワープするリンクでもいいのですが、スクロールするように飛びたい場合はEasy Smooth Scroll Linksというプラグインを使うととても簡単にきれいに飛んでくれますよ。
特定箇所にリンクを張ることができると、読む人にとって無駄な箇所は飛ばせるので、とても読みやすい記事になりますよね!
お試しくださいね~!