WordPress

更新日: 2024/11/22

【イラスト付き】WordPressでJavaScriptを使う方法は？動かないときの対処法も解説

WordPressでHTMLやCSSにはない動きや機能を追加して、サイトをもっと魅力的に見せたいんだけど、どうしたらいいかな？

それならJavaScriptを使うといいよ。WordPressに取り入れると、さらに機能的でユーザーフレンドリーになるんだ。

例えばどんなことができるの？

動きのあるスライダーやページ更新なしで内容がリアルタイムで変わる機能など、使い心地が良くて面白いサイトを作れるよ。

この記事では、WordPressをより魅力的にするJavaScriptの使い方を紹介するよ。

1. WordPressでJavaScriptを使うメリット
1-1. 1.動きのあるデザインのサイトを作れる
1-2. 2.サイト訪問者に長く滞在してもらえる
2. WordPressでJavaScriptを使う方法
2-1. 1.直接エディタに記入する
2-2. 2.プラグインを利用する
2-3. 3.外部ファイルとして読み込む
3. WordPressでJavaScriptのファイルを読み込む方法
3-1. 1.scriptタグで読み込み
3-2. 2.WordPressの独自関数の使用
4. WordPressでJavaScriptが動かないときの解決方法
4-1. 1.ファイルが読み込めていない場合
4-2. 2.エラーが出ている場合
5. まとめ

WordPressでJavaScriptを使うメリット

WordPressでJavaScriptを使うと何が良いの？

JavaScriptを使うとインタラクティブな機能を追加できるから、サイトに動きが出るんだ。

サイトに動きが出るとそんなに良いことがあるの？

もちろん！ここでは、WordPressでJavaScriptを使うメリットについて説明するね。

WordPressでJavaScriptを使うメリット

1.動きのあるデザインのサイトを作れる

2.サイト訪問者に長く滞在してもらえる

1.動きのあるデザインのサイトを作れる

WordPressでJavaScriptを使う方法は？動かないときの対処法も解説の画像_4枚目

動きのあるデザインのサイトを作れる点は、WordPressでJavaScriptを使う大きなメリットになるよ。

例えばページをスクロールして画像がふわっと現れたり、マウスを動かすと背景が動いたりする印象的なデザインを叶えられるね。

それでユーザーに「使いやすいな」と思ってもらえる魅力的なサイトにすることができるんだ。

言われてみれば、動きがあるサイトの方が使いやすいかも！

でも、そんな凝ったデザインだと作るの難しくない？

大丈夫だよ！WordPressには、スクロールやアニメーションのプラグインが豊富に揃っていて、ワンランク上のサイト作りができるよ。

2.サイト訪問者に長く滞在してもらえる

WordPressでJavaScriptを使う方法は？動かないときの対処法も解説の画像_6枚目

サイトに動きがあると訪問者の興味を引きつけて、滞在時間を長くすることもできるんだ。

そうなんだ。どんな工夫をすると長く滞在してもらえるの？

JavaScriptではインタラクティブなギャラリーやクイズ、リアルタイムのフィードバックフォームなど、訪問者が参加したくなるようなコンテンツを作れるから活用できるんだ。

それでサイト訪問者がコンテンツを眺めるだけでなく、積極的に利用するから滞在時間を伸ばして離脱率を下げられるよ。

なるほど、それでサイトが活性化していくんだね！

WordPressでJavaScriptを使う方法

WordPressでJavaScriptを使うにはどうしたらいいの？

何か事前に準備するものとかあるのかな？

JavaScriptはブラウザで動作するから、インストールも特別な設定も必要ないよ。

ただ、読み込ませる必要があるんだ。

ここでは、WordPressでJavaScriptを使う方法を説明していくね。

WordPressでJavaScriptを使う方法

1.直接エディタに記入する

2.プラグインを利用する

3.外部ファイルとして読み込む

1.直接エディタに記入する

WordPressでJavaScriptを使う方法は？動かないときの対処法も解説の画像_10枚目

まずは、記事を投稿する際に記入するエディタに直接記入する方法だね。

え、それだけでJavaScriptが使えるの？

うん、ただこの方法が使えるのはテキストエディタの場合のみで、段落や改行のタグが自動的に入るビジュアルエディタでは使えないから要注意だよ。

あと、記述を入れたページにしか適用されないから汎用的ではないかな。

そうなんだ。もっと便利な方法ってあるの？

もちろん、この後に説明するよ！

2.プラグインを利用する

WordPressでJavaScriptを使う方法は？動かないときの対処法も解説の画像_12枚目

WordPressといったら種類豊富なプラグインなんだけど、JavaScriptを読み込むプラグインもあるんだ。

それはいいね。どのプラグインがおすすめなの？

下記のプラグインが特におすすめだよ。

JavaScriptの読み込みにおすすめのプラグイン

1.Simple Custom CSS and JS

2.Scripts n Styles

サイト全体に使うなら「Simple Custom CSS and JS」、一部のページだけに使うなら「Scripts n Styles」と使い分けるのもありだよ。

3.外部ファイルとして読み込む

WordPressでJavaScriptを使う方法は？動かないときの対処法も解説の画像_14枚目

最後は、JavaScriptを外部ファイルとして読み込んで使う方法だよ。

実は、この方法が1番スタンダードなんだ。

そうなんだ、HTMLやCSSで作られているサイトと同じ感じかな？

そうだね。JavaScriptの記述は、拡張子が「.js」のファイルに記述して、そのファイルを読み込んでJavaScriptを使うの。

読み込み方法はいくつかあるから、次で説明するね。

WordPressでJavaScriptのファイルを読み込む方法

WordPressで外部のJavaScriptファイルの読み込みってどうやるの？

色んな読み込み方法があるみたいだけど、どれが良いんだろう？

スタンダードな方法をピックアップしたから大丈夫だよ。

ここでは、WordPressでJavaScriptのファイルを読み込む方法を一緒に見てみよう。

WordPressでJavaScriptのファイルを読み込む方法

1.scriptタグで読み込み

2.WordPressの独自関数の使用

1.scriptタグで読み込み

1つ目は、scriptタグで読み込む方法だよ。

どうやってやるの？

下記の方法でできるよ！

scriptタグで読み込む方法

1.使いたいテーマのテーマフォルダ内に、JavaScriptファイルを入れる

2.WordPressの独自関数の使用

3.headタグ内に読み込み用のscriptタグを追記

手順3のscriptタグって、どの箇所にどんな風に記述すればいいの？

headタグ内ならどこでもいいけど、下記のように記述するといいよ。

追記するscriptタグ

ちなみにWordPressではディレクトリのズレの発生もあるから、WordPressの独自関数でフルパスを呼び出して読み込むとエラー発生も少なくなるんだ。

2.WordPressの独自関数の使用

2つ目は、WordPressの独自関数を使うんだけど、WordPressがおすすめしている方法だよ。

WordPressの独自関数？なんだか難しそう。

大丈夫、下記の手順でやってみてね！

WordPressの独自関数を使用する方法

1.JavaScriptファイルを使いたいテーマのテーマフォルダに入れる

2.functions.phpにWordPressの独自関数を記述

手順2のWordPressの独自関数は、下記のように記述するよ。

functions.phpに記述するWordPressの独自関数

1.動きのあるデザインのサイトを作れる

2.サイト訪問者に長く滞在してもらえる

functions.phpに記述するWordPressの独自関数

function my_scripts_method() {

     wp_enqueue_script(

             'custom_script',

         get_template_directory_uri() . '/test.js',

     );

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

なるほど！もし他の関数を使いたい場合ってどうしたらいいの？

WordPressの公式サイトで調べられるから見てみてね。

WordPressでJavaScriptが動かないときの解決方法

WordPressでJavaScriptが動かないんだけど、どうしよー？

何が原因なんだろう？

心配ないよ、「ファイルが読み込めていない」「エラーが出ている」のどちらかで動かないことが多いんだ。

ここでは、WordPressでJavaScriptが動かないときの解決方法を説明するね。

WordPressでJavaScriptが動かないときの解決方法

1.ファイルが読み込めていない場合

2.エラーが出ている場合

1.ファイルが読み込めていない場合

まずは、ファイルが読み込めていない場合だね。

そうだよね、どうやって確認できるの？

下記の方法でできるよ。

ファイルが読み込みを確認する方法

1.サイトを開いて、右クリックから「検証」を選ぶ

2.デベロッパーツールの「Sources」タブをクリックする

3.読み込ませようしたJavaScriptファイルがあるか確認する

デベロッパーツールの「Sources」タブでは、サイトを表示するために使用中のファイルを確認できるんだ。

そこで読み込ませようしたJavaScriptファイルがなかったら記述ミスがあるってこと？

そうだね。他にも下記の可能性もあるからチェックしてみてね。

ファイルが読み込めない場合のチェックポイント

1.不要な空白が入っていないか

2.ファイル名は正しいものか

3.正しいパスを記載してミスはないか

2.エラーが出ている場合

あとは、エラーが出ている場合だね。

それはどこで確認できるの？

この場合もデベロッパーツールで確認できるよ。

エラーを確認する方法

1.サイトを開いて、右クリックから「検証」を選ぶ

2.デベロッパーツールの「Console」タブをクリックする

3.エラーが出ている箇所が赤くなっているので確認する

エラーの箇所が分かるのは助かるね！

特に「変数名や関数が定義されていない」「閉じ括弧が足りない」など、記述ミスのケースが多く見られがちだから、念入りにコードをチェックしよう。

まとめ

最後に、WordPressをより魅力的にするJavaScriptの使い方についてまとめるね。

まとめ

◆WordPressでJavaScriptを使うと、訪問者が飽きずに長く滞在してくれるサイトを実現できる。

◆WordPressでJavaScriptを使う場合、WordPressの独自関数を使って外部ファイルとして読み込む方法でエラーが発生しにくくなる。

◆WordPressでJavaScriptが動かないときは、デベロッパーツールの「Sources」タブと「Console」タブを確認する。

WordPressでJavaScriptを使うハードルは低くなったかな？

うん。思っていたよりも使い方がシンプルで、やってみようと思えたよ。

ブルーちゃん、教えてくれてありがとう！

この記事を読んで、ぜひWordPressでJavaScriptを使って訪問者を引き込むサイトを作ってね。

ブルー

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

【イラスト付き】WordPressでJavaScriptを使う方法は？動かないときの対処法も解説

WordPressでJavaScriptを使うメリット

1.動きのあるデザインのサイトを作れる

2.サイト訪問者に長く滞在してもらえる

WordPressでJavaScriptを使う方法

1.直接エディタに記入する

2.プラグインを利用する

3.外部ファイルとして読み込む

WordPressでJavaScriptのファイルを読み込む方法

1.scriptタグで読み込み

2.WordPressの独自関数の使用

WordPressでJavaScriptが動かないときの解決方法

1.ファイルが読み込めていない場合

2.エラーが出ている場合

まとめ

最新の記事一覧

最新の記事一覧