Dentro de “pie de página.php”

Pero esta no es la forma correcta de poner en cola archivos CSS y JS dentro de su proyecto de WordPress. Para acoplarlo, primero vaya a su archivo “functions.php” y ponga en cola los archivos de esta manera. Veamos el truco de sigma….

Paso 1: funciones.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\\');

Nota: Wordpress proporciona una versión sin comprimir de jquery. ¡Así que simplemente podemos usar ese jquery dentro de los archivos js que son necesarios! Para eso, simplemente pase el parámetro array('jquery') dentro de “wp_eneueue_script”. Una cosa para recordar es que JQuery tiene 2 versiones principales: sin comprimir y comprimida. Dentro de la versión sin comprimir, AJAX no funcionará correctamente.

Paso 2: Ahora dentro de “header.php”
Ahora necesitamos usar wp_head(); funcionan bajo etiquetas

.
    <?php echo get_bloginfo(); ?>                

Paso 3: Ahora dentro de “footer.php”
Ahora necesitamos usar wp_footer(); debajo de la etiqueta.

Incluir wp_head() y wp_footer() en tu tema de WordPress es crucial. Estas funciones insertan automáticamente scripts, estilos y metadatos esenciales requeridos por WordPress, temas y complementos, lo que garantiza la funcionalidad, compatibilidad y rendimiento adecuados. wp_head() agrega elementos necesarios dentro de la sección para SEO, mientras que wp_footer() incluye scripts al final para diferir JavaScript no crítico, mejorando la velocidad de carga de la página. Estas funciones son vitales para la integración de complementos y la personalización de temas dinámicos, así como para la ubicación correcta de análisis y códigos de seguimiento.

","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 trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Ponga en cola scripts CSS y JS en WordPress para un mejor rendimiento

Ponga en cola scripts CSS y JS en WordPress para un mejor rendimiento

Publicado el 2024-11-04
Navegar:338

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress es un software de código abierto: los usuarios pueden instalarlo, modificarlo y distribuirlo como quieran. Dado que el código fuente es accesible para todos, millones de expertos y desarrolladores de WordPress pueden crear herramientas y extensiones y compartirlas con el público.

Veamos cómo poner en cola archivos CSS y JS en su proyecto wordpress.

A la mayoría de los desarrolladores más nuevos les gusta,

Dentro de “header.php”

    <?php echo get_bloginfo(); ?>

Dentro de “pie de página.php”

Pero esta no es la forma correcta de poner en cola archivos CSS y JS dentro de su proyecto de WordPress. Para acoplarlo, primero vaya a su archivo “functions.php” y ponga en cola los archivos de esta manera. Veamos el truco de sigma….

Paso 1: funciones.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');

Nota: Wordpress proporciona una versión sin comprimir de jquery. ¡Así que simplemente podemos usar ese jquery dentro de los archivos js que son necesarios! Para eso, simplemente pase el parámetro array('jquery') dentro de “wp_eneueue_script”. Una cosa para recordar es que JQuery tiene 2 versiones principales: sin comprimir y comprimida. Dentro de la versión sin comprimir, AJAX no funcionará correctamente.

Paso 2: Ahora dentro de “header.php”
Ahora necesitamos usar wp_head(); funcionan bajo etiquetas

.
    <?php echo get_bloginfo(); ?>

Paso 3: Ahora dentro de “footer.php”
Ahora necesitamos usar wp_footer(); debajo de la etiqueta.

Declaración de liberación Este artículo se reproduce en: https://dev.to/shimanta_microcodes/enqueue-css-and-js-scripts-in-wordpress-for-better-performance-32ao?1 Si hay alguna infracción, comuníquese con Study_golang@163 .com para eliminarlo
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3