jQueryが動きません

解決済

(@akira0309)

WP初心者です。
ipicture2を入れたいので、HTMLで試してから、フォーラムや検索で調べつつやってみましたがうまく動作しませんでした。
（＋が表示されません）
サイト作り自体手探りで行っているような状態ですので
諸々不備があるかと思いますがご教授いただければありがたいです。

twentytwelveの子テーマをつくって制作しています。
固定のフロントページに入れようとしています。
実際のサイト

⬛︎フロント用のheader.php　に　書いたもの

<?php wp_enqueue_script('iPicture2', get_bloginfo('stylesheet_directory') . '/iPicture2/js/jquery-1.8.3.min.js', array('jquery')); ?>
<?php wp_enqueue_script('iPicture2', get_bloginfo('stylesheet_directory') . '/iPicture2/js/jquery.ipicture.js', array('jquery')); ?>
<?php wp_enqueue_style('iPicture2', get_bloginfo('stylesheet_directory') . '/iPicture2/css/iPicture.css'); ?>
<?php wp_head(); ?>

<script>
  jQuery( "#iPicture" ).iPicture();
</script>

⬛︎固定フロントページの編集に書いたもの

<div id="iPicture" data-interaction="hover">
  <div class="ip_slide">
    <img class="ip_tooltipImg" src="http://arika.net/platinum/wp-content/uploads/2016/02/front2.jpg">
    <div class="ip_tooltip ip_img32" style="top: 99px; left: 268px;" data-button="moreblack" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide">
      <p>
      </p>
    </div>
    <div class="ip_tooltip ip_img32" style="top: 100px; left: 799px;" data-button="moreblack" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide">
      <p>
      </p>
    </div>
    <div class="ip_tooltip ip_img32" style="top: 637px; left: 267px;" data-button="moreblack" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="rtl-slide">
      <p>
      </p>
    </div>
    <div class="ip_tooltip ip_img32" style="top: 637px; left: 799px;" data-button="moreblack" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="ltr-slide">
      <p>
      </p>
    </div>
  </div>
</div>

4件の返信を表示中 - 1 - 4件目 (全4件中)

モデレーター Daisuke Takahashi
(@extendwings)

8年、 2ヶ月前

wp_enqueue_script()は同じ名前のスクリプトを複数登録するためのものではありません。(そもそも、jQueryはWordPressに同梱されていますので、1つ目のwp_enqueue_script()は不要かと。)

あと、ファイルパスの書き方は、https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-274 のようにget_template_directory_uri()を使うことが推奨されています。

Toro_Unit (Hiroshi Urabe)
(@toro_unit)

8年、 2ヶ月前

ここら辺も参照してみてください。

jQueryの基本 – $(document).ready – Qiita

モデレーター Seisuke Kuraishi
(@tenpura)

8年、 2ヶ月前

WordPress で CSS、JavaScript ファイルを読み込む正しい方法、WordPress で jQuery を使う時の注意点を参考にしてください。

あと、ファイルパスの書き方は、https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-274 のようにget_template_directory_uri()を使うことが推奨されています。

こちら子テーマの場合は、get_stylesheet_directory_uri() を使ってください。
トピック投稿者 akira0309
(@akira0309)

8年、 2ヶ月前
無事動くようになりました。ありがとうございました。

⬛︎修正後　フロント用のheader.php
```
<?php wp_enqueue_script('iPicture2', get_stylesheet_directory_uri() . '/iPicture2/js/jquery.ipicture.js', array('jquery')); ?>
<?php wp_enqueue_style('iPicture2', get_stylesheet_directory_uri() . '/iPicture2/css/iPicture.css'); ?>
<?php wp_head(); ?>

<script>
jQuery(function($) {
  $( "#iPicture" ).iPicture();
});
</script>
```