Q&A
wordpressにjavascript、slick、jqueryを読み込ませて、スライダーを実装させたいのですが反映されません。
コードは下記のように入力しました。
index.php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<?php get_header(); ?> 5</head> 6 7<body> 8<?php get_template_part('includes/header'); ?> 9 10<div class="wrapper"> 11 <h1>Slide show</h1> 12 <ul class="slider"> 13 <li class="<?php echo get_template_directory_uri(); ?>/slider-item slider-item01"></li> 14 <li class="<?php echo get_template_directory_uri(); ?>/slider-item slider-item02"></li> 15 <li class="<?php echo get_template_directory_uri(); ?>/slider-item slider-item03"></li> 16 </ul> 17<!--/wrapper--></div> 18 19<div class="container"> 20<p>使用したライブラリ：<a href="https://kenwheeler.github.io/slick/" target="_blank">https://kenwheeler.github.io/slick/</a></p> 21<!--/container--></div> 22<?php get_template_part('includes/footer'); ?> 23<?php get_footer(); ?> 24 25<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 26<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 27<script src="<?php echo get_template_directory_uri(); ?>/js/6-1-1.js"></script> 28 29</body> 30</html>
includes/header.php
1<meta charset="utf-8"> 2<title>6-1-1 横移動させて全画面で見せる</title> 3<meta name="description" content="書籍「動くWebデザインアイディア帳」のサンプルサイトです"> 4<meta name="robots" content="noindex,nofollow"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<!--==============レイアウトを制御する独自のCSSを読み込み===============--> 7<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/reset.css"> 8<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 9<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/6-1-1.css"> 10<?php wp_head(); ?>
script.js
1$(function() { 2 3 $('.slider').slick({ 4 autoplay: true,//自動的に動き出すか。初期値はfalse。 5 autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間 6 speed:1000,//スライドの動きのスピード。初期値は300。 7 infinite: true,//スライドをループさせるかどうか。初期値はtrue。 8 slidesToShow: 1,//スライドを画面に3枚見せる 9 slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる 10 arrows: true,//左右の矢印あり 11 prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更 12 nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更 13 dots: true,//下部ドットナビゲーションの表示 14 pauseOnFocus: false,//フォーカスで一時停止を無効 15 pauseOnHover: false,//マウスホバーで一時停止を無効 16 pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効 17 }); 18 19 //スマホ用：スライダーをタッチしても止めずにスライドをさせたい場合 20 $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){ 21 $('.slider').slick('slickPlay'); 22 }); 23 24 alert('これでアラートが表示されます。') 25 26});
アラート関数は反映されたのですが、スライダーが反映されませんでした。
試したこと
検証ツールの確認したのですが、エラーコードは出てませんでした。
slickとjqueryが読み込めてないのだろうか？と思ったりもしたのですが、読み込めてないとしたらその原因はなぜなのか？それがわからずなかなか先に進めません。
どなたか教えていただけると幸いです。
よろしくお願いします。
回答1件
0
ベストアンサー
私も同じような経験をしたことがありますので、お気持ちがすごく分かります。
まず原因として、Wordpress内に標準搭載されているJQueryのバージョンがライブラリーに対応していない、または、相性が悪い可能性があります。
ですので、まず標準搭載のJQueryを読み込まないように設定してから、CDNを読み込む方法を取りました。
※プラグインによっては、標準搭載のモノでないと動かないモノもあるので注意。
※質問者様はindex.phpやheaderで読み込んでいると思いますが、推奨されている書き方は
functions.phpにてCSSやjavascriptなどの読み込みを行います。
functions.php
1function theme_enqueue_scripts() { 2 wp_enqueue_script( 3 'sample-theme-scripts', 4 get_template_directory_uri() . '/js/main.js', 5 array(), 6 '1.0.0', 7 true 8 ); 9add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); 10 11 12//jqueryを特定のCDNから読み込む 13function load_jquery() { 14 if ( !is_admin() ) { 15 wp_deregister_script('jquery'); 16 wp_enqueue_script( 17 'jquery', 18 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', 19 array(), 20 '3.6.0' 21 ); 22 } 23} 24add_action('init', 'load_jquery'); 25
そして、もう一つがJSの書き方です。
Javascript・JQueryの先頭にある「$」はWordpressでは読み込みません。
(きっとコンソールエラーが出ていると思います。「F12」)
ですので、
javascript/JQuery
1(function($) { 2 3// ここに処理を書く 4 5})(jQuery);
のような書き方ですと、Wordpress内で動くかと思います。
参考になれば幸いです^^
投稿2022/03/05 14:56
編集2022/03/05 14:58
総合スコア80
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/03/08 00:53 編集
2022/03/08 07:51