[ 解決済 ] サイト全体を滑らかなスクロールにしたい
[ 解決済 ] サイト全体を滑らかなスクロールにしたい
- このトピックには10件の返信、3人の参加者があり、最後に
により1週、 5日前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.4.3■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.20.2■ Pro Unit のバージョン
0.26.5■ スキンの種類
Origin III■ 期待する動作
こちらのサイトを参考に、javascriptを読み込み、ページ全体に反映させたいです。■ 自分で試した事
子テーマのheader.phpにscriptタグでjsを読み込ませました。
参考サイトのHTML部分は、lightningだとどこに記載すればページ全体に反映されるようになるのでしょうか。<?php
/**
* Lightning G3 Header
*
* @package vektor-inc/lightning
*/do_action( ‘get_header’ ); ?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=”/js/imagesloaded.pkgd.min.js”></script>
<script src=”/js/SmoothScrollAnimations.js”></script>
<?php
global $lightning_theme_options;
$lightning_theme_options = get_option( ‘lightning_theme_options’ );
?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php _e( ‘Skip to the content’, ‘lightning’ ); ?>
<?php _e( ‘Skip to the Navigation’, ‘lightning’ ); ?>
<?php
if ( function_exists( ‘wp_body_open’ ) ) {
wp_body_open();
} else {
do_action( ‘wp_body_open’ );
}
?>■ 症状が発生するブラウザ
chrome■ 実際の症状
記載方法がわかりません■ その他特記事項
初歩的な質問となってしまい、大変申し訳ございません。
何卒宜しくお願い致します。Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。
アニメーションブロックでダメな理由はありますか？
※ header.php は結構重要なファイルなので子テーマに複製するとアップデートに追従できなくなる可能性があるためおすすめしていません。
なんとなく理解しました。
外部の js ファイルを読み込むならとりあえず 子テーマの functions.php やカスタマイズ用のプラグインファイルなどに
wp_enqueue_script() 関数で書いた方が良いです。おもしろそうなスクリプトなので、昼休みに使ってみました。
HTML でページを記述するならすぐに実装できましたが、
WordPress サイトだと実装は難しいと感じました。Lightning だと、カスタマイズして、出力する HTML を変更する
必要があるみたいで、私はできませんでした。カスタマイズのスキルがすごく高い人ならできるかもしれません。
要望に合うプラグインを探すのが近道だと思います。
石川様
お返事ありがとうございます。
facntion.phpにこちらを記載いたしました。function my_enqueue_scripts() {
wp_enqueue_script(
‘primary-script’,
get_stylesheet_directory_uri() . ‘/imagesloaded.pkgd.min.js’,
array( ‘jquery’ )
);
wp_enqueue_script(
‘primary-script’,
get_stylesheet_directory_uri() . ‘/SmoothScrollAnimations.js’,
array( ‘jquery’ )
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_scripts’ );その後の、
<main>
<div data-scroll>
で囲むという部分は、グループ化をしてみたのですが、できませんでした。
どのように囲めばいいのでしょうか…たぶん アクションフックで
<div data-scroll>タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね
たぶん アクションフックで
<div data-scroll>
タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね
なるほど…
lightning_site_header_before / lightning_site_footer_after を使えばできるかもしれませんね。
明日、やってみます😊
石川さん、コメントありがとうございます。
たぶん アクションフックで
<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】
こんな ↓ プラグインを見つけました。このトピックを見て、やってみようという方がいるかもしれないので、情報を追加しておきます。
Lightning G3 のサイトで、子テーマの functions.php に以下のコードを書いたら、スムーススクロール動作しました
このカスタマイズを行っておいた私のサイトでレイアウトがくずれていることに、今日気がつきました。
くずれているのは、
position: fixed; height: 100%;とかposition: fixed; top: 15vh;のような CSS を指定している部分です。高さの取得が期待通りにならないようなかんじです。
ということで、SmoothScrollAnimations を使うときは要注意です。
プラグイン MouseWheel Smooth Scroll を使う方が安全だと思います。
- このトピックに返信するにはログインが必要です。
