WordPressでSwiper.jsを実装する

WordPressで画像の表示をスライダーを実装したいと思い、

https://digipress.digi-state.com/tech/introducing-swiper-js/

のサイトを参考に実装したいと思っています。

WordPressでは、OneToneというテーマを使用しており、子テーマ（style.css、function.php）を使用しております。

先のページを参考に（コピペですが）

CSSの読み込み

<head>
   ...
   <link rel="stylesheet" href="path/to/swiper.min.css" />
  
   <!-- CDNの場合 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />
</head>

Javascriptの読み込み

<body>
   ...
   <script src="path/to/swiper.min.js"></script>
  
   <!-- CDNの場合 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
</body>

HTML

```HTML

<div class="swiper-container">
    <!-- 全スライドをまとめるラッパー -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
 
    <!-- ページネーションを表示する場合 -->
    <div class="swiper-pagination"></div>
 
    <!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- スクロールバーを表示する場合 -->
    <div class="swiper-scrollbar"></div>
</div>

style.cssに
    ```style.css
.swiper-container {
        width: 600px;
        height: 300px;
    }
.swiper-container {
        width: 100%;
        height: 100vh;
    }

function.phpに貼り付け

```function.php

var mySwiper = new Swiper ('.swiper-container', {
// オプションパラメータ(一部のみ抜粋)
loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
slidesPerView: 4, // 何枚のスライドを表示するか
spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)

    // スライダーの自動再生
    // autoplay: true 　のみなら既定値での自動再生
    autoplay: {
      delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
      stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
      disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
    },
 
    // レスポンシブ化条件
    breakpoints: {
      // 980ピクセル幅以下になったら
      980: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      // 640ピクセル幅以下になったら
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      }
    },
 
    // ページネーションを表示する場合
    pagination: {
      el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
    },
 
    // 前後スライドへのナビゲーションを表示する場合
    navigation: {
      nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
      prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
    },
 
    // スクロールバーを表示する場合
    scrollbar: {
      el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
    }
  });

のようにしましたが、スライドが実装されません。

なぜでしょうか。

s8_chu

2018/09/29 20:52 編集

質問文に書かれているコードがすべてですか？

退会済みユーザー

2018/09/30 03:21

コードは上記が全てです。

行動規範の内容に同意します

回答4件

確認ですが
swiper.min.jsやswiper.min.cssファイルはきちんとダウンロードしてきて、htmlフォルダと同じ階層のpathフォルダの中のtoフォルダの中に入れてますか?
・よくあるパターンで、階層違いがある可能性が１点。
・更新に時間がかかっており、更新箇所がブラウザキャッシュにより反映されていないなどの可能性も少なからず残ります。

また、html側でも既存のページに埋め込みたい場合、サイズ指定が全体として合わないケースも稀にございます。
入れ子構造になってるためにその辺の微調整が必要だったり。
できるだけプレーンなページに挿入させることでテストをした方が最初は良いかもしれませんよ?(すでにそうだったらすいませんが？)

投稿2018/09/29 20:17

hectopascal1013

総合スコア466

退会済みユーザー

2018/09/30 03:25

CSS、jsの読み込みはCDNの場合で記述したので問題ないと思いましたが、何も起こらなかったので、公式からswiperをDLしてきてindex.phpが置かれている階層と同じ場所にフォルダを置いて、swiper.min.jsの読み込みの為に<body>タグ内に、やswiper.min.css読み込みの為に<head>タグ内にそれぞれのパスを記述したつもりですが・・・。何も変化が起こりません。

hectopascal1013

2018/09/30 04:29

>index.phpが置かれている階層と同じ場所にフォルダその場合、フォルダの書き込み方は、 ☓　path/to/swiper.min.js ◎　./path/to/swiper.min.js では？相対パスと絶対パスの違いはローカルとネット上であるので、試してみてご確認ください。違ったらすいませんが。。。あとは、実装導入部分だけ書いても仕方ないので、index.phpのプレーンな内容そのまま書き込んでどこに入れたか?ですね。情報が少なくて、原因特定できないかと。書いたほうがレス付きやすく解答早いと思いますです。

退会済みユーザー

2018/09/30 05:21

index.phpが置かれている階層と同じフォルダ←間違いでした。正しくは、header.phpというファイルがあり（<head>タグが記述されている）、同じ階層に「swiper-4.4.1」フォルダがあり、その中に「dist」ファルダがあり、さらにその中に「css」フォルダがあり、その中に「swiper.min.css」ありますので、<head>タグ内に<link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css" />を記述しています。jsに関してもfooter.php（<body>タグが記述されている）と同じ階層に「swiper-4.4.1」フォルダがあり、その中に「dist」ファルダがあり、さらにその中に「js」フォルダがあり、その中に「swiper.min.js」がありますので、<body>タグ内に「<script src="./swiper-4.4.1/dist/js/swiper.min.js"></script>」という記述をに書いています。誤っていますでしょうか。

hectopascal1013

2018/09/30 05:24

大切なのは、header.phpとの関係ではなくて、あくまでindex何じゃないの?という疑問が。。。 index.phpって、そのテンプレで無いんでしたっけ?

退会済みユーザー

2018/09/30 05:34

あります。

退会済みユーザー

2018/09/30 05:49

何とか、パスをしっかり記述したところ、cssとjsの読み込みは出来ました。(ブラウザの開発ツールでもnot foundのエラーは出なくなりました。)ただ、スライドが実装されません。

hectopascal1013

2018/09/30 06:19

他にエラーメッセージはありませんか？あるとしたら、予め伝えておいていただかないと、伝わらないですし、解決に遠回りになるだけですよ? 何を実装していて、何がされていないのか。(しているとおっしゃっていたものがされていなかったり。。) ということがありますので、判断つきません。すいません。私にはわかりません。

退会済みユーザー

2018/09/30 06:33

「Uncaught SyntaxError: Unexpected token <　　　　　(index):168 」　というエラーが出ています。

hectopascal1013

2018/09/30 07:39

function.phpは競合が起こりやすいのでは?他でindexなどでまとめられたらと思い発言したのですが。。ちょっと、やられていることが伝わりづらい文章となっております。何されたのか、何をしていないのか、判然としませんでした。

退会済みユーザー

2018/09/30 07:58

index.phpに全てまとめてみましたが、まったく動作しませんでした。WordPressがすごく扱いづらいです。というか、私の勉強不足、力不足ではあるのですが。。。

行動規範の内容に同意します

一応、全部一つのファイルに載せた所、指定の画像が存在しない以外は。実装されてるみたいっす。
indexにリンクやscript,styleを乗っけてみて、成功したら外部ファイル化したらよろしいかと。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<style>
6	img{background-color: gray;}
7</style>
8<title>template</title>
9<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.css" />
10<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" />
11<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
13
14</head>
15<body>
16	
17<div class="swiper-container">
18<!-- 全スライドをまとめるラッパー -->
19<div class="swiper-wrapper">
20<!-- 各スライド -->
21<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_a08afe4b27d04ad79bc156fec5491967mv2-300x186.jpg" alt="" width="300" height="186" class="alignnone size-medium wp-image-51" /></div>
22<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_afd907f74b6c4181b6447ddbf986e067_mv2-300x186.png" alt="" width="300" height="186" class="alignnone size-medium wp-image-176" /></div>
23<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_9f7dc2f4572340aca0c39948937f54a4_mv2-300x186.jpg" alt="" width="300" height="186" class="alignnone size-medium wp-image-170" /></div>
24</div>
25
26<!-- ページネーションを表示する場合 -->
27<div class="swiper-pagination"></div>
28 <!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 -->
29<div class="swiper-button-prev"></div>
30<div class="swiper-button-next"></div>
31<!-- スクロールバーを表示する場合 -->
32<div class="swiper-scrollbar"></div>
33</div>
34
35<script>
36var mySwiper = new Swiper ('.swiper-container', {
37        // オプションパラメータ(一部のみ抜粋)
38        loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
39        speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
40        slidesPerView: 4, // 何枚のスライドを表示するか
41        spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
42        direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
43        effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)
44
45        // スライダーの自動再生
46        // autoplay: true 　のみなら既定値での自動再生
47        autoplay: {
48          delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
49          stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
50          disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
51        },
52
53        // レスポンシブ化条件
54        breakpoints: {
55          // 980ピクセル幅以下になったら
56          980: {
57            slidesPerView: 3,
58            spaceBetween: 30
59          },
60          // 640ピクセル幅以下になったら
61          640: {
62            slidesPerView: 2,
63            spaceBetween: 20
64          }
65        },
66
67        // ページネーションを表示する場合
68        pagination: {
69          el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
70        },
71
72        // 前後スライドへのナビゲーションを表示する場合
73        navigation: {
74          nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
75          prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
76        },
77
78        // スクロールバーを表示する場合
79        scrollbar: {
80          el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
81        }
82      });
83</script>
84</body>
85</html>

投稿2018/09/30 06:40

編集2018/09/30 06:52

hectopascal1013

総合スコア466

ベストアンサー

そもそも、なんで、scriptをfunction.phpにかきこんだんでしょうか?

投稿2018/09/30 06:22

hectopascal1013

総合スコア466

退会済みユーザー

2018/09/30 06:30

function.phpに書き込むものだと思っていました。htmlに<script></script>で囲んで、記述したところ、「Uncaught SyntaxError: Unexpected token <」のエラーが出ました。

hectopascal1013

2018/09/30 06:31

sucriptの囲い方で<が重複してませんか?

退会済みユーザー

2018/09/30 07:24

重複は見つかりません。　あきらめます。。。

hectopascal1013

2018/09/30 07:33

一応、ここまで、時間割いて協力してきたつもりですんで、質問を投げかけられたからには最後まで遂行していただきたかったですね。一応倫理として。

退会済みユーザー

2018/09/30 07:37 編集

先ほど、一つにまとめてみたら動いたというような、ログがありましたので全て一つにまとめてみましたが、それでも動きませんでした。。。何か競合が起こっていたりするのかもしれません。。。お時間いただいたのにすみませんでした。

hectopascal1013

2018/09/30 08:01

もし、お続けになられる意志があるなら協力させていただきたいと思いますが、諦めになられるということであれば、私もお力になれず残念です。言葉強すぎましたかね。攻めているわけではありませんので、申し訳なく。

退会済みユーザー

2018/09/30 08:25

今回は、jsでの実装をと考えておりましたが、WordPresを使用するなりに、プラグインをうまく活用してスライダーを実装したいと思います。お時間を割いていただいたのに、途中で投げ出してしまいすみませんでした。

hectopascal1013

2018/09/30 10:40

CSS3だけのスライダも今はありますので、もしjavascriptが邪魔しているようなら、そちらで解決できるかもしれませんね?最近も類似質問teratailであったばかりですし。。。ご希望に添えますことを。失敗も経験ですし、私もお気持ちはわかります。

行動規範の内容に同意します

HTML
1<div class="swiper-container">
2<!-- 全スライドをまとめるラッパー -->
3<div class="swiper-wrapper">
4<!-- 各スライド -->
5<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_a08afe4b27d04ad79bc156fec5491967mv2-300x186.jpg" alt="" width="300" height="186" class="alignnone size-medium wp-image-51" /></div>
6<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_afd907f74b6c4181b6447ddbf986e067_mv2-300x186.png" alt="" width="300" height="186" class="alignnone size-medium wp-image-176" /></div>
7<div class="swiper-slide"><img src="http://192.168.0.8/wordpress_test/wordpress/wp-content/uploads/2018/09/bf9468_9f7dc2f4572340aca0c39948937f54a4_mv2-300x186.jpg" alt="" width="300" height="186" class="alignnone size-medium wp-image-170" /></div>
8</div>
9 
10<!-- ページネーションを表示する場合 -->
11<div class="swiper-pagination"></div>
12 <!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 -->
13<div class="swiper-button-prev"></div>
14<div class="swiper-button-next"></div>
15<!-- スクロールバーを表示する場合 -->
16<div class="swiper-scrollbar"></div>
17</div>

function.phpに記述した内容

function.php
1<script>
2var mySwiper = new Swiper ('.swiper-container', {
3        // オプションパラメータ(一部のみ抜粋)
4        loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
5        speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
6        slidesPerView: 4, // 何枚のスライドを表示するか
7        spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
8        direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
9        effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)
10
11        // スライダーの自動再生
12        // autoplay: true 　のみなら既定値での自動再生
13        autoplay: {
14          delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
15          stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
16          disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
17        },
18
19        // レスポンシブ化条件
20        breakpoints: {
21          // 980ピクセル幅以下になったら
22          980: {
23            slidesPerView: 3,
24            spaceBetween: 30
25          },
26          // 640ピクセル幅以下になったら
27          640: {
28            slidesPerView: 2,
29            spaceBetween: 20
30          }
31        },
32
33        // ページネーションを表示する場合
34        pagination: {
35          el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
36        },
37
38        // 前後スライドへのナビゲーションを表示する場合
39        navigation: {
40          nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
41          prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
42        },
43
44        // スクロールバーを表示する場合
45        scrollbar: {
46          el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
47        }
48      });
49</script>