WordPressでjQueryを使用する
WordPressのサイトでjQueryを使用したい場合も多いかと思います。
通常通りjQueryを読み込ませようとすると、
WordPressでは標準でjQueryが読み込まれていてるので重複してしまします。
そこでwp_enqueue_script関数を使用すると、重複せずにスクリプトを読み込ませることができます。
<head>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('action', '/wp-content/themes/テーマのフォルダ名/js/action.js', array('jquery')); ?>
<?php wp_head(); ?>
</head>
このようなコードをhead内、もしくはfunction.phpに記述します。
wp_enqueue_script関数に関しては、Shifftさんの記事、公式サイトが参考になりました。
wp_enqueue_scriptで外部のjQueryライブラリを使う
Function Reference/wp enqueue script
もう一つ注意点があります。
WordPressではjQueryの他、prototype.jsなども読み込まれていて、
衝突をさけるため、WordPress側のjQueryにてnoConflict()という関数が使用されています。
そのため使用するスクリプト内の $ を jQuery と置き換える必要があります。
例えば以下のようなコードの場合、
$(document).ready(function(){
$("h4").click(function () {
$("p").slideToggle();
});
});
このように変更します。
jQuery(document).ready(function(){
jQuery("h4").click(function () {
jQuery("p").slideToggle();
});
});
記事公開日：
最終更新日：
FAQ MANAGERのところでいつもお世話になっております。今回は別件でお力添えいただけないかと連絡しました。
このスレッドが適切でなければ場所を変更します。
当方はタグ・クラウドで、WP-CUMULUSを使っていますが、脱FLASHとするため、探し当てた
JS-Cumulus – WP-Cumulus in JavaScript v0.2
http://www.jeroenvanwarmerdam.nl/content/resources/javascript/jscumulus/js-cumulus.html
を使いたいのです。が、これはプラグインではないので、簡単に実装できそうもありません。
jqueryを使うようですが、phpから自力で出力する必要がありそうです。phpコードを直接書き込めるwidgetを使うとして、phpコードをどう書いたらよいか、ご教示いただけないでしょうか?なお、今回のタグクラウドは、カスタム分類のfaq-tagではなく、投稿や固定ページによる従来型のタグによるタグ・クラウドです。
ぶしつけなお願いで大変心苦しいのですが、ヒントだけでもいただければ幸いです。
ざっと見てみましたが、タグクラウド自体をjavasciriptに記述して、ソースを吐き出している感じですね。
なかなか解説サイトや日本語の情報がありませんでしたが、こちらのnegi.libさんの、
CUMULUS FLASHからJSに変更
という記事が参考になりそうです。
おはようございます。探索情報ありがとうございます。
もう使っている人がいるんですね。まずは、これを読んでできるところまでやってみます。
ありがとうございました。
いつもお世話になっております。本件、お蔭様で実装できました。
ところで、ご紹介頂いた日本語のサイトでは、js-cumulus.js紹介サイトのサンプルで使っているconsole.log.jsを使っていません。
IE8以下で表示した場合、紹介サイトのサンプルは「Stack overflow at line:1」というAlertが出ますが、日本語サイトでは出ません。（当方は、ひとまず紹介サイトを参考にしましたので、現在はalertが出る状態です）
line:1
はconsole.log.jsの（精確にはconsole.log.min.jsの）１行目です。
一般論として、console.log.jsは何の為に使っているのでしょう？セキュリティやメモリー使用等、必須な用件なのでしょうか？
console.log.jsで少し検索してみました。
ダウンロードサイトの説明文みたいなのに、
「Cross-Browser solution for console logging in JavaScript」
と書いてあったので、クロスブラウザ対策のスクリプト？なのかなあ、と思います。
このスクリプト自体の情報が少なく、何とも言えないところですが＾＾；
ありがとうございました。そういうことですか。
日本語サイトの方は、console logging in JavaScriptがないためか、
IEではタグクラウドが左上にひょうじされてしまいます。しかし、モダンブラウザでは、
設計通り右サイドバーに表示されます。
でも、console logging するために、かなりメモリを使うのかもしれません。
IEの開発者ツールでデバッグすると、「スタック領域が不足しています。」となります。
ただ、日本語サイトのソースをチェックしてみたら、phpで出力する配列の最後の要素の次に「,」が入ってました。[a,b,c,d,]というように。IEで表示がオカシイのはこれにも原因があるのかもしれませんね。
とろあえず、私の方は、日本語サイトのようなソースを吐き出すよう再調整し、alertが出ないようにやってみます。もしかしたらconsole loggingなしでもクロスブラウザになるかもしれませんので。
その後一つ確認できたことがあります。
ダウンロードサイトのサンプルコードから、console logging を呼び出す部分を削除した状態で試したところ、alertはなくなりました（当然ですが）。むしろIEでは動きが良くなったようです。今のところ、次の点を除き不具合はないようです。
不具合といえば、IE7,IE6では、タグクルドの「中身」が表示用のdivから抜け出して左上に移動してしまうことです。しかし、これは、console logging を外さなくても既に起きていました。
ということで、IE7,IE6の表示不具合（多分、IE6,7におけるcssの適合性によるもの）を解決すれば良さそうです。ですが、この世界は、かなり難しそうですね。
なるほど～。
6,7に関しては使用している方の割合は減ってきてはいるので、
割切って「対策をしない」という考え方もあるでしょうけど、
なかなかそうは言っても・・という場合もあるでしょうし。
IE対策はやはり色々悩まされるものがありますね＾＾；
position: absolute;指定した要素がはみ出す、という事例があり、その場合は親要素にwidth: 100%;を指定すると良い、という記事がありました。この場合は、タグであるli要素がabsoluteですが、その親ulにwidth: 100%;を入れてみましたが、変化はありませんでいた。IE7,6のcssバグだとすればこれでイケる筈なのですが、どうやら別の原因かもしれませんね。
思い切ってIE７以前では、タグクラウドのブロック自体を無視するしかなさそうです。また何かわかったら書き込ませていただきます。
[…] WordPressでjQueryを使用する | WP MEMO WordPressのサイトでjQueryを使用したい場合も多いかと思います。 通常通りjQueryを読み込ませようとすると、 WordPressでは標準でjQueryが読み込まれていてるので重複してし … 「$」じゃなくて「jQuery」を使うのですねー。 WordPressでjQueryを動かすときに参考にさせていただきました。わかりやすく書いてくださっています。 […]