2019-07-25 / 最終更新日時 : 2019-07-28 Yasuko Yakuwa Customize

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

[myphp file=’new_posts_carousel’]

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

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

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

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

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

かわたま.net
【wordpress】投稿・固定ページ内にPHPファイルをインクルード(挿入/実行)させる
http://kawatama.net/web/428
最近,気がつけばwordpressネタばかりになってきてます。 かわたまです。 wordpressで固定ページや記事内にもphpファイル（任意のファイル）を読み込ませたいけど、可能なのでしょうか？ 調

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

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

  1. <div class="swiper-container" style="padding-bottom: 50px; height: 250px;">
  2. <div class="swiper-wrapper">
  4. <?php
  5. global $post;
  6. $args = array( 'posts_per_page' => 10 );
  7. $myposts = get_posts( $args );
  9. foreach( $myposts as $post ) {
  10. setup_postdata($post);
  11. ?>
  13. <div class="swiper-slide" style="position:relative; height:200px;">
  15. <a href="<?php the_permalink() ?>">
  16. <div style="height:130px;background:url(<?php the_post_thumbnail_url('medium'); ?>) no-repeat center top / cover;"></div>
  17. </a>
  19. <div style="position:absolute;width:100%;bottom:0px;">
  20. <?php the_title(); ?> (<?php the_time('Y.m.d') ?>)
  21. </div>
  23. <div style="position:absolute;top:0px;right:0px;">
  24. <?php the_category(' | '); ?>
  25. </div>
  27. </div>
  28. <?php
  29. }
  30. wp_reset_postdata();
  31. ?>
  33. </div>
  35. <div class="swiper-pagination" style="margin-bottom:10px;"></div>
  37. </div>
  39. <script src="【ファイルへのパス】/swiper.min.js"></script>
  40. <script>
  41. var mySwiper = new Swiper ('.swiper-container', {
  42. loop: true,
  43. autoplay: {
  44. delay: 3000,
  45. disableOnInteraction: false,
  46. },
  47. speed: 2500,
  48. slidesPerView: 2,
  49. spaceBetween: 3,
  50. centeredSlides : true,
  51. effect:'coverflow';
  52. breakpoints: {
  53. 767: {
  54. slidesPerView: 1,
  55. spaceBetween: 5,
  56. }
  57. },
  58. pagination: {
  59. el: '.swiper-pagination',
  60. 　　　　clickable: true,
  61. },
  62. })
  63. </script>
<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>

 

 

カテゴリー
Customize
タグ