Wordpressで＜?php wp_head(); ?＞＜?php wp_footer(); ?＞を記述するとjsが動かなくなる

###前提・実現したいこと
他人が制作したWordpressのテンプレートをカスタマイズしています。
最終的には、
＜?php wp_head(); ?＞＜?php wp_footer(); ?＞を記述し、プラグインもjsも正常に動作させたいです。

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

他人が制作したテンプレートに＜?php wp_head(); ?＞＜?php wp_footer(); ?＞が記述されておらず、
プラグインが正常に動作しない。
＜?php wp_head(); ?＞＜?php wp_footer(); ?＞を記述するとプラグインは正常に動作するが、
スライダーのjs(http://kenwheeler.github.io/slick/)が動かなくなる。

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

使用しているjs
(<head>内↓)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
(</body>手前↓)
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

【追記】
kei344さん、ありがとうございます。
-----------------------------------------
<ul class="carousel">
   <li>イメージ1</li>
   <li>イメージ2</li>
   <li>イメージ3</li>
</ul>
-----------------------------------------
<script>
$(function() {
  $('.carousel').slick({
    infinite: true,
    dots: true,
    slidesToShow: 3,
    centerMode: true, //要素を中央寄せ
    centerPadding:'30px', //両サイドの見えている部分のサイズ
    autoplay:true, //自動再生
  });
});
</script>
-----------------------------------------

思い当たることがある方、アドバイスをよろしくお願いいたします。

manabufukai

2017/01/19 09:08

スライダーが動かない時、JSで何かエラーが出ていませんか？（ブラウザのデベロッパール等で確認してください）出ているのであればそのエラーメッセージも記載いただいたほうが良いでしょう。

kei344

2017/01/20 15:13

slick.js を使用するコードについての記載がありません。追記いただけませんか？

jlo5891

2017/01/21 15:27

manabufukaiさん、ありがとうございます。特にエラーは出ていません。

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

回答1件

ベストアンサー

スライダーのJSをwp_enqueue_script関数で読み込ませてください。
（テンプレートファイル内で<script>を直接記述していたら、その記述は削除する）

関数リファレンス/wp enqueue script - WordPress Codex 日本語版

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う | ColdSleep Works

http://works.coldsleep.jp/blog/wp_enqueue_script/

投稿2017/01/19 07:48

退会済みユーザー

総合スコア0

jlo5891

2017/01/19 09:09

ありがとうございます。 function my_scripts_method() { wp_deregister_script('jquery'); wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '1.11.1'); wp_enqueue_script('slick', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js', array('jquery')); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 上記をfunction.phpに記述したところjsは正常動作し、プラグインも動きそうなのですがあと一歩です。こちら↓のページを参照したところ「カプセル化」が必要のようですが、 https://mono96.jp/archives/28166(使用するプラグインも同じものです) 上記の場合どのように記述を変えればカプセル化できるのでしょうか？

退会済みユーザー

2017/01/20 08:13

WordPress付属のjQueryを使う場合はカプセル化が必要、外部のjQueryを使う場合はカプセル化は不要、ということではないですか？

jlo5891

2017/01/20 14:06

ありがとうございます。＜?php wp_head(); ?＞にて読み込まれるwordpress付属のjqueryであればプラグインが正常に動くがスライダーは動かない。 function.phpに記述したjquery(ver.1.11.1)であればスライダーが正常に動くがプラグインは動かない。という状況です。 function.phpに上記の「function my_scripts_method() {〜...」を記述するとwordpress付属のjqueryは読み込まれないようです。 wordpress付属のjqueryを読み込んだ状態で、スライダーのjsだけにver.1.11.1のjqueryを適用させる方法は無いでしょうか？

退会済みユーザー

2017/01/20 14:54

> function.phpに上記の「function my_scripts_method() {〜...」を記述するとwordpress付属のjqueryは読み込まれないようです。 wp_deregister_scriptを使って、WordPress付属のjQueryの読み込みを止めているので、これは意図した動きのはずです。 > wordpress付属のjqueryを読み込んだ状態で、スライダーのjsだけにver.1.11.1のjqueryを適用させる方法は無いでしょうか？これに関しては私も不勉強で存じ上げません。 WordPress付属のjQueryを利用するようにして、スライダーのjQueryをカプセル化してみてはいかがですか？この場合は、スライダーのjQueryコードをCDNからではなく、ローカルに保存して読み込むことになるかと思います。

jlo5891

2017/01/22 08:12

ありがとうございます。 wp_deregister_scriptにてWordPress付属のjQueryの読み込みは止めた状態で、 wp_enqueue_scriptにてjQueryはver.1.11.1ではなく最新のものを読み込むようにしました。 function my_scripts_method() { wp_deregister_script('jquery'); ------------------------------------------------------ wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '1.11.1'); ↓ 下記に変更 ↓ wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array()); ------------------------------------------------------ wp_enqueue_script('slick', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js', array('jquery')); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); これでスライダーもプラグインも正常に動作するようになりました！非常に勉強になりました、ありがとうございましたm(_ _)m

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