[星乃 みなみ]

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

【お使いの Snow Monkey のバージョン】最新版
【お使いのブラウザ】chrome
【当該サイトのURL】https://kimsweddingmovie.com/

===

外部Jsの読み込み方ですが、以下の方法で間違いないでしょうか？

// ふんわりアニメーション
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_script(
			'effect-fade',
			'/wp-content/themes/snow-monkey/assets/js/common.js',
			[],
			false
		);
	}
);

よろしくお願いします。

♥ 0

Who liked: No user

[キタジマ タカシ]

読み込み方はあっていますが、common.js ファイルの配置場所が不適切です。

僕がカスタマイズのコードを My Snow Monkey プラグインや追加 CSS に書くことを推奨しているのは、テーマに直接ファイルを配置したりコードを書くと、テーマをアップデートしたときにそれらのファイルやカスタマイズがすべてなくなってしまうからです。アップデートのときは、一度テーマ内のファイルがすべてネット上にある最新のファイルに置き換えられるためです（プラグインや WordPress コアの場合も同様）。

そのため、上記の common.js ファイルは My Snow Monkey の中に配置して呼びだすのが良いです。

♥ 0

Who liked: No user

[星乃 みなみ]

スクリプトの配置を以下に変更しました。

/wp-content/plugins/my-snow-monkey/assets/js/common.js

よくある、下からふわっとあらわれる表現のためのコードなのですが、うまく動作しません。
サポートスコープから離れるかもしれませんが、何か原因として考えられることはありませんでしょうか

TIPS & NOTE 要素をふわっと出す、css3アニメーションで簡単エフェクト。

要素をふわっと出す、css3アニメーションで簡単エフェクト。

littlethings.jp

♥ 0

Who liked: No user

[キタジマ タカシ]

ブラウザのコンソールを確認してみてください。

Uncaught TypeError: $ is not a function

というエラーがでています。おそらく

$(function() {
  〜
} );

のようなコードを書かれているのではないかと想像しますが、WordPress の jQuery はいきなり $ を参照することができなくなっています（おそらくコンフリクトを防ぐため）。もしそうであれば、

jQuery(function( $ ) {
  〜
} );

のように変更すると動くはずです。

♥ 0

Who liked: No user

[星乃 みなみ]

window.onload = function() {
  scroll_effect();

  jQuery(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){
   jQuery('.effect-fade').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight){
     jQuery(this).addClass('effect-scroll');
    }
   });
  }
};

jQueryにかえたところが、もともと$だったところなのですが、動きません。
でもいい加減、snow-monkeyのことじゃないので、あれですよね
いろいろやってみます

ありがとうございました。

♥ 0

Who liked: No user

[キタジマ タカシ]

そうですね、Snow Monkey のサポートではなくなっているのであれですが… $ が残っているので全部 jQuery に変えると動かないですかね？

僕が上で

jQuery(function( $ ) {
  〜
} );

と書いたのは、ググればすぐでてきますが、$ をグローバルスコープに影響しない形で使う方法になります。ちょっとご提示のコードの場合だと window.onload = function() {} で囲ってあるのでややこしいかもですが、WordPress で jQuery を使う場合は僕の提示した上のコードで全体を囲って、その中で $ を使うのが標準的な手法だと思います。Snow Monkey のサポートの範疇ではないので詳しくはググってもらえればと思います。

♥ 0

Who liked: No user

[投稿者]

投稿