【WordPressで簡単！】ヘッダーメニューからページ内リンクを設定する方法

以下について確認してみてください。

• リンク先のIDが正しく設定されているか
  • ID名は半角英数字になっていますか？
  • 大文字と小文字は区別されるので、入力時に注意が必要です
  • スペースは使えません（ハイフンやアンダースコアを使いましょう）

• リンクURLは正確か
  • #（シャープ）は半角になっていますか？
  • ID名は設定したものと完全に一致していますか？
  • URLの最後に余分なスペースが入っていませんか？

固定ヘッダーを使用している場合、リンク先がヘッダーに隠れてしまうことがあります。
簡単な方法として、ブロックにクラス名を追加して調整する方法があります。

【追加CSSに貼り付けるコード】

.anchor {
    display: block;
    height: 0;
    margin-top: -100px;        /* ヘッダーの高さに応じて調整 */
    padding-top: 100px;        /* ヘッダーの高さに応じて調整 */
    visibility: hidden;
}

/* スマートフォン用の調整 */
@media screen and (max-width: 768px) {
    .anchor {
        margin-top: -60px;     /* スマホ用ヘッダーの高さに応じて調整 */
        padding-top: 60px;     /* スマホ用ヘッダーの高さに応じて調整 */
    }
}

WordPressのページ内リンクは、スムーズなスクロールに変更できます。

以下のCSSコードを、カスタムCSSを入力できる場所（「外観→カスタマイズ」の「追加CSS」など）に貼り付けてください。

html {
  scroll-behavior: smooth;
}

同じページ内の場合は、リンクURLに「#」と「ID」だけを入力すれば簡単にリンクが作れます。

例えば、「料金について」をクリックしたら、同じページの料金表（ID：price）まで自動的にジャンプさせたい場合、URLには「#price」のみを入力します。

別ページの特定の場所へジャンプさせたい場合は、ページのURLと「#ID」を組み合わせます。

例：ABOUTページ内のお問い合わせフォーム（ID：contact-form）にジャンプする場合のリンクURL
↓
https://example.com/about/#contact-form

このように、「ページURL/#ID」の形でリンクを設定します。