Advertisement
  1. Web Design
  2. WordPress

Cómo personalizar un tema de WordPress con CSS

by
Read Time:7 minsLanguages:

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.

WordPress themes on Themeforest.WordPress themes on Themeforest.WordPress themes on Themeforest.

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):

Appearance > CustomizeAppearance > CustomizeAppearance > Customize

Esto te llevará al área de personalización del tema, haz clic en el elemento del menú que dice CSS adicional (Additional CSS):

Additional CSSAdditional CSSAdditional CSS

Aparecerá un campo grande, en el que puedes añadir cualquier CSS personalizado que desees:

Add CSS stylesAdd CSS stylesAdd CSS styles

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.

style.cssstyle.cssstyle.css

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.

look for <link> elementslook for <link> elementslook for <link> elements

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:

inspect a titleinspect a titleinspect a title

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:

  1. Revisa el Personalizador de temas para ver si ya hay una opción disponible que te pueda facilitar el cambio que quieres realizar.
  2. Si no es así, y necesitas añadir un CSS personalizado simple, utiliza el campo CSS adicional en el Personalizador de temas
  3. Si necesitas hacer personalizaciones más extensas en HTML o CSS, considera realizarlas en un tema hijo.
  4. Para hacer pequeños cambios directamente en el tema, utiliza el editor de temas integrado de WordPress
  5. 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
  6. 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ón wp_enqueue_style()
  7. 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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.