実現したいこと
Wordpressサイトで記事をSwiperでループ表示させたいです。
下記サイトと全く同じ形での実装を希望しています。
実装イメージ:ZOZO TOWNのファーストビュー(スライドバナー箇所)
https://zozo.jp/
記事数が足りない(5記事以上無い)カテゴリであっても、重複表示して
ZOZO TOWNのようにPC表示時、0.5 / 1 / 1 / 1 / 0.5のような表示になるよう
ループ処理がしたいです。
(もちろん、記事数が足りているカテゴリは、ZOZO TOWNのように表示させたいです。)
SP用のCSSはループが出来ていないので、まだ作成しておりませんが、
SP時は1記事のみ表示される形にしたいです。(実装イメージ:ZOZO TOWN)
お手数をお掛けいたしますが、どうぞよろしくお願い致します。
発生している問題・分からないこと
ループ処理を行ってもループしない、もしくは、ループしても空白が表示されるのみになっています。
(過去質問、chatGPTを駆使して修正を行ってまいりましたが、現在はループすらしない形になってしまいました。)
script部分の設定が間違っているのでしょうか...?
該当のソースコード
PHP
1<div class="campaign_wrapper"> 2 <div class="swiper"> 3 <div class="swiper-wrapper"> 4 <?php 5 $args = array( 6 'post_type' => 'campaign', 7 'showposts' => 3, 8 'posts_per_page' => 3, 9 ); 10 $query = new WP_Query($args); 11 if ($query->have_posts()) { 12 while ($query->have_posts()) { 13 $query->the_post(); 14 ?> 15 <div class="swiper-slide"> 16 <a href="<?php the_permalink(); ?>" class="swiper-slide-link"> 17 <div class="swiper-slide_campaign"> 18 <?php $field = SCF::get('back_img'); ?> 19 <?php if ($field): ?> 20 <img src="<?php echo esc_url(wp_get_attachment_url($field)); ?>" alt="<?php echo esc_attr(get_the_title()); ?>"> 21 <?php endif; ?> 22 <div class="campaign_textarea"> 23 <p class="campaign_headtitle"><?php the_title(); ?></p> 24 <p class="campaign_headtext"><?php echo SCF::get('cam_text'); ?></p> 25 </div> 26 </div> 27 </a> 28 </div> 29 <?php 30 } 31 } 32 // wp_reset_query(); 33 wp_reset_postdata(); 34 ?> 35 </div> 36 <div class="swiper-pagination"></div> 37 </div> 38</div> 39<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 40<script> 41document.addEventListener('DOMContentLoaded', function () { 42 const swiper = new Swiper('.swiper', { 43 loop: true, 44 slidesPerView: 1.5, // 画面幅に応じて調整するならbreakpointsでもOK 45 spaceBetween: 20, 46 pagination: { 47 el: '.swiper-pagination', 48 clickable: true, 49 }, 50 autoplay: { 51 delay: 3000, 52 disableOnInteraction: false, 53 }, 54 breakpoints: { 55 320: { 56 slidesPerView: 1.5, 57 }, 58 800: { 59 slidesPerView: 3, 60 } 61 } 62 }); 63}); 64</script> 65
CSS
1.swiper-slide { 2 height: 300px; 3 flex-shrink: 0; 4 position: relative; 5 margin-right: 30px; 6} 7.swiper-slide_campaign img{ 8 width: 100%; 9 height: 100%; 10 object-fit: cover; 11 display: block; 12} 13.swiper-slide_campaign .campaign_textarea{ 14 position: absolute; 15 bottom: 0%; 16 width: 92%; 17 background-color: rgba(0, 0, 0, 0.6); 18 padding: 4%; 19} 20.swiper-slide_campaign .campaign_textarea .campaign_headtitle{ 21 font-size: 24px; 22 font-weight: bold; 23 color: white; 24} 25.swiper-slide_campaign .campaign_textarea .campaign_headtext{ 26 font-size: 14px; 27 color: white; 28} 29.swiper-button-next, 30.swiper-button-prev { 31 display: none !important; 32} 33
PHP
1ヘッダー部分のリンク先は下記のとおりです。 2<link 3 rel="stylesheet" 4 href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" 5/> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 7
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
過去質問の回答のソースコードをコピペし、使用しましたが改善されませんでした。
chatgptで解決を試みましたが、スライドしないようになってしまいました。(現在のコード)
補足
その他必要な情報がございましたら、質問にてご連絡いただければ用意させて頂きます。
どうぞよろしくお願いします。
