Spanish (Español) translation by Carlos (you can also view the original English article)
Cuando quieres aprender a personalizar un tema de WordPress con CSS, una de las primeras cosas que deberás saber es cómo editar los archivos dentro del propio tema.
El proceso para editar los archivos del tema es el mismo tanto si deseas personalizar CSS o HTML, y en los tutoriales anteriores de esta serie ya tratamos este proceso, donde se modificó el archivo HTML.
Así que, para no tratar el mismo tema nuevamente, revisa; «Cómo editar el HTML en un tema de WordPress» y «Cómo instalar WordPress localmente con XAMPP» para aprender a:
- Editar archivos mediante el editor de temas
- Descargar y cargar los archivos a través de FTP o conexión remota
- Por qué deberías considerar realizar tus cambios dentro de un tema hijo
- Editar sin conexión mediante XAMPP
Con los métodos para editar los archivos del tema ya cubiertos, en este tutorial nos centraremos en cómo editar CSS en WordPress y aprenderemos lo siguiente:
- Cómo añadir CSS personalizado mediante el personalizador de temas
- Cómo identificar la(s) hoja(s) de estilo que utiliza un tema
- Cómo identificar qué CSS debe cambiarse y dónde, para personalizar una parte específica de un tema
Nota: Este artículo asume que tienes un conocimiento básico de CSS, pero no necesariamente de cómo editar CSS en WordPress.
Temas y plugins prémium para WordPress
Antes de empezar, no olvides que puedes explorar los miles de temas para WordPress en ThemeForest y los plugins para WordPress en CodeCanyon. Compra estos temas y plugins de alta calidad y mejora la experiencia de tu sitio web para ti y tus visitantes.
Cómo editar CSS en el personalizador de temas de WordPress
WordPress tiene un área dedicada en la que puedes añadir tu propio código CSS personalizado. Este código se cargará en el momento adecuado para garantizar que desactive el estilo predeterminado del tema y, usando este método, no se realizarán cambios directos en los archivos del tema.
En el menú de la barra lateral izquierda de tu escritorio de WordPress, ve a Apariencia > Personalizar (Appearance > Customize):
Esto te llevará al área de personalización del tema, haz clic en el elemento del menú que dice CSS adicional (Additional CSS):
Aparecerá un campo grande, en el que puedes añadir cualquier CSS personalizado que desees:
Cuando hayas terminado de añadir el código personalizado, guarda tus cambios haciendo clic en el botón azul Publicar (Publish) que se ubica la parte superior de la barra lateral izquierda.
Cómo identificar la(s) hoja(s) de estilo de un tema
Si no quieres usar el área de CSS adicional en el Personalizador de temas y, en lugar de ello, quieres editar directamente el CSS del tema, necesitarás una forma de averiguar qué archivos se utilizan para el estilo.
En la mayoría de los casos, los temas usarán la estructura estándar de WordPress y tienen un archivo llamado "style.css" en el directorio raíz del tema. De hecho, este es un archivo esencial del tema, por lo que siempre lo encontrarás en cualquier tema.
Sin embargo, cuando lo abres para editarlo, puede que descubras que no tiene código y que el desarrollador carga el estilo desde otra parte del tema. O, incluso se cargan en varios archivos de hojas de estilo.
Hay dos maneras de comprobar qué hojas de estilo utiliza un tema.
1. Inspeccionar el código en el elemento head
El primer método es inspeccionar el código en el elemento <head> del tema. Haz clic con el botón derecho en cualquier lugar de la página y selecciona Ver código fuente de la página, a continuación localiza las etiquetas <head>... </head>.
Entre esas etiquetas, busca los elementos <link> que también tengan el atributo <rel='stylesheet'>. Luego, mira cuáles provienen del directorio de tu tema. Las URL de las hojas de estilo te indicarán en qué parte de la estructura del tema encontrarlas.
Ten presente que si estás usando un plugin que combina y minimiza todas las hojas de estilo de tu sitio en un solo archivo, esta técnica no funcionará, porque todo lo que verás es la URL de ese único archivo. En su lugar, utiliza la técnica dos, revisando el archivo «functions».
2. Revisar el archivo functions
Siempre que un tema utiliza una hoja de estilo, tiene que indicarle a WordPress qué archivo quiere usar, a través de una función llamada wp_enqueue_style(). Por lo tanto, podremos ver exactamente qué hoja(s) de estilo carga el tema averiguando el uso de esta función.
Cada tema tiene un archivo llamado «functions.php» ubicado en su directorio raíz. El uso de la función wp_enqueue_style() normalmente se encuentra en este archivo, así que ábrelo y empieza a buscar el nombre de la función.
Cuando encuentres las instancias de la función wp_enqueue_style(), busca entre los paréntesis el segundo parámetro, es decir, el fragmento de texto después de la primera coma. Ese texto te muestra la ubicación de la hoja de estilo. Por ejemplo:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
En el código anterior, el segundo parámetro es:
get_template_directory_uri() . '/css/mainstyle.css')
Esto nos indica que la hoja de estilo está en un subdirectorio de temas llamado «css», y que su nombre de archivo es «mainstyle.css».
Cómo identificar qué CSS cambiar
Una vez que sepas cómo añadir o editar el CSS del tema, lo siguiente que hay que aprender es cómo darte cuenta qué código debes cambiar.
La mejor forma de hacerlo es utilizando las herramientas de desarrollo en tu navegador, lo ideal sería usar Chrome o Firefox debido a la calidad de sus herramientas.
Digamos, por ejemplo, que quieres cambiar el tamaño de la fuente de los títulos de tus publicaciones. Haz clic con el botón derecho en uno de los títulos y selecciona la opción Inspeccionar:
Esto abrirá el panel de Herramientas para desarrolladores. Busca en su pestaña Styles una propiedad font-size.
Si no ves ninguna, es posible que el navegador te esté mostrando un elemento padre o un elemento hijo, así que en la pestaña Elements intenta hacer clic en los elementos cercanos hasta que encuentres un elemento que resalte con precisión la forma del texto del título de la publicación y tenga una propiedad font-size:
Ahora, en la pestaña Styles, intenta cambiar el valor de la propiedad font-size. Si ves que el texto cambia de tamaño en la ventana del navegador, sabrás que has encontrado el CSS correcto.
Para saber en qué parte de la hoja de estilo se encuentra este CSS, mira en la parte superior derecha del lugar donde acabas de editar el valor de la propiedad font-size. Debes ver un nombre de archivo, luego dos puntos y luego un número.
El nombre del archivo te indica en qué hoja de estilo se ubica el código, y el número después de los dos puntos te indica en qué línea encontrarás ese código. Por ejemplo, la imagen de arriba muestra el código del archivo «style.css» en la línea 4054. Si estás editando directamente la hoja de estilo del tema ahora puedes abrirla, ir al número de línea en cuestión y cambiar el CSS.
Si estás trabajando en el campo CSS adicional del Personalizador de temas, o en un tema hijo, también deberás dirigirte al mismo selector que el CSS original, de tal modo que puedas sobreescribirlo con tu propio estilo.
Regresando a las herramientas de desarrollo del navegador, busca el selector que está encima de la propiedad font-size que acabas de cambiar. Está a la izquierda del archivo de la hoja de estilo y la especificación del número de línea que acabamos de ver.
Copia todo ese selector y pégalo en tu código personalizado, luego úsalo para dirigirte correctamente a tu valor font-size
modificado.
Siempre revisa las opciones incluidas del tema
Antes de hacer el esfuerzo de personalizar el CSS, siempre revisa en el Personalizador de temas las opciones que el desarrollador ya haya incluido.
Los temas generalmente tienen opciones de personalización bastante completas que no requieren código personalizado. Así que, antes de editar cualquier CSS, podrías ahorrarte mucho tiempo verificando si ya existe una forma de realizar el cambio que necesitas «presionando un botón».
Cómo personalizar un tema de WordPress paso a paso
Ahora que hemos hablado sobre cómo personalizar el CSS y el HTML de un tema de WordPress, quizá te sientas un poco inseguro de por dónde empezar. Así que simplifiquemos las cosas a una lista básica de pasos a seguir:
- Revisa el Personalizador de temas para ver si ya hay una opción disponible que te pueda facilitar el cambio que quieres realizar.
- Si no es así, y necesitas añadir un CSS personalizado simple, utiliza el campo CSS adicional en el Personalizador de temas
- Si necesitas hacer personalizaciones más extensas en HTML o CSS, considera realizarlas en un tema hijo.
- Para hacer pequeños cambios directamente en el tema, utiliza el editor de temas integrado de WordPress
- Para realizar cambios más profundos directamente en un tema, utiliza un Protocolo de transferencia de archivos (FTP), una conexión remota, o bien trabaja completamente sin conexión con XAMPP
- Una vez que hayas seleccionado tu método de edición, identifica la(s) hoja(s) de estilo del tema inspeccionando el código en el elemento
<head>de tu sitio o buscando en el archivo «functions.php» del tema para usar la funciónwp_enqueue_style() - Localiza las líneas específicas de CSS que necesitas modificar, y sus selectores relacionados, usando la función Inspeccionar de las herramientas de desarrollo de Chrome o Firefox.
Cuando profundices en todo lo anterior y te familiarices, empezarás a ver lo personalizable que es WordPress.
Antes de que te des cuenta, estarás creando tus propios temas hijos completamente originales y creando tus propios diseños.
Y resulta que en el próximo tutorial de esta serie, trataremos sobre «Cómo crear un tema hijo en WordPress». ¡Mantente atento!
By
