bxSliderはjQueryベースのレスポンシブ対応コンテンツスライダー。
書き方はbxSliderサイトの通りなので、Wordpressで使う時の注意点。
jsとcssをWordpressで使えるようにする
bxSliderサイトからダウンロードしたjquery.bxslider.min.js、jquery.bxslider.cssを、Wordpressの子テーマに配置。
functions.phpで読み込み設定。
function bxslider_js() {
wp_enqueue_script( ‘jquery.bxslider.min.js’, get_bloginfo( ‘stylesheet_directory’) . ‘/js/jquery.bxslider.min.js’, array(), false, true );
}
add_action( ‘wp_enqueue_scripts’, ‘bxslider_js’);
function bxslider_css() {
wp_enqueue_style( ‘bxslidercss’, get_bloginfo( ‘stylesheet_directory’) . ‘/css/jquery.bxslider.css’, array(), null, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘bxslider_css’);
この例では、jsを
/wp-content/themes/子テーマディレクトリ/js/jquery.bxslider.min.js
cssは
/wp-content/themes/子テーマディレクトリ/css/jquery.bxslider.css
に配置している。
imagesはjquery.bxslider.cssの下に
ダウンロードしたbxSliderファイルのimagesディレクトリに「▶︎」のようなコントローラー画像、ローディング中のぐるぐる画像などが入っている。
jquery.bxslider.cssの記述が
background: url(images/bx_loader.gif) center center no-repeat #fff;
のようになっているので、cssがあるディレクトリにimagesを作る。
/wp-content/themes/子テーマディレクトリ/css/jquery.bxslider.css
/wp-content/themes/子テーマディレクトリ/css/images/bx_loader.gif
/wp-content/themes/子テーマディレクトリ/css/images/controls.png
こういう構造になっていればOK。
bxsliderを呼び出す時は$(function()では動かないので、jQuery()で呼び出す。
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘.bxslider’).bxSlider();
});
</script>
こんな感じ。