WordPressでjQueryを適用する方法
-
基本的なことで申し訳ないのですが、皆様、ご教授下さい。
「sitemix」 というレンタルサーバー上でプログラミングを練習するために色々と試行錯誤をしています。
テーマは「Rotate Text 1.7」というものです。こちらで配布されている「pikachoose 4.5.0」というスライドショーを導入したいのですが正常な動作をさせることが出来ず困っています。
その中でも /pikachoose 4.5.0/pikachoose 4.5.0/exapmles/bottom/basic.html
のようなスライドショーを導入したいと思っています。やりたいこと:
・pikachoose 4.5.0 を導入したい
・今後の jquery 導入のための練習やったこと:
・類似した記事
を参考にする。・basic.htmlを開いて必要なファイルを確認する。
・theme内に「pichachoose」フォルダを作成して、確認したファイルや画像を転送する。
・header.phpの <?php wp_head(); ?> の直前に以下のコードを入力する。
<?php wp_enqueue_style('pikachoose', get_bloginfo('template_url') . '/pikachoose/base.css'); wp_enqueue_script('pikachoose', get_bloginfo('template_url') . '/pikachoose/jquery.jcarousel.min.js', array('jquery'), false, true); ?> <script type="text/javascript" src="pikachoose/jquery.pikachoose.full.js"></script> <script language="javascript"> jQuery(document).ready( function (){ jQuery("#pikame").PikaChoose(); }); </script>・同じく header.php 内の スライドショーを表示したい部分 <div id=”subbar”> にあった元々のコードを削除して以下のコードを入力する。
<div class="pikachoose"> <ul id="pikame" > <li><a href="http://www.pikachoose.com"><img src="<?php bloginfo('template_url') ?>/pikachoose/1.jpg"></a><span>This is an example of the basic theme.</span></li> <li><a href="http://www.pikachoose.com"><img src="<?php bloginfo('template_url') ?>/pikachoose/2.jpg"></a><span>jCarousel is supported and can be integrated with PikaChoose!</span></li> <li><a href="http://www.pikachoose.com"><img src="<?php bloginfo('template_url') ?>/pikachoose/3.jpg""/></a><span>Be sure to check out <a href="http://www.pikachoose.com">PikaChoose.com</a> for updates.</span></li> </ul> </div>結果:
の用に画像は適用されたのですが、スライドショーとしての機能が実装されていません。上記で書いた参考ページのように footer.php に jquery をヘッダーの方のコードを消して書き込んでみたりしましたが効果は見られませんでした。
初心者でサイトの幅などをコードを見ながらいじることが出来たレベルです。
参考になるサイトを探したりしましたがここまでが限界でした。皆様のお知恵を拝借したいのでよろしくお願いします。
トピック「WordPressでjQueryを適用する方法」には新たに返信することはできません。