ワードプレスでページ内リンクを張る方法！初心者でも簡単よ！

こんにちは！夜中、犬に起こされ寝不足の千明です。

ワードプレスの投稿内で

読者さんの興味によってAの箇所は飛ばして、Bから見てほしい、というとき
別記事の特定箇所を見てほしいとき

ページ内の特定の箇所までワープできると、とても見やすい記事になりますよね。

そんな時に使える、ページ内の特定箇所へのリンクの張り方をご紹介しますね。

ワードプレスでページ内リンクを張るには
ページ内リンクをhtmlで
ページ内リンクをプラグインで
スクロール動作をつける方法
ワードプレスでページ内リンクの張り方のまとめ

ワードプレスでページ内リンクを張るには

普通のリンクでは、ページの先頭にリンクになりますが、ワードプレスでは、簡単にページ内の特定箇所に対するリンクが張れるのです。

ページ内の特定箇所リンクが張れると、

読者さんの必要に応じて省略したり、
ほかのページの必要箇所だけ読んでもらうなど、

読むときの快適度が上がります。

やり方は簡単で、

ジャンプ先にアンカー（錨）をつける
ジャンプ元はアンカーを設定する

という流れです。

おじさん

プラグインつけるとサイトが重くなるので嫌だな

という方には、

HTMLでやる方法と、

おばさん

HTMLなんてわからん！面倒だわ。

という方には、

プラグインでやる方法をご紹介しますね。

あと、最後には、見た目をよくするために、スクロール動作をつける方法もご紹介しています。
phpを追記する方法と、プラグインを使う方法がありますよ。

次の章は、htmlでやる方法です。プラグインでやりたい方は、プラグインでやる方法までジャンプしてくださいね！

ページ内リンクをhtmlで

例として、HTMLで「ここから」というテキストから、

リンク先テキストがない場合と、
「ジャンプ先！」というテキストがある場合の

ページ内リンクを張っていきます。

１．アンカーをつける

最初にジャンプ先にアンカーをつけます。

アンカーの形はこのようになります。

アンカーには半角英数字で名称をつけます。今回はjumpですね。

１．アンカーにテキストがないときは、この形のまま、

<a id="jump"></a>

となります。

２．アンカー先にテキストがある場合(今回はジャンプ先！）

<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を保存しておいてくださいね。自信がない方はやらないようにしてください！

当サイトでは、この方法を使っています。