Web制作 WordPress HTML

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

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

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

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

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

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

コーディングの時給アップにはこちら!


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

今回は以下の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】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, WordPress, HTML