wordpressでjsファイル追加

5月 26th, 2011

wordpressにてテンプレのカスタマイズをしているときに外部jsファイルを読み込むと動かない事があった。
すべてがすべてというわけじゃないみたいだけど今回のの解決方法は下記の通り。

追加jsファイルへのリンクはwordpressに存在する関数「wp_enqueue_script()」を使う。

<?php wp_enqueue_script(‘スクリプト名’, ‘jsファイルへのパス.js’, array(‘関連スクリプト名’)); ?>

というように記述するらしい。
ちなみに記述する場所はheader.php内「php wp_head();」の記述の前。
arrayの「関連スクリプト」というのはスクリプトの存在先、jqueryとかがそれにあたる。
今回の自分の場合もjqueryとした。

また、jquery自体はあらかじめwordpressに入っているのでそれを呼び出す手段があるのだけど、
普段からGoogle AJAX APIからjQueryを読み込んでいるのでそれも一緒に入れる。

記述は

<?php wp_deregister_script( ‘jquery’ ); wp_deregister_script( ‘jquery-ui-core’ );   wp_enqueue_script(‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’); wp_enqueue_script(‘jquery-ui-core’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js’, array(‘jquery’)); ?>

となる。

今回、page-scroller.jsを追加したので、全立て記には下記のように記述した。

<?php wp_deregister_script(‘jquery’); wp_deregister_script(‘jquery-ui-core’); wp_enqueue_script(‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’); wp_enqueue_script(‘jquery-ui-core’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js’, array(‘jquery’)); ?>
<?php wp_enqueue_script(‘page-scroller’, ‘/wp-admin/js/page-scroller.js‘, array(‘jquery’)); ?>

ここで注意したいのがjsファイルへのパス。
wp_enqueue_scriptを使うときはリンクのルートパスがwordpressをインストールしたフォルダになるので
ルートパスを使う際にはwordpressをインストールしたフォルダ以下にjsファイルをおく必要がある。
フルパスで書けばどこでもいいんだろうけど。

参考サイト:http://www.wembley.jp/webdevelop/googleapi-to-wordpress.html

[`evernote` not found]
このエントリーをはてなブックマークに追加

カテゴリー: web

タグ: Leave a comment

Leave a comment

Feed

http://www.browncrown.net/blog / wordpressでjsファイル追加