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