質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,441

前提・実現したいこと

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

  • コンフリクトしないようにfunctions.phpにjsの記述をまとめる
  • jQueryの記述を調べながらカプセル化をする
    等々、改善をしてきたのですが、正常な動作に至りません。正しく動作させるためのアドバイスなど、ご教示いただけましたら幸いです。どうぞ宜しくお願いします。

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

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

該当のソースコード

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

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

</script>

試したこと

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

<?php
function my_scripts_method() {
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js', array(), '1.12.2');
      wp_enqueue_script('slick', get_settings('site_url').'/wp-content/themes/theme_name/js/slick.min.js', array('jquery'), '1.5.9', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
add_theme_support('post-thumbnails');
?>

補足情報(言語/FW/ツール等のバージョンなど)

 header.phpの<head></head>の中の部分を記載します。
あわせてご覧いただければ幸いです。

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

<?php wp_head(); ?>
</head>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/02 02:07

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

    キャンセル

  • yomomimi104snow

    2016/05/02 02: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/02 03:18

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

【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/02 12: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'とのエラーが返されております。よろしくおねがいします

    キャンセル

  • 2016/05/02 13: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は出力されていますか?

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/02 08:40

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

    キャンセル

  • 2016/05/02 11:45

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

    キャンセル

0

みなさま、ご回答ありがとうございました。初めて質問をさせていただいたため、読みにくい記述をさせていただいた中、ご回答寄せていただき感謝申し上げます。
こちらの質問の他に、検索エンジンなどで様々調べていたのですが答えを導き出すことはできませんでした。
そのなかで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 18: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" なのでフェードが効いているものだと推測されます。

    キャンセル

  • 2016/05/07 19:23

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

    キャンセル

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

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる