WordPress でjQuery （Google Libraries APIを設定）を使う方法

広告-Ad-

Stinger2 で四苦八苦していたPAGE TOP ボタンや他のjQuery を動かすにあたってWordPress にjQuery を設定する方法を書きとめておきます。

photo credit: TheBusyBrain via photopin cc

環境と使用テーマ

WordPress 3.6jp
Stiger2 20130827ver.

これまで行ってきたこと

テーマ「Stinger2」のPAGE TOPボタンを動かすTips

この記事ではbase.js とsmartbase.js の$ 部分をjQuery に修正し、外部JSファイルの読み込みをwp_head(); より前に指定していました。
WordPress 内にある既存のjQuery ファイルには、競合（コンフリクト）を避ける設定noConflict:function() が記述されているためです。

実は、それでも不完全だったことが今回判明した次第です。
すでにご存じの方は「何をやっているんだ、このド素人が」と思っていることでしょう。

WordPress の既存jQuery をGoogle Libraries API のjQuery に変更

Stinger2 のfunctions.php を見ると、最初にGoogle Libraries API の読み込みが行われます。

[php]//jQuery
function register_user_script() {
if (!is_admin()) {
$script_directory = get_template_directory_uri();
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js’);

wp_enqueue_script(‘MyTheme_InitScript’,$script_directory.’/init.js’,array(‘jquery’));
}
}
add_action(‘init’,’register_user_script’);
[/php]

ただ、すべての環境が読み込まれているわけではないようで、プラグインを多く入れている当ブログではPAGE TOP ボタンが動きません。
WordPress でjQuery を使えるようにするため、header.php に以下の内容に追加・修正しました。

[php]

[/php]

変更点について

前回と違うのは、jQuery UI コアファイルの記述を追加したことです。
2つのファイル揃って記述することで、base.js とsmartbase.js を修正することなく、WordPress 既存のjQuery ファイルからGoogle Libraries API が提供しているjQuery ファイル経由で実行されるようになりました。

ちなみに、functions.php のwp_enqueue_script() にUI ファイルの記述を追加すると、500サーバーエラーを起こしました。
init にフックするのは1つだけなのでしょうか。よくわからなかったので触れずにおいてます。