【WordPressも解説】別ページの特定の場所にジャンプする方法

WordPress


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

別ページの特定の場所にジャンプするにはどうしたらいいんだろう?

 

 

といった方に対する記事となります。

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

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

 


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

 

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

一応書いておきますが、特定の場所を指定せず移動するとそのページの一番上が表示されます。

まずはファイル構成を見てみます。

トップページと下層ページが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属性にファイル名を書くだけです。

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

下層ページ側ですることは特にありません。

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

 

特定の場所を指定して別ページに移動(静的ページ)

 

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

先ほど説明したように、特定の場所を指定せずにヘッダーメニューのWORKSをクリックするとこのようなページに移動するとします。

 

 

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

こんな感じでWORKS③までスクロールされた状態ってことですね。

 

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

<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が付いていて、これが特定の場所の目印となります。

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

 

 

そして今度は移動元の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④の上が表示されます。

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

つまり、

  • ページ内リンク:<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> は、

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

以上です。

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