Cómo personalizar un tema de WordPress Con CSS
Cuando quieras aprender a personalizar un tema de WordPress con CSS, una de las primeras cosas que necesitarás saber es cómo editar archivos dentro del propio tema.
El proceso para editar archivos de tema es efectivamente el mismo si está buscando personalizar CSS o HTML, y en tutoriales anteriores de esta serie ya cubrimos este proceso, con el propósito de modificar HTML.
Así que para evitar recauchutar el mismo terreno, eche un vistazo a «Cómo editar HTML en un tema de WordPress» y «Cómo instalar WordPress Localmente Con XAMPP» para obtener más información:
- Editar archivos a través del editor de temas
- Descargar y cargar archivos a través de FTP o conexión remota
- Por qué debería considerar realizar sus cambios dentro de un tema secundario
- Editar sin conexión a través de XAMPP
Con los métodos de edición de archivos de temas ya cubiertos, en este tutorial nos centraremos en cómo editar css en WordPress aprendiendo sobre estos temas:
- Cómo agregar CSS personalizado a través del personalizador de temas
- Cómo identificar las hojas de estilo que usa 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 tiene un conocimiento básico de CSS, pero no necesariamente de cómo editar CSS en WordPress.
Temas y complementos de WordPress Premium
Antes de comenzar, no olvide que puede explorar los miles de temas de WordPress en ThemeForest y complementos de WordPress en CodeCanyon. Compre estos temas y complementos de WordPress de alta calidad y mejore la experiencia de su sitio web para usted y sus visitantes.
Cómo editar CSS en el Personalizador de temas de WordPress
WordPress tiene un área dedicada en la que puede agregar su propio código CSS personalizado. Este código se cargará en el momento adecuado para asegurarse de que anula el estilo predeterminado del tema, y el uso de este enfoque no realiza ningún cambio directo en los archivos del tema.
En el menú de la barra lateral izquierda de tu panel de administración de WordPress, ve a Apariencia > Personalizar:
Esto le llevará al área de personalización del tema, donde puede hacer clic en el elemento de menú CSS adicional:
Aparecerá un campo grande en el que puede agregar cualquier CSS personalizado que desee:
Guarde los cambios haciendo clic en el botón azul Publicar en la parte superior de la barra lateral izquierda cuando haya terminado de agregar código personalizado.
Cómo Identificar la(s) hoja (s) de estilo de un tema
Si no desea utilizar el área CSS Adicional en el Personalizador de temas y, en su lugar, desea editar el CSS del tema directamente, necesitará una forma de averiguar qué archivos utiliza un tema para crear estilos.
En la mayoría de los casos, los temas usarán la estructura estándar de WordPress y tendrán un archivo llamado «estilo».css » en el directorio raíz del tema. De hecho, este es un archivo de tema esencial, por lo que siempre lo encontrará en cualquier tema.estilo
Sin embargo, cuando lo abres para editarlo, es posible que esté vacío de código y el desarrollador cargue estilos desde otro lugar del tema. O incluso puede encontrar que se están cargando en varios archivos de hojas de estilo.
Hay dos formas de comprobar qué hojas de estilo utiliza un tema.
Código de cabezal de inspección
El primer método es inspeccionar el código <head> del tema. Puede hacer esto haciendo clic con el botón derecho en cualquier parte de la página y eligiendo Ver fuente de página, luego ubicando las etiquetas <head>...</head>.
Entre esas etiquetas, busque elementos <link> que también tengan rel='stylesheet'. Luego mira para ver cuáles de esos provienen del directorio de tu tema. Las URL de las hojas de estilo le indicarán en qué parte de la estructura del tema debe encontrarlas.
Tenga en cuenta que si está ejecutando un complemento que combina y reduce todas las hojas de estilo de su sitio en un solo archivo, esta técnica no funcionará, porque todo lo que verá es la URL de ese único archivo. En su lugar, utilice la técnica dos, comprobando el archivo de funciones.
Comprobar el archivo de funciones
Cada vez que un tema utiliza una hoja de estilos, tiene que decirle a WordPress qué archivo quiere usar, a través de una función llamada wp_enqueue_style(). Por lo tanto, podemos ver exactamente qué hojas de estilo carga el tema encontrando su uso de esta función.
Cada tema tiene un archivo llamado «funciones.php » ubicado en su directorio raíz. La utilización de la función wp_enqueue_style() se encuentra típicamente en este archivo, así que ábralo y comience a buscar el nombre de la función.
Cuando localice instancias de la función wp_enqueue_style(), busque entre paréntesis el segundo parámetro, es decir, el bit de texto después de la primera coma. Ese texto 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 dice que la hoja de estilos está en un subdirectorio de tema llamado «css», y que su nombre de archivo es » mainstyle.css».
Cómo Identificar qué CSS cambiar
Una vez que sepa cómo agregar o editar CSS de tema, lo siguiente que debe aprender es cómo averiguar qué código realmente necesita cambiar.
La mejor manera de hacerlo es utilizando las herramientas de desarrollador de su navegador, idealmente Chrome o Firefox debido a la calidad de sus herramientas.
Digamos, por ejemplo, que quieres cambiar el tamaño de fuente de los títulos de tus publicaciones. Haga clic con el botón derecho en uno de los títulos de la publicación y seleccione la opción Inspeccionar:
Esto abrirá el panel Herramientas para desarrolladores. Busque en su pestaña de estilos una propiedad font-size.
Si no ve uno, es posible que el navegador le muestre un elemento padre o hijo, por lo que en la pestaña Elementos intente hacer clic en elementos cercanos hasta que encuentre 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 Estilos, intente cambiar el valor de la propiedad font-size. Si ves el cambio de tamaño del texto en la ventana del navegador, sabrás que has encontrado el CSS correcto.
Para saber en qué parte de la hoja de estilos se encuentra este CSS, busque en la parte superior derecha del lugar donde acaba de editar el valor font-size. Debería ver un nombre de archivo, luego dos puntos y luego un número.
El nombre de archivo le indica en qué hoja de estilo se encuentra el código, y el número después de los dos puntos le indica en qué línea encontrará ese código. Por ejemplo, la imagen de arriba muestra el código del «estilo».archivo css » en la línea 4054. Si está editando directamente la hoja de estilos del tema, ahora puede abrirla, ir al número de línea en cuestión y cambiar el CSS.
Si está trabajando en el campo CSS Adicional del Personalizador de temas, o dentro de un tema secundario, también deberá seleccionar el mismo selector que el CSS original, para que pueda reemplazarlo con su propio estilo.
De vuelta en las herramientas para desarrolladores del navegador, busque el selector que está encima de la propiedad font-size que acaba de cambiar. Está a la izquierda del archivo de hoja de estilo y la especificación del número de línea que acabamos de ver.
Copie todo el selector y péguelo en su código personalizado, luego utilícelo para orientar correctamente su valor font-size modificado.
Compruebe siempre las opciones de tema incorporadas
Antes de tomarse la molestia de personalizar CSS, compruebe siempre en el Personalizador de temas las opciones que el desarrollador ya haya incorporado al tema.
Los temas a menudo tienen opciones de personalización bastante completas que no requieren código personalizado. Por lo tanto, antes de editar cualquier CSS, puede ahorrarse mucho tiempo al ver si ya hay una forma de hacer el cambio que necesita con un botón pulsador.
Cómo personalizar un tema de WordPress Paso a paso
Ahora que hemos hablado de cómo personalizar CSS y HTML de un tema de WordPress, es posible que te sientas un poco inseguro de por dónde empezar. Así que vamos a resumir las cosas en una lista básica de pasos a seguir:
- Compruebe el Personalizador de temas para ver si ya hay una opción disponible que pueda facilitar el cambio que desea realizar
- Si no es así, y necesita agregar algunos CSS personalizados simples, use el campo CSS Adicional en el Personalizador de temas
- Si necesita realizar personalizaciones más extensas a HTML o CSS, considere hacerlas dentro de un tema secundario
- Para realizar pequeños cambios directamente en el tema, use el editor de temas integrado de WordPress
- Para cambios más profundos directamente en un tema, use FTP, una conexión remota o trabaje completamente sin conexión con XAMPP
- Una vez que haya seleccionado su método de edición, identifique las hojas de estilo del tema inspeccionando el código
<head>de su sitio o mirando las funciones del tema.php » para el uso de la funciónwp_enqueue_style() - Localice las líneas específicas de CSS que necesita modificar y sus selectores relacionados, utilizando la función Inspeccionar de Chrome o Firefox developer tools
Cuando profundice en todo lo anterior y se familiarice, comenzará a ver cuán personalizable es WordPress.
Antes de que te des cuenta, estarás creando tus propios temas infantiles completamente originales y creando diseños propios.
Y resulta que aprender «Cómo hacer un tema Infantil en WordPress» es el siguiente tutorial que viene en esta serie. ¡Estén atentos!