WordPress
更新日: 2024/10/2
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を使うメリットについて説明するね。
1.動きのあるデザインのサイトを作れる
2.サイト訪問者に長く滞在してもらえる
1.動きのあるデザインのサイトを作れる
動きのあるデザインのサイトを作れる点は、WordPressでJavaScriptを使う大きなメリットになるよ。
例えばページをスクロールして画像がふわっと現れたり、マウスを動かすと背景が動いたりする印象的なデザインを叶えられるね。
それでユーザーに「使いやすいな」と思ってもらえる魅力的なサイトにすることができるんだ。
言われてみれば、動きがあるサイトの方が使いやすいかも！
でも、そんな凝ったデザインだと作るの難しくない？
大丈夫だよ！WordPressには、スクロールやアニメーションのプラグインが豊富に揃っていて、ワンランク上のサイト作りができるよ。
2.サイト訪問者に長く滞在してもらえる
サイトに動きがあると訪問者の興味を引きつけて、滞在時間を長くすることもできるんだ。
そうなんだ。どんな工夫をすると長く滞在してもらえるの？
JavaScriptではインタラクティブなギャラリーやクイズ、リアルタイムのフィードバックフォームなど、訪問者が参加したくなるようなコンテンツを作れるから活用できるんだ。
それでサイト訪問者がコンテンツを眺めるだけでなく、積極的に利用するから滞在時間を伸ばして離脱率を下げられるよ。
なるほど、それでサイトが活性化していくんだね！
WordPressでJavaScriptを使う方法
WordPressでJavaScriptを使うにはどうしたらいいの？
何か事前に準備するものとかあるのかな？
JavaScriptはブラウザで動作するから、インストールも特別な設定も必要ないよ。
ただ、読み込ませる必要があるんだ。
ここでは、WordPressでJavaScriptを使う方法を説明していくね。
1.直接エディタに記入する
2.プラグインを利用する
3.外部ファイルとして読み込む
1.直接エディタに記入する
まずは、記事を投稿する際に記入するエディタに直接記入する方法だね。
え、それだけでJavaScriptが使えるの？
うん、ただこの方法が使えるのはテキストエディタの場合のみで、段落や改行のタグが自動的に入るビジュアルエディタでは使えないから要注意だよ。
あと、記述を入れたページにしか適用されないから汎用的ではないかな。
そうなんだ。もっと便利な方法ってあるの？
もちろん、この後に説明するよ！
2.プラグインを利用する
WordPressといったら種類豊富なプラグインなんだけど、JavaScriptを読み込むプラグインもあるんだ。
それはいいね。どのプラグインがおすすめなの？
下記のプラグインが特におすすめだよ。
1.Simple Custom CSS and JS
2.Scripts n Styles
サイト全体に使うなら「Simple Custom CSS and JS」、一部のページだけに使うなら「Scripts n Styles」と使い分けるのもありだよ。
3.外部ファイルとして読み込む
最後は、JavaScriptを外部ファイルとして読み込んで使う方法だよ。
実は、この方法が1番スタンダードなんだ。
そうなんだ、HTMLやCSSで作られているサイトと同じ感じかな？
そうだね。JavaScriptの記述は、拡張子が「.js」のファイルに記述して、そのファイルを読み込んでJavaScriptを使うの。
読み込み方法はいくつかあるから、次で説明するね。
WordPressでJavaScriptのファイルを読み込む方法
WordPressで外部のJavaScriptファイルの読み込みってどうやるの？
色んな読み込み方法があるみたいだけど、どれが良いんだろう？
スタンダードな方法をピックアップしたから大丈夫だよ。
ここでは、WordPressでJavaScriptのファイルを読み込む方法を一緒に見てみよう。
1.scriptタグで読み込み
2.WordPressの独自関数の使用
1.scriptタグで読み込み
1つ目は、scriptタグで読み込む方法だよ。
どうやってやるの？
下記の方法でできるよ！
1.使いたいテーマのテーマフォルダ内に、JavaScriptファイルを入れる
2.WordPressの独自関数の使用
3.headタグ内に読み込み用のscriptタグを追記
手順3のscriptタグって、どの箇所にどんな風に記述すればいいの？
headタグ内ならどこでもいいけど、下記のように記述するといいよ。
<script src="/test.js" type="text/javaScript" charset="utf-8">
ちなみにWordPressではディレクトリのズレの発生もあるから、WordPressの独自関数でフルパスを呼び出して読み込むとエラー発生も少なくなるんだ。
2.WordPressの独自関数の使用
2つ目は、WordPressの独自関数を使うんだけど、WordPressがおすすめしている方法だよ。
WordPressの独自関数？なんだか難しそう。
大丈夫、下記の手順でやってみてね！
1.JavaScriptファイルを使いたいテーマのテーマフォルダに入れる
2.functions.phpにWordPressの独自関数を記述
手順2のWordPressの独自関数は、下記のように記述するよ。
1.動きのあるデザインのサイトを作れる
2.サイト訪問者に長く滞在してもらえる
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が動かないときの解決方法を説明するね。
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を組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
ゲシュタルトとは？心理学の歴史や基本法則について徹底解説！
SEO
マーケティングファネルとは？4つの段階についてわかりやすく解説！
SEO
サジェスト対策はどうやる？詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は？目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは？良い業者の選び方も解説
SEO
関連キーワードとは？SEO初心者でもわかる基礎知識と活用法！
SEO
Looker Studioとは？機能や使い方をわかりやすく解説！
SEO
MEOとSEOの違いとは？どちらに注力するべきかの判断基準も解説
SEO
KPIとは？ビジネス成功のための指標と活用法を徹底解説！
SEO
定量と定性の違いとは？データ分析での効果的な使い方を解説！
SEO
校了とは？校正との違いや注意点をわかりやすく解説！
SEO
コンテンツとは？意味や具体例について初心者でもわかりやすく解説！
SEO
Googleトレンドとは？できることや使い方について詳しく解説！
SEO
コンテンツSEOとは？メリット・やり方などわかりやすく解説！
SEO
SSL化でSEO強化！Google推奨の理由と導入方法を解説！
SEO
サポートページとは？特徴と構成要素、未来展望を徹底解説！
SEO
キャッシュバスターってどんなツール？おすすめプラグインも紹介！
SEO
リダイレクトループとは？原因、特定、解決方法をそれぞれ徹底解説！
SEO
ハブページとは？3つの目的と効果的な作成・運用のコツを徹底解説！
SEO
最新の記事一覧
ゲシュタルトとは？心理学の歴史や基本法則について徹底解説！
SEO
マーケティングファネルとは？4つの段階についてわかりやすく解説！
SEO
サジェスト対策はどうやる？詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は？目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは？良い業者の選び方も解説
SEO
関連キーワードとは？SEO初心者でもわかる基礎知識と活用法！
SEO
Looker Studioとは？機能や使い方をわかりやすく解説！
SEO
MEOとSEOの違いとは？どちらに注力するべきかの判断基準も解説
SEO
KPIとは？ビジネス成功のための指標と活用法を徹底解説！
SEO
定量と定性の違いとは？データ分析での効果的な使い方を解説！
SEO
校了とは？校正との違いや注意点をわかりやすく解説！
SEO
コンテンツとは？意味や具体例について初心者でもわかりやすく解説！
SEO
Googleトレンドとは？できることや使い方について詳しく解説！
SEO
コンテンツSEOとは？メリット・やり方などわかりやすく解説！
SEO
SSL化でSEO強化！Google推奨の理由と導入方法を解説！
SEO
サポートページとは？特徴と構成要素、未来展望を徹底解説！
SEO
キャッシュバスターってどんなツール？おすすめプラグインも紹介！
SEO
リダイレクトループとは？原因、特定、解決方法をそれぞれ徹底解説！
SEO
ハブページとは？3つの目的と効果的な作成・運用のコツを徹底解説！
SEO
