«
»

2012.05.15

wordpressでjQueryを使う

wordpressでJqueryを使う場合は、静的なHTMLとは違って、いくつか決まり事がある。メモ。

参考:
○LINK:ふじこのプログラミング奮闘記( http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=2396&rand=b21b7
○LINK:wp_enqueue_scriptで外部のjQueryライブラリを使う | Shifft – Web Design & Development( http://www.shifft.in/blog/wordpress/using-wp_enqueue_script/

jQueryスクリプトは
「記事に直接書き込む」
「スクリプトをヘッダーに読み込ませる」2通りがある。
汎用的なのはヘッダーに読み込むほう。

記事に書き込む場合

単発で動作確認したい場合などは記事に直接書き込むこともできる。
→サンプル
※「$」マークは「jQuery」に変更すること

スクリプトをヘッダーで読み込む場合

ヘッダーに読み込み、ブログ全体で使う。
jsスクリプトを配置して、header.phpに読み込む場合。
ブログ全体で使う、おそらく一般的な使い方
→サンプル

注意点

  • 直接header.phpにスクリプトを直接書くのではなく、wp_enquer_script()を使って読み込む
  • 「$」マークは「jQuery」に変更すること
  • jsファイル内は「<scrpt type="text/javascript">」で囲む必要はナシ

手順

header.phpにwp_enqueue_script()を以下のように書き込む

PHP:
  1. <?php wp_enqueue_script('jquery'); ?>
  2. <?php wp_enqueue_script('sample', '読み込ませたい.js'); ?>
  3.  
  4. <?php wp_head(); ?>

  • wp_enpueueはwp_headより前に書き込む
  • ひとつめのwp_enqueue_scriptはjqueryを指定、
  • ふたつめ以降のwp_enqueue_script内で読み込むスクリプトを指定する
  • 引数は(識別名, スクリプトファイルへのパス(以降オプション))

スクリプトの配置と記述例

このように設置した場合
(wordpressインストールフォルダ直下にscriptフォルダを作成し、jsを配置)

HTML:
  1. wordpressインストールフォルダ
  2.   ├──wp-admin
  3.   ├──wp-content等
  4.   └──scripts
  5.         └──simpleJquery.js

header.phpには以下のように「wp_head」より前に、「wp_enqueue_script」を書き込む

HTML:
  1. <?php wp_enqueue_script('jquery'); ?>
  2. <?php wp_enqueue_script('sample', '/scripts/simpleJquery.js'); ?>
  3.  
  4. <?php wp_head(); ?>

スクリプトは前述の通りscriptタグで囲む必要はない

JAVASCRIPT:
  1. /* simpleJquery.js */
  2. jQuery(function() {
  3. jQuery('p.simpleJquery').click(function() {jQuery(this).css("color","red");});
  4. });

Comment & Trackback

Trackback are closed.

No comments.

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。