Enjurer les scripts et les styles dans WordPress

Les plats clés

• Les scripts et les styles d'Enqueing dans WordPress sont essentiels pour maintenir les performances et prévenir les conflits entre différents scripts et styles. La façon recommandée d'ajouter des scripts utilise le crochet admin_enqueue_scripts, préfixant le gestionnaire pour éviter les conflits et s'assurer que le script est toujours chargé.
• Il est possible de supprimer des scripts inutiles qui provoquent des erreurs ou des conflits en utilisant la fonction WP_Degister_Style. Ceci est particulièrement utile en mode débogage lors du dépannage des problèmes.
• Travailler avec les shortcodes nécessite souvent une injection de scripts dans la page. Cela peut être réalisé en enregistrant un rappel sur le filtre_content et en testant s'il contient le shortcode. Cependant, cette solution peut avoir des problèmes de performances sur des sites Web à haute charge. Une solution plus sophistiquée consiste à utiliser le compositeur pour charger des classes et à enregistrer le shortcode à l'intérieur du contenu du post.

Après avoir développé des plugins et des thèmes WordPress pendant un certain temps, vous commencez à réfléchir de plus en plus aux performances de votre thème et aux problèmes que cela pourrait causer à vos clients. L'un de ces problèmes est d'obtenir des scripts et des styles. Dans cet article, nous couvrirons les bases des scripts en file d'attente et des meilleures pratiques pour différents cas d'utilisation. Vous pouvez consulter cet article pour un aperçu des débutants sur la gestion de vos actifs WordPress.

EnqueUir les scripts et styles

Si vous avez besoin de l'injection de certains CSS ou JavaScript dans certaines pages de votre site Web, nous avons tendance à les ajouter dans le même fichier de balisage ou à les ajouter en utilisant une URL directe au fichier.

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

Cependant, ce n'est pas le moyen recommandé d'ajouter des scripts, et les plugins de mise en cache n'optimiseront pas et ne mettront pas en cache vos actifs pour augmenter les performances du site Web. Nous devons utiliser le crochet admin_enqueue_scripts.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Le premier paramètre de la méthode WP_ENQUEUE_Script est le nom du gestionnaire de script, nous devons toujours préfixer le gestionnaire pour éviter tout conflit et nous assurer que notre script sera toujours chargé.

La solution actuelle n'est pas parfaite et notre script est inclus dans chaque page de fin. Nous pouvons utiliser la variable $ Hook transmise à la fonction de rappel pour tester une certaine page.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Maintenant, notre script ne sera inclus que dans les paramètres et les nouvelles pages de publication. Nous pouvons aller plus loin pour inclure nos styles lorsque l'utilisateur crée une nouvelle page.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

supprimer les scripts inutiles

La plupart des développeurs ne se soucient pas de la mise en œuvre de leurs scripts en cas de besoin, c'est pourquoi nous finirons toujours par obtenir des erreurs inattendues et des problèmes de style étranges. Lorsque vous remarquez qu'un script lance une erreur ou provoque des conflits, vous pouvez le supprimer avant d'ajouter le vôtre, cela est souvent utile en mode débogage.

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

Travailler avec Shortcodes

La plupart des plugins et thèmes fournissent un ensemble de codes à short pour interagir avec le site Web, ils doivent parfois injecter des scripts dans la page. Malheureusement, nous ne pouvons pas tester les pages de front comme nous l'avons fait auparavant pour le back-end.

Un moyen facile d'y parvenir est d'enregistrer un rappel sur le filtre_content et de tester s'il contient votre shortcode. S'il revient oui, vous pouvez mettre vos scripts, sinon ne faites rien.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Le code ci-dessus fonctionne très bien et ne fera que mettre en place nos scripts pour les messages contenant notre shortcode. Cependant, cette solution a des problèmes de performances graves sur des sites Web à haute charge. Nous allons créer une solution plus sophistiquée pour ce problème.

Si vous n'utilisez pas déjà Composer pour charger vos cours, je vous conseille de commencer à le faire. Notre fichier Plugin Composer.json ressemblerait à ce qui suit:

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

La classe SRC / Shortcodes / HelloshortCode.php détient notre définition de shortcode.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

La méthode d'exécution renverra le balisage HTML pour notre shortcode et définira l'attribut statique chargé à True lorsque le shortcode est utilisé.

La méthode Enqueuescripts enternera nos styles lorsque le plugin est chargé. La partie restante enregistrera notre shortcode pour être reconnu dans le contenu du post.

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

Nous pouvons sûrement éviter de mettre ce code dans le fichier du plugin principal, mais nous allons garder les choses simples et lisibles.

La variable $ shortcodes détient une liste de codes Shortcodes disponibles. La première boucle enregistrera notre shortcode et fera la méthode d'exécution le gestionnaire. Ensuite, nous utiliserons le crochet wp_footer pour enterrer nos scripts de shortcode avant de fermer la balise corporelle.

Vous pouvez maintenant créer une nouvelle page contenant notre shortcode et vérifier si notre script est chargé correctement.

Conclusion

Ce court article a été un résumé sur la façon d'obtenir vos scripts de plugin et de thème, et la meilleure façon d'éviter de les charger à l'intérieur de chaque page de votre site Web. Si vous avez une question ou des commentaires, veuillez les poster ci-dessous et je ferai de mon mieux pour y répondre!

Questions fréquemment posées (FAQ) sur les scripts et les styles de l'observation de WordPress

Quel est le but de la mise en œuvre de scripts et de styles dans WordPress?

Les scripts et styles d'embarcation dans WordPress sont une meilleure pratique qui garantit l'ordre de chargement correct de vos scripts et de vos styles. Il aide à prévenir les conflits entre différents scripts et styles que votre thème ou vos plugins peut utiliser. En enjamant, vous dites à WordPress quand charger le script / style, où le charger, et quels autres scripts / styles cela dépend.

comment puis-je enterrer un script dans wordpress?

Pour enterrer un script dans wordpress, vous devez utiliser la fonction wp_enqueue_script (). Cette fonction nécessite au moins deux paramètres: la poignée (un nom unique pour le script) et le SRC (l'URL du script). Vous pouvez également spécifier des paramètres supplémentaires tels que les dépendances, la version, et s'il faut charger le script dans le pied de page.

Quelle est la différence entre WP_ENQUEUE_Script () et WP_Register_Script ()?

Les deux fonctions sont utilisées Pour enregistrer un script avec WordPress, mais il y a une différence clé. wp_register_script () enregistre uniquement le script et ne l'entraîne pas. Cela signifie que le script ne sera imprimé que s'il est ultérieur avec WP_enqueue_script (). D'un autre côté, wp_enqueue_script () enregistre et enfile le script, ce qui signifie qu'il sera imprimé dans le html.

Puis-je enterre les styles dans WordPress?

Oui, vous pouvez enterrer des styles dans WordPress WordPress? Utilisation de la fonction wp_enqueue_style (). Cette fonction fonctionne de manière similaire avec wp_enqueue_script (), mais elle est utilisée pour les feuilles de styles au lieu des scripts.

Qu'est-ce que le crochet d'action 'wp_enqueue_scripts'

Vos scripts et styles. Ce crochet est appelé lorsque WordPress est sur le point d'imprimer les scripts et les styles dans le HTML. En vous connectant, vous vous assurez que vos scripts et styles sont en cours au bon moment.

Pourquoi est-il important de spécifier les dépendances lors de la mise en place de scripts ou de styles?

Spécification des dépendances garantit que vos scripts ou les styles sont chargés dans le bon ordre. Si votre script dépend d'un autre script (comme jQuery), WordPress s'assurera que jQuery est chargé avant votre script.

Comment puis-je désobliger un script ou un style dans WordPress?

Vous pouvez déshabiller Un script ou un style dans WordPress à l'aide de la fonction wp_dequeue_script () ou wp_dequeue_style (). Ceci est utile si vous souhaitez empêcher un script ou un style d'être chargé.

Puis-je enterrer des scripts et des styles dans la zone d'administration?

Oui, vous pouvez enterrer les scripts et les styles de l'administrateur dans l'administrateur zone à l'aide du crochet d'action 'admin_enqueue_scripts'. Cela fonctionne de manière similaire au crochet 'wp_enqueue_scripts', mais il est utilisé pour la zone d'administration au lieu de l'action frontale.

Quelle est l'action d'action 'wp_print_scripts' Le crochet est un crochet plus ancien qui a été utilisé pour enterrer les scripts. Cependant, il n'est plus recommandé d'utiliser ce crochet, car il peut entraîner des problèmes avec l'ordre de chargement du script. Vous devez utiliser le crochet ‘wp_enqueue_scripts’ à la place.

Puis-je enterrer les scripts et les styles conditionnels?

Oui, vous pouvez enterrer les scripts et les styles conditionnellement. Par exemple, vous pouvez utiliser la fonction is_page () pour uniquement mettre un script ou un style si une certaine page est affichée. Cela peut être utile pour les performances, car il empêche les scripts et les styles inutiles d'être chargés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!