9件の投稿を表示中 - 1 - 9件目 (全9件中)
-
投稿者投稿
-
2021年4月29日 3:20 PM #74608
【お使いの 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いいねをした人: 居ません2021年4月29日 4:00 PM #746122021年4月29日 4:15 PM #74616@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も一緒に学習していくと、もっとハマっていろんなことができると思います。2021年4月29日 4:18 PM #746172021年4月29日 4:33 PM #74619キタジマさん
あぁー・・・「安全」というワード、よく言われました笑
依存関係大事ですね。
こういう場合は
['aos']
でいいですか?♥ 0いいねをした人: 居ません2021年4月29日 4:46 PM #746212021年4月29日 4:49 PM #74622依存関係というのは
wp_enqueue_script( 'my_scripts', MY_SNOW_MONKEY_URL . '/app.js', ['aos'], filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ), true );
これでよいのでしょうか?
♥ 0いいねをした人: 居ません2021年4月29日 4:56 PM #746232021年4月29日 5:08 PM #74625 -
投稿者投稿
9件の投稿を表示中 - 1 - 9件目 (全9件中)
- トピック「AOSの読み込みについて」には新しい返信をつけることはできません。