WordPressでGoogle Libraries APIを自動的に読み込む「Use Google Librariesプラグイン」

WordPressでGoogle Libraries APIを自動的に読み込む「Use Google Librariesプラグイン」

Posted at October 11,2011 1:55 AM
Tag:[Google, Plugin, WordPress]

WordPressでjQueryなどのGoogle Libraries APIライブラリを自動的に読み込むことができる「Use Google Librariesプラグイン」を紹介します。

Use Google Libraries
Use Google Librariesプラグイン

1.機能

jQueryなどの外部ライブラリを読み込むには、wp_deregister_script()とwp_register_script()を組み合わせることで実現できます。

例えばjQueryを読み込む場合は次のように記述します。

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' ) );
wp_enqueue_script( 'jquery' );

wp_deregister_script()はWordPressに登録されているスクリプトの読み込みを解除する関数、wp_register_script()はスクリプトの登録を行う関数です。wp_enqueue_script()はパラメータに指定したスクリプトを重複させずにページに出力する関数です。

が、このプラグインを利用すれば、次の1行を記述するだけで、サーバーにインストールしたWordPressにあるJavaScriptライブラリではなく、Google Libraries APIからJavaScriptライブラリを読み込んでくれます。

wp_enqueue_script( 'jquery' );

プラグイン適用前(クリックで拡大します)
プラグイン適用前

プラグイン適用後(クリックで拡大します)
プラグイン適用後

Google Libraries APIにあるライブラリを読み込めば、サーバーの負荷を軽減する効果や、同じライブラリがユーザーのブラウザにキャッシュされている可能性が高くなります。

マニュアルによると、このプラグインでサポートされているライブラリは以下の通りです。

  • Dojo(http://dojotoolkit.org/)
  • jQuery(http://jquery.com/)
  • jQuery UI(http://ui.jquery.com/)
  • MooTools(http://mootools.net/)
  • Prototype(http://www.prototypejs.org/)
  • script.aculo.us(http://script.aculo.us/)
  • swfobject(http://code.google.com/p/swfobject/)

また、jQueryとprototypeを同時に定義すると、jQuery.noConflict()も自動的に設定されます。

jQueryとprototypeを同時に定義(クリックで拡大します)
プラグイン適用前

2.プラグインのダウンロード・インストール

管理画面の「プラグイン」→「新規追加」をクリック。

管理画面

キーワードに「Use Google Libraries」を入力して「プラグインの検索」をクリック。

プラグインの検索

「いますぐインストール」をクリック。

インストール

インストールが完了したら「プラグインを有効化」をクリック。

プラグインを有効化

3.設定

冒頭に記したとおり、例えばjQueryライブラリを読み込む場合は、次の内容をテーマなどに設定します。

wp_enqueue_script( 'jquery' );

wp_enqueue_script()の詳細については「WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その2」の4項を参照してください。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)