WordPressで外部ファイルに置いたjQueryスクリプトを使う

WordPressで外部ファイルに置いたjQueryスクリプトを使う

WordPress 内で外部ファイルに置いた自作の jQuery やプラグインを使用する方法です。WordPress はデフォルトで本体にjQuery本体が入っているので、jsフォルダ等にわざわざ本体を置かなくても、jQuery等のライブラリを使用することができます。

jQueryのスクリプトを読み込むには wp_enqueue_script() を使用します。
プラグインの読み込みも同じ方法です。head内か function.php で読み込みをします。

使用する注意点

prototype.js等とのコンフリクトを防ぐために、WordPressではjQueryという変数名でアクセスするので、$をjQueryに書き換えます。
head内に記入する場合は、wp_head();よりも前に記入します。

wp_enqueue_script()では以下のパラメータを入れる事ができます。

wp_enqueue_script( 
     $handle,$src,$deps,$ver,$in_footer 
);

$handle 必須 — スクリプトの名前(任意の名前)。
$src オプション — スクリプトファイルへのパス。htmlから見た絶対パスで指定。
$deps オプション — 依存するスクリプトの名前を配列で指定
先にjQeryを読み込む必要があるならばarray(‘jquery’)と指定。
$ver オプション — スクリプトのバージョン
$in_footer オプション — スクリプトの呼び出し場所
true ならば head 要素に、false ならば wp_footer() に出力します。

具体的な使用例

例えば、テーマファイルの jsフォルダに置いた memocaliscript.js に jQuery のスクリプトがある場合は下記のように書いて読み込みします。

<?php
wp_enqueue_script('memocaliscript',get_template_directory_uri() . '/js/jquery.memocaliscript.js',array('jquery'));
?>

ライブラリにあるものなら $handle に指定するだけで呼び出しが出来ます。jquery-formを読み込みたい場合は下記のように記入すれば読み込みできます。

<?php
wp_enqueue_script('jquery-form');
?>

デフォルトで入っているスクリプトはwp-includes/script-loader.phpか、codex Function Reference/wp enqueue scriptで確認することができます。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能