「Flickity」を使ってスマホ対応のスライドショーをWordPressに設置してみた

特集記事やピックアップ記事など、読んでほしい記事に動きを付けることによって目立たせることのできるスライドショー。視覚効果で注意を引くというだけでなく、デザイン的にも華やかになるので、WEBサイトをプロっぽく見せるためにも有効です。

今回はそんな華やかなスライドショーをWEBサイトに設置していく手順を紹介していきたいと思います。もちろん一からプログラムを組んでスライドショーを作っていくのは難しいので、JavaScriptライブラリ「Flickity」という便利で簡単に設置できるスライドショーを使って解説していきたいと思います。

1 どうして「Flickity」を選んだのか
2 設置方法
- 2.1 CDNコードの書き方
- 2.2 HTMLの書き方
3 オプションの種類
4 オプションの設定方法
5 「Flickity」設置サンプル
- 5.1 HTML
- 5.2 追記したCSS

どうして「Flickity」を選んだのか

まず、どうして「Flickity」を使ったのかというと、設置が簡単なのは言うまでもなく、スライドショーであったら良いなと思う機能が搭載されているからです。

たとえば以下のような機能があります。

レスポンシブに対応
スマホに欠かせないフリック入力
jQeryなしで使える
CDNで簡単に設置
HTML5のデータ属性で機能拡張

レスポンシブや指先で画面上でスライドさせるだけで左右に動かすことのできるフリック入力は今の時代当たり前に必要ですよね。

また用意されているオプション機能を使うのにHTMLに追記していくだけなので、javascriptなどのプログラムをいじる必要がないのも、僕が「Flickity」を使っている理由です。

それでは「Flickity」を設置していきましょう。

設置方法

まず、設置するためには本家サイトからjavascriptとCSSファイルをダウンロ―ドするのが一般的ですが、そんなの面倒くさいので、CDNを使う方法で紹介します。

CDNコードの書き方

以下のコードをコピーしてheader.phpファイルの<head>～<./head>間に貼り付けてください。

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

1 2	<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

この2行を貼り付けるだけで、javascriptとCSSを自動的に読み込むことができます。

HTMLの書き方

次にスライドショーを作るために、設置したい場所に以下のHTMLコードを記入してください。

<ul class="js-flickity">
<li class="gallery-cell">画像1</li>
<li class="gallery-cell">画像2</li>
<li class="gallery-cell">画像3</li>
</ul>

</ul>

基本的な設定は以上で完了です。<li></li>の部分に画像を入れていけばスライドショーの完成です。

どうでしょうか？ビックリするくらい簡単ですよね。

オプションの種類

ただ、このままだと機能的にシンプル過ぎるので、オプションで機能を拡張していきましょう。

主な機能は以下の通りです。

wrapAround

スライドしていく子要素を無限にループさせるかどうかの設定です。初期設定は’false’が設定されているので、端まで行けば行き止まりになります。

autoPlay

自動でスライドをスクロールさせるかどうかを設定する項目です。初期設定は’false’なので、自動スクロールにしたければ’true’に変更してください。

cellAlign

スライドする子要素を「左揃え」「中央揃え」「右揃え」のいずれかに指定できる項目です。

freeScroll

タッチでスライドさせた時に、きちんとスライドが指定位置にかっちりと収まるかどうかを設定する項目。初期設定は’false’なのできちんと指定位置に収まる設定になっています。’true’にするとスライドさせたところで動きが止まる感じ。説明が難しので試してください。

accessibility

キーボードの「←」「→」を使ってスライドを動かすことができます。初期設定は’true’なので、必要なければ’false’にしてください。

draggable

マウスやフリック入力などのドラッグ操作でスライドさせるかどうかの設定。初期設定は’true’なので、操作できるようになっています。

prevNextButtons

スライダーの左右にある「次の記事」「前の記事」ボタンを表示するかどうかの設定する項目。初期設定は’true’ですが、表示したくなければ’false’を設定してください。

pageDots

スライダーの下部にあるドットをナビを表示するかどうかを設定する項目。初期設定は’true’ですが、表示したくなければ’false’を設定してください。

オプションの設定方法

通常のライブラリーで公開されているスライダーであれば、javascriptなどにコードを追記して、オプションを設定するのですが、「Flickity」であれば、HTMLに追加するだけなので、簡単にオプション機能を追加できます。

書き方は以下の通りです。先ほどのHTMLに追記してみましょう。

<ul class="js-flickity" data-flickity-options='{"wrapAround": true , "autoPlay": true }'>
<li class="gallery-cell">画像1</li>
<li class="gallery-cell">画像2</li>
<li class="gallery-cell">画像3</li>
</ul>

</ul>

追加したオプションは「”wrapAround”: true」と「”autoPlay”: true」です。

”wrapAround”: trueで、行き止まりにならないようにスライダーをループさせて、”autoPlay”: trueで自動でスクロールさせるように設定しました。

「Flickity」設置サンプル

それでは、最後にこのブログに設置しているスライダーのコードを紹介します。

HTML

<div class="flickity-area wrap">
<ul class="js-flickity" data-flickity-options='{"wrapAround": true , "autoPlay": true }'>
<?php
$postslist = get_posts('post_type=post&taxonomy=notice&term=pickup');
foreach ($postslist as $post) : setup_postdata($post);
?>
<li class="carousel-cell">
<a href="<?php the_permalink(); ?>">
<div class="flickity-main">
<figure class="eyecatch">
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('bones-thumb-1618'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/thumb.jpg">
<?php endif; ?>
</figure>
<div class="title"><?php the_title(); ?></div>
<div class="category">
<span>
<?php
if ($terms = get_the_terms($post->ID, 'notice')) {
foreach ( $terms as $term ) {
echo esc_html($term->name);
}
}
?>
</span>
</div>
</div>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>

<?php

$postslist = get_posts('post_type=post&taxonomy=notice&term=pickup');

foreach ($postslist as $post) : setup_postdata($post);

<?php if( has_post_thumbnail() ): ?>

<?php the_post_thumbnail('bones-thumb-1618'); ?>

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/thumb.jpg">

<?php endif; ?>

</figure>

<span>

<?php

if ($terms = get_the_terms($post->ID, 'notice')) {

foreach ( $terms as $term ) {

echo esc_html($term->name);

}

</span>

</div>

</a>

</li>

<?php endforeach; ?>

</ul>

</div>

追記したCSS

.flickity-area {
padding: 50px 0 0 0;
ul {
margin: 0;
}
li{
width: 100%;
}
a {
text-decoration: none;
}
img {
width: 100%;
height: auto;
}
.title {
position: absolute;
bottom: 1em;
margin: 0 .75em;
color: #fff;
}
.category {
position: absolute;
top: 1em;
left: 1em;
padding: 0.3em 1em;
font-size:0.75em;
border: 1px solid #fff;
}
}
.flickity-main {
position: relative;
width: 100%;
min-height: 95px;
font-weight: 900;
color: #fff;
background: #000;
text-shadow: 0 0 5px #000;
}