Q&A
結果的に表示されるwebブラウザ上で、htmlのソースを表示させ、javascriptの所在のurlとどう違うかを調べれば、何かわかりませんか。
前提・実現したいこと
Wordpressを導入した静的ペラサイトが、JavaScript、JQueryが読み込まれない
発生している問題・エラーメッセージ
エラーは出ていない
該当のソースコード
js
1console.log("hoge") 2$(h1).css('color','blue');
php
1//index.php 2<!DOCTYPE html> 3<html <?php language_attributes(); ?>> 4<head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <?php wp_head(); ?> 9</head> 10<body> 11 <h1>hoge</h1> 12 <?php wp_footer(); ?> 13</body> 14</html>
php
1//functions.php 2<?php 3 4// CSSの読み込み 5function register_stylesheet() { // 読み込むCSSを登録する 6 wp_register_style('style', get_template_directory_uri().'/style.css'); 7} 8 9function add_stylesheet() { // 登録したCSSを以下の順番で読み込む 10 register_stylesheet(); 11 wp_enqueue_style('style', '', array(), '1.0', false); // ページの末尾で読み込ませるならtrue, head内ならfalse(デフォルトはfalse) 12} 13 14add_action('wp_enqueue_scripts', 'add_stylesheet'); 15 16 17// JavaScriptの読み込み 18function register_script() { // 読み込むJavaScriptファイルを登録 19 wp_register_script('script', get_template_directory_uri().'/js/script.js'); 20} 21 22function add_script() { // 登録したファイルを以下の順番で読み込む 23 register_script(); 24 wp_enqueue_script('script', '', array(), '1.0', false); 25} 26 27add_action('wp_print_scripts','add_script'); 28
css
1h1{ 2 text-align: center; 3}
試したこと
最小のコードで確認。CSSは反映されているが、JSが読まれない。(コンソールに出力されない)
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
「$(h1).css('color','blue');」と記述していますが、もしかして「h1 → "h1"」ではありませんか?
(あるいは JavaScript ソースコード部分をこの質問で極端に非公開にしていませんか?)
回答1件
0
とりあえず、気になった部分だけを回答。
スクリプトファイルは、jQuery の読み込み後に読み込まれて、実行されていますか？
wp_enqueue_script() で読み込む場合、依存関係を指定しない場合、読み込む順番は保障されませんので、jQuery より先に読み込まれている可能性があります。
例えば、jQuery に依存する場合、
wp_enqueue_script('script', '', array('jquery'), '1.0', false);
のように 3番目の引数に、依存するスクリプト(先に読み込んでおく必要のあるスクリプト)のハンドルを指定する必要があります。
JQuery に依存するテーマのスクリプトをリンクする 参照
また、WordPress の jQuery は、noConflict で実行されているので、そのまま $ で実行する方法は使えません。
$ の代わりに jQuery を使うか スクリプトを もとの $() を使ったスクリプトを jQuery(function($){ }); で囲って、その中で $() を使えるようにする必要があります。
例
jQuery(function($){ $("h1").css('color','blue'); });
投稿2019/09/14 22:13
総合スコア25171
あなたの回答
tips
プレビュー
