functions.phpにCSS、JSを書く時の疑問

Question

wpのfunctions.phpにCSS、JSを書く方法

ここに質問の内容を詳しく書いてください。
初歩的で申し訳ないのですが書き方を教えてください。

functions.php

function add_my_files() {	
  //スタイルシートの読み込み
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);
 
  //JavaScript の読み込み
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
//アクションフック（wp_enqueue_scripts）への登録
add_action('wp_enqueue_scripts', 'add_my_files');


上記の方法を使う時html側の
<link href="/css/common.css" rel="stylesheet">
とか
<script src="../js/common.js"></script>
の場合に書けるのはわかるのですが

jsの時
<script src="../js/common.js"></script>
<script>

パラメータなどの設定

</script>

このような書き方をしている時<script></script>の部分を
どう書けばよいのでしょうか？

Answer 1

ありがとうございます！
やっぱりそうなんですね。
で、それは一度試してみたのですが、

<script> .... </script> <script> .... </script> <script> .... </script>

といろいろなjsの値を設定する部分や
外部になっていないjsなどが続いている場合外部ファイルにまとめる時の書き方なんですが

<script> .... </script>

の中身だけを順に続けて書くで
いいのでしょうか？これもやってみましたが動かなくなる事もあり…困ってます。

そもそもの書き方がわかっていないので
教えていただけますか？すみません…

Answer 2

「パラメータなどの設定」の部分を既存の common.js 内に記述するのがベストだと思います。
既存のjsファイルがない場合は新たにjsファイルを作成してください。

wp_enqueue_script は外部ファイルの読み込みのための関数ですので、
やりたいことは外部ファイルの中に書けば良いのです。

Comments

[nddf]

ありがとうございます！
やっぱりそうなんですね。
で、それは一度試してみたのですが、
<script>
....
</script>
<script>
....
</script>
<script>
....
</script>

といろいろなjsの値を設定する部分や
外部になっていないjsなどが続いている場合外部ファイルにまとめる時の書き方なんですが

<script>
....
</script>
の中身だけを順に続けて書くで
いいのでしょうか？これもやってみましたが動かなくなる事もあり…困ってます。

そもそもの書き方がわかっていないので
教えていただけますか？すみません…

[gutchino]

<script>タグが必要なのは、HTMLに直書きする場合のみですので、
jsファイルには<script>タグを除いた部分を順に書いてあげてください。

どこかでエラーが出た時点でそれ以降の記述は実行されませんので、
動かない場合はどこでエラーが出たかを突き止め修正する必要があります。

エラーの見つけ方は下記が参考になるかと。
https://www.javadrive.jp/javascript/error/index5.html

差し支えなければjsファイルの中身貼って頂ければ見ます！

[nddf]

ありがとうございます。返信おそくなりました。

// ここから　//
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/jquery.matchHeight-min.js"></script>
<script src="/js/sticky-state.min"></script>
<script src="/js/ScrollTrigger.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
//　ここまで　//
上記はfunctions.phpに書いて

以下の部分です。
こちらをcommon.jsなどにまとめる時どう書けばいいでしょうか？
エラーの見つけ方、ありがとうございます。参考にさせていただきます。

<script>
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 22, //フォロワーの大きさ
delay = 5, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標

//カーソルの遅延アニメーション
//少しだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
repeat: -1,
onRepeat: function() {
posX += (mouseX - posX) / delay;
posY += (mouseY - posY) / delay;

TweenMax.set(follower, {
css: {
left: posX - (fWidth / 2),
top: posY - (fWidth / 2)
}
});

TweenMax.set(cursor, {
css: {
left: mouseX - (cWidth / 2),
top: mouseY - (cWidth / 2)
}
});
}
});

//マウス座標を取得
$(document).on("mousemove", function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});

$("a").on({
"mouseenter": function() {
follower.addClass("is-active");
},
"mouseleave": function() {
follower.removeClass("is-active");
}
});

$("footer").on({
"mouseenter": function() {
follower.addClass("is-active2");
},
"mouseleave": function() {
follower.removeClass("is-active2");
}
});

</script>

<script>
// position: stickyがブラウザで使えるかチェックするための関数
function detectSticky() {
const div = document.createElement('div');
div.style.position = 'sticky';
return div.style.position.indexOf('sticky') !== -1;
}

// .stickyが指定されている要素に対してposition: stickyを適用させる関数
function callStickyState() {
return new StickyState(document.querySelectorAll('.sticky'));
}

// もしブラウザでposition: stickyが使えなければ、callStickyState関数を呼び出す
if (!detectSticky()) {
callStickyState();
}

</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var trigger = new ScrollTrigger();
});

</script>

<script>
$(function() {
$('.bnr_pdf a').matchHeight();
});

</script>

<script>
$(function() {
var h = $(window).height(); //ブラウザウィンドウの高さを取得
$('#container').css('display', 'none'); //初期状態ではメインコンテンツを非表示
$('#loader-bg ,#loader').height(h).css('display', 'block'); //ウィンドウの高さに合わせでローディング画面を表示
});
$(window).load(function() {
$('#loader-bg').fadeOut(800); //$('#loader-bg').fadeOut(800);でも可
$('#loader').fadeOut(300); //$('#loader').fadeOut(300);でも可
$('#container').css('display', 'block'); // ページ読み込みが終わったらメインコンテンツを表示する
});

</script>

[gutchino]

まとめる際ですが、下記のタグをすべて削除すればOKです。
<script>
</script>

ちなみにデバッグの定番ですが、jsファイルの一番上に下記を書いて
コンソールに表示されているか確認してみてください。
文字列が出力されていなければファイルの読み込み事態に失敗しています。
逆に出力されていれば、jsのどこかでエラーが起きているということになります。

// コンソールに文字列 'Hello' を出力する
console.log('Hello');

[nddf]

返信遅くなりました。教えていただきありがとうございました！やってみます。