みなさんこんにちは
Wordpressでカスタムヘッダの画像をスライドショーにしたかったのでいろいろ調べてみました
jQueryプラグインのFlexSliderを使った方法が下記のページに紹介されているので試してみたところ,とりあえず上手く動いたように見えるのですが....。
http://blog.raizzenet.com/how-to-make-images-of-custom-header-to-slideshow/
FlexSliderのオプションを設定しようとすると動かなくなってしまいました。
試したことは以下です
元になるWordpressのテンプレートはtwenty Seventeenを使用しています。
このヘッダ画像をスライドショーにしたいと思っています。
header-image.phpの
<?php the_custom_header_markup(); ?>
となっている部分を
<?php $header_images = get_uploaded_header_images(); if ($header_images) { echo '<div class="flexslider">'; echo '<ul class="slides">'; foreach ($header_images as $header_image) { echo '<li><img src="' . $header_image['url'] . '" /></li>'; } echo '</ul>'; echo '</div>'; } ?>
に差し替えました
footer.phpの</body>の直前に以下のスクリプトを挿入
<script type="text/javascript" charset="utf-8"> jQuery(window).load(function() { jQuery('.flexslider').flexslider(); }); </script>
この時点ではとりあえず動くようになりました。
FlexSliderのオプションを設定するためにfooter.phpに書いたスクリプトのflexslider()に値を渡そうとすると...動かなくなりました。
<script type="text/javascript" charset="utf-8"> jQuery(window).load(function() { jQuery('.flexslider').flexslider({ animation: "slide", controlNav:false, directionNav:false, slideshowSpeed:1000 }); }); </script>
オプションの内容を変えたりいろいろ試したのですが...そもそもオプションをいれると画像が表示されなくなります。
何処が悪いでしょうか?
よろしくお願いします。
あなたの回答
tips
プレビュー