WordPress でjQuery (Google Libraries APIを設定)を使う方法

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

medium_2563036184
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 の読み込みが行われます。

//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');

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

<!--外部JSファイル読み込み -->
<?php
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
    wp_deregister_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-core','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js');
?>
<!--外部JSファイル読み込み終わり -->

<?php wp_head(); ?>

変更点について

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

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

参考にした記事

WordPressでjQueryを使う方法(Google Libraries APIを設定する。) | ジャイアントモリンキーのjavaテック

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする

フォローする

スポンサーリンク
スポンサードリンク