htmlサイトを作り、WordPress化の段階で、Swiper.js が動かない

htmlページのときは動いていたのですが、WordPressでは、Swiperが動いてくれません。

function.php　の記述に間違いがあるのか、他のところへの記述が足りないのか、はたまた全然別の原因があるのか全く分かりません。

2日間くらいググっていろいろ試してみたのですが、分かりません。

初心者なので、実は基礎が分かっていないのかもしれません。。。

教えていただけますと、心の底から助かります！

よろしくお願いいたします！！

index.php

      <!-- Slider main container　ここから-->
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">カフェ</h3></div>
              <img src="<?php echo get_theme_file_uri('images/cafe.jpg') ?>" alt="カフェのポートフォリオ">
            </div>

            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">歯科医院</h3></div>
              <img src="<?php echo get_theme_file_uri('images/dental.jpg') ?>" alt="歯科医院のポートフォリオ">
            </div>

            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">美容室</h3></div>
              <img src="<?php echo get_theme_file_uri('images/hair-cut-salon.jpg') ?>" alt="美容室のポートフォリオ">
            </div>

            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">コーポレートサイト</h3></div>
              <img src="<?php echo get_theme_file_uri('images/office.jpg') ?>" alt="コーポレートサイトのポートフォリオ">
            </div>

            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">雑貨店</h3></div>
              <img src="<?php echo get_theme_file_uri('images/shop.jpg') ?>" alt="雑貨店のポートフォリオ">
            </div>

            <div class="swiper-slide">
              <div><h3 class="portfolioEeachTitle">ランディングページ</h3></div>
              <img src="<?php echo get_theme_file_uri('images/lp.jpg') ?>" alt="ランディングページのポートフォリオ">
            </div>            
        </div>
      </div>
      <!-- Slider main container　ここまで-->

style.css

.swiper-container {
  width: 100%;
  height: 680px;
  margin-bottom: 70px;
  overflow: hidden;
}

.swiper-container img {
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 680px;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: -webkit-transform 1.9s ease;
  transition: -webkit-transform 1.9s ease;
  transition: transform 1.9s ease;
  transition: transform 1.9s ease, -webkit-transform 1.9s ease;
}

.swiper-slide div {
  position: absolute;
  top: 50%;
  background-color: rgba(169, 218, 197, 0.3);
  color: white;
  letter-spacing: 4px;
  font-size: 20px;
  width: 100%;
}

.swiper-slide:hover {
  cursor: -webkit-grab;
  cursor: grab;
}

.swiper-slide-active img {
  -webkit-transform: none;
          transform: none;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.swiper-slide-active .portfolioEeachTitle {
  -webkit-animation: scrollportfolioEeachTitle 5s linear infinite;
          animation: scrollportfolioEeachTitle 5s linear infinite;
}

@-webkit-keyframes scrollportfolioEeachTitle {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes scrollportfolioEeachTitle {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

main.js

//------scroll--------
$(function(){
  $('a[href^="#"]').click(function(){
  const speed = 600;
  const href= $(this).attr("href");
  const target = $(href == "#" || href == "" ? 'html' : href);
  const position = target.offset().top;
  $("html, body").animate({scrollTop:position}, speed, "swing");
  return false;
  });
  });

//-------portfolio-------
document.addEventListener("DOMContentLoaded", function () {
  new portfolioSlider();
});

class portfolioSlider {
  constructor() {
    new Swiper ('.swiper-container', {
      effect: "coverflow",
      loop: true,
      slidesPerView: 1,
      speed: 1000,
      autoplay: {
        delay: 4000,
        disableOnInteraction: true
      }
    });
  }
}

function.php

<?php

function uchidenoweb_files() {

  // JavaScript
  wp_enqueue_script('main-uchidenoweb-js', get_theme_file_uri('main.js'), NULL, microtime(), true);

  // Swiper css
  wp_enqueue_style( 'swiper', get_template_directory_uri() . '//unpkg.com/swiper/css/swiper.min.css', array(), false, 'all');
  // Swiper JS
  wp_enqueue_script( 'swiper', get_template_directory_uri() . '//unpkg.com/swiper/js/swiper.min.js', array(), false, true );

  // Google Fonts
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Bree+Serif|Lobster|Sawarabi+Gothic&display=swap');

  // Font Awesome
  wp_enqueue_style('font-awesome', '//kit.fontawesome.com/aab20beaa7.js');

  // style.css
  wp_enqueue_style('uchidenoweb_main_styles', get_stylesheet_uri(), NULL, microtime());
}

add_action('wp_enqueue_scripts', 'uchidenoweb_files');

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

回答2件

ベストアンサー

get_template_directory_uriはテンプレートディレクトリまでのURLが入りますが、本当にそのパスにファイルが入っているのでしょうか。

PHP
1  // Swiper css
2//wp_enqueue_style( 'swiper', get_template_directory_uri() . '//unpkg.com/swiper/css/swiper.min.css', array(), false, 'all');
3//                           ↓
4  wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/css/swiper.min.css', array(), false, 'all');
5  // Swiper JS
6//wp_enqueue_script( 'swiper', get_template_directory_uri() . '//unpkg.com/swiper/js/swiper.min.js', array(), false, true );
7//                           ↓
8  wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/js/swiper.min.js', array(), false, true );