web-dev-qa-db-ja.com

すべてが機能している場合でも、コンソールエラーは発生しますか。

管理ページにアクセスすると、コンソールにこのエラーが表示されます。

GET https://example/test/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js?ver=4.9.4 net::ERR_ABORTED

以下のコードまでエラーを追跡しました。

function theme_add_color_picker( $hook ) {

if( is_admin() ) {

    wp_enqueue_style( 'wp-color-picker' );

    wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

    wp_enqueue_script( 'admin-color-picker', get_template_directory_uri() . '/javascripts/admin/admin-color-picker.js', array( 'jquery' ) );

}
}

ここでの問題は、custom-script.jsが/ incフォルダの中で利用できず、theme-folderのどこにもないことです。しかし、カラーピッカーは完璧に機能します。そしてこの行を削除すると：

wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

それは一緒に働くのをやめるでしょう。それでは、どうしてこのエラーが出るのでしょうか。

クリーンなコンソールログが欲しいのですが。

編集：

私は代わりにこれに変更しました：

wp_enqueue_script( 'wp-color-picker' );

私はこのエラーが出ます：

Uncaught TypeError: $(...).wpColorPicker is not a function
at HTMLDocument.<anonymous> (admin-color-picker.js?ver=4.9.4:3)
at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Function.ready (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at HTMLDocument.K (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
themeserrors
1
jockebq

カラーピッカーはcustom-script-handleの依存関係としてエンキューされている別のスクリプトなので、うまく機能しています。 URLが間違っているためにcustom-script-handleが読み込まれない場合でも、カラーピッカースクリプトは読み込まれます。

custom-script-handleをエンキューしないと、スクリプトがまったくエンキューされているため、カラーピッカーは機能しません。あなたはそれをwp_enqueue_script( 'wp-color-picker' );で別々にエンキューする必要があるでしょう

custom-script-handle自体が読み込まれず、コンソールエラーが発生するのは、URLが間違っているためです。 URLが間違っているのは、plugins_url()の使い方が間違っているためです。具体的には__FILE__の使い方にあります。

ドキュメント から、plugins_url()の2番目の引数は次のとおりです。

プラグインまたはmu-plugin内のファイルへのフルパス。 URLはそのディレクトリからの相対パスになります。通常これは__FILE__を引数として渡すことによって行われます。

問題はあなたの場合__FILE__がテーマの中にあるということです。だからあなたの__FILE__は：

/home/account/public_html/wp-content/themes/mytheme-theme/inc/{whatever-the-file-name-is}.php

しかし、pluginsディレクトリは次のとおりです。

/home/account/public_html/wp-content/plugins

WordPressは既にpluginsフォルダへのURL https://example/test/wp-content/plugins/を知っていますが、あなたが要求した特定のファイルへのURLを見つけるためにこれら二つのパスを使う必要があります。それでplugins_url()がすることは最初のパスからその2番目のパスを差し引くことによってプラグインフォルダーを見つけ出すことです。

したがって、正しくを使用すると、__FILE__は次のようになります。

/home/account/public_html/wp-content/plugins/my-plugin/inc/assets.php

その後、プラグインのパスがこれから引かれ、あなたは得る：

my-plugin/inc/assets.php

plugins_url()はファイル名を削除します。

my-plugin/inc

次に、最初の引数に指定したファイル名を追加します（custom-script.js）。

/my-plugin/inc/custom-script.js

そして最後にそれをプラグインURLに追加します。

http://example.com/wp-content/plugins/my-plugin/inc/custom-script.js

しかし、あなたの__FILE__はpluginsフォルダに入っていないので、重複はありません。それで、それがプラグインディレクトリとファイル名を引くとき、相対的なパスはまだ：

/home/account/public_html/wp-content/themes/mytheme-theme/inc/

そしてそれとそのファイル名がプラグインのURLに追加され、あなたはこれで終わります：

https://example.com/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js

custom-script.jsをエンキューするためにテーマが必要な場合は、それをテーマに入れるか、プラグインがすでに登録しているハンドルを使用してエンキューする必要があります。テーマ内から直接プラグインからファイルをロードしないでください。

1
Jacob Peattie