HTML Web制作

【WordPressも解説】別ページの指定した場所に遷移するアンカーリンクの設定方法

※ 当サイトではアフィリエイト広告を利用しています

別ページの指定した場所に遷移するにはどうしたらいいんだろう?

同じページ内に移動するページ内リンクと似ていますが、今回は同じページ内ではなく別ページとなります。

さらに別ページに遷移するだけでなく、別ページの指定した場所に遷移する方法について解説したいと思います。

また、WordPressと静的ページの両方で解説します。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

別ページの指定した場所に遷移するアンカーリンクの設定方法

今回は以下の3種類の方法を解説していきます。

  • 別ページに遷移(場所指定なし)
  • 別ページに遷移(場所指定あり:静的ページ)
  • 別ページに遷移(場所指定あり:WordPress)

 

別ページに遷移(場所指定なし)

まずは場所を指定せず、ただ別ページに遷移する方法を見てみます。

特定の場所を指定せず遷移すると、ページの一番上が表示されます。

ファイル構成はこちらです。

ファイル構成

ファイル構成

トップページ『index.html』と下層ページが4ページあるコーポレートサイトのイメージです。

そしてヘッダーメニューはこんなイメージです。

ヘッダーメニュー

ヘッダーメニュー

このメニューをクリックすると各下層ページに移動します。

HTMLはこちらになります。

<header>
  <nav> 
    <ul>     
      <li><a href="about.html">ABOUT</a></li>     
      <li><a href="works.html">WORKS</a></li>     
      <li><a href="gallery.html">GALLERY</a></li>   
      <li><a href="service.html">SERVICE</a></li>  
    </ul>
  </nav>
</header>

aタグのhref属性にファイル名を書くだけです。

注意点があるとすれば拡張子(.html)まで書くことでしょうか。

下層ページのファイルですることは特にありません。

『クリックしたら別ページを開く』というシンプルなものです。

 

別ページに遷移(場所指定あり:静的ページ)

そして本題である特定の場所を指定して別ページに遷移してみたいと思います。

まずはWordPressではなく静的ページの場合です。

先ほど説明したように特定の場所を指定せずにヘッダーメニューのWORKSをクリックしてページ遷移すると、このようにページの一番上が表示されます。

WORKSページ

WORKSページ

そして今回はこのページ遷移した時に、WORKS③というセクションの上から表示されるようにしたいと思います。

WORKSページ:WORKS③セクション

WORKSページ:WORKS③セクション

まずは遷移先である別ページ(WORKSページ)のHTMLから見てみたいと思います。

例えばトップページからWORKSページに遷移したとします。

<section id="works1">
  <h2>WORKS①</h2>
  <p>ここにWORKSテキストが入ります。</p>
</section>
<section id="works2">
  <h2>WORKS②</h2>
  <p>ここにWORKSテキストが入ります。</p>
</section>
<section id="works3">
  <h2>WORKS③</h2>
  <p>ここにWORKSテキストが入ります。</p>
</section>
<section id="works4">
  <h2>WORKS④</h2>
  <p>ここにWORKSテキストが入ります。</p>
</section>

各sectionにidが付いていて、これが指定する場所の目印となります。

これはページ内リンクの時と同じですねページ内リンクについては以下の記事を参考にして下さい)

あわせて読みたい
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンク(アンカーリンク)の作り方
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方

続きを見る

そして今度は遷移元のHTMLを見てみます。

これはヘッダーメニューやフッターメニューだけでなく、トップページのコンテンツ内にある場合でも同じです。

<ul>
  <li><a href="works.html#works1">WORKS①</a></li>
  <li><a href="works.html#works2">WORKS②</a></li>
  <li><a href="works.html#works3">WORKS③</a></li>
  <li><a href="works.html#works4">WORKS④</a></li>
</ul>

これで各リンクをクリックしたら、WORKSページのWORKS①~WORKS④の上が表示されます。

例えば『WORKS③』をクリックするとページ遷移してこの位置で表示されます。

WORKSページ:WORKS③セクション

WORKSページ:WORKS③セクション

ページ内リンクの場合は同じファイル内なのでファイル名は不要でしたが、今回は別ページなので遷移先のファイル名を書く必要があります。

つまり、

  • ページ内リンク:<a href="#遷移先のid名"></a>
  • 場所を指定してページ遷移:<a href="遷移先のファイル名#遷移先のid名"></a>

となります。

 

別ページに遷移(場所指定あり:WordPress)

今度はWordPressの場合です。

遷移先のファイルはそのままで大丈夫ですが、遷移元のファイルはWordPress用にテンプレートタグを入れる必要があります。

  • 静的ページ:<a href="遷移先のファイル名#遷移先のid名"></a>
  • WordPress:<a href="<?php echo esc_url( home_url( '/' ) ); ?>スラッグ名#遷移先のid名"></a>

先ほどの例でいえば、

  • 静的ページ:<a href="works.html#works1"></a>
  • WordPress:<a href="<?php echo esc_url( home_url( '/' ) ); ?>works#works3"></a>

となります。

それではWordPressの方を少し説明します。

 

サイトのURLを取得する

<?php echo esc_url( home_url( '/' ) ); ?>サイトのURLを取得するテンプレートタグです。

サイトのURLは『管理画面 ⇒ 設定 ⇒ サイトアドレス』に書いてあります。

<?php echo home_url( '/' ); ?>でも表示されますが、home_url( '/' )esc_url()で囲ってあげた方がセキュリティー上のリスクを回避して安全な形でURLが出力されます。

さらに<?php bloginfo('url'); ?>でも表示されますが、こちらは現在非推奨とされています。

 

スラッグ名を記述

その後の『works』はスラッグ名で、この名前は自分で決められますが移動先のファイル名にしておいた方が分かりやすいでしょう。

このスラッグ名は投稿画面から変えられます。

WordPress:パーマリンク

WordPress:パーマリンク

上の赤枠はパーマリンクと呼ばれるもので、先ほど取得したURLとスラッグ名がくっついた物です。

先ほど取得したURLというのは『https://junpei-sugiyama.com/』になります。

そして右にある編集をクリックすると編集できる部分が『スラッグ』となります。

WordPress:スラッグ編集

WordPress:スラッグ編集

今回の例で言えば、ここを固定ページの編集画面からworksに変更します。

補足

今回このスラッグ名は自動的にタイトルが表示される設定になっていたので変更の必要はありませんでしたが『管理画面 ⇒ 設定 ⇒ パーマリンク設定』から自動で表示される物をタイトル以外にすることも可能です。

つまり<a href="<?php echo esc_url( home_url( '/' ) ); ?>works#works1"></a>は、

『サイトの・指定した固定ページの・指定した場所』という意味になります。

まとめ

今回は別ページの指定した場所に遷移させる方法について解説してきました。

もし遷移先の位置を少しずらしたい場合は以下の記事を参考にして下さい。

あわせて読みたい
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-HTML, Web制作