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

Sponsored Link


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

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

 

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

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

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

ページ内リンクとは、

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

でしたね?

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

 

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

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

つまり、

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

 

wordpress ページ内リンク 設定

 

たとえば、「りんご」というテキストにリンク先を「#apple」と設定したとしましょう。この時、このリンクをクリックすると、ページ内の「apple」というidがついた箇所に一瞬で遷移できるのですね。

wordpress ページ内リンク 設定

 

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

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

できれば500ステップぐらい踏んでわかりやすく解説したいところですが、なんとWordPressでページ内リンクを設定する方法は次のたったの2ステップなのです。

 

今回は例として、

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

wordpress ページ内リンク 設定

 

 

Step1. 遷移先にid名をふる

まずはページ内リンクの遷移先の設定からですね。適当にそれっぽいid名を遷移先の要素につけてやりましょう。

 

今回の例では、

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

いかにもホグワーツっぽい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ステップでものの簡単にWordPressでページ内リンクを挿入できちゃいましたね。

 

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

https://gyazo.com/162996291ee50e102679b3d85b6893d2

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

Easy Smooth Scroll Links

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

wordpress ページ内リンク 設定

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

https://gyazo.com/68ec61178299cd1650b2af1fa035d9ea

スクロール機能を入れる入れないは完全に個人の好みの問題ないのでよかったら使ってみてください。

 

それでは!

Lin

 

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

 

飯橋凛(Ihashi Lin)

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


Sponsored Link

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



もう1本読んでみる