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

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

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

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

目次

設定手順

STEP
クリックするセクションを作成(出発点)を作成
STEP
ジャンプさせたいセクション(到達点)を作成
STEP
ジャンプさせたいセクションに
設定>「高度な設定」からHTMLアンカーを設定
STEP
クリックするセクションにリンクを設定
#HTMLアンカーで設定したリンク名を記入

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

詳細

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次