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

2018年12月2日

当サイトはアフィリエイト広告を利用しています。

プラグインなどを使わずに、自分でWordpress（ワードプレス）にbxsliderをインストールして利用する場合の設定方法を紹介します。

設定方法や使い方などは、公式サイトbxsliderに書かれています。

bxsliderを動かすには3つのステップが必要です。

  • bxsliderのインストール（ファイル一式をFTPでアップロード）
  • bxsliderを使いたいところにjavascriptを記述する
  • bxslider用のdivのボックスを作成する

まずは、bxsliderのJavascriptをダウンロードして、FTPでファイルをアップロードする必要があります。

bxsliderを動かすのに必要なファイルは、GitHubから一式ダウンロードしてきます。

bxsliderダウンロード
・【GitHub】bxslider（外部サイト）
※srcのフォルダ以下を全部ダウンロードしてきて、サーバーにアップします。

WordPressでbxsliderをサーバーにアップロードする

ダウンロードしてきたbxsliderのファイル一式をWordpressに設定していきます。

今回は子テーマに設定する方法を紹介します。

cssとeasingとbxsliderの3ファイルを読み込ませます。

下記は、子テーマフォルダの直下に「inc」というフォルダを作成して、そこにbxsliderのファイル一式をアップロードした場合です。
※ファイルがごちゃごちゃにならないので、おすすめです。

念のためincフォルダ以下のsrcディレクトリとそれ以下のフォルダ構成が間違っていないか確認しておきましょう。

function child_enqueue_parent_style() {
 //bxslider
 //css
 wp_enqueue_style( 'bxslider-style', get_stylesheet_directory_uri().'/inc/src/css/jquery.bxslider.css', false, '1.0', false);
 //js
 wp_register_script( 'bxslider-easing', get_stylesheet_directory_uri().'/inc/src/vender/jquery.easing.1.3.js', array('jquery'), '1.0', false);
 wp_register_script( 'bxslider-script', get_stylesheet_directory_uri().'/inc/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を利用するためのスクリプトを記述する

個々の投稿記事で利用する場合は、テキストエディタの状態で、投稿画面（ビジュアルエディタ不可）に下記のjavascriptを書きます。

もしくは、サイトのトップページで利用する場合は、トップページのPHPファイルに下記のjavascriptを書きます。

bxsliderで設定できる項目です。下記の設定を必要に応じてjavascriptに追加します。

bxsliderで設定できる項目

  • minSlides：最小のスライド表示数（画面が小さい場合に表示数が減りこの数だけ表示されます）
  • maxSlides：最大のスライド表示数（表示したい項目数が多い場合に最大でこの数だけ表示されます）
  • slideWidth：１スライドの表示サイズ（サイトの横幅に応じて調整が必要）
  • slideMargin：スライド同士のスペース
  • moveSlides：スライドが自動で動くときの動かす数
<script>
jQuery(function($){$(\'.slider\').bxSlider({
minSlides: 2,
maxSlides: 6,
slideWidth: 180,
slideMargin: 10,
moveSlides: 1,
auto: true,
autoHover: true,
pause: 5000,
});});
</script>

スライドさせたい項目を設定する

スライドさせたい項目にsliderクラスを指定して囲みます（下記のコード参照）。

テストする時でもmaxSlidesで指定した数の項目数は作成します。

slideWidthをうまく調整して横幅の表示を整えます。

sliderの中のdivのクラス名は何でも問題ありません。独自に成形するためのクラス名でOKです。

その中の項目にイメージ画像を追加すれば、WordpressテーマのWordPressテーマ「ストーク」みたいなスライダーを作成することができます。

イメージ画像をaタグで囲ってリンクをはることもできます。

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

あまりたくさんの画像を追加すると、Wordpressの表示速度が遅くなるので、その場合は、使用する画像を小さくして最適化する必要があります。

-ワードプレス
-