Maison >développement back-end >tutoriel php >Mettez les scripts CSS et JS en file d'attente dans WordPress pour de meilleures performances

Mettez les scripts CSS et JS en file d'attente dans WordPress pour de meilleures performances

WBOYoriginal: 2024-08-22 06:34:39320parcourir

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress est un logiciel open source : les utilisateurs peuvent l'installer, le modifier et le distribuer comme ils le souhaitent. Le code source étant accessible à tous, des millions d’experts et de développeurs WordPress peuvent créer des outils et des extensions et les partager avec le public.

Voyons comment mettre en file d'attente les fichiers CSS et JS dans votre projet wordpress.

La plupart des développeurs les plus récents aiment,

À l'intérieur « header.php »

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</head>

À l'intérieur « footer.php »

<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</footer>

Mais ce n'est pas la bonne façon de mettre les fichiers CSS et JS en file d'attente dans votre projet wordpress. Pour l'ancrer, accédez d'abord à votre fichier «functions.php» et mettez les fichiers en file d'attente comme ceci. Voyons l'astuce sigma….

Étape 1 : fonctions.php

function my_theme_enqueue_styles_scripts() {
    // Enqueue CSS files
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    wp_enqueue_style('aos-css', 'https://unpkg.com/aos@2.3.1/dist/aos.css');
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css');

    // Enqueue default Jquery in wordpress.
    wp_enqueue_script('jquery');

    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
    wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');

Remarque : Wordpress fournit une version non compressée de jquery. Nous pouvons donc simplement utiliser ce jquery dans les fichiers js requis ! Pour cela, vous passez simplement le paramètre array('jquery') à l'intérieur de « wp_eneueue_script » . Une chose à retenir est que JQuery a 2 versions principales : non compressée et compressée. Dans la version non compressée, AJAX ne fonctionnera pas correctement.

Étape 2 : Maintenant dans « header.php »
Maintenant, nous devons utiliser wp_head(); fonction sous

balises.

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

Étape 3 : Maintenant dans « footer.php »
Maintenant, nous devons utiliser wp_footer(); sous le tag.

<?php wp_footer(); ?>
</body>

Inclure wp_head() et wp_footer() dans votre thème WordPress est crucial. Ces fonctions insèrent automatiquement les scripts, styles et métadonnées essentiels requis par WordPress, les thèmes et les plugins, garantissant ainsi une fonctionnalité, une compatibilité et des performances appropriées. wp_head() ajoute les éléments nécessaires dans la section pour le SEO, tandis que wp_footer() inclut des scripts à la fin pour différer le JavaScript non critique, améliorant ainsi la vitesse de chargement des pages. Ces fonctions sont vitales pour l'intégration des plugins et la personnalisation dynamique des thèmes, ainsi que pour le placement correct des codes d'analyse et de suivi.

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!

php JavaScript jquery css ajax Array for while public JS function this WordPress SEO

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment transmettre des données de la route au contrôleur et afficher dans Laravel 11Article suivant：Comment transmettre des données de la route au contrôleur et afficher dans Laravel 11

Articles Liés

Voir plus