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

VWSとは フォーラム Lightning [ 解決済 ] サイト全体を滑らかなスクロールにしたい

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

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #89776

    s h
    参加者

    ■ WordPress のバージョン
    6.4.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.20.2

    ■ Pro Unit のバージョン
    0.26.5

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    こちらのサイトを参考に、javascriptを読み込み、ページ全体に反映させたいです。

    サイト全体を滑らかにスクロールさせる – SmoothScrollAnimations

    ■ 自分で試した事
    子テーマの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

    ■ 実際の症状
    記載方法がわかりません

    ■ その他特記事項
    初歩的な質問となってしまい、大変申し訳ございません。
    何卒宜しくお願い致します。

    #89800

    Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

    アニメーションブロックでダメな理由はありますか?

    アニメーション(Pro版のみ)

    ※ header.php は結構重要なファイルなので子テーマに複製するとアップデートに追従できなくなる可能性があるためおすすめしていません。

    #89801

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

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

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

    #89805

    おもしろそうなスクリプトなので、昼休みに使ってみました。

    HTML でページを記述するならすぐに実装できましたが、
    WordPress サイトだと実装は難しいと感じました。

    Lightning だと、カスタマイズして、出力する HTML を変更する
    必要があるみたいで、私はできませんでした。

    カスタマイズのスキルがすごく高い人ならできるかもしれません。

    要望に合うプラグインを探すのが近道だと思います。

    #89806

    s h
    参加者

    石川様

    お返事ありがとうございます。
    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>
    で囲むという部分は、グループ化をしてみたのですが、できませんでした。
    どのように囲めばいいのでしょうか…

    #89807

    s h
    参加者

    対馬 様

    ご回答ありがとうございます。
    やはり難しいのですね…
    プラグインで探してみます。
    ありがとうございます。

    #89812

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

    <div data-scroll>

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

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

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

    #89814

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

    <div data-scroll>

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

    なるほど…

    lightning_site_header_before / lightning_site_footer_after を使えばできるかもしれませんね。

    明日、やってみます😊

    #89823

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

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

    <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

    #89836

    s h
    参加者

    石川様 対馬様

    さまざまな方法をご提案してくださり、誠にありがとうございます。
    理想の動きになりそうなので、こちらの方法にて実装したいと思います。
    本当にありがとうございます。

    #90224

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

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

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

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

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

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

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

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。