スライドショーjQueryプラグインをWordPressで使う！

ワードプレス jQuery

スライドショーを入れるためにシンプルなjQueryプラグインを入れました。かなり時間がかかってしまいましたが、WordPressフォーラムで助けていただいてやっとこさ、実装できました。下記、メモがわりにWordPressでjQueryを使う方法を。今回使ったのは、pikachooseですが、他のものでも同じような感じになる。以下の方法は、WordPressフォーラムで、kzさんという方が教えてくれました。

  • WordPressには、もとからjQueryが入っているので、本体をダウンロードしたりサーバにアップする必要はない。
  • テーマフォルダ直下に「pikachoose」フォルダ作成。
  • そのフォルダに、画像達と pikachoose-min.js, styles.css をコピー。
  • 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);
  • 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>
<||
-スライドショーを表示したい箇所に、以下を記入。
>||
<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>
  • 上記のコードの画像のパスをすべて

src="/pikachoose/1.jpg"
ref="/pikachoose/1.jpg"
のように変更（1.jpg 部分は各画像ファイル名に変える）。

これで、プラグインで設定されているデフォルトの形のスライドショーが出てくるので、あとはjavascriptとcssのコードを読みながら、デバッグソフトを使いながら少しずつ希望の形とスピードに整えていく。<<