MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【あや 様】WordPressでナビゲーションメニューにページ内リンク アンカーを挿入するときに注意するポイント

WordPressのカスタムメニューでナビゲーションメニューにページ内リンク アンカーを追加したが、動作しないというご相談を頂きました。

ナビゲーションメニューにページ内ジャンプを挿入するには

こんにちは。今、ワードプレスで自分の会社のウェブサイトを作っているのですが、ホームページが結構長めの作りなので、ナビゲーションメニューでページ内の指定箇所にジャンプさせることはできないかと調べていますが、なかなか上手くいかずこちらにたどり着きました。

ホームにあたるページは、固定ページで作成していまして、メニューバーで飛ばしたいのはすべて同ページのh2の見出しです。

詳しく申し上げますと、メニューバーに、「特徴」「講座」「料金」「口コミ」「スタッフ」「よくある質問」「アクセス」「問い合わせ」といい風にリンクをつけし、すべてクリックすると、ホームページ内にあるh2見出しに飛ぶようにしたいです。

一応、すべてh2の見出しは、

<h2><span id="○○">○○</span></h2>

という風にし、メニューは、カスタムメニューでリンク先を”https://【YOURSITE】.com/#○○” とやってみたのですが、反映しません。。。

お助けいただけたら幸いです。よろしくお願いいたします。


>あや様
ご相談ありがとうございます!

いくつか試したことを記載していきます。

固定ページ内に直接記述するのは問題無さそう

まず、開発者ツールで疑似的にTOPページ内にリンクを記述してみましたが、問題なく動作しそうです。
リンクテスト

同様に、カスタムメニュー内にもリンクを追加してみましたが、こちらも問題無さそうです。
リンクテスト2

カスタムメニューの設定画面などをキャプチャで頂ければもう少し詳しくわかるかもしれませんが、HTMLの書き方も問題なさそうなのでカスタムメニューの作成に問題があることも考えられます。

1.リンクの設定

ナビゲーションメニューということで、全ページにページ内リンクを表示させるということでしょうか。
この場合リンクの書き方によっては問題がでてくるかもしれません。

TOPページから
href=”https://【YOURSITE】.com/#○○”
とするのと サブページから
href=”https://【YOURSITE】.com/#○○”
とするのでは意味合いが違ってきます。

TOPページ内の口コミ部分では href=”#yoyaku01″とだけ記載していましたが、サブページでこのように記載するとリンクは動作しないでしょう。
href=”https://【YOURSITE】.com/#○○”
や、スラッシュだけの形
href=”/#○○”
なら問題ないと思います。

カスタムメニューに問題があるかは判断できませんが、こちらの記事も参考にしてみてください。
カスタムメニューの作成について

あとは実際にナビゲーションメニューにサイト内リンクを表示させた状態で見せて頂くか、カスタムメニューの画面キャプチャなどを頂くかしないと具体的なアドバイズは出来ないと思います。

解決しない場合はあらためてご相談下さい。(この記事のコメントから画像がUPできます)
よろしくお願い致します。

他、レンタルサーバーやWEB集客に関する情報も公開しています。気軽にご相談ください。

[seo]

[server]

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA