Aprende cómo personalizar temas de WordPress utilizando CSS

¿Quiéres saber cómo customizar temas para WordPress? Aprende cómo hacerlo en pocos pasos.

En primer lugar, necesitas saber que hay muchas formas de hacer esto. Vamos a hablar sobre algunas soluciones, pero antes de eso, necesitas saber en qué directorio están almacenados los temas.

En Linux, se encuentran en DOCUMENTROOT/wp-content/themes/.
En Windows, DOCUMENTROOT/htdocs/DOMINIO/wp-content/themes/.

Customizar temas

Vamos a dar comienzo a la guía para aprender a customizar temas de WordPress.

Crear un tema hijo

Podemos editar los ficheros css o html, pero podemos destrozar el tema, por lo que es mejor hacer una copia de un tema con el objetivo de prevenir la pérdida de los cambios realizados.

La primera razón para crear un tema hijo, en inglés child theme, es para prevenir la corrupción del tema en caso de que lo arruinemos con algún error que no podemos deshacer.

La segunda razón es que si no utilizamos un tema hijo, cada vez que el tema se actualice, es posible que todos los cambios que hayamos realizado en el tema se pierdan. Si utilizamos un tema hijo, podemos actualizar el tema original y no perderemos los cambios.
 En la captura anterior tenemos el tema que queremos customizar.

 Y en la anterior tenemos la localización del directorio en el que se guardan los temas en Linux. El que vamos a customizar es 'hitchcock'.

Para crear un tema hijo, creamos una carpeta en la que vamos a meter el tema hijo.

El siguiente paso es crear un fichero llamado 'style.css'. Este fichero es el que vamos a utilizar para customizar nuestro tema de WordPress.

Tras crear 'style.css', vamos a editarlo y añadir algo como:

/*
Theme Name: hit-child
Description: A child Theme of Hitchcock.
Template: hitchcock
Version: 1.0.0
*/

Llegados a este punto, ya podemos seleccionar el tema hijo en la selección de temas (no tiene hoja de estilos).

Importar hoja de estilos desde el tema padre

Tras lo anterior, necesitamos importar la hoja de estilos del tema padre. Hay tres formas de hacer esto.

La primera es copiar el contenido de 'style.css' del padre al hijo.

La segunda es importar la hoja de estilos, cosa que hacemos añadiendo la línea @import url('../hitchcock/style.css'); al fichero 'style.css' (del hijo).

La última es cargar la hoja de estilos con una función. Para ello, primero creamos un fichero llamado 'functions.php' e insertamos el código:

<?php
function theme_styles()
{
// Cargar hoja de estilo
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'theme_styles');
?>

El fichero 'functions.php' es difícil de usar y muy útil. Aunque tiene un gran problema; sólo funciona para el tema actual, esto es, si cambias el tema, todos los cambios que has hecho serán inservibles.

Aquí tenemos una captura con el estilo del padre cargado (podemos observar que se trata del tema hijo).

La primera es una opción, pero no una buena. Si hay alguna actualización del código css, con la primera opción no tendríamos esa actualización en el tema hijo, pero en las otras dos opciones sí la tendríamos.

Si hay una única hoja de estilo, podemos usar la segunda opción. Se trata de la opción más fácil y hace exactamente lo que queremos. Por contra, toma demasiado tiempo cargar más de una hoja de estilo debido a que @import no permite al navegador cargar varias hojas de estilo en paralelo, por lo que cada hoja de estilo tarda unos 200 ms (0,2 segundos).

Editar el código CSS

Ahora que el tema hijo ha cargado las hojas de estilo del padre, podemos editar las css del tema hijo. Para ello podemos editar el fichero 'style.css' en el directorio del tema hijo.

Para saber qué elemento es el que queremos editar, podemos inspeccionar el objeto con el navegador (click derecho y pulsar 'Inspeccionar'.

Ahora podemos editar las reglas CSS para ese elemento.

Ya tenemos el tema ligeramente modificado, aunque estos cambios no afectan al tema padre, así que si arruinamos el tema y no podemos deshacer los cambios, podemos seleccionar el tema padre y tendríamos el tema por defecto. Si el tema padre es actualizado, los cambios realizados en el tema hijo se conservan.

Otra forma de editar las CSS de forma más sencilla es utilizando el “Editor” que viene instalado por defecto. Es una forma mucho más potente de editar las css, pero por otro lado, tener el Editor instalado supone un riesgo para la seguridad del sitio web, como ya comentaremos más adelante.

Para editar las CSS, vamos a “Apariencia” y seleccionamos “Editor”. En Plantillas, seleccionamos la “Hoja de estilo” (style.css) y modificamos los CSS que queramos. Salvo que sepamos exáctamente que estamos haciendo, no es recomendable empezar a editar los valores ya establecidos.

Resumiendo

Es importante usar un tema hijo, porque así podemos prevenirnos de arruinar el tema para wordpress, o prevenir nuestras modificaciones si se actualiza el tema. Crear un tema hijo es similar a hacer una copia de seguridad, esto es, podemos volver al estado anterior siempre que queramos.

Por un lado, podemos usar @import para importar las hojas de estilo (una regla @import por cada hoja de estilo). Aunque este método es muy lento porque el navegador tiene que cargar las hojas de estilo una por una.

Por otro lado, podemos usar wp_enqueue_style, que es más rápido que usar @import, y si añadimos otras reglas, como por ejemplo “if(is_page('home'))”, podemos hacer que la carga sea más rápida.

Cuando iniciamos un tema hijo, todos los ficheros del tema padre son cargados en el tema hijo, pero podemos reemplazar estos ficheros si creamos un fichero con el mismo nombre en el directorio hijo. Todos los ficheros son cargados desde el directorio hijo si existen, y si no, se cargan desde el directorio padre, excepto 'functions.php', que se carga siempre desde el directorio padre, y si existe, se carga después desde el directorio hijo.

Finalmente podemos decir que hacer pequeños cambios en un tema es fácil, pero cambiar la estructura del tema es difícil.

Para un usuario medio, lo mejor es que dicho usuario establezca la estructura del tema de WordPress (de forma gráfica), y una vez esté terminado, que haga pequeños cambios en las CSS.

Prueba nuestro hosting de WordPress administrado si quieres tener un hosting de calidad.