Mettez les scripts CSS et JS en file d'attente dans WordPress pour de meilleures performances-tutoriel php-php.cn

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

WBOY

Libérer： 2024-08-22 06:34:39

original

311 Les gens l'ont consulté

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>

Copier après la connexion

À 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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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!