Flickity を使ってWordPressにスライダーを設置する方法
＼ ワードプレステーマの新定番！ ／
WordPressのサイトにおしゃれでスムーズなスライダーを表示したい場合、軽量かつ扱いやすいJavaScriptライブラリ「Flickity（フリキティ）」がおすすめです。本記事では、WordPressのサイドバーなどにバナー画像をスライダー表示する方法を、実際のコード付きで丁寧に解説します。
PHPファイルの編集を伴う箇所もありますので、作業の前には必ずバックアップを取ることを強くおすすめします。
Flickityとは？WordPressでも使えるスライダープラグイン
FlickityはMetafizzyが開発した軽量なJavaScriptスライダーライブラリで、カルーセル風のスライドやサムネイル付きスライドにも対応しています。jQueryに依存せず、CDNから読み込むだけで簡単に動作するため、WordPressでも非常に使いやすいツールです。
この記事のやり方で作るスライダー
右のようなバナー画像がスライドするスライダーを作ってみたいと思います。（こちらに乗せているのは画像になってしまっていて、この記事の中ではスライダーを再現せずスクリーンショットにさせていただいています。）
見本は「大人の音楽院」のサイドバーに設置してあります。（デザインを変更してしまう場合もあります）
WordPress で スライダーを設置できるプラグインなどは色々ありますが、例えば画像を2つ表示したい場合や、アフィリエイトなどで計測タグなどのコードが入ったものも含めてスライドさせたい場合などには、プラグインだけだと柔軟性にかける部分があります。
「Flickity（フリキティ）」を使ったスライダーならば自分がスライドさせたいものをHTML コードで作っていけば基本的に何でもスライドできるので便利です！
FlickityをWordPressテーマに読み込む方法
Flickityを利用するには、まずJavaScriptとCSSのライブラリを読み込む必要があります。WordPressでは、functions.php に追記することで、正しい方法でスクリプトを読み込むことができます。
注意functions.phpの編集を間違えると、WordPressが真っ白になるなど重大なエラーを引き起こすことがあります。必ずFTPまたはサーバーパネル経由で元に戻せる状態で行ってください。
functions.phpに以下を追記
function add_flickity_assets() {
if (!is_admin()) {
wp_enqueue_style('flickity-css', 'https://unpkg.com/flickity@2/dist/flickity.min.css');
wp_enqueue_script('flickity-js', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'add_flickity_assets');
このコードをテーマの functions.php に追加すると、FlickityのCSSとJavaScriptがフロントエンドに読み込まれます。
HTMLでスライダーを作成してウィジェットに貼り付ける
続いて、WordPressの「外観」→「ウィジェット」画面などから「カスタムHTML」ウィジェットを追加し、以下のようなHTMLコードを入力します。
これは「サムネイル付きスライダー」として、上にメイン画像、下に小さなサムネイルが並ぶ形式です。
表示したい場所にHTMLコードを入力
<!-- メインのスライダー -->
<div class="main-carousel js-flickity"
data-flickity='{
"asNavFor": ".nav-carousel",
"contain": true,
"pageDots": false,
"prevNextButtons": true,
"autoPlay": 3000,
"wrapAround": true
}'>
<div class="carousel-cell"><img src="https://example.com/banner1.jpg" alt="バナー1"></div>
<div class="carousel-cell"><img src="https://example.com/banner2.jpg" alt="バナー2"></div>
<div class="carousel-cell"><img src="https://example.com/banner3.jpg" alt="バナー3"></div>
</div>
<!-- サムネイルナビゲーション -->
<div class="nav-carousel js-flickity"
data-flickity='{
"asNavFor": ".main-carousel",
"contain": true,
"pageDots": false,
"prevNextButtons": false,
"cellAlign": "left"
}'>
<div class="carousel-cell"><img src="https://example.com/banner1.jpg" alt="バナー1サムネ"></div>
<div class="carousel-cell"><img src="https://example.com/banner2.jpg" alt="バナー2サムネ"></div>
<div class="carousel-cell"><img src="https://example.com/banner3.jpg" alt="バナー3サムネ"></div>
</div>
CSSでスタイルを整える
続いて、テーマのカスタマイザーや style.css に以下のCSSを追加して、表示を整えます。
.main-carousel {
width: 100%;
margin-bottom: 10px;
}
.main-carousel .carousel-cell {
width: 100%;
flex-shrink: 0;
}
.main-carousel .carousel-cell img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.nav-carousel {
width: 100%;
}
.nav-carousel .carousel-cell {
width: 25%;
margin-right: 5px;
cursor: pointer;
}
.nav-carousel .carousel-cell img {
width: 100%;
opacity: 0.6;
transition: opacity 0.3s;
}
.nav-carousel .carousel-cell.is-selected img {
opacity: 1;
}
.flickity-prev-next-button {
background: rgba(255,165,0,0.7);
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.flickity-prev-next-button.previous {
left: -30px;
}
.flickity-prev-next-button.next {
right: -30px;
}
.flickity-prev-next-button svg {
fill: white;
width: 20px;
height: 20px;
}上記CSSでは、矢印ボタンをオレンジの半透明で目立たせつつ、スマートフォンでもレイアウトが崩れないように画像の大きさを調整しています。
WordPressとFlickityで簡単にスライダーを作れる
Flickityは非常に軽量で扱いやすく、WordPressのテーマに柔軟に組み込むことができます。functions.phpの編集やJavaScriptの記述など、若干のカスタマイズは必要ですが、見栄えのよいスライダーを簡単に実装できます。
この記事のコードを参考にしながら慎重に導入してください。もしできないことやうまくいかない部分などは、有償にはなりますが個別に一緒に行うことができますので、一緒に作業サービスをお申込みいただくか、作業代行のお見積りのご連絡をください！
＼ ワードプレステーマの新定番！ ／