こんにちは！
今日はスライダーを作れるJSライブラリ「Swiper」を使って、プラグインを使わずにWordPressにスライダーを実装してみました。
WordPressにスライダーを表示させるプラグインは数あるのですが、なぜか「カルーセル」を無料で使えるプラグインがなかなか有りません。別にカルーセル表示にこだわらなければ、プラグインを使えばよいと思います（「Smart Slider 3」や「WP Carousel」が、良い感じでした！）。
もちろんプロプランを契約すればカルーセルのオプションも使えるのですが、1サイトにつき5,000～8,000円となっていて、カルーセル機能のためだけにそんなに出すのは…ということで、「Swiper」というライブラリを使って実装していきたいと思います。
デモ
おおまかな仕組み
「slider」というカテゴリースラッグの投稿があった場合に、その投稿のアイキャッチ画像がスライダーとして表示されるようにしました。
function.phpに以下を追記
// Swiperの読み込み
function enqueue_swiper_scripts() {
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js', array(), null, true);
wp_add_inline_script('swiper-js', "
// TOPスライダー
const swiperMain = new Swiper('.swiper', {
loop: true, // ループ有効
slidesPerView: 1, // ★重要
centeredSlides: true, // ★重要
spaceBetween: 5, // 画像の余白
speed: 1500,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
breakpoints: {
768: { slidesPerView: 1 }, // 横幅768～1024pxでは1枚だけ表示
1024: { slidesPerView: 1.3 } // 横幅1024px～では両端にもちょっと表示 ★重要
}
});
");
}
add_action('wp_enqueue_scripts', 'enqueue_swiper_scripts');sliderを動かすためのjsとオプションを記述します。
ポイント
- CDNについて：最初はSwiperの最新バージョン（11）を読み込んでいたのですが、それだとなぜかループの次の画像が一瞬表示されないというバグがあったので、jsについてはバージョン8を読み込んでいます。
- 「loop」を有効にすることでカルーセル的に表示されます。
- 「slidesPerView」オプションを「1.3」とすることで、一度に1.3枚を表示することができます。これにより両脇に0.3（各15%ずつ）の幅分見切れて表示されます。
- 「centeredSlides」を「true」にすることで、中央のスライダーが「アクティブ」になり（大きくなり）ます。
- スマホでは見切れずに1枚だけ表示させたい場合は、「breakpoints」のオプションで指定してください。その場合は、基本のslidesPerViewを「1」にしておく必要があります。
- 今回できるだけシンプルにするために、矢印やdotsは表示していませんが、オプションが用意されていますので、気になる方はSwiperのドキュメントを参照してください！
以下のPHPを作成
<div class="swiper">
<div class="swiper-wrapper">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'category_name' => 'slider',
'orderby' => 'date',
'order' => 'DESC',
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="swiper-slide">
<div class="top-slider-item">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<?php endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'category_name' => 'slider',
'orderby' => 'date',
'order' => 'DESC',
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="swiper-slide">
<div class="top-slider-item">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<?php endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>テーマファイルの、スライダーを表示させたい場所に上記phpを追記するか、別のphpファイルをテーマに追加して、ショートコードなどで表示したい場所に読み込めるようにしてください。
CSSに以下を追加
.top-slider-item img {
object-fit: cover;
height: 350px;
width: 100%;
}ポイント
- 「.top-slider-item img」に「height」「width」を指定することで、大きさの異なる画像も統一サイズのスライダーとして表示されるようになります。
「height」は実際に表示したいスライダーのサイズに調整してください。 - 「object-fit」を指定することで、縦横比を保ったまま、はみ出した部分をトリミングしてくれます。
以上で完成です！お試しください。