WordPressでは、通常のHTMLページと同じようにJavascriptを使用する事ができます。
しかし、jQueryを使う場合には特別な注意が必要で、気を付けないと正常に動作しません。
ここでは、WordPressでjQueryを使うための3つのポイントを紹介します。
1. jQueryはデフォルトでロードされる
WordPressでは、jQueryがデフォルトでロードされます。
WordPressで生成されるhead部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>MY SITE</title> <meta name="description" content="Just another WordPress site"> <link rel="stylesheet" id="style-css" href="http://my-domain.com/wp-content/themes/my_theme/style.css?ver=1.0" type="text/css" media="all"> <script type="text/javascript" src="http://my-domain.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script> <script type="text/javascript" src="http://my-domain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script> <script type="text/javascript" src="http://my-domain.com/wp-content/themes/my_theme/js/site.js?ver=1.0"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://my-domain.com/xmlrpc.php?rsd"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://my-domain.com/wp-includes/wlwmanifest.xml"> <meta name="generator" content="WordPress 3.7.1"> </style> </head> |
テンプレート内にwp_head関数が正しく配置されていれば、jQueryのライブラリは自動的にロードされます。
もし、wp_head関数を配置していなければ、忘れずにhead要素の閉じタグ</head>の直前に配置しましょう。
|
1 2 3 4 5 6 7 8 9 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta name="description" content="<?php bloginfo('description') ?>" /> <?php wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0'); ?> <?php wp_head(); ?> </head> |
jQueryライブラリは一度だけロードされていれば良いので、新たにjQueryライブラリ（jquery.jsまたはjquery.min.js）をロードする<script>タグを書く必要はありません。
もし、誤って書き足してしまうと、jQueryライブラリが2重にロードされ、誤動作を起こします。
× jquery.js, jquery.min.js をロードするscriptタグは書き足さない
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
jQueryライブラリのロードは、WordPressによる自動のロードに任せましょう。
2. jsファイルのロードには、scriptタグは使わずにwp_enqueue_script関数を使う
jQueryライブラリは<script>タグでロードしない事は前述しましたが、jQueryライブラリ以外をロードする場合にも、自分で<script>タグは書かずに、必ずwp_enqueue_script関数を使ってください。
wp_enqueue_script関数の詳しい使い方は、こちらの記事を参照してください。（記事: Javascriptファイルをロードする）
以下は、自作のスクリプトsite.jsで、jQueryプラグインのColorboxを使用する例です。
通常のHTMLではこう書くところを…
|
1 2 3 |
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.colorbox-min.js"></script> <script type="text/javascript" src="js/site.js"></script> |
WordPressテンプレートではこう書く
|
1 2 3 4 5 |
<?php wp_enqueue_script('colorbox', get_template_directory_uri(). '/js/jquery.colorbox.js', array('jquery'), '1.4.33'); ?> <?php wp_enqueue_script('site', get_template_directory_uri(). '/js/site.js', array('jquery', 'colorbox'), '1.0'); ?> <?php wp_head(); ?> </head> |
jQueryライブラリやプラグインを使用する場合、スクリプトを正しい順番でロードする必要があるので、wp_enqueue_scriptの第3引数（array('jquery')などの箇所）は正確に設定するように気を付けてください。
3. スクリプトで「$」を使う時の注意
WordPressでjQueryを使う場合に最も気を付けなくてはならないのは、jQueryオブジェクトの$がスクリプト内で通常通りに使用できない事です。
|
1 2 |
// WordPressでは$が動作しない $('a.cb').colorbox({rel:'gallery'}); |
この問題を解決する方法を説明します。
無名関数でラップする
スクリプトの全て（または一部）を無名関数でラップします。
スクリプトの前後に、1行ずつコードを追加するだけです。
|
1 2 3 4 5 6 7 |
// これだけで正常に動作する (function($){ $('a.cb').colorbox({rel:'gallery'}); ... })(jQuery); |
通常はこの方法でOKでしょう。
無名関数を使わない方法
WordPressでjQueryの$が使用できないのは、prototype.jsの$など、他のライブラリとのコンフリクトを防ぐためです。
無名関数でラップする方法を用いると、このコンフリクトを起こす原因になります。
また、無名関数では変数のスコープに問題が生じる場合もあります。
これらの問題が生じそうな場合には、安全策として以下のような方法があります。
|
1 2 3 |
// jQuery.noConfilct を使用する var j = jQuery.noConfilct(); j('a.cb').colorbox({rel:'gallery'}); |
|
1 2 |
// $をjQueryに書き換える jQuery('a.cb').colorbox({rel:'gallery'}); |
まとめ
- jQueryライブラリのロードは、WordPressに自動でおまかせする
- それ以外のスクリプトのロードは、必ず
wp_enqueue_script関数を使用する - スクリプトで
$を使う場合には無名関数でラップする
TRACKBACKS