フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。
自分で作成したjsの読み込みについて < SWELLに関する質問
いつもありがとうございます 😊
自分で作成したJSファイルを読み込みたいのですが
場所は
https://poppyou.com/wp-content/themes/swell/assets/js/
https://poppyou.com/wp-content/uploads/js/
のどちらが適当でしょうか?
現在のところ
https://poppyou.com/wp-content/uploads/js/
に自作のJSファイルを置き
bodyタグの最後にscriptタグで読み込ませているのですが
consoleになんのエラー出力もなく
画面が真っ白になります🤔
お返事、よろしくお願いいたしますm(__)m
読み込めさえすれば別にどこでも大丈夫ですが、子テーマやプラグイン側で読み込むのが一般的かと思います。
真っ白になるということはJSのエラーではなく、タグの書き方をミスってしまっていてPHP側でエラーになっている可能性がありますね!
お返事ありがとうございます^^
なかなかうまくいかなかったので、別のSWELLではないテーマで、
・同じjsファイルで、同じタグと同じ場所で、
施してみたところちゃんと動いて。
なので、SWELLの何かの設定なのかなと思って、お聞きしました。
うーん……
jQueryとか使っちゃってませんか?
こんにちは✨
横からすいません(; ・`ω・´)
mikanさんが書かれたコードはjQueryやその他ライブラリに依存しているものではないでしょうか?
jQueryが必要なコードであればSWELL設定から読み込ませることが可能です!
一度jQueryを読み込ませてみて実装されるコードが動くかどうか試してみてください。
他のライブラリであればそのライブラリを読み込みませる必要があります💦
SWELLで.jsを使うときは子テーマのfunctions.phpをこんな感じにして読み込ませているので参考にしていただけると嬉しいです。
/**
* 子テーマでのファイルの読み込み関数
* $query : 各ファイルに付与するクエリ文字列。
*/
add_action('wp_enqueue_scripts', function() {
//$query = '1.0';
$query = date('Ymdgis'); /*子テーマのstyle.cssのブラウザキャッシュを無効にする。 */
/* 子テーマのstyle.css読み込み */
wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $query );
/* その他の読み込みファイルはこの下に記述 */
//オリジナル.js読み込み
wp_enqueue_script( 'child_script', get_stylesheet_directory_uri() . '/js/vanilla.js', array(), '1.0.0', true );
}, 11);
子テーマのディレクトリ直下に
/jsというディレクトリを作成して/vanilla.js を読み込ませています!
jQueryです。jQueryはだめなのですか?
(すみません、この部分は他の方にお願いしていて私は理解でききれてない部分もあるので
質問や回答がチグハグかもですが……)
他のテーマでjQueryを使うときのようには、SWELLではできない、という感じですか?
どこかに記載があったりするのに、
読んでなくてよく分かっていなくてだったらすみません。
教えてくださって嬉しいです。ありがとうございます★
jQueryやその他ライブラリに依存しているものではないでしょうか?
jQueryが必要なコードであればSWELL設定から読み込ませることが可能です!
一度jQueryを読み込ませてみて実装されるコードが動くかどうか試してみてください。
>読み込ませるというのは、
SWELL設定の jQueryを強制的に読み込む にチェックを入れる
ということであっていますか?
SWELLがテーマ側で読み込んでいるスクリプトは、軽量化を考えてjQueryに依存しないコードで書いています。
なので、jQueryを使ったJSを自分で読みこんでいただく場合は、そのスクリプトの依存関係としてjQueryを指定してもらわないといけません...!(つぶさんが書いてくださったコードのように)
また、スクリプトタグを直接書くような場合は依存関係の指定すらできないので、SWELLの設定画面からjQueryを読み込むようにしていただかないといけなくなっています!