jQueryライブラリ（slick）をWordPress内で正常に動作させる方法をご教示ください。

###前提・実現したいこと
html5,css,jQueryでスライドショー（slick）を導入したWebページを作り、動作確認がとれました。そのソースを使ってオリジナルテーマの編集をしていたのですが、スライドがうまくいかず、スライドすべき画像4枚が縦列に配置されており、当然スライドすること
もありません。

コンフリクトしないようにfunctions.phpにjsの記述をまとめる
jQueryの記述を調べながらカプセル化をする

等々、改善をしてきたのですが、正常な動作に至りません。正しく動作させるためのアドバイスなど、ご教示いただけましたら幸いです。どうぞ宜しくお願いします。

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

Developer tool consoleにて  Uncaught TypeError: $(...).slick is not a function との記述がなされます。

###該当のソースコード

footer.phpの</body>の前にカプセル化したjQueryの記述をした。

jquery
1<script type="text/javascript">
2jQuery(function ($) {
3  $('.center-item').slick({ //*この行にconsoleログでエラーが返されています。
4  infinite: true,
5  dots:true,
6  slidesToShow: 1,
7  centerMode: true, //要素を中央寄せ
8  centerPadding:'100px', //両サイドの見えている部分のサイズ
9  autoplay:true, //自動再生
10  responsive: [{
11    breakpoint: 480,
12      settings: {
13        centerMode: false,
14    }
15  }]
16});
17});
18
19</script>
20

###試したこと
当初Wordpress内のjQueryを使って動作させるようにしていたのですが、エラーが出ていたので、WordPress本体とは違うバージョンのjQueryを指定するため、以下の記述をfunctions.phpに加えた。

phpで記述いたします
1<?php
2function my_scripts_method() {
3  	wp_deregister_script('jquery');
4  	wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js', array(), '1.12.2');
5  	wp_enqueue_script('slick', get_settings('site_url').'/wp-content/themes/theme_name/js/slick.min.js', array('jquery'), '1.5.9', true);
6}
7add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
8add_theme_support('post-thumbnails');
9?>

###補足情報(言語/FW/ツール等のバージョンなど)
header.phpの<head></head>の中の部分を記載します。
あわせてご覧いただければ幸いです。

html,php
1<head>
2<meta charset="utf-8">
3<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
4<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSSフィード" href="<?php bloginfo('rss2_url'); ?>">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<!-- External files -->
7<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">
8<link href="<?php echo get_template_directory_uri(); ?>/css/slick.css" type="text/css" media="screen">
9<link href="<?php echo get_template_directory_uri(); ?>/css/slick-theme.css" type="text/css" media="screen">
10	<!-- Favicon, Thumbnail image -->
11 <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">
12<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
13
14<?php wp_head(); ?>
15</head>

kei344

2016/05/01 16:00

bxslider.min.js は出力されたページHTMLに存在しますか？また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

yomomimi104snow

2016/05/01 17:01

kei344さまご丁寧にアドバイス頂戴しありがとうございます。bxslider.min.js は誤入力でした。誤った投稿にて失礼いたしました。

kei344

2016/05/01 17:07

では、slick.min.js は出力されたページHTMLに存在しますか？jQuery は指定のものが指定の順序でHTMLに出力されていますか？

yomomimi104snow

2016/05/01 17:41

jQueryは <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2"></script> との記述がhtmlの<head></head>内に出力されていました。slickの記述がないのでfunctions.php内の wp_enqueue_script('slick', get_settings('site_url').'/wp-content/themes/newworld/js/slick.min.js', array('jquery'), '1.5.9', true); の記述が誤っているのかもしれないのですが、原因の分析や訂正方法についてはまだ不明です。

kei344

2016/05/01 18:18

slick.min.js はFooterに追加する記述をされていますが、そこにはありますか？

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

回答3件

ベストアンサー

get_settings() では無く get_option() を使うか、get_template_directory_uri() を使うのが良いのではないでしょうか。get_settings() は現在使えなくなっていると思います。

PHP
1function my_scripts_method() {
2      wp_deregister_script( 'jquery' );
3      wp_enqueue_script( 'jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js', array(), '1.12.2' );
4      wp_enqueue_script( 'slick', get_template_directory_uri().'/js/slick.min.js', array( 'jquery' ), '1.5.9', true );
5}

【get_settings() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_settings/

【get_option() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_option/

jQueryは <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2"></script> との記述がhtmlの<head></head>内に出力されていました。

修正依頼のコメントでこう書かれていたので、多分こっちは問題ありません。（目的のものが出力されているので）

また、'1.5.9', true ) の true を付けるとFooterに出力されると思われます。

投稿2016/05/01 18:22

編集2016/05/01 18:26

kei344

総合スコア69398

yomomimi104snow

2016/05/02 03:33

ご回答寄せていただきありがとうございます。get_settings() についてはget_template_directory_uri()に訂正してエラーがないことを確認できました。しかしながらquery-1.12.2.min.jsに関してはページ全体のソースを確認しましたが出力されておらず、footerに記述した<script>....</script>にかんしては'(index):232 Uncaught TypeError: jQuery(...).slick is not a function'とのエラーが返されております。よろしくおねがいします

kei344

2016/05/02 04:10

> しかしながらquery-1.12.2.min.jsに関してはページ全体のソースを確認しましたが出力されておらず yomomimi104snowさんが登録されたのは、 https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js なので、jquery-1.12.2.min.jsというファイルではないと思います。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2"></script> との出力があるようなので、問題ありません。「'1.5.9', true ) 」を「'1.5.9' ) 」に変更してみたらどのようになりますか？また、get_template_directory_uri()に変更してからslick.min.jsは出力されていますか？

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

WPのjQueryを使わない方法ならこんなのがありました
ヘッダに以下の一行を追加してWPの読み込みをしないように設定し、そのあと、任意のjQueryを読み込むという形です

<?php wp_deregister_script('jquery'); ?>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

現状の原因がコンフリクトかどうかはわたしには不明ですがご参考になれば

投稿2016/05/01 16:18

g-n-n

総合スコア24

yomomimi104snow

2016/05/01 23:40

ありがとうございます。functions.phpにご教示いただいた内容で記載をしているのですが、私の記述が誤っているのか、slick.min.jsとfooterに記述したjsがうまく機能させられません。

g-n-n

2016/05/02 02:45

これは header.phpに書く内容ですね。分かりにくい説明でした

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

みなさま、ご回答ありがとうございました。初めて質問をさせていただいたため、読みにくい記述をさせていただいた中、ご回答寄せていただき感謝申し上げます。
こちらの質問の他に、検索エンジンなどで様々調べていたのですが答えを導き出すことはできませんでした。
そのなかでfunctions.phpへの記述の一つの方法がわかったのでこちらに記載させていただきます。

<?php
function my_scripts() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'slick', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ),'2.6.0' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
?>

Wordpress内のjQueryを生かし、その後flexsliderの記述をすること。
header.phpに

<?php wp_head(); ?>

の記述、
footer.phpに例としてですが、

<script type="text/javascript">
(function($){
  $(window).load(function() {
  $('.flexslider').flexslider();
  animation: "fade"
})
})(jQuery);
</script>
<?php wp_footer(); ?>
<?php wp_head(); ?>

を記述することでフェイドする動きを有効化させることができました。
残念ながら矢印アイコンなどを出現することがさせられませんでしたが、これを契機に学びを深めていきたいと思います。改めてありがとうございました。

投稿2016/05/07 09:20

yomomimi104snow

総合スコア16

kei344

2016/05/07 09:59

とりあえず解決したようでよかったです。FlexSlider に変更されたのですね。書かれたコードに2点指摘があります。（回答へのコピー時の編集ミスなどであればすいません） 1点目： (function($){ $(window).load(function() { $('.flexslider').flexslider(); }) })(jQuery); は下記のように書くのが一般的だと思います。 $( function() { $('.flexslider').flexslider(); } ); 2点目： $('.flexslider').flexslider(); animation: "fade" // ← これ不要！！と書かれていますが、下記のように書かれたほうが良いです。（エラーが出ていませんか？） $( '.flexslider' ).flexslider({ animation: "fade" }); ちなみに FlexSlider は Default で "fade" なのでフェードが効いているものだと推測されます。

yomomimi104snow

2016/05/07 10:23

ご丁寧にありがとうございます。おっしゃるようにflexsliderにシフトしてみました。一番大事な変更をおしらせしておりませんでした。2点目に関してはanimation: "fade" // の//は記載ミスです。1点目は確かに $( function() { $('.flexslider').flexslider(); } ); が一般的な記載なのですが、囲い方が間違っているのか、今回は (function($){ $(window).load(function() { $('.flexslider').flexslider(); }) })(jQuery);という記載でスライドが有効になり、エラーも出現しなかったのでそのまま記載させていただきました。Flexslider の矢印などが出ない点に関しては新たに今後トピックを立てて質問させて頂くこともあるかもしれません。どうぞ宜しくお願いします。

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

あなたの回答