Ya sea creando su propio tema de WordPress, un tema secundario a partir de su padre o editando un tema, encontrará la necesidad de agregar su propia hoja de estilo personalizada CSS. Lo más probable es que también desee reemplazar algunos estilos de la hoja de estilos de tema predeterminada.

Hay varias maneras de agregar sus propios estilos y/o anular estilos predeterminados. Entonces, ¿cuál es la mejor manera de hacerlo? Los desarrolladores estarán de acuerdo en que es creando sus propios archivos CSS personalizados e incrustarlos en el tema de WordPress en el que está trabajando.

Formas de agregar código CSS personalizado a temas de WordPress

No hablaremos de formas depreciadas de agregar estilos CSS a elementos HTML, o agregar bloques <estilo>. Hoy en día, estos métodos son abandonados por los desarrolladores. Además, no son amigables con el SEO, lo cual es un tema importante por el que preocuparse hoy en día.

Ni siquiera sugeriremos editar la hoja de estilo CSS original del tema (generalmente estilo.css), o agregarle código personalizado. Este archivo es a menudo muy grande y difícil de manejar. Cualquier pequeño error de escritura o error de sintaxis en él podría causar que todo el sitio se bloquee.

En este artículo le mostraremos cómo crear un archivo CSS personalizado e incrustarlo en un tema de WordPress.

Cómo agregar archivos de hojas de estilo personalizadas a temas de WordPress usando wp_register_style() y wp_enqueue_style()

El primer paso para incrustar archivos CSS personalizados en WordPress es agregar archivos a tu tema. Ya sea usando un cliente FTP o su administrador de archivos cPanels, localice su carpeta de temas y ábrala. Ahora puede crear un nuevo archivo y nombre en, por ejemplo, personalizado.css o cargue el archivo CSS desde su computadora. En caso de que necesite agregar más de un archivo CSS a su tema WP, repita este paso.

Si completó este paso correctamente, debería ver su archivo o archivos CSS personalizados en el editor de temas de instalación de WordPress.

Vincular archivos CSS personalizados la sección head del sitio

Ahora que ha agregado sus archivos CSS personalizados a su carpeta de temas WP, es hora de vincular los archivos a la sección head <de su sitio>. De esta manera, el sitio puede aplicar sus estilos personalizados a sus elementos.

Simplemente puede agregar un elemento< link >a la sección< head > de su sitio, preferible justo antes de la etiqueta </head> de cierre. De esta manera, los estilos CSS personalizados se cargan por última vez y anulan los estilos predeterminados. La sección < head > de su sitio generalmente se encuentra en el encabezado de la carpeta del tema.archivo php y es accesible a través del editor de temas de WordPress.

Este es un ejemplo del elemento cuando su sitio se encuentra en la carpeta » test-site «en la carpeta raíz de su servidor, su carpeta de tema se llama» test-theme «y su archivo CSS se llama» personalizado.css»:

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

Esta solución simple funcionará bien, pero no es la mejor práctica de incrustar archivos CSS en sitios de WordPress.

Incrustar un archivo CSS en WordPress usando las funciones wp_register_style() y wp_enqueue_style ()

La práctica recomendada para incrustar archivos CSS personalizados en su sitio de WordPress es registrar su hoja de estilos en las funciones de su tema WP.archivo php usando las funciones wp_register_style() y wp_enqueue_style (). De esta manera, sus archivos CSS se cargarán en el momento en que se active la acción wp_head. La hoja de estilos se colocará justo después de la hoja de estilos predeterminada del tema. y le permite anular estilos predeterminados.

Lo primero que debe hacer es localizar las funciones de su tema.archivo php. Se encuentra dentro del editor de temas de WordPress. También puede hacerlo utilizando el Administrador de archivos FTP o cPanels. Si está trabajando en un tema secundario, edite el archivo de funciones de temas secundarios, no el tema principal. De esta manera evitarás perder tu código personalizado al actualizar el tema principal. Desplácese hacia abajo hasta la parte inferior de funciones.php y agregue el siguiente fragmento de código:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Personalizar el fragmento: en el ejemplo anterior, llamamos a la función de registro » additional_stylesheets «y registramos un archivo CSS de hoja de estilos llamado» personalizado.css», previamente subido a nuestra carpeta de temas. Puede nombrar la función como desee y reemplazar el nombre de la función en la fila superior e inferior del snipet. Si su archivo de hoja de estilos tiene un nombre diferente al personalizado.css reemplaza la palabra custom en el snipet con tu propio nombre de archivo.

Si has hecho todo correctamente, puedes empezar a escribir tu propio código CSS en tu hoja de estilos. Notarás que tus estilos afectan al sitio a medida que guardas los cambios y recargas la página. No olvides limpiar la caché de tu navegador al actualizar la página.

Incrustar múltiples archivos CSS de hojas de estilos personalizadas en funciones.php usando wp_register_style () y wp_enqueue_style ()

Antes de agregar varios archivos CSS a su tema WP, tenga en cuenta que causa más solicitudes de servidor cuando el sitio se está cargando, lo que afecta la velocidad de carga de su sitio. Trate de usar la menor cantidad de hojas de estilo posible.

Ahora, digamos que tiene un archivo de hoja de estilos separado para estilos de escritorio llamado personalizado.css y un segundo archivo de hoja de estilo llamado responsive.css para dispositivos móviles. Incrustar ambas hojas de estilo en sus funciones.el archivo php es simple y requiere una ligera modificación del fragmento de archivo único que se muestra arriba:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Lo mismo que personalizar el fragmento de archivo único, cambie los nombres de archivo en función de su situación.

Más información sobre las funciones wp_register_style() y wp_enqueue_style ()

Para obtener más información sobre el uso de las funciones wp_register_style() y wp_enqueue_style() para registrar hojas de estilo, visite la página dedicada al Códice WP.