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

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

ただいまの
回答率

90.52%

  • WordPress

    8722questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,109

jlo5891

score 11

前提・実現したいこと

他人が制作した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>
-----------------------------------------

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

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • manabufukai

    2017/01/19 18:08

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

    キャンセル

  • kei344

    2017/01/21 00:13

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

    キャンセル

  • jlo5891

    2017/01/22 00:27

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

    キャンセル

回答 1

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/19 18: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&#039;, 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 17:13

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

    キャンセル

  • 2017/01/20 23: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 23: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からではなく、ローカルに保存して読み込むことになるかと思います。

    キャンセル

  • 2017/01/22 17: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&#039;, array(), '1.11.1');

    下記に変更

    wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&#039;, 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

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8722questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。