同じページ内に移動するページ内リンクと似ていますが、今回は同じページ内ではなく別ページとなります。
さらに別ページに遷移するだけでなく、別ページの指定した場所に遷移する方法について解説したいと思います。
また、WordPressと静的ページの両方で解説します。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は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ページ）の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を使ったスムーススクロールで移動するページ内リンクの作り方
続きを見る
そして今度は遷移元の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③セクション
ページ内リンクの場合は同じファイル内なのでファイル名は不要でしたが、今回は別ページなので遷移先のファイル名を書く必要があります。
つまり、
- ページ内リンク：<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：パーマリンク
上の赤枠はパーマリンクと呼ばれるもので、先ほど取得したURLとスラッグ名がくっついた物です。
先ほど取得したURLというのは『https://junpei-sugiyama.com/』になります。
そして右にある編集をクリックすると編集できる部分が『スラッグ』となります。
WordPress：スラッグ編集
今回の例で言えば、ここを固定ページの編集画面からworksに変更します。
補足
つまり<a href="<?php echo esc_url( home_url( '/' ) ); ?>works#works1"></a>は、
『サイトの・指定した固定ページの・指定した場所』という意味になります。
まとめ
今回は別ページの指定した場所に遷移させる方法について解説してきました。
もし遷移先の位置を少しずらしたい場合は以下の記事を参考にして下さい。
-
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
続きを見る
以上になります。
