トップページに動的コンテンツを入れると画面が華やいでみえますよね。今回は「Java Script」のスライダーを埋め込んでみたいと思います。このページのトップにも使っています。

用意するもの

画面右上の「Download」からjquerybxslider.zipをダウンロードします。
※この記事を書いている時点でのレイアウトですので、DLの場所が変わる場合もあります）

これらをWORDPRESSindex.php同階層に「js」フォルダを作り、その中にアップロードします。

index.php
js/images/
js/plugind/
js/bower.json
js/jquery.bxslider.css
js/jquery.bxslider.js
js/jquery.bxslider.min.js
js/readme.md

このような感じになります。

それとindex.phpと同じ階層に「img」フォルダを作り
s001.jpg
s002.jpg
s003.jpg
をテスト用に作り「img」フォルダ内にアップロードしておきます。
※横幅は542ピクセルで作ってみてください。

Stringer3のカスタマイズ

home.phpを編集します。
一行目の

<?php get_header(); ?>

の直後の２行目から下記ソースを記入

<!--slider-->
<link rel="stylesheet" href="./js/jquery.bxslider.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="./js/jquery.bxslider.min.js"></script>
<div id="slider1">
<div><img src="img/s001.jpg" title="01" alt="01"></a></div>
<div><img src="img/s002.jpg" title="02" alt="02"></a></div>
<div><img src="img/s003.jpg" title="03" alt="03"></a></div>
</div><!--end of #slider-->
<script>
jQuery(function($){
$('#slider1').bxSlider({
auto:true,
pause:6500,
captions: true
});
});
</script>

動作サンプル