À l'intérieur de « footer.php »

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/[email protected]/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 les balises

.
    <?php echo get_bloginfo(); ?>                

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

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

","image":"http://www.luping.net/uploads/20240929/172757700566f8bbad10cf2.jpg","datePublished":"2024-11-04T20:05:55+08:00","dateModified":"2024-11-04T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > 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

Publié le 2024-11-04
Parcourir:212

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 de « header.php »

    <?php echo get_bloginfo(); ?>

À l'intérieur de « footer.php »

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/[email protected]/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 les balises

.
    <?php echo get_bloginfo(); ?>

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

Déclaration de sortie Cet article est reproduit sur : https://dev.to/shimanta_microcodes/enqueue-css-and-js-scripts-in-wordpress-for-better-performance-32ao?1 En cas de violation, veuillez contacter study_golang@163 .com pour le supprimer
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3