コーディング Web制作 WordPress

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

【WordPressも解説】別ページの指定した場所に遷移するアンカーリンクの設定方法
別ページの指定した場所に遷移するにはどうしたらいいんだろう?

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

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

効率よくWordPress制作したい人はこちら

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

今回は以下の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③の上から表示されるようにしたいと思います。

 

まずは遷移先である別ページの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!スムーズスクロールでスルスルッと移動するページ内リンク(アンカーリンク)の方法

そして今度は遷移元の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③をクリックするとページ遷移してこの位置で表示されます。

 

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

つまり、

  • ページ内リンク:<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#works1"></a>

となります。

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

 

サイトのURLを取得する

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

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

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

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

 

スラッグ名を記述

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

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

 

 

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

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

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

 

 

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

補足

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

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

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

以上です。

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

ページ内リンク(アンカーリンク)の移動先の位置を変える方法

 


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, WordPress