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

[myphp file=’new_posts_carousel’]

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

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

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

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

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

【wordpress】投稿・固定ページ内にPHPファイルをインクルード(挿入/実行)させる

最近,気がつけばwordpressネタばかりになってきてます。かわたまです。 wordpressで固定ページや記事内にもphpファイル（任意のファイル）を読み込ませたいけど、可能なのでしょうか？調

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

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

<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>