アニメーションAOSの読み込みがうまくできません。

0
いいねをした人: 居ません
  • このトピックには9件の返信、2人の参加者があり、最後にCOMLSにより4年、 7ヶ月前に更新されました。
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #49486
    COMLS
    閲覧者
    7

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】バージョン: 10.1.0
    【お使いのブラウザ】chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    現在my snow monkey.phpに下記内容を
    記述しています。

    ————————————————————————————————-

    add_action( 'wp_enqueue_scripts', function() {
    	// 使用する jQuery プラグインを読み込み
    	wp_enqueue_script(
    		// 半角英数字で任意の名前を設定
    		'jquery.smoothscroll',
    		// 使用する jQuery プラグインの URL(ローカルでも CDN でも Ok)
    		'https://unpkg.com/aos@2.3.1/dist/aos.js',
    		[ 'jquery' ],
    		false,
    		true
    	);
    } );
    
    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			'effect-fade',
    			'/wp-content/plugins/my-snow-monkey/app.js',
    			[],
    			false
    		);
    	}
    );

    —————————————————————————————-

    wp-content/plugins/my-snow-monkey/app.js ファイルに

    AOS.init();
    

    ↑を記述

    ——————————————————————————–

    固定ページでカスタムHTMLに

    <div class="test"data-aos="fade-up">テスト</div>
    

    ↑を記述

    ——————————————————————————

    カスタムCSSに

    .test {
      width: 200px;
      height: 200px;
      background: red;
    }

    —————————————————————————-

    と入れていますが読み込みが上手くいきません。

    ご教授ください。
    宜しくお願いします。

    0
    いいねをした人: 居ません
    #49515
    アバター画像キタジマ タカシ
    参加者
    2422

    /wp-content/plugins/my-snow-monkey/app.js の enqueue に依存関係が指定されていない( [] になっている)ので実行されていないのかなと思ったのですがどうでしょうか。

    /wp-content/plugins/my-snow-monkey/app.js の enqueue を下記に書き換えてみてください。

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			'effect-fade',
    			'/wp-content/plugins/my-snow-monkey/app.js',
    			[ 'jquery.smoothscroll' ],
    			false,
    			true
    		);
    	}
    );
    0
    いいねをした人: 居ません
    #49516
    アバター画像キタジマ タカシ
    参加者
    2422

    「ファイル自体が読み込まれていない」ということであれば状況を確認してみたいので、実際のサイトの URL を教えてもらえればと思います!

    0
    いいねをした人: 居ません
    #49525
    COMLS
    閲覧者
    7

    お世話になります。

     

    書き換えて試しましたが上手くいきませんので、

    見ていただいてもよろしいでしょうか?

    URL http://comls.pupu.jp/

    まだ作成途中です。

     

     

    0
    いいねをした人: 居ません
    #49526
    アバター画像キタジマ タカシ
    参加者
    2422

    ありがとうございます。確認したところ、/wp-content/plugins/my-snow-monkey/app.js 自体が読み込まれていないようです。同じコードを僕の環境の My Snow Monkey に貼り付けたところちゃんと読み込んだので、可能性としては2つ考えられるかなと思います。

    – My Snow Monkey プラグインが有効化されていない
    – My Snow Monkey 内の、前述したコードより上の部分のコードが邪魔をしている

    まず有効化されているかを確認していただいて、有効化されているようであれば my-snow-monkey.php に記述しているコードをまるごとはりつけてもらえますでしょうか?

    0
    いいねをした人: 居ません
    #49528
    COMLS
    閲覧者
    7

    プラグイン有効化していましたので、

    My Snomonkey.phpを下記に張り付けています。

    ご確認ください。

    <?php
    /**
    * Plugin name: My Snow Monkey
    * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
    * Version: 0.1.1
    *
    * @package my-snow-monkey
    * @author inc2734
    * @license GPL-2.0+
    */
    
    /**
    * Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
    */
    $theme = wp_get_theme( get_template() );
    if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) {
    	return;
    }
    
    // snow_monkey_nav_menu_item_title_show_description のフック処理を追加
    add_filter(
    	'snow_monkey_nav_menu_item_title_show_description',
    	'show_description',
    	10,
    	3
    );
    
    // ドロワーナビ説明表示
    function show_description( $show_description, $depth, $menu_location ) {
    	if ( 'drawer-nav' === $menu_location && 0 === $depth ) {
    		return true;
    	}
    	return $show_description;
    }
    
    add_action( 'wp_enqueue_scripts', function() {
    	// 使用する jQuery プラグインを読み込み
    	wp_enqueue_script(
    		// 半角英数字で任意の名前を設定
    		'aos',
    		// 使用する jQuery プラグインの URL(ローカルでも CDN でも Ok)
    		'https://unpkg.com/aos@2.3.1/dist/aos.js',
    		[ 'jquery' ],
    		false,
    		true
    	);
    } );
    
    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			'effect-fade',
    			'/wp-content/plugins/my-snow-monkey/app.js',
    			[ 'jquery.smoothscroll' ],
    			false,
    			true
    		);
    	}
    );
    0
    いいねをした人: 居ません
    #49558
    アバター画像キタジマ タカシ
    参加者
    2422

    最初のコードでは AOS の識別子が jquery.smoothscroll となっていましたが、後のコードだと aos となっているようです。その場合は /wp-content/plugins/my-snow-monkey/app.js の依存部分も [ 'aos' ] とする必要があります。そこを変えるとどうでしょうか?

    0
    いいねをした人: 居ません
    #49573
    COMLS
    閲覧者
    7

    変えましたが読み込みが上手くできておりません。

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    

    こちらも読み込ませないとだめですよね?

    入れ方がわからないので教えてください。

    よろしくお願いします。

    0
    いいねをした人: 居ません
    #49574
    COMLS
    閲覧者
    7
    function twpp_enqueue_styles() {
    	wp_enqueue_style(
    		'open-sans',
    		'https://unpkg.com/aos@2.3.1/dist/aos.css'
    	);
    }
    
    add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

    ちなみに上記内容を mysnowmonkey.php に入れています。

    0
    いいねをした人: 居ません
    #49575
    COMLS
    閲覧者
    7

    読み込みできました。ありがとうございます。

    1
    いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「アニメーションAOSの読み込みがうまくできません。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。