【WordPress】プラグインなし ページ内リンク スクロール 方法

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。
趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

WordPressの備忘録としてページ内リンクのスクロール手順をサクッと書いていきます。
＊WordPress version：6.0 使用テーマ「SWELL」

ページ内リンクのスクロールとはこういった感じ↓

設定手順

たったこれだけでOKです！では細く説明していきます

詳細

クリックするセクションを作成(出発点)を作成

クリックするセクション(出発点)を作成します。今回は簡単に見出しとテキストのみ作成

ジャンプさせたいセクション(到達点)を作成

ジャンプさせたいセクション(到達点)を作成
グループ化させておいてグループに対してHTMLアンカーを設定させます。

設定＞「高度な設定」からHTMLアンカーを設定

HTMLアンカーは自由に設定OKです。ですが、テンプレートタグやidと同じにならないように注意

＃HTMLアンカーで設定したリンク名を記入

出発点のセクションのリンクに「# 設定したリンク名」を記入
分かりやすいようにテキスト部分にリンクを設定させました。
以上で完了です！

メニューや他のページに追加する場合

メニューや他のページに追加させる場合は「# 設定したリンク名」だけではリンクされないこともあるので
htpps://ドメイン/ページidなど/# 設定したリンク名まで記入してあげると設定が可能になります

アンカーリンクが 効かない 場合

上手くリンク先に飛ばない、アンカーリンクが効かない場合は以下が考えられます

• 同じアンカーリンク名が存在している
• リンク設定とアンカーリンクのスペルミス
• ＃をつけ忘れ

これらが考えられるの今一度確認をしてみてくださいね！
また、よくあるのがデバイスの微調整でセクションを複製すると
同じアンカーリンクが存在することになるので、どちらかを消すか
スペースセクションなどにアンカーリンクを設定させ名前の重複を回避
なども手段ですので一度お試しください。

ページ内リンクを設定することで
サイトを見てくださる方がより快適に利用できるようになるので
ぜひお試しくださいませ！