WordPressでjQueryを使う方法(基本)
-
本当に基本的のようで気が引けますが、みなさまご教授ください。
デフォルトのテーマをローカル環境下でカスタマイズしています。
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に直接書き込んだりしていますが、解決できずに困っています。
どうぞよろしくお願いします。
- トピック「WordPressでjQueryを使う方法(基本)」には新たに返信することはできません。