AOSの読み込みについて

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

    【お使いの Snow Monkey のバージョン】14.2.2
    【お使いの Snow Monkey Blocks のバージョン】11.2.0
    【お使いの Snow Monkey Editor のバージョン】5.0.5
    【お使いのブラウザ】Chrome
    【当該サイトのURL】https://yasuki-create.com/test/

    ### 実現したいこと

    SnowMonkeyにAOSを導入してアニメーションを付けたいのですが、反映されません。

    以前にフォーラムで同様の質問があり参考にさせていただき、記述をしたのですができませんでした。
    よろしくお願いいたします。

    ### 試したこと

    My Snow Monkey 内にapp.jsを作成し、app.js内に

    AOS.init();
    

    my-snow-monkey 内に

    <?php
    
    /**
    * Plugin name: My Snow Monkey
    * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
    * Version: 0.2.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;
    }
    
    /**
     * Directory url of this plugin
     *
     * @var string
     */
    define('MY_SNOW_MONKEY_URL', untrailingslashit(plugin_dir_url(__FILE__)));
    
    /**
     * Directory path of this plugin
     *
     * @var string
     */
    define('MY_SNOW_MONKEY_PATH', untrailingslashit(plugin_dir_path(__FILE__)));
    
    //外部JS・CSSの読み込み
    add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
    function msm_enqueue_style_script()
    {
    	//my-snow-monkeyのcss読み込み
    	wp_enqueue_style(
    		'msm_style',
    		MY_SNOW_MONKEY_URL . '/style.css',
    		[],
    		filemtime(MY_SNOW_MONKEY_PATH . '/style.css')
    	);
    
    	//my-snow-monkeyのjs読み込み
    	wp_enqueue_script(
    		'msm_scripts',
    		MY_SNOW_MONKEY_URL . '/script.js',
    		['jquery'],
    		filemtime(MY_SNOW_MONKEY_PATH . '/script.js'),
    		true
    	);
    
    	add_action( 'wp_enqueue_scripts', function() {
    		wp_enqueue_script(
    			'aos',
    			'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',
    			[ 'aos' ],
    			false,
    			true
    		);
    	} );
    
    	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' );
    
    	//エディター用のCSS読み込み
    	add_action(
    		'after_setup_theme',
    		function () {
    			add_editor_style('/../../plugins/my-snow-monkey/style.css');
    		}
    	);
    }
    0
    いいねをした人: 居ません
    #74612
    アバター画像キタジマ タカシ
    参加者
    2421

    試さずに返信して申し訳ないのですが、ぱっと見で感じたことを書きますね。

    – インデントしてみたところ msm_enqueue_style_script() の中にそれ以下のフックや関数が入ってしまっているので、外に出す必要があると思います。

    – あと、これは本題とは関係ありませんが、add_action( 'wp_enqueue_scripts', function() { は何度も書く必要はないので、関連するものは一つのフックの中にまとめて書くのがわかりやすいと思います。

    1
    いいねをした人:
    #74616
    GONSY
    参加者
    841

    @yasuki さん

    こんにちは。

    Snow Monkeyにもアニメーション機能がついていますが、あえてAOSを使うなら、こんな感じでmy-snow-monkey.phpに記述すればいいのではないかと。

    add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
    function msm_enqueue_style_script() {
    	wp_enqueue_style(
    		'msm_style',
    		MY_SNOW_MONKEY_URL . '/style.css',
    		[],
    		filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
    	);
    }
    
    add_action(
    	'wp_enqueue_scripts',
    	function() {
    
    		wp_enqueue_style(
    			'aos-style',
    			'https://unpkg.com/aos@2.3.1/dist/aos.css',
    			[],
    			false
    		);
    
    		wp_enqueue_script(
    			'aos',
    			'https://unpkg.com/aos@2.3.1/dist/aos.js',
    			[],
    			false
    		);
    
    		wp_enqueue_script(
    			'my_scripts',
    			MY_SNOW_MONKEY_URL . '/app.js',
    			[],
    			filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ),
    			true
    		);
    	
    	}
    );

    あと、AOSはjQuery非依存なので、わざわざ読み込む必要はありません。

    Snow Monkeyはカスタマイズも楽しいので、いろいろ試してみたくなりますよね。
    このフォーラムも勉強になりますが、WordPressも一緒に学習していくと、もっとハマっていろんなことができると思います。

    1
    いいねをした人:
    #74617
    アバター画像キタジマ タカシ
    参加者
    2421

    GONSYさん、my_scripts の依存に aos を指定したほうが安全かと思います!

    1
    いいねをした人:
    #74619
    GONSY
    参加者
    841

    キタジマさん
    あぁー・・・「安全」というワード、よく言われました笑
    依存関係大事ですね。
    こういう場合は
    ['aos']でいいですか?

    0
    いいねをした人: 居ません
    #74621
    yasuki
    参加者
    6

    キタジマ タカシさん
    素人感満載の記述で申し訳ありません
    勉強になります!ありがとうございます!

    GONSYさん
    詳細にありがとうございます!
    上記のコードでAOSを反映させることができました

    今まさにSnowMonkeyを触るのが凄い楽しくていろいろ試しているところです。
    これからもっとWordPressの知識をもっと深めていこうと思います

    1
    いいねをした人:
    #74622
    yasuki
    参加者
    6

    依存関係というのは

    		wp_enqueue_script(
    			'my_scripts',
    			MY_SNOW_MONKEY_URL . '/app.js',
    			['aos'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ),
    			true
    		);

    これでよいのでしょうか?

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

    そです! aos.js のハンドル名を aos と指定されているので、必ず aos.js の後に読み込みたいという js には依存関係として ['aos'] と指定します。指定がない場合は順序が入れ替わる可能性があります。

    1
    いいねをした人:
    #74625
    yasuki
    参加者
    6

    そうなんですね!
    依存関係を指定しておいたほうが良さそうですね
    ありがとうございます!

    無事に解決致しましたので、トピックを閉じさせていただきます。

    キタジマ タカシさん GONSYさん
    ありがとうございました!

    2
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「AOSの読み込みについて」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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