BTC:--
ETH:--
BCH:--
XRP:--

WordPressでbxsliderを利用する時の設定方法

WordPressでbxsliderを利用する時の設定方法

WordPressでdxsliderを利用する場合の設定方法を紹介します。
紹介するのは、dxsliderのJavascriptをダウンロードしてきてそれを設定する方法です。

GitHubからdxsliderをダウンロード
※srcのフォルダ以下を全部ダウンロードしてきて、サーバーにアップします。

dxsliderの設定

ダウンロードしてきたdxsliderのJS(javascript)をWordpressに設定します。
今回は子テーマに設定する方法を紹介します(子テーマでなければ、wp_register_scriptがいらないだけかもしれません)。

cssとeasingとbxsliderを読み込ませます。

function child_enqueue_parent_style() {
 //bxslider
 //css
 wp_enqueue_style( 'bxslider-style', get_stylesheet_directory_uri().'/必要に応じて指定/src/css/jquery.bxslider.css', false, '1.0', false);
 //js
 wp_register_script( 'bxslider-easing', get_stylesheet_directory_uri().'/必要に応じて指定/src/vender/jquery.easing.1.3.js', array('jquery'), '1.0', false);
 wp_register_script( 'bxslider-script', get_stylesheet_directory_uri().'/必要に応じて指定/src/js/jquery.bxslider.js', array('jquery','bxslider-easing'), '1.0', false);
 wp_enqueue_script( 'bxslider-easing' );
 wp_enqueue_script( 'bxslider-script' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_parent_style' );

bxsliderの設定

投稿記事であれば、記事の投稿画面で、サイトのトップページなどで利用するなら、phpファイルにbxsliderの初期設定のJSを記述します。

それっぽくみせるのに、下記の初期設定は追加したほうがよいです。
・minSlides:最小のスライド表示数(画面が小さい場合に表示数が減りこの数だけ表示されます)
・maxSlides:最大のスライド表示数(表示したい項目数が多い場合に最大でこの数だけ表示されます)
・slideWidth:1スライドの表示サイズ(サイトの横幅に応じて調整が必要)
・slideMargin:スライド同士のスペース
・moveSlides:スライドが自動で動くときの動かす数

<script>
jQuery(function($){$(\'.slider\').bxSlider({
minSlides: 2,
maxSlides: 6,
slideWidth: 180,
slideMargin: 10,
moveSlides: 1,
auto: true,
autoHover: true,
pause: 5000,
});});
</script>

スライドさせたい項目を指定classで囲う

スライドさせたい項目にsliderクラスを指定して囲みます。
テストする時でもmaxSlidesで指定した数の項目数は作成します。
slideWidthをうまく調整して横幅の表示を整えます。

<div class="slider">
<div class="適当">項目1</div>
<div class="適当">項目2</div>
</div>

sliderクラスの中の項目部分をループさせて記事一覧を作れば、Wordpressテーマのハミングバードみたいなスライドを作成することができます。

メニューを閉じる