【LP・ワードプレス】JavaScript(jQuery)の読み込み方法【動かない】

2019.03.31 / 更新日：2019.06.10

困ってる人

作ったサイトをワードプレス化してみたんだけど、なぜかJavaScript(jQuery)が読み込まれない
何で動かないんだろう
普段は問題なく動いてるんだけどなぁ

こんにちは、ikuxxと申します。

こちらのブログは、僕がウェブ制作をしている際につまづいた内容への解決策を書いていく取扱説明書のような部分が大きいのですが、

今回の内容は、僕が実際にjQueryでのアニメーションが沢山あるようなランディングページ(LP)を作った際に起こった事で、

いざ、LPにワードプレスを組み込んでみたところ、なぜかJavaScriptが動かない。

そこから自力で解決をしようと、どうにかこうにかいろんなサイトを覗いてみてもなかなか答えが見つからず、

かなり消耗したので、今後はもう迷う事の内容にと、まとめてみた内容。

ワードプレスでJavaScript(jQuery)が動かない、読み込みが出来ない場合

① まずは、原因を特定するところから始める：デベロッパーツールでJavaScript(jQuery)のエラーを確認

まず、今回ワードプレスでJavaScript(jQuery)が読み込めない場合に確認する点は３つ。

JavaScriptの読み込みが出来ない原因を特定

JavaScriptファイルの読み込み方法について

ワードプレスでのjQueryの書き方について

まずは始めに、どこに原因があるのかを調べて、一つ一つ問題を潰していく必要があるので、

まずは「Google Chrome」の「デベロッパーツール」を使って、きちんとJavaScriptのファイルが読み込まれているかを確認し、何かしらエラーが出ているかを調べる。

「デベロッパーツール」を開いて「Console」タブを確認

※「デベロッパーツール」を開く方法は、右クリックから、もしくはWindowsの場合は「F12」

そうすると、何かしらエラーがある場合は、

Failed to load resource: the server script.js:1 responded with a status of 404 (Not Found)

や、

GET http://*****.com/js/script.js net::ERR_ABORTED 404 (Not Found)

などと表示されます。

この場合はつまり「script.js」というファイルが読み込めない状態というエラーメッセージで、

ここでもし何もエラーが出ていなければ、他の部分に問題がある可能性があるという事なので、今度は他の原因を探ってみる必要があります。

通常のHTMLとワードプレスの場合だと、jQueryの書き方が違ってたりもしますので、この場合は、そこら辺も後々確認しないといけません。

② WordPress(ワードプレス)でのJavaScript(jQuery)ファイルの読み込み方法

例えば、ランディングページ(LP)と呼ばれる１枚で完結するようなものを作る場合は、

「header.php」や「footer.php」というものがなくても、サイト自体は作れるのですが、

ワードプレスでJavaScript(jQuery)のファイルを読み込む場合、

これらは「header.php」「footer.php」を作る作らないに限らず、

「headの閉じタグの手前」に、

<?php wp_head(); ?>

1	<?php wp_head(); ?>

そして、bodyの閉じタグの手前に

<?php wp_footer(); ?>

1	<?php wp_footer(); ?>

を追加する必要があります。

例えば、普通のHTMLのまま外部ファイルを読み込む場合、(bodyの閉じタグ)の手前に、

// JavaScriptの読み込み

<script src="js/script.js"></script>

<script src="js/jquery.*****.js"></script>

// JavaScriptの読み込み

これらを書くだけでOKですが、

ただ、これらをWordPressで使用するとなると、

// JavaScriptの読み込み

<script src="js/script.js"></script>

<script src="js/jquery.*****.js"></script>

// JavaScriptの読み込み

の部分を、

<?php wp_footer(); ?>

1	<?php wp_footer(); ?>

に置き換えて「functions.php」にファイルを読み込む記述を書かなきゃダメ。

<?php wp_head(); ?> と <?php wp_footer(); ?>

1	<?php wp_head(); ?> と <?php wp_footer(); ?>

この２つをきちんとHTML内(index.php)に書いておかないと「functions.php」に書かれた命令が上手く読み込まれないんですね。

なので、これら２つは必須。

ワードプレスでCSSファイルの読み込み方法

ワードプレスでCSSファイルを読み込む場合は、HTMLのヘッダー部分に

// 通常のCSSの読み込み方法

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/responsive.css">

// 通常のCSSの読み込み方法

でOK。

ただ、ワードプレスで推奨されているのは、CSS、JavaScriptは「functions.php」に書いて読み込ませること。

なので、CSSを読み込む場合もヘッダーにそのまま書くのではなく出来れば「functions.php」に書いて読み込ませた方がいいみたい。

そして「functions.php」に書く内容というのが、

// WordPressでJavaScript, CSSを読み込む記述

<?php

// CSSの読み込み
function register_stylesheet() { // 読み込むCSSを登録する
	wp_register_style('style', get_template_directory_uri().'/css/style.css');
	wp_register_style('responsive', get_template_directory_uri().'/css/responsive.css');
}

function add_stylesheet() { // 登録したCSSを以下の順番で読み込む
	register_stylesheet();
	wp_enqueue_style('style', '', array(), '1.0', false); // ページの末尾で読み込ませるならtrue, head内ならfalse(デフォルトはfalse)
	wp_enqueue_style('responsive', '', array(), '1.0', false);
}

add_action('wp_enqueue_scripts', 'add_stylesheet');


// JavaScriptの読み込み
function register_script() { // 読み込むJavaScriptファイルを登録
	wp_register_script('script', get_template_directory_uri().'/js/script.js');
	wp_register_script('*****', get_template_directory_uri().'/js/jquery.*****.js');
}

function add_script() { // 登録したファイルを以下の順番で読み込む
	register_script();
	wp_enqueue_script('script', '', array(), '1.0', false);
	wp_enqueue_script('*****', '', array(), '1.0', false);
}

add_action('wp_print_scripts','add_script');

// WordPressでJavaScript, CSSを読み込む記述

<?php

// CSSの読み込み

function register_stylesheet() { // 読み込むCSSを登録する

wp_register_style('style', get_template_directory_uri().'/css/style.css');

wp_register_style('responsive', get_template_directory_uri().'/css/responsive.css');

}

function add_stylesheet() { // 登録したCSSを以下の順番で読み込む

register_stylesheet();

wp_enqueue_style('style', '', array(), '1.0', false); // ページの末尾で読み込ませるならtrue, head内ならfalse(デフォルトはfalse)

wp_enqueue_style('responsive', '', array(), '1.0', false);

}

add_action('wp_enqueue_scripts', 'add_stylesheet');

// JavaScriptの読み込み

function register_script() { // 読み込むJavaScriptファイルを登録

wp_register_script('script', get_template_directory_uri().'/js/script.js');

wp_register_script('*****', get_template_directory_uri().'/js/jquery.*****.js');

}

function add_script() { // 登録したファイルを以下の順番で読み込む

register_script();

wp_enqueue_script('script', '', array(), '1.0', false);

wp_enqueue_script('*****', '', array(), '1.0', false);

}

add_action('wp_print_scripts','add_script');

もしくは、↓ こんな感じで短く書いて、

// WordPressでJavaScriptを読み込む記述

// JavaScriptの読み込み
function add_script() {
    wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array(), '1.0', false);
    wp_enqueue_script('*****', get_template_directory_uri().'/js/jquery.*****.js', array(), '1.0', false);
}

add_action('wp_enqueue_scripts','add_script');

// WordPressでJavaScriptを読み込む記述

// JavaScriptの読み込み

function add_script() {

wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array(), '1.0', false);

wp_enqueue_script('*****', get_template_directory_uri().'/js/jquery.*****.js', array(), '1.0', false);

}

add_action('wp_enqueue_scripts','add_script');

これでもOK。

wp_enqueue_style関数：スタイルシートを読み込む為のもの

wp_enqueue_script関数：JavaScript(jQuery)を読み込むためのもの

wp_enqueue_script関数は「functions.php」に記述

「functions.php」に独自の関数を作り、その中で読み込ませ、add_actionで動作させる。

add_actionの、wp_enqueue_scriptsはJavaScriptだけでなくCSSの呼び出しまでやってくれる。

③ WordPressにおけるjQueryの書き方

そして「デベロッパーツール」でエラーも出ないし、ファイルもきちんと読み込まれている、

にも関わらず、jQueryが読み込まれないという場合は、jQueryの書き方に問題がある場合が多い。

通常のjQueryの書き方だと、

// 通常のjQueryの書き方

$(function() {
  この中に命令を書いていく
});

// 通常のjQueryの書き方

$(function() {

この中に命令を書いていく

});

ただし、HTMLとWordPressの場合では、jQueryの書き方が違っていて、

// WordPressでのjQueryの書き方

jQuery(function($) {
  この中に命令を書いていく
});

// WordPressでのjQueryの書き方

jQuery(function($) {

この中に命令を書いていく

});

こうやって書かないとダメ。

僕は、散々つまづいた結果、最後にこれを試したところ上手くいきました。

最後にまとめ

という事で、最後に内容をまとめると、

エラーの原因を特定

JavaScriptファイルの読み込み方法を確認

WordPressでのjQueryの書き方を確認

これらを上から順番に潰していけば、どこかしらで原因が特定出来るのではないでしょうか？

特に、ランディングページ(LP)を作る際には分割するファイルが少ないので、

どこかしらで適当に書いちゃって、その結果ファイルが読み込まれなかったり、動かないという単純なエラーが出てくるので注意。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール

ikuxx

海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
中国語に関しては、現在HSK4レベル

趣味は筋トレと海外旅行

FX＋いくつかのブログを運営中。
たまにWeb制作や写真のお仕事、過去には動画撮影のお仕事も

このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい

最近はマレーシア住み

YouTubeも始めました

↓

ユーチューブ(YouTube)

ツイッター(Twitter)

インスタグラム(Instagram)