Petit conseil inclure conditionnellement JS et CSS avec get_current_screen

Comme beaucoup l'ont déclaré avant moi: "Un bon citoyen WordPress charge uniquement ses fichiers là où ils sont nécessaires". Ce principe s’applique à la fois au serveur frontal et au serveur principal (admin). Rien ne justifie le chargement de fichiers CSS et JS sur chaque page d’administrateur lorsque vous n’en avez besoin que sur une seule page que vous avez créée. Heureusement, faire les choses de la bonne manière n’est qu’un appel de fonction.

"N'incluez jamais de fichiers CSS ou JS sur toutes les pages de l'administrateur. Cela provoquerait des conflits avec d'autres plugins."


Il y a une fonction WordPress pour tout

Étant donné que presque toutes les pages d’administration ont une URL unique, il n’est pas difficile de détecter le chargement d’une page donnée et d’inclure (et seulement après) les fichiers JS et CSS dont nous avons besoin. On peut utiliser $ _SERVER ['REQUEST_URI'], ou dans de nombreux cas, le $ _GET ['action'] variable. Cependant, il existe un moyen beaucoup plus facile, plus propre et plus standardisé de le faire. Dites bonjour à la get_current_screen une fonction.

Ce qu'il faut savoir sur le get_current_screen une fonction:

  • Il a été introduit dans WordPress v3.1. Par conséquent, si vous essayez de l'utiliser dans les versions antérieures, vous obtenez l'erreur "appel à une fonction non définie". En utilisant le fonction_existe fonction pour vérifier c'est une bonne idée si vous voulez fournir une alternative.
  • Ce n'est pas disponible dans le admin_init ou init crochets car il est initialisé après que ces crochets sont appelés.
  • La fonction retourne un WP_Screen objet avec beaucoup d'informations, mais vous serez principalement intéressé par le identifiant propriété d'objet.
  • Ce n'est pas disponible sur le front-end (parce que ça ne sert à rien là).

Quelques lignes de code font toute la différence

Supposons que votre plugin comporte une page d’options sous le menu Paramètres que vous avez créée avec:

add_options_page ('Mon plugin', 'Mon plugin', 'manage_options', 'my_plugin', 'my_plugin_options');

Vous avez besoin de CSS et de JavaScript supplémentaires sur cette page pour que vous ajoutiez également ce code:

 // Mauvais code ci-dessous! Ne pas copier / coller! add_action ('admin_enqueue_scripts', 'mon_plugin_scripts'); function my_plugin_scripts () wp_enqueue_style ('farbtastic'); wp_enqueue_script ('farbtastic'); 

C'est mauvais! Ne fais pas ça! L'extrait ci-dessus inclura les sélecteurs de couleurs CSS et JS pour Farbtastic sur chaque page d'administration. Si d'autres plugins veulent se débarrasser de vos includes sur leurs pages, ils doivent utiliser wp_dequeue_ * fonctions pour les retirer de la file d'attente. C'est vraiment inutile et impoli de nous parce que nous pouvons écrire un meilleur code!


 add_action ('admin_enqueue_scripts', 'mon_plugin_scripts'); function my_plugin_scripts () // Inclut JS / CSS uniquement si nous sommes sur notre page d'options if (is_my_plugin_screen ()) wp_enqueue_style ('farbtastic'); wp_enqueue_script ('farbtastic');  // Vérifier si nous en sommes sur la page d'options de la fonction is_my_plugin_screen () $ screen = get_current_screen (); if (is_object ($ screen) && $ screen-> id == 'settings_page_my_plugin') return true;  else return false; 

C'est vraiment facile

Si vous consultez notre code amélioré, vous constaterez que nous n’en avons ajouté qu’un seul. si déclaration et une fonction simple - is_my_plugin_screen qui vérifie si nous sommes sur la page des options de notre plugin. La variable $ écran détient le WP_Screen objet qui a de nombreuses propriétés, mais nous ne sommes intéressés que par la identifiant un. Cette identifiant se compose d'un préfixe "paramètres_page_", identique pour toutes les pages de paramètres, et une chaîne"mon_plugin"qui est unique à notre plugin parce que nous l'avons défini comme le 4ème paramètre de la add_options_page appel de fonction.

Le code est très simple et facilement adaptable à n’importe quel écran d’administrateur. Pour voir quel est l'identifiant de l'écran en cours, il suffit de vider le contenu de $ écran avec:

écho '
'. print_r (get_current_screen (), true). '
';

Choses à ramener à la maison:

  • N'incluez jamais de fichiers CSS ou JS sur toutes les pages d'administration; cela causera des conflits avec d'autres plugins.
  • Utilisation get_current_screen après init pour savoir quand votre écran d'administration est visible et n'inclure que des fichiers supplémentaires.
  • Vous pouvez trouver une liste des principaux identifiants d’écran d’administrateur dans le Codex sous Référence de l’écran d’administration..
  • Jamais écho > ou