[WordPress] jQueryを使用し作成、デベロッパーツールで確認するとエラーが表示されるためエラーの解説をして欲しい

初心者ですが、wordpressを使用しホームページを作成しています。

ギャラリーとして、動画サムネイルをクリックすると
youtube動画を貼り付けたモダールウィンドウが開くよう作成
「wordpressのテーマオプション＞セクション」に記述しました。

ギャラリーは問題なく動いたのですが
当初

を記述していたためページのバックグラウンドの背景動画が停止しました。

そこでこちらで質問し教えていただき

$(xxx)

を全て

jQuery(xxx)

に書き換え

下記のように変更したのですが

jQuery(function() {
    // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、
    // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる
    jQuery("#modal-content").click(function(evt) {
        evt.stopPropagation();
    });
    //リサイズされたら、センタリングをする
    jQuery(window).resize(centeringModalSyncer);
    //ボタンのクリック(タッチ)イベント
    jQuery(".modal-syncer").click(function() {
        //ボタンからフォーカスを外す
        this.blur();
        //プレイヤー(iframe)のsrcにYouTube動画のURLを設定
        jQuery("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + jQuery(this).data("videoId") + "?autoplay=0");
        jQuery("#modal-overlay").fadeIn("fast");
        jQuery("#modal-content img").attr("src", jQuery(this).data("description"));
        // センタリング
        centeringModalSyncer();
    });

    //[#modal-overlay]、または[#modal-close]をクリックしたら…
    jQuery("#modal-overlay, #modal-close").click(function() {
        //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
        jQuery("#modal-overlay").fadeOut("fast", function() {
            jQuery("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア
        });
    });
    //センタリングを実行する関数
    function centeringModalSyncer() {
        //画面(ウィンドウ)の幅、高さを取得
        var w = jQuery(window).width();
        var h = jQuery(window).height();
        //コンテンツ(#modal-content)の幅、高さを取得
        var cw = jQuery("#modal-content").outerWidth();
        var ch = jQuery("#modal-content").outerHeight();
        //センタリングを実行する
        jQuery("#modal-content").css({
            left: ((w - cw) / 2),
            top: ((h - ch) / 2)
        });
    }
});
コード

・背景動画は再生される
・モダールウィンドウは開く、ウインドウ外をクリックで閉じる

【できなくなったこと】
× モダールウインドウのフェードイン、フェードアウト
× 閉じるボタンクリックでモダールウィンドウを閉じる

問題部分がここなのかも分からない素人のため、上記のみ添付しました。
他必要な部分がありましたらご指示下さい。

よろしくお願いします。

ご指摘いただきました為、ページ全体をデベロッパーツールで確認しました。

JQMIGRATE: Migrate is installed, version 1.4.1

2jsapi:22 A Parser-blocking, cross-origin script, https://www.google.com/uds/?file=feeds&v=1, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.
google.loader.f @ jsapi:22

2jsapi:22 A Parser-blocking, cross-origin script, https://www.google.com/uds/api/feeds/1.0/482f2817cdf8982edf2e5669f9e3a627/default+ja.I.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.
google.loader.f @ jsapi:22

Failed to load resource: the server responded with a status of 404 (Not Found) [画像urlがここに記載されてます]

上記がコピーペーストしたものです。
２つ目、３つ目の塊、冒頭の「2jsapi:22」は【「黄色の丸に２」＋「右向き三角」】
最後の「Failed to ～」の頭は「赤丸に×」になっています。

このエラーの意味がわかりません。
その部分がどのようにエラーなのかだけでも教えていただけませんでしょうか。
よろしくお願いします。

kei344

2016/12/26 13:15

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

yoso

2016/12/26 14:19

ありがとうございます。確認したところエラーがでました。表示されたものを全てコピーし添付しましたが表示どおりにペーストできませんでした。これで分かりますでしょうか？私ではこのエラーの意味が分かりませんので、可能であれば対応策をご教授願いたいです。厚かましいお願いですがよろしくお願いします。

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

回答1件

ベストアンサー

以下のコードをテーマに書く必要はありませんので、削除しましょう。

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

WordPress の場合、JavaScript や CSS を読み込む際、テーマの header.php や footer.php に script タグや link タグは記述しません。以下にシンプルな header.php と footer.php の例を示します。

header.php の例

php
1<!DOCTYPE html>
2<html <?php language_attributes(); ?> class="no-js">
3<head>
4    <meta charset="<?php bloginfo( 'charset' ); ?>">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link rel="profile" href="http://gmpg.org/xfn/11">
7    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
8    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
9    <?php endif; ?>
10    <?php wp_head(); ?>
11</head>
12
13<body <?php body_class(); ?>>

footer.php の例

php
1<?php wp_footer(); ?>
2</body>
3</html>

CSS や JavaScript の読み込み方

テーマの functions.php に以下のコードを追加してください。
※ teratail60093 の部分は接頭辞（プレフィックス）です。
※ teratail60093 の部分は、テーマ名などに変更してください。
※ WordPress で関数やクラスを作成する時は、接頭辞を付けるのがマナーになっています。

php
1function teratail60093_scripts() {}
2add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

次に、テーマの CSS ファイルを読み込むために、teratail60093_scripts() 関数内に以下のように追記してください。
※ teratail60093 の部分は先程と同じく適切書き換えてください。

php
1function teratail60093_scripts() {
2    // Theme stylesheet.
3    wp_enqueue_style( 'teratail60093-style', get_stylesheet_uri() );
4}
5add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

これで、テーマフォルダー直下の style.css が head タグ内に出力されるようになります。仮に「テーマフォルダー直下の style.css はテーマ名だけ記述して空なんだよねー。css フォルダ内の style.css を読み込ませたいよー」という場合は、以下のようにします。
※ teratail60093 の部分は先程と同じく適切書き換えてください。

php
1function teratail60093_scripts() {
2    // Theme stylesheet.
3    wp_enqueue_style( 'teratail60093-style', get_stylesheet_directory_uri() . '/css/style.css' );
4}
5add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

これで、テーマーフォルダ/css/style.css が head タグ内に出力されるようになります。

これまでは、CSS ファイルの読み込み方を説明してみましたが、JS ファイルの場合は、wp_enqueue_style() 関数の部分を wp_enqueue_script() 関数に変更します。wp_enqueue_style() 関数も wp_enqueue_script() 関数も使い方は一緒です。詳しくは、以下ドキュメントを読んでみてください。

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

以下に、wp_enqueue_script() 関数で JS ファイルを読み込む簡単な例を示します。

php
1function teratail60093_scripts() {
2    // Theme script.
3    wp_enqueue_script( 'teratail60093-script', get_stylesheet_directory_uri() . '/js/script.js' );
4}
5add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

CSS や JavaScript の依存関係

CSS ファイルや JS ファイルを読み込む時、以下のようなことが往々にしてしてあると思います。

CSS フレームワーク（Bootdtrap や Foundation）を読み込んだ後に、自身の CSS ファイルを読み込みたい！
InternetExplorer（IE）用にレイアウトを調整した CSS ファイルをメインの CSS ファイルの後に読み込みたい！
jQuery の後に jQuery プラグインを読み込んで、その後に自身の JS ファイルを読み込みたい！

このような場合でも、先程の「CSS や JavaScript の読み込み方」を少し変更するだけで実装できます。以下に CSS フレームワークの Bootstrap の後に自身の CSS ファイルを読み込む例を示します。

php
1function teratail60093_scripts() {
2    // CSS framework.
3    wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css' );
4    // Theme stylesheet.
5    wp_enqueue_style( 'teratail60093-style', get_stylesheet_directory_uri() . '/css/style.css', array( 'bootstrap' ) );
6}
7add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

注目していただきたいのは、テーマの CSS ファイルを読み込んでいる wp_enqueue_style() 関数の使用方法です。先程までは指定していなかった第三引数を指定しています。第三引数の部分は、この CSS ファイルより前に読み込まれる必要がある CSS ファイルのハンドルを配列で指定します。
※ ハンドル = wp_enqueue_style() 関数や wp_enqueue_script() 関数の第一引数に指定されている値

これは、wp_enqueue_script() 関数でも同じです。詳しくは、以下ドキュメントを読んでみてください。

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

今回の質問の解決策

長い前置き（偉そうな説明）がありましたが、ここからが本題です。

以下は、【WordPress】YouTubeの背景動画が再生されない。から色々引っ張ってきています。

header.php と footer.php は、先程の例を見本に用意しておいてください。その際、冒頭で指摘しています通り、script タグの記述は不要です。

functions.php

php
1function teratail60093_scripts() {
2    // Theme stylesheet.
3    wp_enqueue_style( 'teratail60093-style', get_stylesheet_uri() );
4    // Modal window.
5    wp_enqueue_script( 'teratail60093-modalwindow', get_stylesheet_directory_uri() . '/js/modal.js', array( 'jquery' ) );
6}
7add_action( 'wp_enqueue_scripts', 'teratail60093_scripts' );

style.css

css
1#modal-overlay {
2    z-index: 1;
3    display: none;
4    position: fixed;
5    top: 0;
6    left: 0;
7    width: 100%;
8    height: 100%;
9    background-color: rgba( 255,255,255, 0.75 );
10}
11
12#modal-content {
13    width: 910px;
14    height: 360px;
15    margin: 0;
16    padding: 20px 20px;
17    border: 0px solid #aaa;
18    background: #fff;
19    position: fixed;
20    /*display: none;*/
21}
22
23.button-link {
24    color: #00f;
25    text-decoration: underline;
26}
27
28.button-link:hover {
29    cursor: pointer;
30    color: #f00;
31}
32
33.css_btn_class {
34    font-size:16px;
35    font-family:Arial;
36    font-weight:normal;
37    -moz-border-radius:8px;
38    -webkit-border-radius:8px;
39    border-radius:8px;
40    border:0px solid #d83526;
41    padding:9px 18px;
42    text-decoration:none;
43    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
44    background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
45    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
46    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
47    background-color:#fe1a00;
48    color:#ffffff;
49    display:inline-block;
50}

js/modal.js

javascript
1(function($,window,document) {
2    $.fn.teratail60093ModalWindow = function() {
3        // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、
4        // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる
5        $("#modal-content").click(function(evt) {
6            evt.stopPropagation();
7        });
8
9        //リサイズされたら、センタリングをする
10        $(window).resize(centeringModalSyncer);
11
12        //ボタンのクリック(タッチ)イベント
13        $(".modal-syncer").click(function() {
14            //ボタンからフォーカスを外す
15            this.blur();
16            //プレイヤー(iframe)のsrcにYouTube動画のURLを設定
17            $("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=0");
18            $("#modal-overlay").fadeIn("fast");
19            $("#modal-content img").attr("src", $(this).data("description"));
20            // センタリング
21            centeringModalSyncer();
22        });
23
24        //[#modal-overlay]、または[#modal-close]をクリックしたら…
25        $("#modal-overlay, #modal-close").click(function() {
26            //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
27            $("#modal-overlay").fadeOut("fast", function() {
28                $("#vimeoPlayer").attr("src", "");  // プレイヤーのsrcをクリア
29            });
30        });
31    };
32
33    //センタリングを実行する関数
34     function centeringModalSyncer() {
35        //画面(ウィンドウ)の幅、高さを取得
36        var w = $(window).width();
37        var h = $(window).height();
38        //コンテンツ(#modal-content)の幅、高さを取得
39        var cw = $("#modal-content").outerWidth();
40        var ch = $("#modal-content").outerHeight();
41        //センタリングを実行する
42        $("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });
43    }
44
45    $(document).ready(function(){
46        $(document).teratail60093ModalWindow();
47    });
48})(window.jQuery,window,document);

こんな感じで動くと思います（動作確認済)。

投稿2016/12/27 21:02

編集2016/12/27 21:31

退会済みユーザー

総合スコア0

yoso

2016/12/27 23:09

ありがとうございます。こんなに詳しく書いていただき大感謝です、参考にし今晩修正させていただきます。とても嬉しかったので、取り急ぎお礼まで。

yoso

2016/12/28 09:27

お手数お掛けして申し訳ないのですが、 functions.phpを書き加えたところ Fatal errorと出てしまいwordpressへのログインが出来なくなってしまいました。 Fatal error: Cannot redeclare ***_scripts() (previously declared in /home/(ID)/(URL)/public_html/wp-content/themes/onetone-pro/functions.php:122) in /home/(ID)/(URL)/public_html/wp-content/themes/onetone-pro/functions.php on line 133 の文字列が管理画面、サイト表示共に表示されます。せめて入力したものを削除に元に戻したいのですが、方法はありませんでしょうか？

yoso

2016/12/28 09:51

すみません！分かりました、２重に同じことを書き込んでしまっているためですね。オンラインで修正作業を進めていたため、ログインできずに困っているのですが FTPを使用し直接サーバーにアクセスすればファイルはそこのあるのでしょうか？

退会済みユーザー

2016/12/28 17:07

> オンラインで修正作業を進めていたため、ログインできずに困っている管理画面でファイルを編集するのはご法度ですよ？ > FTPを使用し直接サーバーにアクセスすればファイルはそこのあるのでしょうか？はい、あります。FTP でアクセスし、ローカルにダウンロードして編集してください。アップロードする時は、ローカルで動作確認をしてからアップロードするようにしてください。

yoso

2016/12/29 11:27

ありがとうございます。そんなことも知らずにお恥ずかしい限りです。過去の質問まで遡ってご回答いただきありがとうございました。とても助かりました。

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