En este tutorial, exploraremos cómo puedes usar la función wp_enqueue_style()<\/strong> para mejorar la apariencia de tu sitio WordPress y la experiencia general del usuario.<\/p> Descarga la hoja de trucos de WordPress definitiva<\/a><\/p> Empezaremos con algunos ejemplos básicos para ayudarte a entender mejor cómo funciona la función wp_enqueue_style()<\/strong>.<\/p> Para poner en cola la hoja de estilos style.css<\/strong> del tema principal, utiliza la función wp_enqueue_style()<\/strong> en el archivo functions.php<\/strong> de tu tema.<\/p> Aquí tienes un ejemplo de cómo queda:<\/p> En el código, my-theme-style<\/strong> es un nombre único para la hoja de estilos que está en cola, mientras que la función get_stylesheet_uri()<\/a> maneja la URL del archivo style.css<\/strong> del tema principal.<\/p> A continuación, la función wp_enqueue_style()<\/strong> registra el estilo y lo añade a la cola. Por último, la función add_action()<\/a> añade tu función personalizada my_theme_enqueue_styles()<\/strong> al hook wp_enqueue_scripts<\/strong>, lo que garantizará que la hoja de estilos se ponga en cola correctamente. <\/p> También puedes utilizar la función wp_enqueue_style() <\/strong>para añadir estilos adicionales. Por ejemplo, puedes utilizar esta función para incluir opciones de estilo que se encuentren en un archivo separado y añadirlas a la hoja principal.<\/p> En cuanto al código, puedes reutilizar la mayor parte del ejemplo anterior con algunas adiciones:<\/p> En este método, hemos utilizado la función get_theme_file_uri()<\/a>, que devuelve la URL del archivo en el directorio del tema actual. En nuestro caso, es extra.css.<\/strong> De esta manera, la función pondrá en cola primero la hoja de estilos principal y luego pasará a los estilos adicionales. <\/p> Es posible utilizar la función wp_enqueue_style()<\/strong> para cargar una hoja de estilos desde una fuente externa. El proceso puede ser beneficioso si deseas utilizar fuentes personalizadas o una hoja de estilos alojada en una red de distribución de contenidos (CDN).<\/p> El código es muy similar a los ejemplos anteriores:<\/p> Recuerda sustituir la parte de la INSERT URL <\/strong>por una URL real de la hoja de estilo.<\/p> WordPress tiene una función integrada llamada wp_enqueue_script()<\/a> que te permite poner en cola JavaScript o scripts similares. Añade el siguiente código al archivo functions.php de tu tema:<\/p> Ten en cuenta que esta función utiliza más parámetros:<\/p> Echa un vistazo a algunos casos prácticos de uso de la función wp_enqueue_style()<\/strong> para mejorar tu sitio WordPress<\/a>.<\/p> La carga de CSS en páginas específicas puede aportar varias ventajas a un sitio web WordPress: <\/p> En el siguiente ejemplo, registraremos y cargaremos CSS en la página Contáctenos<\/strong> con la ayuda del hook de WordPress wp_enqueue_scripts<\/strong> y la función is_page()<\/a>:<\/strong><\/p> Al mover el CSS al pie de la página, el navegador puede dar prioridad a cargar primero el HTML y otros recursos importantes. Como resultado, cargar CSS en el pie de página mejora el tiempo de carga de tu página. <\/p> La mejor forma de cargar CSS en el pie de página es con el hook de WordPress<\/a> get_footer():<\/strong><\/p> Recuerda que cargar CSS en el pie de página puede causar problemas de renderizado y hacer que la página parezca rota o sin estilo. Por este motivo, carga primero el CSS más importante en la sección del encabezado y, a continuación, pasa a la parte del pie de página.<\/p> Los estilos en línea dinámicos permiten añadir estilos personalizados a elementos individuales de una página web. La forma más sencilla de añadir estilos en línea es con la función wp_add_inline_style()<\/a>, que los carga después de un archivo CSS específico.<\/p> En el siguiente ejemplo, combinaremos las funciones wp_enqueue_style()<\/strong> y wp_add_inline_style()<\/strong> para aplicar el estilo del archivo design.css y los titulares en negrita:<\/p> Ten en cuenta que el estilo inline sólo funcionará después de que el design.css<\/strong> esté correctamente encolado.<\/p> Utiliza la función wp_style_is()<\/a> si quieres más información sobre el estado de la hoja de estilos. Esta función puede comprobar si un archivo de hoja de estilos CSS está en la cola, registrado o listo para mostrarse.<\/p> También puedes utilizar la función wp_enqueue_style<\/strong> con el siguiente fragmento de código para poner en cola una hoja de estilos CSS con metadatos de título:<\/p>Cómo usar wp_enqueue_style para cargar hojas de estilo CSS en WordPress<\/h2>
Cómo poner en cola la hoja de estilo principal style.css<\/h3>
![\"Visualización](\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/09\/image-28.png\")
<\/figure><\/div>function my_theme_enqueue_styles() {\n wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>![\"Visualización](\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/09\/image-29-1024x571.png\")
<\/figure><\/div>Cómo poner en cola otras hojas de estilo<\/h3>
function my_theme_enqueue_styles() {\n wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>Cómo cargar hojas de estilo externas en WordPress<\/h3>
function theme_files() { \n wp_enqueue_style('theme_custom', 'INSERT URL'); \n} \n\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>Cómo añadir archivos de script a WordPress usando wp_enqueuing_script<\/h3>
function theme_scripts() {\n wp_enqueue_script( 'my-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>\n
Ejemplos útiles de wp_enqueue_style<\/h2>
Cargar CSS sólo en determinadas páginas<\/h3>
\n
<?php\nadd_action('init', 'register_custom_styles');\nfunction register_custom_styles() {\n wp_register_style( 'custom-design', '\/wp-content\/design.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );\nfunction conditionally_enqueue_styles_scripts() {\n if ( is_page('contactus') ) {\n wp_enqueue_style( 'custom-design' );\n }\n}\n?><\/pre>Cargar archivos CSS en el pie de página<\/h3>
<?php\nfunction footer_style() {\n wp_enqueue_style('custom-design', '\/wp-content\/design.css');\n};\nadd_action( 'get_footer', 'footer_style' );\n?><\/pre>Añadir estilos dinámicos en línea<\/h3>
<?php\nfunction theme_style() {\n\twp_enqueue_style( 'custom-style', get_template_directory_uri() . '\/wp-content\/design.css' );\n\t$bold_headlines = get_theme_mod( 'headline-font-weight' ); \n\t$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';\n\twp_add_inline_style( 'custom-style', $inline_style );\n}\nadd_action( 'wp_enqueue_scripts', 'theme_style' );\n?><\/pre>Comprobar el estado de cola de la hoja de estilo<\/h3>
<?php\nfunction check_styles() {\n\tif( wp_style_is( 'main' ) {\n \n\t\twp_enqueue_style( 'my-theme', '\/custom-theme.css' );\n\t}\n}\nadd_action( 'wp_enqueue_scripts', 'check_styles' );\n?><\/pre>Insertar metadatos en la hoja de estilo<\/h3>
<?php\nfunction theme_extra_styles() {\n\twp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );\n\twp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );\n\t}\nadd_action( 'wp_enqueue_scripts', 'theme_extra_styles' );\n?><\/pre>
![\"\"](\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\")
<\/a><\/figure><\/div>