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

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

ただいまの
回答率

88.58%

WordpressにjQueryを読み込む際

解決済

回答 3

投稿 編集

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

kawadai

score 11

 前提・実現したいこと

wordpress内に写真をめくることのできる turn.js を実装することです。
以下が大元のデータを配布しているサイトになります。
http://www.turnjs.com/

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

http://inomacreate.com/jquery-turnjs/
上記のサイトを参考に動作確認のためそのままコピペで制作しているのですが、画像が縦に複数表示されています。
写真が同一箇所に表示されるわけでもなく、またペラペラめくれません。
おそらくjavascriptに問題と思っているのですが、元のものをまねただけなので何が間違っているかが判断できません。

wordpress環境で投稿をプレビューし、検証を行ったところturn.jsとportfolio.jsの名称があったので、javascriptは読み込みことには成功していることまでは確認できました。

 該当のソースコード

どこに誤りがあるのかわからないので一通り載せます。

(function($) {
'use strict';
var has3d,
  hasRot,
  vendor = '',
  version = '4.1.0',
  PI = Math.PI,
  A90 = PI/2,
  isTouch = 'ontouchstart' in window,
  mouseEvents = (isTouch) ?  {
      down: 'touchstart',
      move: 'touchmove',
      up: 'touchend',

上記がturn.jsの最初の一部になります。元のデータより何も変更は加えてないので途中までの表記にしました。

jQuery(function(){
    jQuery('#portfolio_a').turn(
        {
      elevation: 50,
      gradients: true,
      autoCenter: false,
      direction: 'rtl',
        }
    );
});

参考サイトのもののほぼコピペです。名称はportfolio.jsになります。

<pre class="wp-block-code"><code><div id="portfolio_a">
<div>
<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt="" >
</div>
<div>
<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt="" >
</div>
<div>
<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-23.png" alt="" >
</div>
<div>
<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2017-12-21.png" alt="" >
</div>
</div>
</code></pre>

 wordpressのgutenbergを用いたら<pre><code>が増えましたがこれを投稿ページのブロック部分に記述しております。
上のportfolio箇所で定義したportfolio_aがここで読み込まれていると思っています。

<?php function add_script(){
    wp_enqueue_script('portfolio', get_template_directory_uri() . '/js/portfolio.js', array('jquery'), '', true);
    wp_enqueue_script('turn', get_template_directory_uri() . '/js/turn.js', array('jquery'), '', true);
    }
    add_action( 'wp_enqueue_scripts', 'add_script' );
?>

wordpressのfunction.phpに追加記述している内容になります。function内には親テーマ子テーマの引継ぎのphpが記載されている以外ほかの記述はありません。

 試したこと

<?php wp_deregister_script('jquery'); ?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

conflictを起こすことがあると聞いたので一応header.php内でgoogle側のjqualyを読み込むように設定してみたりしました。
現状このペラペラページに該当するcssの記述(heightやwidthなど)は行ってはいないのですが、javaの動作に関しては関係ないものと思いひとまず省いております。

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

バージョンに関しましては2018/10/29現在すべて最新版をダウンロードして用いております。
localで確認をしております。xamppを用いてlocal環境のwordpressで確認しております。
不足している情報などありましたら教えていただけますと幸いです。

 追記 20181103

google chromeにて検証を行った際、

Failed to load resource: the server responded with a status of 404 (Not Found)
というエラーが出ておりました。
調べてみるとjqueryが定義されていないということなのですが、wordpressのテーマをカスタムで制作しているためまずどこでjqueryが導入されているのか探し出せておりません。コンソールではJQMIGRATE: Migrate is installed, version 1.4.1が入っていることは確認できました。

dreamweverにてファイルを横断して検索をかけてみたところ、jsやjQuery関して読み込まれている箇所は見当たりませんでした。
一般的な<script></script>で囲まれている文章がfunction.php内で

<script>jQuery( 'html' ).removeClass( 'no-js' ).addClass( 'js' );</script>

のように記述が行われておりました。何か関係があるのでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kawadai

    2018/11/02 23:49

    CHERRY 様。ご指摘いただきありがとうございます。Failed to load resource: the server responded with a status of 404 (Not Found)というエラーが出ておりました。調べてみるとjqueryが定義されていないということなのですが、wordpressのテーマをカスタムで制作しているためまずどこでjqueryが導入されているのか探し出せておりません。コンソールではJQMIGRATE: Migrate is installed, version 1.4.1が入っていることは確認できました。

    キャンセル

  • marlboro_tata

    2018/11/05 11:51 編集

    HTTPステータスコード404のエラーは、指定されたパスにファイルが見つからないという内容のエラーです。回答へのコメントにあるように「turn.jsとportfolio.jsに」404エラーが出ているなら、そのファイルが読み込みできなかった、という意味だと思うので、パスで指定した通りの場所にファイルがあるかどうか確認してみるのはいかがでしょうか。

    キャンセル

  • kawadai

    2018/11/06 21:55

    ご指摘のあったようにファイルパスを確認したところ、wordpress 子テーマ設定側からURIをとる関数を間違えていたようでした。ありがとうございます。

    キャンセル

回答 3

+1

</head>の真上に
<?php wp_head(); ?>
はあるでしょうか?
これによりjquery本体が既に読み込まれています

なのでgoogleのCDNの読み込みをすると二重になり動かなくなります
その1行は消してください
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>の1行は消してください

とりあえずjsファイルの始めにアラートをセットして確かめてみてください

jQuery(function() {
  alert('alert');

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/02 23:41

    akihiro3様
    返信が大変遅くなってしまい申し訳ございませんでした。

    参考サイトなども載せていただきありがとうございます。

    改めて実行しても結果は変わらずという結果になりました。
    ブラウザ上での検証を今一度確認してみると、以前よりあったのかもしれないのですが
    Failed to load resource: the server responded with a status of 404 (Not Found)
    というエラーが今回の turn.jsとportfolio.jsについているようでした。

    エラー内容としてはjqueryが読み込まれていないという内容になるのだと思っています。(間違っている可能性もありますが...)wordpress環境ではwordpress内にjqueryが入っていると聞いていたのでローカル環境にjqueryをインストールしていなかったのですが、やはり関係あるのでしょうか?

    キャンセル

  • 2018/11/06 10:57

    失礼します。Failed to load resource: the server responded with a status of 404 (Not Found)が
    該当ライブラリに出ているってことは、パスが合っていないってことですよ。現在のページ > jsフォルダ内に直下に、turn.jsとportfolio.jsがあるか確認してみてください。

    キャンセル

  • 2018/11/06 21:40

    ありがとうございます。wordpressでのカスタムテーマで子テーマを作成していた場合URIの取得方法が違うことに気が付きました。get_stylesheet_directory_uri()を使いましたら無事読み込みが出来ました。

    キャンセル

check解決した方法

0

回答にかかわって頂いた方大変ありがとうございました。
当初の目的であるturn.jsを動かすことには成功したので今回の質問を閉め切ろうと思います。
多くの方の回答を参考にさせていただいたので、ベストアンサーとして一つを選ぶのは厳しいと思い簡単ではありますがまとめさせていただきます。

結論から言えばjquery以前にwordpress側の設定ミスでした。大変失礼いたしました。
子テーマ使用している際には、URIを 
get_template_directory_uri() ではなく
get_stylesheet_directory_uri() を用いるということのようでした。
初歩的なミスですが全てが初めての私にとっては何もわからず皆様のコメントを頼りにさせていただきました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

// function.php
<?php function add_script(){
    wp_deregister_script('jquery');
    wp_enqueue_script('jQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
    wp_enqueue_script('portfolio', get_template_directory_uri() . '/js/portfolio.js', array('jquery'), '', true);
    wp_enqueue_script('turn', get_template_directory_uri() . '/js/turn.js', array('jquery'), '', true);
    }
    add_action( 'wp_enqueue_scripts', 'add_script' );
?>

こちらで動きませんか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/06 21:53

    wordpress側のjqueryを一回削除してもう一度入れなおす方法だと思うのですが、私の理解不足のせいで、特に変化はおこらないですね...何が間違っているのかわからないのですがとりあえずはほかの方法で動くようにはなったので、今後不具合が起こった時の参考にさせていただきます。ありがとうございました。

    キャンセル

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

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

関連した質問

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