wordpressでloadscreenの実装ができない

前提・実現したいこと
Wordpress初心者です。
現在Wordpressで自作テーマを作成しています。
HTMLやCSSでコーディングをしたPortfolioをWordpress化しています。
loadscreenアニメーションを実装する段階で問題が発生しました。

発生している問題
Wordpress化する前の段階ではloadscreenアニメーションが動作していたがWordpress化した際に動作しなくなる。
Wordpress化する前の段階では表示されていなかったエラーメッセージの表示。

wp_enqueue_script()でscriptの読み込みまでは出来ましたが肝心のアニメーションが動作しないです。読み込み自体はデベロッパツールで確認したので間違いないと思います。
エラーメッセージは「imagesディレクトリの中に3種類のpngのファイルがありません」との事なのでimgesディレクトリとpngファイルを追加したらエラーメッセージ自体は表示されなくなりましたがアニメーション自体は動作していません。

該当のソースコード
Wordpress化する前の段階では表示されていなかったエラーメッセージの表示

jquery.min.js?ver=1.9.1:5 GET http://localhost/wordpress/wp-content/themes/Portfolio/images/prev.png 404 (Not Found)
jquery.min.js?ver=1.9.1:5 GET http://localhost/wordpress/wp-content/themes/Portfolio/images/close.png 404 (Not Found)
jquery.min.js?ver=1.9.1:5 GET http://localhost/wordpress/wp-content/themes/Portfolio/images/next.png 404 (Not Found)

Wordpressでのscriptの読み込み


function my_script_init()
{
wp_enqueue_script('loadscreen_Url', 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), '1.9.1', true);
wp_enqueue_script('loadscreen', get_template_directory_uri() . '/js/jQuery/loadscreen.js', array( 'loadscreen_Url' ), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');

試したこと
Wordpress化する前の段階ではloadscreenアニメーションに使用するGIF画像はGIFディレクトリを作成してその中にGIF画像を保存していましたがWordpressでloadscreenアニメーションを実装する際はImagesディレクトリの中にloading.gifを作成するみたいだったので試してみました。

madone99

2019/12/12 01:10

子テーマは使用していませんか？あとコード部分は<code>を使用して編集頂けますか。

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

回答1件

WordPress には、デフォルトで、jQuery を読み込むますが、jQuery を独自に読み込んでいるのはなにか理由がありますか？

現在、Web ブラウザで HTML のソースコードを確認すると jQuery が２つ(WordPress標準jQueryと独自に追加したバージョン)読み込まれていたりしないでしょうか？

独自に jQuery を読み込みたいのであれば、

function my_jquery_228876()
{
    wp_deregister_script(‘jquery’);
    wp_enqueue_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js’, array(), ‘3.3.1’);
}
add_action('wp_enqueue_scripts', 'my_jquery_228876');

のように、まず、WordPress の jQuery を読み込まないように wp_deregister_script で読み込みを停止してから、jQuery を読み込ませる必要があります。

また、プラグイン等で jquery に依存しているスクリプトがあったりするので、jQuery を置き換える場合にも第1パラメータの handle は、jquery にしておくほうのが良いと思います。(jquery のハンドルがないと他の部分で、WordPress 標準 jQuery を利用しているスクリプトが動かなくなるため。)

他に考えられる要因としては...

LoadScreen のコードが不明ですが、WordPress 化する前は動いていたということですので、 WordPress の jQuery では、jQuery.noConflict() が実行されるので、$ で jQuery を呼び出すことはできません。
jQuery の実行は、jQuery で呼び出すように書き換えるか jQuery(function($){ もとのjQueryスクリプト }); の様にしてください。

投稿2019/12/13 12:10

編集2019/12/13 12:11