WordPressをより魅力的に!JavaScriptの使い方のアイキャッチ画像

wordpress

更新日: 2024/5/11

WordPressをより魅力的に!JavaScriptの使い方

character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon

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

character_balloon

WordPressでJavaScriptを使うメリット

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

character_balloon
character_balloon

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

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

character_balloon
character_balloon

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

WordPressでJavaScriptを使うメリット

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


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

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

character_balloon

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

character_balloon

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

character_balloon

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

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

character_balloon

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

character_balloon
character_balloon

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

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

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon

WordPressでJavaScriptを使う方法

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

character_balloon

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

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

WordPressでJavaScriptを使う方法

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


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


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

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

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

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

character_balloon

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

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

character_balloon
character_balloon

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

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

1.Simple Custom CSS and JS


2.Scripts n Styles

character_balloon

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

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

character_balloon

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

character_balloon

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

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

character_balloon
character_balloon

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

character_balloon

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

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

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

character_balloon

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

character_balloon
character_balloon

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

character_balloon

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

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

1.scriptタグで読み込み


2.WordPressの独自関数の使用

1.scriptタグで読み込み

character_balloon

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

どうやってやるの?

character_balloon
character_balloon

下記の方法でできるよ!

scriptタグで読み込む方法

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


2.WordPressの独自関数の使用


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

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

character_balloon
character_balloon

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

追記するscriptタグ

<script src="/test.js" type="text/javaScript" charset="utf-8">

character_balloon

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

2.WordPressの独自関数の使用

character_balloon

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

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

character_balloon
character_balloon

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

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

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


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

character_balloon

手順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');

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

character_balloon
character_balloon

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

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

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

character_balloon

何が原因なんだろう?

character_balloon
character_balloon

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

character_balloon

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

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

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


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

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

character_balloon

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

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

character_balloon
character_balloon

下記の方法でできるよ。

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

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


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


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

character_balloon

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

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

character_balloon
character_balloon

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

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

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


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


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

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

character_balloon

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

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

character_balloon
character_balloon

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

エラーを確認する方法

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


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


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

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

character_balloon
character_balloon

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

まとめ

character_balloon

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

まとめ

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


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


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

character_balloon

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

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

character_balloon

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

character_balloon
character_balloon

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

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

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

最新の記事一覧
最新の記事一覧