[大ちゃん]

【お使いの Snow Monkey のバージョン】 15.11.1
【お使いの Snow Monkey Blocks のバージョン】 12.6.1
【お使いの Snow Monkey Editor のバージョン】 6.2.1
【お使いのブラウザ】 Google Chroom
【当該サイトのURL】

D-Works

daisukedworks.com

### 実現したいこと

topページにparticles.jsを実装したい。

### 発生している問題

### 試したこと
お世話になっております。

ホタルが舞う | 動くWebデザインアイディア帳

coco-factory.jp

この動きを実装したくて

add_action(
	'wp_enqueue_scripts',
	function(){
		// AOSの読み込み　//
		wp_enqueue_style(
			'aos-style' ,
			'https://unpkg.com/aos@2.3.1/dist/aos.css',
		);

		wp_enqueue_script(
			'aos',
			'https://unpkg.com/aos@2.3.1/dist/aos.js',
		);

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

		if( is_front_page() ) {
			wp_enqueue_script(
				'particles',
				'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js',
			);

			wp_enqueue_script(
				'my-particle',
				MY_SNOW_MONKEY_URL . '/scripts/my-particle.js',
				['particles'],
				filemtime( MY_SNOW_MONKEY_PATH . '/scripts/my-particle.js' ),
				true
			);
		}
	}
);

/* メインコンテンツの上部にHTMLの挿入 */
add_action(
	'snow_monkey_prepend_contents',
	function () {
		/* if文でフロントページのみに適応 */
		if (is_front_page()) {
			?>
			<div id="particles-js"></div>
				<div class="mv__wrapper">
					<h2 class="mv__wrapper__title"　data-aos="fade-in" data-aos-duration="2000">D-Works</h2>
					<p class="mv__wrapper__title__sentence" data-aos="fade-in" data-aos-duration="2200">テスト</p>
				</div>

			<?php
		}
	}
);

上記のコードを書きました。
AOSは実装されていたのですが、particles.jsは実装されていませんでした。

少し前にもrellax.jsを似たような方法で実装できたのですが、今回はうまくいきませんでした。
わかる方いらっしゃいましたらご教授お願い致します。

♥ 0

Who liked: No user

[キタジマ タカシ]

【当該サイトのURL】に記載のページを拝見しましたが、AOS も particles.js も読み込まれていないようです。共有いただいたコード自体実行されていないのではないですかね？

♥ 0

Who liked: No user

[大ちゃん]

失礼しました。

他のプラグインとの兼ね合いが原因なのかと思い、無効化してる作業の際に間違えてmy snowmonkeyも無効化していました。

 

 

現在有効化しています。

♥ 0

Who liked: No user

[キタジマ タカシ]

js は読み込まれるようになったみたいですね。

particles.js のことは存じ上げないので具体的にコードのどこが間違っているというのはわかりませんが、読み込みはされているので記述しているコードになにか誤りがあるのだと思います。コンソールには下記のエラーが出ていました。particles.js のドキュメントを改めて確認されると良いかもですね。

Uncaught TypeError: Cannot read properties of null (reading 'getElementsByClassName')

♥ 0

Who liked: No user

[大ちゃん]

ありがとうございます。
調べたら、適応させたい箇所のclass名が間違っていたみたいで、エラーは解消できました。

ですがしたいことはそのままできずにいます。

調べてみると、その動きを実装できるプラグインがあるようなのですが、現在のwordpressのバージョンで未検証とのことだったので、なるべく使わないでできないかと考えている次第です。

footer.phpに<script src=”<?php echo get_template_directory_uri(); ?>/js/particles.min.js”></script>で読み込ませたらうまくいったということを質問サイトで見かけたのですが、

上記のことは、wp_enqueue_scriptのパラメーター$in_footerをtrueにしたら解決すると認識しているのですが間違い無いですか？

ちなみに、コードを変更した後に、他のプラグインの影響があるのかと考えて、無効化してみたりしたのですが、変化はありませんでした。

♥ 0

Who liked: No user

[キタジマ タカシ]

上記のことは、wp_enqueue_scriptのパラメーター$in_footerをtrueにしたら解決すると認識しているのですが間違い無いですか？

そうですね、いまは true が指定されていないのでヘッダー読み込みになっています。解決するかはわかりませんが試してみると良いと思います。

♥ 0

Who liked: No user

[投稿者]

投稿