teratail
回答率
85.29%
質問するログイン新規登録
トップWordPressに関する質問Swiperを複数、Wordpressの１ページ内で動かしたい

Q&A

解決済

2回答

428閲覧

Swiperを複数、Wordpressの１ページ内で動かしたい

nakatoshicraft
nakatoshicraft

総合スコア2

WordPress

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

0グッド

0クリップ

投稿2025/09/02 04:54

0

0

実現したいこと

Wordpress 1ページ内で複数（３つ）のSwiperを稼働させたい。

前提

HTML CSS　で組んだ静的ページでは３つとも正常に稼働しています。
Wordpress化に移行してみると、１つ目は稼働するのですが、２つ目３つ目は現れません。

発生している問題・エラーメッセージ

検証ツールには、swiper関連のエラーは出ていません

１つ目は稼働しているので、function.phpと.js に於いてSwiper自体は読み込めていると思いますので、２つ目３つ目の書き方が不足しているのだと思っています。

該当のソースコード

PHP
1function.php　に以下
2
3//スワイパー読み込み
4function my_script_init()
5{
6    wp_enqueue_script('swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', "", "1.0.1", true);
7
8//その他色々
9
10 wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1');
11
12    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.1', true);
13
14}
15add_action('wp_enqueue_scripts', 'my_script_init');
16
17
18
19front-page.php　には以下
20//スライダー１つ目
21<div class="main-mv__slider swiper">
22            <div class="swiper-wrapper">
23
24              <div class="swiper-slide">
25                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv01.jpg")); ?>" alt="">
26              </div>
27              <div class="swiper-slide">
28                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv02.jpg")); ?>" alt="">
29              </div>
30
31          </div>
32        </div>
33
34//スライダー２つ目
35<div class="slider">
36      <div class="slider__inner">
37        <div class="slider__slider swiper1">
38          <div class="swiper-wrapper">
39
40            <div class="swiper-slide">
41              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
42            </div>
43            <div class="swiper-slide">
44              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
45            </div>
46            <div class="swiper-slide">
47              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
48            </div>
49
50          </div>
51        </div>
52      </div>
53    </div>
54
55
56//スライダー３つ目
57<div class="member-slide">
58          <div class="member__slide--inner">
59            <div class="member__slider swiper2">
60              <div class="swiper-wrapper">
61
62               
63                <div class="swiper-slide">
64                  <div class="member__card">
65                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face01.jpg")); ?>" class=“face01” alt="">
66                    <div class="member__message">◯◯</div>
67                    <div class="member__name">◯◯</div>
68                  </div>
69                </div>
70<div class="swiper-slide">
71                  <div class="member__card">
72                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face02.jpg")); ?>" class=“face02” alt="">
73                    <div class="member__message">◯◯</div>
74                    <div class="member__name">◯◯</div>
75                  </div>
76                </div>
77<div class="swiper-slide">
78                  <div class="member__card">
79                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face03.jpg")); ?>" class=“face03” alt="">
80                    <div class="member__message">◯◯</div>
81                    <div class="member__name">◯◯</div>
82                  </div>
83                </div>
84
85              </div>
86            </div>
87          </div>
88        </div>
89
JS
1$(function () {
2
3//スライダー
4const swiper = new Swiper(".swiper", {
5  direction: 'vertical',
6  loop: true,
7  effect: "fade",
8  speed: 3000,
9  allowTouchMove: true,
10  autoplay: {
11    delay: 3000,
12  },
13});
14
15//スライダー1
16const swiper1 = new Swiper(".swiper1", {
17  direction: 'horizontal',
18  loop: true,
19  effect: "slide",
20  speed: 3000,
21  allowTouchMove: true,
22  spaceBetween: 34,
23  autoplay: {
24    delay: 0,
25  },
26});
27
28//スライダー2
29const swiper2 = new Swiper(".swiper2", {
30  direction: 'horizontal',
31  loop: true,
32  effect: "slide",
33  speed: 3000,
34  allowTouchMove: true,
35  spaceBetween: 43,
36  autoplay: {
37    delay: 0,
38  },
39});
40
CSS
1.main-mv__slider,
2.swiper-slide img {
3  aspect-ratio: 1440/823;
4  width: 100%;
5  height: auto;
6}
7@media screen and (max-width: 768px) {
8  .main-mv__slider,
9.swiper-slide img {
10    width: 100%;
11    height: 667px;
12  }
13}
14
15.swiper-slide img {
16     object-fit: cover;
17}
18
19.swiper {
20  margin-left: auto;
21  margin-right: auto;
22  overflow: hidden;
23  list-style: none;
24  padding: 0;
25  z-index: 1;
26}
27
28
29//スライダー１に当たる部分
30
31.slider {
32  width: 100%;
33  height: 440px;
34  margin-top: 101px;
35  position: relative;
36}
37@media screen and (max-width: 768px) {
38  .slider {
39    height: 270px;
40    margin-top: 41px;
41  }
42}
43
44.slider__inner {
45  display: flex;
46  position: relative;
47  width: 100%;
48  height: inherit;
49     object-fit: cover;
50  overflow: hidden;
51}
52@media screen and (max-width: 768px) {
53  .slider__inner {
54    height: inherit;
55  }
56}
57
58.slider__slider,
59.swiper1-slide img {
60  aspect-ratio: 506/393;
61  width: 506px;
62  height: 393px;
63}
64@media screen and (max-width: 768px) {
65  .slider__slider,
66.swiper1-slide img {
67    width: 271px;
68    height: 210px;
69  }
70}
71
72.swiper-slide img {
73  height: 100%;
74  width: 100%;
75     object-fit: cover;
76}
77
78.slide01-img {
79  height: 393px;
80  width: 506px;
81  border-radius: 60px;
82     object-fit: cover;
83}
84@media screen and (max-width: 768px) {
85  .slide01-img {
86    height: 211px;
87    width: 271px;
88  }
89}
90
91.slide02-img {
92  height: 393px;
93  width: 506px;
94  border-radius: 60px;
95  margin-top: 36px;
96     object-fit: cover;
97}
98@media screen and (max-width: 768px) {
99  .slide02-img {
100    height: 211px;
101    width: 271px;
102  }
103}
104
105.slide03-img {
106  height: 393px;
107  width: 506px;
108  border-radius: 60px;
109     object-fit: cover;
110}
111@media screen and (max-width: 768px) {
112  .slide03-img {
113    height: 211px;
114    width: 271px;
115  }
116}
117
118.swiper {
119  margin-left: auto;
120  margin-right: auto;
121  position: relative;
122  overflow: hidden;
123  list-style: none;
124  padding: 0;
125  z-index: 1;
126}
127
128.swiper-wrapper {
129  transition-timing-function: linear;
130}
131
132
133//スライダー２に当たる部分
134
135.member__slider,
136.swiper2-slide img {
137  aspect-ratio: 379/300;
138  width: 300px;
139  height: 379px;
140}
141@media screen and (max-width: 768px) {
142  .member__slider,
143.swiper2-slide img {
144    width: 246px;
145    height: 311px;
146  }
147}
148
149.member__slide--inner {
150  display: flex;
151  width: 100%;
152  height: inherit;
153     object-fit: cover;
154  overflow: hidden;
155}
156@media screen and (max-width: 768px) {
157  .member__slide--inner {
158    height: inherit;
159    margin-top: 50px;
160  }
161}
162
163.member__slider,
164.swiper2-slide img {
165  aspect-ratio: 379/300;
166  width: 300px;
167  height: 379px;
168}
169@media screen and (max-width: 768px) {
170  .member__slider,
171.swiper2-slide img {
172    width: 246px;
173    height: 311px;
174  }
175}
176
177.swiper-slide .member__card {
178  height: 100%;
179  width: 100%;
180  object-fit: cover;
181}
182
183.swiper {
184  margin-left: auto;
185  margin-right: auto;
186  position: relative;
187  overflow: hidden;
188  list-style: none;
189  padding: 0;
190  z-index: 1;
191}
192
193.swiper-wrapper {
194  transition-timing-function: linear;
195}
196

試したこと

ある記事で、jsを個別にすると良いとのことで、swiper２つ目３つ目を(function()~をつけて別に書きだして、（もちろん const から始まる部分は消して両立しないようにしております）などをやってみたのですが残念ながらうまくいきませんでした。
ただ変化としては、(function()~をつけて書き出してみるとinnerのhight幅内で画像（とテキスト）が現れますが、swiperが稼働しません。

補足情報（FW/ツールのバージョンなど）

おそらく、Swiperの HTML JS CSS　のどれを元のままにして、複数を区別するためにどこに加筆して差別化するのか、そのことがわかっていないのだと思います。そのあたりご指示くださいませ。
お力をお貸しただけますと幸甚でございます。お助けください。何卒よろしくお願いいたします。

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

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

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

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

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

hiroki-o
hiroki-o

2025/09/02 13:24

まだ調べていないですが、Swiper 8は3年くらい前のバージョンですが、8でないとダメでしょうか？ (最新は11)
nakatoshicraft
nakatoshicraft

2025/09/03 04:20

コメントありがとうございます。 バージョン８でないとダメ、ではございません。 調べた見本からそのまま使用して、静的サイトでは動いていたのでそのままにしていました。 11にしてみますと、 heightの高さ幅内で、swiper-slideで囲んだ要素が、縦に並んで一瞬現れて左にスライド移動して見えなくなって、あと何も起こらず真っ白状態。 ということが、再読み込みすると繰り返される。という状況になりました。 バージョンを変えたことで変化はありましたが、正常稼働には至りませんでした。 気づきをいただきましてありがとうございます。感謝申し上げます。
nakatoshicraft
nakatoshicraft

2025/09/05 04:56

kei344様 ご回答ありがとうございます。 今、PC修理中につき戻りましたら、ご報告いたします。
guest

回答2件

0

自己解決

ご閲覧、ご回答、いただきまして恐れ入ります。
結局、一つが稼働していたことに目を奪われて、head内の設定CSSを書いていないという誠に低次元の見落としがございまして、その加筆とCSSの修正を繰り返すことで結果、動かすことができました。
ですが、２つ目のswiperに於きましては、永続ループが途切れる症状が未解決でして、それを引き続き探求してまいります。
ひとまずは、３つのswiperをそれぞれ別の動きで同時に稼働させることはできましたので、一旦自己解決といたします。

該当のソースコード

PHP
1function.php　に以下
2
3//スワイパー読み込み
4function my_script_init()
5{
6    wp_enqueue_script('swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', "", "1.0.1", true);
7
8
9//☆☆この行を入れ忘れていました
10    wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
11
12
13
14
15//その他色々
16
17 wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1');
18
19 wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.1', true);
20
21}
22add_action('wp_enqueue_scripts', 'my_script_init');
23
24
25
26front-page.php　には以下
27//スライダー１つ目
28<div class="main-mv__slider swiper1”>
29            <div class="swiper-wrapper">
30
31              <div class="swiper-slide">
32                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv01.jpg")); ?>" alt="">
33              </div>
34              <div class="swiper-slide">
35                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv02.jpg")); ?>" alt="">
36              </div>
37
38          </div>
39        </div>
40
41//スライダー２つ目
42<div class="slider">
43      <div class="slider__inner">
44        <div class="slider__slider">
45          <div class="swiper2">
46          <div class="swiper-wrapper">
47
48            <div class="swiper-slide">
49              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
50            </div>
51            <div class="swiper-slide">
52              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
53            </div>
54            <div class="swiper-slide">
55              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
56            </div>
57
58          </div>
59        </div>
60      </div>
61    </div>
62
63
64//スライダー３つ目
65<div class="member-slide">
66          <div class="member__slide--inner">
67            <div class="member__slider">
68              <div class="swiper3">
69                <div class="swiper-wrapper">
70                <?php
71                  $args = [
72                    "post_type" => "staff",
73                    "posts_per_page" => 6
74                  ];
75                  $the_query = new WP_Query($args);
76                  ?>
77                  <?php if ($the_query->have_posts()) : ?>
78                    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
79                      <div class="swiper-slide">
80                        <div class="member__card">
81                          <a href="<?php the_permalink(); ?>" class="">
82                            <div class=“member-img”>
83                              <?php if (has_post_thumbnail()) : ?>
84                                <?php the_post_thumbnail('full', ['class' => 'member-img']); ?>
85                              <?php else : ?>
86                                <img class="" src="<?php echo esc_url(get_theme_file_uri("/images/noimage.jpg")); ?>)" alt="NoImage画像" />
87                              <?php endif; ?>
88                            </div>
89                            <div class="member__message1"><?php the_field('member__message'); ?></div>
90                            <div class="member__name"><?php the_field('member__name'); ?></div>
91                           </a>
92                        </div>
93                      </div>
94                    <?php endwhile; ?>
95                    <?php wp_reset_postdata(); ?>
96                  <?php else : ?>
97                    <p>記事が投稿されていません</p>
98                  <?php endif; ?>
99              </div>
100            </div>
101          </div>
102        </div>
103
JS
1$(function () {
2
3//スライダー1
4const swiper1 = new Swiper(".swiper1", {
5  direction: 'vertical',
6  loop: true,
7  effect: "fade",
8  speed: 3000,
9  allowTouchMove: true,
10  autoplay: {
11    delay: 3000,
12  },
13});
14
15//スライダー2
16const swiper2 = new Swiper(".swiper2", {
17  direction: 'horizontal',
18  loop: true,
19  effect: "slide",
20  speed: 3000,
21  allowTouchMove: true,
22  spaceBetween: 34,
23  autoplay: {
24    delay: 0,
25  },
26});
27
28//スライダー3
29const swiper3 = new Swiper(".swiper3", {
30  direction: 'horizontal',
31  loop: true,
32  effect: "slide",
33  speed: 3000,
34  allowTouchMove: true,
35  spaceBetween: 43,
36  autoplay: {
37    delay: 0,
38  },
39});
40
CSS
1//スライダー1に当たる部分
2.main-mv__slider,
3.swiper1-slide img {
4  aspect-ratio: 1440/823;
5  width: 100%;
6  height: auto;
7}
8@media screen and (max-width: 768px) {
9  .main-mv__slider,
10.swiper-slide img {
11    width: 100%;
12    height: 667px;
13  }
14}
15
16.swiper1-slide img {
17     object-fit: cover;
18}
19
20.swiper {
21  margin-left: auto;
22  margin-right: auto;
23  overflow: hidden;
24  list-style: none;
25  padding: 0;
26  z-index: 1;
27}
28
29
30//スライダー2に当たる部分
31
32.slider {
33  width: 100%;
34  height: 440px;
35  margin-top: 101px;
36  position: relative;
37}
38@media screen and (max-width: 768px) {
39  .slider {
40    height: 270px;
41    margin-top: 41px;
42  }
43}
44
45.slider__inner {
46  display: flex;
47  position: relative;
48  width: 100%;
49  height: inherit;
50     object-fit: cover;
51  overflow: hidden;
52}
53@media screen and (max-width: 768px) {
54  .slider__inner {
55    height: inherit;
56  }
57}
58
59.slider__slider,
60.swiper2-slide img {
61  aspect-ratio: 506/393;
62  width: 506px;
63  height: 393px;
64}
65@media screen and (max-width: 768px) {
66  .slider__slider,
67.swiper2-slide img {
68    width: 271px;
69    height: 210px;
70  }
71}
72
73.swiper-slide img {
74  height: 100%;
75  width: 100%;
76     object-fit: cover;
77}
78
79.slide01-img {
80  height: 393px;
81  width: 506px;
82  border-radius: 60px;
83     object-fit: cover;
84}
85@media screen and (max-width: 768px) {
86  .slide01-img {
87    height: 211px;
88    width: 271px;
89  }
90}
91
92.slide02-img {
93  height: 393px;
94  width: 506px;
95  border-radius: 60px;
96  margin-top: 36px;
97     object-fit: cover;
98}
99@media screen and (max-width: 768px) {
100  .slide02-img {
101    height: 211px;
102    width: 271px;
103  }
104}
105
106.slide03-img {
107  height: 393px;
108  width: 506px;
109  border-radius: 60px;
110     object-fit: cover;
111}
112@media screen and (max-width: 768px) {
113  .slide03-img {
114    height: 211px;
115    width: 271px;
116  }
117}
118
119.swiper {
120  margin-left: auto;
121  margin-right: auto;
122  position: relative;
123  overflow: hidden;
124  list-style: none;
125  padding: 0;
126  z-index: 1;
127}
128
129.swiper-wrapper {
130  transition-timing-function: linear;
131}
132
133
134//スライダー3に当たる部分
135
136.member__slide--inner {
137  display: flex;
138  width: 100%;
139  height: inherit;
140     object-fit: cover;
141  overflow: hidden;
142}
143@media screen and (max-width: 768px) {
144  .member__slide--inner {
145    height: inherit;
146  }
147}
148
149.member__slider,
150.swiper3-slide img {
151  aspect-ratio: 379/300;
152  width: 300px;
153  height: 379px;
154}
155@media screen and (max-width: 768px) {
156  .member__slider,
157.swiper3-slide img {
158    width: 246px;
159    height: 311px;
160  }
161}
162
163.swiper-slide .member__card {
164  height: 100%;
165  width: 100%;
166  object-fit: cover;
167}
168
169.member-img {
170  height: 379px;
171  width: 300px;
172  border-radius: 30px;
173  //object-fit: cover;
174
175  @include mq("md") {
176    height: 311px;
177    width: 246px;
178  }
179}
180
181
182.swiper {
183  margin-left: auto;
184  margin-right: auto;
185  position: relative;
186  overflow: hidden;
187  list-style: none;
188  padding: 0;
189  z-index: 1;
190}
191
192.swiper-wrapper {
193  transition-timing-function: linear;
194}

投稿2025/09/17 12:21

nakatoshicraft
nakatoshicraft

総合スコア2

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

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

0

slider__slider swiper1->slider__slider swiper swiper1
member__slider swiper2->member__slider swiper swiper2
にすれば出ませんか？

投稿2025/09/04 03:15

kei344
kei344

総合スコア69643

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

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

nakatoshicraft
nakatoshicraft

2025/09/06 05:16

この度はご回答をありがとうございます。 ご指示いただきました通り、swiper を加筆してみたのですが、結果うまくいきませんでした。 一瞬あらわれて左に流れていって、それで終わってしまう、という状況です。 その消える場所を(検証ツール)で見てみると、 .slider__slider, .swiper1-slide img { aspect-ratio: 506/393; width: 506px; height: 393px; } の幅が横中央に指定されていて、そこの左端から消えてしまうという状況で、 .slider__sliderがここにあることでその指定した幅が反映してしまっているようなので、スライド自体を画面幅で稼働させるにはそのあたりも解消しないといけないようです。 これも修正しなければならない一点ということであるということで、 ググりつつ組んだ静的サイトでは順調に稼働していたものが、Wordpressへの移植をした途端になぜ動かなくなるのか・・　ということに意識が引っ張られていると時間を無駄にしてしまうということ、のようにも思えてまいりました Wordpressへの移植の注意点など、様々にもう一度検証しつつ修正点を見ていこうと思います。 ご回答に感謝いたしております、もしできましたら引き続きよろしくお願い申し上げます。 ありがとうございます。
nakatoshicraft
nakatoshicraft

2025/09/28 04:12

結論 <div class="slider"> <div class="slider__slider"> <div class="swiper swiper2"> <div class="swiper-wrapper"> とし、それぞれにCSSを当てることで解決しました。 ヒントを頂きありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップWordPressに関する質問

Swiperを複数、Wordpressの１ページ内で動かしたい