WordPressでjQueryを使う方法（基本）

[ShinichiN]

本当に基本的のようで気が引けますが、みなさまご教授ください。

デフォルトのテーマをローカル環境下でカスタマイズしています。
http://pikachoose.com/
こちらで配布されているpikachooseというスライドショーのjqueryプラグインを使用したいのですが、動かずに困っています。

やりたい事：

• pikachooseを設置したい

やった事：
・ダウンロードしたjquery-1.3.2.jsをhtdcos/wordpress/wp-admin/js/の下に置いた。
・プラグインのHeader and footerを利用して、ヘッダーに以下のコードを書き込んだ。
<script type="text/javascript" src="wp-admin/js/jquery.js"></script>
・ダウンロードしたpikachoose_3.0というフォルダの仲にあったpikachoose-min.jsをhtdcos/wordpress/wp-admin/js/の下に置いた。
・プラグインのHeader and footerを利用して、ヘッダーに以下のコードを書き込んだ。

<script type="text/javascript" src="wp-admin/js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});

$(document).ready(
function (){
					$("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});

$(document).ready(
function (){
					$("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
});
-->
</script>

・スライドショーを表示させたい箇所(header.php内のdiv id=”page”の真下)に、以下のコードを書き込んだ。

<div class="pikachoose">
Basic example
	<ul id="pikame">
		<li><img src="1.jpg"/><span><a href="http://www.pikachoose.com">Now you can have links!</a></span></li>
		<li><img src="2.jpg"/><span>Or any html you want inside of captions!</span></li>
		<li><img src="3.jpg"/><span> Donec in ante. Donec pretium. </span></li>
		<li><img src="4.jpg"/><span> Aliquam erat volutpat. </span></li>
		<li><img src="5.jpg"/><span> In ornare, neque ut malesuada hendrerit.</span></li>
		<li><img src="6.jpg"/><span> Aliquam condimentum dolor sed elit. </span></li>
		<li><img src="7.jpg"/><span> Aliquam condimentum dolor sed elit.</span></li>
		<li><img src="8.jpg"/><span> Ut non magna at purus cursus facilisis.</span></li>
		<li><img src="9.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
		<li><img src="10.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
	</ul>
</div>

<div class="pikachoose">
User defined thumbs example
	<ul id="pikame_user">
		<li><img ref="1.jpg" src="user.jpg"/><span><a href="http://www.pikachoose.com">Now you can have links!</a></span></li>
		<li><img ref="2.jpg" src="user.jpg"/><span> Set custom thumbnails.</span></li>
		<li><img ref="3.jpg" src="user.jpg"/><span> Or let PikaChoose make them for you!. </span></li>
		<li><img ref="4.jpg" src="user.jpg"/><span> Integer id dolor a erat sagittis volutpat. </span></li>
		<li><img ref="5.jpg" src="user.jpg"/><span> Aliquam erat volutpat. </span></li>
</div>

結果：
・ブラウザの画面の一番上に、以下の文字要素が表示され、その後にサイトのロゴや投稿されている記事のロゴがこの作業前と同じ状態で並んでいる。

Basic example

* Now you can have links!
* Or any html you want inside of captions!
* Donec in ante. Donec pretium.
* Aliquam erat volutpat.
* In ornare, neque ut malesuada hendrerit.
* Aliquam condimentum dolor sed elit.
* Aliquam condimentum dolor sed elit.
* Ut non magna at purus cursus facilisis.
* Nunc semper dapibus erat. Nulla hendrerit.
* Nunc semper dapibus erat. Nulla hendrerit.

User defined thumbs example

* Now you can have links!
* Set custom thumbnails.
* Or let PikaChoose make them for you!.
* Integer id dolor a erat sagittis volutpat.
* Aliquam erat volutpat.

原因として、本体のアップロードと読み込みの指定、プラグインのアップロードと読み込みの指定があるのかと思い、header.phpに直接書き込んだりしていますが、解決できずに困っています。

どうぞよろしくお願いします。

[kurosquare]

・ダウンロードしたpikachoose_3.0というフォルダの仲にあったpikachoose-min.jsをhtdcos/wordpress/wp-admin/js/の下に置いた。

投稿いただいたコードはpikachoose.js用のものです。
pikachoose-min.js（軽量版）ではなく、pikachoose.js（フル版）を使ってみてください。それから、同梱されているCSS（と、もちろん画像）も読み込む必要があります。

大事なのは

<div class="pikachoose">
<ul id="pikame">

のあたりが正しく指定されているかどうかです。

#pikachooseって名前がかわいいですね

[ShinichiN]

kurosquareさん

ありがとうございます。

pikachoose-min.js（軽量版）ではなく、pikachoose.js（フル版）を使ってみてください。

やってみます！

それから、同梱されているCSS（と、もちろん画像）も読み込む必要があります。

これはどのように読み込ませれば良いのでしょうか。。htmlに何かを書き加える必要があるのでしょうか。。

前に進めそうで、感謝です。よろしくお願いします。

[kz]

/wp-admin/js/の下に

テストするときは、Default テーマをコピーして
その中でゴニョゴニョするといいですよ。
あと、jQuery は WordPress に元々同梱されてるので改めて用意しなくても OK です。

1．テーマフォルダ直下に「pikachoose」フォルダ作成。
2．そのフォルダに、画像達と pikachoose-min.js, styles.css をコピー。
3．header.php の wp_head() 直前に以下を追加。

wp_enqueue_style('pikachoose', get_bloginfo('template_url') . '/pikachoose/styles.css');
wp_enqueue_script('pikachoose', get_bloginfo('template_url') . '/pikachoose/pikachoose-min.js', array('jquery'), false, true);

4．footer.php の wp_footer() 直後に以下を追加。

<script language="javascript">
//<![CDATA[
jQuery(document).ready(function($){
  $("#pikame").PikaChoose();
  $("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});
//]]>
</script>

5．「header.php内のdiv id=”page”の真下」に書くコードの画像のパスをすべて
src="<?php bloginfo('template_url') ?>/pikachoose/1.jpg"
ref="<?php bloginfo('template_url') ?>/pikachoose/1.jpg"
のように変更（1.jpg 部分は各画像ファイル名に変える）。

で試してみてください。

[ShinichiN]

kzさん

ありがとうございました。無事に、表示されました！