my-plugin に jQueryコード を入れる簡単な例

main_mpjquery

以前、「WordPress (自分専用)マイ・プラグインを作ろう」の記事を書きましたが利用者の方から「コードを入れると画面が真っ白になる」と言われました。
どんなコードを入れたのか、よくよく聞くと「jQuery・・・」と言われました。jQueryコード(JavaScript) は phpコード ではありませんのでそのまま書き込むとエラーになります。
という事で my-plugin に jQueryコード を入れる簡単な例を紹介します。

 

ヘッダー部分に jQueryコード(JavaScript) を設置したい場合

/**
 * ヘッダーに jQueryコード(JavaScript) を挿入
 *
 * License: GPLv2 or later
 */
function nendebcom_header_insert_js_code() {
?>
	<script type="text/javascript">

	<!--ここに jQueryコード(JavaScript) を書き込む -->

	</script>
<?php
}
add_action( 'wp_head', 'nendebcom_header_insert_js_code', 10 );

これで、HTMLソースの <header>~</header>タグの間に入ります。
<header>~</header>間でも、なるべく下の方に設置したい場合は add_action の 10 の数値を上げてみてください。

 

 

フッター部分に jQueryコード(JavaScript) を設置したい場合

/**
 * フッター に jQueryコード(JavaScript) を挿入
 *
 * License: GPLv2 or later
 */
function nendebcom_footer_insert_js_code() {
?>
	<script type="text/javascript">

	<!--ここに jQueryコード(JavaScript) を書き込む -->

	</script>
<?php
}
add_filter( 'wp_footer', 'nendebcom_footer_insert_js_code', 10 );

これで、HTMLソースの </body>タグのちょっと上あたりに入ります。
</body>タグのちょっと上でも、もう少し下の方に設置したい場合は add_action の 10 の数値を上げてみてください。

 

 

jQuery(JavaScript)ファイルを読み込むようにする

もう一つ、マイプラグインの書き方として
jQueryファイルを外部から読み込ませるためにリンクを貼りたい場合や、jQueryを別ファイルにして管理したい場合は以下の例を参考にしてください。
こうすれば、テーマの header.php に直接リンクを書き込まなくてもよくなります。

①ファイルを exsample.js として wp-content/plugins/my-plugin/フォルダにアップロードします。
②以下のコードを my-plugin に書き込みます。

/**
 * jQuery(JavaScript)ファイルを読み込むようにする
 *
 * License: GPLv2 or later
 */
function nendebcom_add_js_files() {

	wp_enqueue_script( 'exsample_js', plugin_dir_url( __FILE__ ) . 'exsample.js', array(), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'nendebcom_add_js_files', 11 );

③利用状況にあわせて wp_enqueue_script(・・ 内を変更します。
 左の項目から説明すると、
 *「exsample_js」の所は好きな固有名称を入れてください。
 *「plugin_dir_url( __FILE__ )」の所はWordPressがURLに変更しますのでこのままでいいです。
 *「exsample.js」はアップロードしたファイル名です。
 *「array()」はそのままでいいです。
 *「1.0.0」はバージョン番号です。
 *「false」でヘッダーに置かれます。フッターの方がいい場合は「true」にしてください。
です。詳しくは「WordPress日本語Codex 関数リファレンス/wp enqueue script」をご覧ください。

WordPress側やテーマ側で他の JavaScriptファイルを読み込みますので add_action の実行順は 11 以降のほうがいいかもしれません。
jQueryは読み込み順で動かなかったりする事がありますのでうまく動かない場合は変更して試してみてください。数字をあげるとHTMLソースで下の方になります。

以上、jQuery(JavaScript)を設置できるまでを書きましたが実際にjQuery(JavaScript)が動くかどうかはコードの書き方や相性..等など 別問題になりますので頑張ってください。
 

 

参考

WordPress 日本語Codex テンプレートタグ/wp_head
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_head

WordPress 日本語Codex テンプレートタグ/wp footer
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_footer

WordPress日本語Codex 関数リファレンス/wp enqueue script
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

ねんでぶろぐ wp_enqueue_scriptでscriptファイルを読むようにする時に async も入るようにする。
http://nendeb.com/20