teratail header banner
teratail header banner
質問するログイン新規登録
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

154閲覧

Swiperをループさせた時にループされず、空白が表示されるのを修正したいです。

gelsea

総合スコア43

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2025/07/08 13:03

編集2025/07/09 01:49

0

0

実現したいこと

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で解決を試みましたが、スライドしないようになってしまいました。(現在のコード)

補足

その他必要な情報がございましたら、質問にてご連絡いただければ用意させて頂きます。
どうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimbe

2025/07/08 15:34

java と javascript は関係無い言語です。 java のタグは外されたほうが良いと思います。
Lhankor_Mhy

2025/07/09 01:00

2点補足願います。 1.『記事数が足りない(5記事以上無い)カテゴリ』とありますが、コードには 'posts_per_page' => 3, とあるようでした。おそらく常に5記事ない状態になるのではないかと思うのですが、これは問題ありませんか? 2.『ZOZO TOWNのようにPC表示時、0.5 / 1 / 1 / 1 / 0.5のような表示になるよう』とのことですが、スクリプトに slidesPerView: 3, とあり、3件しか表示されないと思うのですが、これは問題ありませんか?
gelsea

2025/07/09 01:49

jimbe様 修正いたしました。 ご指摘ありがとうございます。
gelsea

2025/07/09 01:54

Lhankor_Mhy様 1.こちらはループは動作しているが、ループ後が空白になった際に 「表示する記事数より実際の記事数が少ないため、起こったのか?」と考え、 5から3に変更し、ループ状態を確認したたままになっておりました。申し訳ありません。 実装したいのは5記事にになります。 2.こちらは、chatgptで修正を何度もかけた際に変更になったと思われます。 0.5 / 1 / 1 / 1 / 0.5の表示の場合、適切なslidesperviewの数も分かっておりませんので、 ご教授いただければ幸いでございます。 どうぞよろしくお願いいたします。
jimbe

2025/07/09 12:41

編集ありがとうございます
guest

回答1

0

おそらく、以下の警告が出ているかと思います。

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

メッセージの通り、スライドを複製して枚数を増やすのがいいかと思います。

投稿2025/07/09 02:06

Lhankor_Mhy

総合スコア37502

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gelsea

2025/07/09 08:47

回答ありがとうございます。 警告はどこで確認すれば良いのでしょうか・・・。 やはり、記事数が足りないカテゴリについてはループが出来ないという事でしょうか・・・。 ご回答ありがとうございます。
Lhankor_Mhy

2025/07/09 09:24

警告は、ブラウザのdevtoolのコンソールに出ているのではないかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問