「bxSlider」で賢威のメイン画像をスライドショーに変更する

メインビジュアルをスライドショーにしたい

ウェブサイトを「華やかにしたい」「サイトに動きをつけたい」、そのためにメイン画像をスライドショーにしてみたいと思いませんか？実はこういった要望も多く寄せられますが、賢威の機能にはメイン画像の設定はあるものの、スライドショー機能ありません。そこで今回は、jQueryプラグインの「bxSlider」を利用したスライダーの設置を紹介していきたいと思います。

今回の記事の目的

「bxSlider」を使ってスライドショー設置してみよう

メイン画像のカスタマイズといえば、スライドショーへのカスタマイズを一番に思い浮かべます。スライドショーの導入にあたっては、設置する画像を複数用意する必要はありますが、複数の画像を使って華やかに、さらにはキャッチコピーを用意し訴求を高めることにも適していると思います。ウェブサイトのトップページはユーザーの玄関口ですので、華やかに迎え入れるページにしていきましょう。

まずは公式サイトでファイルを準備

はじめに「bxSlider」にて、必要なファイルをダウンロードしていきます。公式サイトにアクセスして「画面右上」の「download」をクリックしファイルをダウンロードします。

Responsive jQuery Slider | bxSlider

実際に利用するファイルは以下の4つとなります。

jquery.bxslider.min.js
jquery.bxslider.css
images/bx_loader.gif
images/controls.png

準備したファイルをFTPでアップロード

ご自身のサーバのWordPressがインストールされている場所をFTPソフトでみてみます。賢威テンプレートへの適用を考えていきますので、テーマディレクトリにアップしていく形となります。

/wordpress/wp-content/themes/keni62_wp_corp_150911/js/ /wordpress/wp-content/themes/keni62_wp_corp_150911/images/ /wordpress/wp-content/themes/keni62_wp_corp_150911/jquery.bxslider.css

上記のようなディレクトリにアクセスし、「js」「images」にそれぞれの場所にアップロードしていきます。 ※賢威テンプレートには「css」ディレクトリはありませんので、テーマの直下にアップロードしています。

「header.php」をカスタマイズしよう

必要なファイルをアップした後は「header.php」に「jquery.bxslider.min.js」「jquery.bxslider.css」を呼び出す記述を追加するため、以下のコードを「</head>」内に書いていきます。「jquery」ライブラリ自体の呼び出しも必要な場合は記述しておきましょう。

<?php if (is_home() && is_front_page()): ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.min.js"></script>
<link href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<?php endif; ?>

トップページの時だけ表示させる条件分岐の中に呼び出しの記述と、「bxSlider」を利用するための記述を追加しました。

「index.php」をカスタマイズしよう

「index.php（メインインデックスのテンプレート）」には実際にスライドをさせる画像を設置していきます。「bxSlider」はあらかじめ設定した「class」の中に画像を配置するだけでスライドショーになるので、設置がカンタンです。

賢威のメイン画像のコードと差し替える

デフォルトでは賢威のメイン画像を設定するためのコードが入っているため、今回利用するスライドショー用のコードに差し替えていきます。

●変更前

<?php if (is_home() && is_front_page()): ?>
<!--メインイメージ-->
<div id="main-image">
<div id="main-image-in">
<?php
$mainimage = the_keni("mainimage");
if ( ! empty( $mainimage ))  { ?>
<img src="<?php echo esc_url( $mainimage ); ?>" class="header-image" alt="<?php echo esc_html(the_keni('mainimage_alt')); ?>" />
<?php } ?>
<div class="catch-copy">
<p><?php echo nl2br(esc_html(the_keni("catchcopy"))); ?></p>
</div>
</div>
</div>
<!--/メインイメージ-->
<?php endif; ?>

●変更後

<?php if (is_home() && is_front_page()): ?>
<!--メインイメージ-->
<div id="main-image">
<div id="main-image-in">
<ul class="bxslider">
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide001.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide002.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide003.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide004.png" /></li>
</ul>
</div>
</div>
<!--/メインイメージ-->
<?php endif; ?>

スライドショー用の画像は別途FTPでアップロードしておきましょう。

これまでの設定で上の画像のようなスライドショーを設置することができました。今回の例では「slide001.png」などのスライド用画像を設定してます。画像のアップと設置方法については、以前の記事を参考にしてみてください。

【賢威6.2】サイトタイトルをロゴ画像に変更する【レスポンシブ対応】

さらにカスタマイズをする場合は

ここまでの設定で4枚の画像がスライドする状態までカスタマイズができました。スライドショーになったことにより動きが出て華やかになりました！

十分スライドショーの形になりましたが、さらに「キャプションをつけたい」「画像の外側に矢印をつけたい」など、応用編を少し紹介したいと思います。

キャプションをつけてみよう

公式サイトでも紹介がありますが、各画像のしたに説明文を入れるカスタマイズをしてみましょう。少し記述が変わりますので、それぞれを以下のように変更していきます。

●変更前

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

●変更後

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});
});
</script>

「caption」を「true」にして、キャプションを利用できるような呼び出しに変更しています。さらに、「index.php」も以下の箇所を変更して、キャプションの文章を追加してみます。

●変更前

<ul class="bxslider">
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide001.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide002.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide003.png" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide004.png" /></li>
</ul>

●変更後

<ul class="bxslider">
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide001.png"  title="スライド画像1のキャプション" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide002.png"  title="スライド画像2のキャプション" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide003.png"  title="スライド画像3のキャプション" /></li>
  <li><img src="<?php bloginfo('template_url'); ?>/images/slide004.png"  title="スライド画像4のキャプション" /></li>
</ul>

上記のように「title」を記述することで、キャプションを表示することが可能となります。

画像の外側に矢印をつけたい

次のカスタマイズはスライドショーの横側に矢印を設置する方法を紹介していきます。どうせなので、ここでは矢印の画像もオリジナルにしてみましょう。

●スライドショー用の画像を用意

左右にそれぞれの矢印画像を用意しました。それぞれ「slide_left.png」「slide_right.png」として、先ほども解説した「images」ディレクトリにアップしておきます。

●「jquery.bxslider.css」を変更して矢印を調整しよう

次に矢印をオリジナルの画像に変更しつつ、位置の調整をおこないます。「jquery.bxslider.css」の以下の箇所を調整していきます。

●変更前

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

●変更後

.bx-wrapper .bx-prev {
	left: -50px;
	background:url(images/slide_left.png) no-repeat 0 0;
}
.bx-wrapper .bx-next {
	right: -50px;
	background:url(images/slide_right.png) no-repeat 0 0;
}

@media
only screen and (max-width : 667px){
.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}
}
/* マウスオーバー時のずれを修正 */
.bx-wrapper .bx-next:hover {
	background-position: 0 0;
}

上記のCSSの調整で矢印のカスタマイズが可能です。スライドショーの外側に矢印を表示させると、スマホ表示の際にどうしてもはみ出してしまいます。そのため、こちらのカスタマイズではスマホ表示の際はデフォルトの矢印で対応するように調整しています。

さらに、スライドショーの下部の●●となっているエリアを非表示にする場合は、以下の箇所を調整します。

●変更前

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

●変更後

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
	display:none;
}

ちょっと強引かもしれませんが、該当のエリアを「display:none;」で非表示にしています。このカスタマイズで以下のように、●●のエリアを削除することができました。