今回は、「別ページの指定した箇所にリンクが飛ぶようにする方法」について紹介します。

静的サイトだけでなく、WordPressサイトでも使える方法も紹介するので、是非参考にしてください！

【静的ページ】別ページの指定した箇所にリンクが飛ぶようにする方法

リンクの移動先コード

リンクの移動先ファイルはdemo.htmlとします。

まずはリンクをクリックした移動先のコードを書きます。

<section id="sec01">
      <h1>セクション1のリンク先です</h1>
</section>

ポイントは、リンクの移動先にid名を記述することです。

id名はご自由に決めてください。

リンクの移動元コード

リンクの移動元ファイルはindex.htmlとします。

リンクの移動元のコードはこちら。

<ul>
    <li><a href="./demo.html#sec01">セクション1</a></li>
</ul>

ポイントは、aタグのhrefに「移動先のファイル名#移動先のid名」と記述することです。

これでaタグをクリックすると、demo.htmlファイルの中にある#sec01のid名を指定した箇所にリンクが飛ぶようになります。

【WordPress】別ページの指定した箇所にリンクが飛ぶようにする方法

リンクの移動先コード

リンクの移動先コードは静的ページと一緒のコードでOKです。

リンクの移動元コード

WordPressでは静的ページと違い、ファイルのパスを通す際にテンプレートタグを入れる必要があります。

<ul>
    <li><a href="<?php echo esc_url( home_url( '/demo' ) ); ?>#sec01>">セクション1</a></li>
</ul>

上記のコードだと、スラッグがdemoのページの#sec01の箇所にリンクが飛ぶようになります。

WordPressで別ページにリンクを飛ばしたい場合は、必ずテンプレートタグを忘れないようにしましょう！

まとめ

以上が、「別ページの指定した箇所にリンクが飛ぶようにする方法」でした。