3分で簡単キレイ!WordPressでページ内リンクを設定方法

Sponsored Link


WordPressの記事にページ内リンクを設定したい!

どうも、Linです。スニッカーズ、持ってます。

 

WordPressのサイトを運営しているとたまに、

記事内にページ内リンクを挿入したい

という瞬間があるでしょう。

ページ内リンクとは、

ページ遷移させずにページ内のとある箇所に画面を瞬時に移動させる技のこと

でしたね?

WordPressのサイトでは目次とかでよく利用されています。

 

WordPressでページ内リンクを挿入する方法はぶっちゃけ、

HTMLでページ内リンクを設定する方法とおなじです。

つまり、

「#id名」というリンクを貼ってやると、その「id名」の箇所にワープすることができるのです。

 

wordpress ページ内リンク 設定

 

たとえば、「りんご」というテキストにリンク先を「#apple」と設定したとしましょう。

この時、このリンクをクリックすると、ページ内の「apple」というidがついた箇所に一瞬で遷移できるのですね。

 

wordpress ページ内リンク 設定

 

WordPressでページ内リンクを設定する方法

WordPressでページ内リンクを設定するときも同じ手順を踏んでいきます。

 

今回は例として、

「ホグワーツへ行く」というテキストリンクをクリックしたら「ホグワーツ魔法学校」というH2要素に遷移させていきますよ。

 

wordpress ページ内リンク 設定

 

Step1. 遷移先にid名をふる

まずは遷移先の設定からですね。

それっぽいid名を遷移先のタグ要素につけてやりましょう。

 

今回の例では、「ホグワーツ魔法学校」というh2タグを遷移先に設定したかったので、このh2要素にid名をつけていきます。

 

いかにもホグワーツっぽいid名をつけて「hogwarts」とでもしましょうか。

WordPressの記事編集画面で「テキスト編集モード」をクリックしてHTMLのコードを次のように編集してみましょう。

https://gyazo.com/61bc518dfaa53a130d35b45fbea43fd2

ホグワーツ魔法学校のh2タグは次のようになるはずです。

 

えっ。HTMLの編集とか正直だるいですって!?

そんな方は「Tiny MCE Advance」というプラグインを使うといいですよ。

プラグインの設定からアンカー機能の「リボン」を編集ツールに追加してください。

 

 

こいつを使うと、

指定したid名をもつaタグを仕込むことができるのです。

 

仕込み方は簡単で、

遷移先の要素をドラッグで選択し、この状態でリボンマークをクリック。

id名を指定するウィンドウがポップしてきますのでそこで遷移先のid名を入力すればいいのですね。
https://gyazo.com/563e773dacfcb91b4d7244000f83db1a

Step2. リンクを設定

あとはリンクを踏んだらその要素にたどり着けるように設定するだけですね。

WordPressでページ内リンクを設定するときは、

いつも通りにリンクを挿入すれば問題ありません。

 

テキストを選択して、鎖マークをクリックして、そのリンク先に、

#id名

を入れればいいのですね。

今回のホグワーツの例では遷移先のid名は「hogwarts」でしたので、そいつの先頭に「#」をつけて、

#hogwarts

とすればオッケーです。

 

https://gyazo.com/a159ea3def78aa08424c20beda3a1612
えっ、ビジュアルモードじゃなくてテキストモードで作業したいですって!?

そういう方はリンク元のテキストを「<a href=”#id名”></a>」のaタグでくくるようにしましょう。

 

 

この2ステップを踏んでやると、次のようなホグワーツリンクが完成するはずです↓

 

 

ホグワーツへ行く

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ホグワーツ魔法学校

 

 

滑らかにスクロールさせたいならプラグイン「Easy Smooth Scroll Links」!

以上がWordPressでページ内リンクを設定する方法でした。

  1. 遷移先にid名を割り振る
  2. 「#id名」というリンクを貼る

という2ステップでページ内リンクを挿入できちゃいましたね。

 

ただ、何もせずに単にページ内リンクを挿入しただけだと、こんな感じで瞬間移動した感じが出てしまいます。

https://gyazo.com/162996291ee50e102679b3d85b6893d2

そうではなく、滑らかにスクロールさせていときは、

Easy Smooth Scroll Links

というプラグインが便利です。

wordpress ページ内リンク 設定

このブログでも導入させてもらってますが、ページ内リンクへ遷移する過程がスクロールされるのでわかるようになってますね。

https://gyazo.com/68ec61178299cd1650b2af1fa035d9ea

よかったらこちらのプラグインも合わせて使ってみてください。

 

「それでもページ内リンク作れねえ!!!」

という方にはエンジニア専門のQAサイト「teratail」がおすすめです。

質問に答えてくれる方はプロのエンジニアの方ばかりなので、問題を解決できるかもしれません。

 

それでは!

Lin

 

【参考にさせていただいた神記事】

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる