Swiper.jsを使って新着記事一覧を表示してみる


合唱団Flareのサイト (2023.03.15)
合唱団Flare第2回演奏会の動画公開 (2023.03.15)
Twitterのタイムラインの自動埋め込み (2021.11.04)
Cocoonのインデックス設定 (2021.10.09)
Facebookページの投稿をウェブサイトで「もっと見る」 (2021.09.22)
Facebookページに投稿した写真のMasonry表示 (2021.09.09)
Smash Balloon Custom Facebook Feed 4.0(最新版)について (2021.09.07)
Cocoon(WordPressテーマ)でウェブサイトを作る (2021.09.04)
Smash Balloon Social Post Feedで写真を表示させる方法 (2021.02.09)
Facebook グラフAPI v8.0 でページアクセストークンを取得する (2020.08.08)

せっかくSwiper.jsを導入したので、さまざまなカルーセル表示を試してみたいと思います。

新着記事一覧はプラグイン等で簡単に実装できるのですが、自分の思い通りのデザインや動きを実現させるために、自力でコードを書いてみて基本を知っておくのも大事ですよね。

Swiper.jsの導入については以下の記事を参考にしてください。

FacebookのFeedとSwiper.jsを使ってタイムライン表示をアレンジ

今回も、「phpコードを記述した別ファイルをテーマ内にアップロードして、そのファイルをショートコードで呼び出す」という方法で実装しています。もちろんfunctions.phpに直接記述してもよいのですが、外部ファイルにしておいたほうが細かい調整をするときに楽です。ちょっとした記述ミスでサイト全体が表示されなくなってしまう、というような危険を回避できますので。

今回は、new_posts_carousel.phpというファイルを作成してテーマフォルダ内にアップロードし、[myphp file='new_posts_carousel']というショートコードで呼び出すようにしています。

new_posts_carousel.phpは以下のようなコードにしています(一部cssは省略しています)。scriptに「effect: ‘coverflow’,」を追加するだけで、3次元的な動きが実現します。

<div class="swiper-container" style="padding-bottom: 50px; height: 250px;">
<div class="swiper-wrapper">

<?php
  global $post;
  $args = array( 'posts_per_page' => 10 );
  $myposts = get_posts( $args );
 
  foreach( $myposts as $post ) {
  setup_postdata($post);
?>

  <div class="swiper-slide" style="position:relative; height:200px;">

  <a href="<?php the_permalink() ?>">
  <div style="height:130px;background:url(<?php the_post_thumbnail_url('medium'); ?>) no-repeat center top / cover;"></div>
  </a>

  <div style="position:absolute;width:100%;bottom:0px;">
  <?php the_title(); ?> (<?php the_time('Y.m.d') ?>)
  </div>

  <div style="position:absolute;top:0px;right:0px;">
  <?php the_category(' | '); ?>
  </div>

  </div>
<?php
  }
  wp_reset_postdata();
?>

</div>

<div class="swiper-pagination" style="margin-bottom:10px;"></div>

</div>

<script src="【ファイルへのパス】/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    speed: 2500,
    slidesPerView: 2,
    spaceBetween: 3,
    centeredSlides : true,
    effect:'coverflow';
    breakpoints: {
        767: {
            slidesPerView: 1,
            spaceBetween: 5,
        }
    },
    pagination: {
        el: '.swiper-pagination',
     clickable: true,
    },
})
</script>