[ 解決済 ] サイト全体を滑らかなスクロールにしたい

なんとなく理解しました。

外部の js ファイルを読み込むならとりあえず 子テーマの functions.php やカスタマイズ用のプラグインファイルなどに
wp_enqueue_script() 関数で書いた方が良いです。

wp_enqueue_scripts—WordPressでアセットをエンキューする方法

たぶん アクションフックで

<div data-scroll>

タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

アクションフックの場所を表示

石川さん、コメントありがとうございます。

たぶん アクションフックで

<div data-scroll>

タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね

Lightning G3 のサイトで、子テーマの functions.php に以下のコードを書いたら、スムーススクロール動作しました🙌

function my_wp_enqueue_scripts() {
  wp_enqueue_script( 
    'images-loaded', 
    get_stylesheet_directory_uri() . '/imagesloaded.pkgd.min.js',
    [],
    false,
    true
  );
  wp_enqueue_script( 
    'smooth-scroll', 
    get_stylesheet_directory_uri() . '/smoothscroll.js',
    [],
    false,
    true
  );
}
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts' );

add_action(
  'lightning_site_header_before',
  function() {
    ?>
   <main><div data-scroll>
    <?php
  }
);

add_action(
  'lightning_site_footer_after',
  function() {
    ?>
   </div></main>
    <?php
  }
);

さすが、カスタマイズしやすい Lightning ですね🥰

こんなところにまでフックがあったなんて、気がついていませんでした。

【補足1】
wp_enqueue_script の最後の引数を true にしないと、先頭で読み込まれてしまい、動作しませんでした。

【補足2】
こんな ↓ プラグインを見つけました。

MouseWheel Smooth Scroll

このトピックを見て、やってみようという方がいるかもしれないので、情報を追加しておきます。

Lightning G3 のサイトで、子テーマの functions.php に以下のコードを書いたら、スムーススクロール動作しました

このカスタマイズを行っておいた私のサイトでレイアウトがくずれていることに、今日気がつきました。

くずれているのは、position: fixed; height: 100%; とか position: fixed; top: 15vh; のような CSS を指定している部分です。

高さの取得が期待通りにならないようなかんじです。

ということで、SmoothScrollAnimations を使うときは要注意です。

プラグイン MouseWheel Smooth Scroll を使う方が安全だと思います。