web-dev-qa-db-fra.com

Erreur de la console, même si tout fonctionne?

Je reçois cette erreur dans ma console lorsque je visite les pages de l’administrateur:

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

J'ai retrouvé l'erreur dans le code ci-dessous:

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' ) );

}
}

Le problème ici est que custom-script.js n'est pas disponible dans le dossier/inc et qu'il ne se trouve nulle part dans le dossier theme. Mais le sélecteur de couleur fonctionne parfaitement. Et si je supprime cette ligne:

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

Il va cesser de fonctionner tous ensemble. Alors pourquoi je reçois cette erreur, mais ça fonctionne toujours?

Voudrais avoir un journal de console propre.

MODIFIER:

J'ai changé pour ceci à la place:

wp_enqueue_script( 'wp-color-picker' );

Je reçois cette erreur:

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

Le sélecteur de couleur fonctionne correctement car il s'agit d'un script distinct mis en file d'attente sous la dépendance de custom-script-handle. Ainsi, même si custom-script-handle ne se charge pas parce que l'URL est incorrecte, le script du sélecteur de couleurs sera toujours chargé.

Si vous ne mettez pas custom-script-handle en file d'attente, le sélecteur de couleur ne fonctionnera pas car le script est en file d'attente. Vous auriez besoin de le mettre en file d'attente séparément avec wp_enqueue_script( 'wp-color-picker' );

La raison pour laquelle custom-script-handle ne se charge pas en elle-même est à l'origine de l'erreur de console que vous voyez, car l'URL est incorrecte. La raison pour laquelle l'URL est incorrecte est que vous utilisez plugins_url() de manière incorrecte. Plus précisément dans la façon dont vous avez utilisé __FILE__.

De la documentation , le deuxième argument de plugins_url() est:

Un chemin complet vers un fichier dans un plugin ou un mu-plugin. L'URL sera relative à son répertoire. Cela se fait généralement en passant __FILE__ comme argument.

Le problème est que dans votre cas, __FILE__ est dans un thème. Donc, votre __FILE__ est:

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

Mais le répertoire des plugins est:

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

WordPress connaît déjà l'URL du dossier des plugins, https://example/test/wp-content/plugins/, mais doit utiliser ces deux chemins pour déterminer l'URL du fichier spécifique que vous avez demandé. Donc, plugins_url() essaye de trouver le dossier du plugin en soustrayant ce second chemin du premier.

Donc si utilisé correctement , __FILE__ sera quelque chose comme:

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

Le chemin du plugin est ensuite soustrait de ceci et vous obtenez:

my-plugin/inc/assets.php

plugins_url() enlève alors le nom de fichier:

my-plugin/inc

Ensuite, ajoute le nom de fichier que vous avez fourni dans le premier argument (custom-script.js):

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

Et ajoute enfin cela aux pluginsURL:

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

Mais puisque votre __FILE__ ne se trouve pas dans le dossier plugins, il n'y a pas de chevauchement. Ainsi, quand il soustrait le répertoire du plugin et le nom du fichier, le chemin relatif est toujours:

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

Et puis cela et le nom du fichier sont ajoutés à l'URL des plugins et vous vous retrouvez avec ceci:

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

Donc si vous avez besoin que votre thème mette en file d'attente custom-script.js, vous devez soit le mettre dans le thème, soit le mettre en file d'attente à l'aide du descripteur que le plug-in aura déjà enregistré. N'essayez pas de charger des fichiers depuis un plugin directement depuis un thème.

1
Jacob Peattie