Cómo personalizar su tema de WordPress usando CSS personalizado

Agregar CSS personalizado a su sitio de WordPress ayuda a alterar el aspecto de su sitio web. Para empezar, cada tema de WordPress se desarrolla utilizando componentes específicos del idioma principal. Estos incluyen PHP, HTML, CSS y JavaScript. PHP se usa para el código de backend, mientras que HTML, CSS y JavaScript se usan para el frontend. En resumen, los tres últimos se utilizan para representar lo que el usuario ve en su navegador.

A veces, al diseñar su sitio con tecnología de WordPress con un tema que ha instalado, es posible que desee modificar el aspecto de ciertas secciones o elementos dentro del sitio. También es posible que desee tener un sitio web con un aspecto diferente al que tienen otros usuarios de temas. Cualquiera que sea el caso, alterar el aspecto del sitio implicaría CSS.

La adición de CSS personalizado puede parecer fácil para los usuarios y desarrolladores de WordPress todos los días, pero puede que no sea un proceso tan fácil y directo, especialmente para los desarrolladores web primerizos.

En este artículo, veremos qué es CSS, así como algunas de las formas que puede usar para agregar CSS personalizado a su sitio web.

Tabla de contenido

¿Qué es CSS?

Cómo identificar el CSS para personalizar

Cómo agregar CSS personalizado

• A través de un tema hijo
• A través del Personalizador de WordPress
• Uso de un complemento de terceros

Razones comunes por las que los cambios de CSS no surten efecto

Conclusión

¿Qué es CSS?

CSS significa hoja de estilo en cascada. Es un lenguaje web que se utiliza para diseñar elementos HTML dentro de su sitio web. Básicamente, los componentes front-end dentro de su sitio web que ve en su navegador están construidos usando HTML. Para diseñar estos elementos para una visualización adecuada para los usuarios, necesitará utilizar CSS para esto. Por lo tanto, CSS funciona de la mano con HTML para representar correctamente los elementos dentro del front-end.

Se puede ver una aplicación de muestra de CSS en nuestro sitio web staxwp.com. En la página principal, tenemos un título donde se resalta parte del texto que contiene, como se ve a continuación:

CSS se usa para alterar el color del texto resaltado, por lo que la pantalla parece diferente del resto del texto.

Esta es solo una de las muchas formas en que CSS se puede aplicar a diferentes elementos. También puede tener CSS para modificar el color de los enlaces, los tamaños de fuente del texto, agregar contornos a varios elementos y muchas más propiedades.

En la mayoría de los temas de WordPress que siguen los estándares de codificación de WordPress, el código CSS del tema se almacena dentro del archivo style.css. Este archivo se encuentra dentro de la raíz de los archivos de su tema.

Cómo identificar el CSS para personalizar

Para identificar el CSS para personalizar, primero deberá identificar el elemento o contenido al que necesita aplicar el estilo. Digamos que, por ejemplo, desearíamos modificar los colores del texto del botón dentro de nuestra página de producto aquí o el texto en los botones ilustrados a continuación:

Para hacerlo, necesitará usar herramientas de desarrollador. Recomendamos utilizar un navegador como Google Chrome o Firefox para que pueda utilizar estas herramientas de manera fácil y adecuada. En nuestro caso aquí, utilizaremos el navegador Google Chrome.

Para utilizar estas herramientas, primero deberá "inspeccionar el elemento". Para lograr esto para el texto de nuestro botón, haga clic derecho en uno de los textos dentro de los elementos del botón y seleccione la opción "inspeccionar". A continuación se muestra una captura de pantalla de muestra sobre esto:

A continuación, se representará un panel de herramientas de desarrollo con una serie de pestañas.

Dentro de la captura de pantalla, notará que hay dos pestañas que se representan en la primera vista. Estos son "Elementos" y "Estilos". En otros navegadores, estos pueden tener un nombre diferente.

Si inspeccionó correctamente el elemento, tendrá una vista del texto del botón cuya propiedad de texto nos gustaría modificar, dentro de la pestaña Elementos.

Dado que en nuestro caso aquí solo nos interesa alterar la propiedad de color del texto de los botones, podemos realizar lo siguiente:

1. Haga clic en el icono "Nueva regla de estilo" que se ilustra a continuación:

Al hacer clic en él, se mostrará una hoja de estilo de inspector. En este caso, se generará una clase CSS para el botón como se ilustra a continuación.

Por lo tanto, nuestro código real en este caso será:

 .stx-btn-text { }

Ahora, para modificar el color de los textos de los botones, necesitaremos agregar el código de color. Para esto, usaremos la propiedad color, le especificaremos un color y lo agregaremos a nuestro código original. Esto será:

 color: #ff0000;

En el caso anterior, #ff0000 es el código de color que pretendemos utilizar. Puede establecer cualquier otro código de color de su preferencia.

Nuestro código final ahora será:

 .stx-btn-text { color: #ff0000; }

2. Alternativamente, al inspeccionar un elemento, puede usar el primer código para el elemento representado o el código usado para diseñar el elemento, con fines de diseño. A continuación se muestra una ilustración de este código:

Dentro del código, agregue la propiedad de color y el código de color, así como elimine las otras propiedades especificadas en él, ya que en nuestro caso aquí no necesitamos sobrescribirlas:

 color: #ff0000;

El código final ahora se leerá como:

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

Cualquiera de los enfoques anteriores se puede utilizar para identificar y determinar el CSS para personalizar o agregar.

Al especificar el código, puede notar que el cambio de color tiene efecto, pero esto no sucede hasta que se actualiza la página. Por lo tanto, debemos guardar el CSS para que el CSS siempre tenga efecto. Esto ahora nos lleva a nuestro siguiente paso.

Cómo agregar CSS personalizado

Ahora que hemos investigado cómo identificar y crear CSS personalizado. Ahora necesitamos una forma de agregar y guardar el CSS dentro de nuestro sitio web.

Hay varios enfoques que podemos usar para agregar CSS personalizado a nuestro sitio web. Éstos incluyen:

1. A través de un tema hijo
2. A través del Personalizador de WordPress
3. Uso de un complemento de terceros

A través de un tema hijo

Un tema secundario le permite personalizar su tema principal, eliminando así la probabilidad de perder sus personalizaciones durante las actualizaciones del tema. Para obtener más detalles sobre los temas secundarios y cómo configurarlos, puede consultar el tema Temas secundarios aquí: Temas secundarios.

Un tema hijo contiene un archivo style.css. Este es el archivo donde puede agregar su CSS personalizado. Para acceder a él, esto se puede lograr accediendo a los archivos de su sitio a través de FTP utilizando un software de FTP como Filezilla. Como alternativa, puede acceder a él desde Apariencia > Editor de archivos de temas y seleccionar su tema secundario en el menú desplegable de temas, como se ilustra a continuación:

Al identificar el archivo style.css, agregue su código personalizado a la última línea del archivo y guarde los cambios. En nuestro caso aquí, agregaremos el código en la línea 12 como se ilustra a continuación:

A través del Personalizador de WordPress

La adición de CSS personalizado a través del Personalizador de WordPress es otra gran opción a considerar. En este método, deberá:

Vaya a la sección Apariencia > Personalizar dentro de su tablero de WordPress.

En la siguiente pantalla, se mostrarán en el panel izquierdo varias opciones, como menús, widgets y muchas más, según el tema. Desplácese hacia abajo hasta encontrar la opción "CSS adicional".

Al hacer clic en la sección "CSS adicional", tendrá una sección de entrada de código donde puede agregar su CSS personalizado. Ahora agregue su CSS personalizado a la sección:

Al agregar su código CSS, puede guardarlo como borrador para publicarlo en una etapa posterior o publicarlo de inmediato.

También es importante tener en cuenta que esta sección proporciona validación y resaltado de sintaxis de código. Si, por lo tanto, hay algún error en su código, al agregarlo, tendrá algunos resaltados en esto.

Uso de un complemento de terceros

La adición de CSS personalizado con la ayuda de un complemento es otra consideración. En realidad, esto es más aplicable si cambia de tema más adelante y desea que el CSS que agregó también se use en el nuevo tema.

Hay una serie de complementos de terceros que se pueden usar además de CSS personalizado dentro de su sitio de WordPress. Aquí cubriremos al menos tres de estos complementos, y puede elegir usar cualquiera de ellos dentro de su sitio web.

CSS Pro personalizado

El complemento Custom CSS Pro proporciona una interfaz fácil de usar con una experiencia de edición en vivo para los usuarios que necesitan agregar CSS personalizado dentro de sus sitios web.

Tras la instalación del complemento, puede proceder a agregar su CSS personalizado accediendo a la sección Configuración> CSS Pro personalizado dentro de su panel de control de WordPress.

Dentro del editor en vivo provisto, puede agregar su CSS personalizado y guardar sus cambios. A continuación se muestra una muestra de esto:

CSS de origen del sitio

El complemento CSS de SiteOrigin proporciona sólidas capacidades de edición de CSS. Una adición clave al complemento es que le permite identificar un selector que puede usar para aplicar CSS personalizado a un elemento.

Una vez que haya instalado y activado el complemento, deberá navegar a la sección Apariencia > CSS personalizado como se ilustra a continuación:

A continuación, agregue su CSS personalizado dentro del editor de CSS personalizado representado como se ve a continuación:

Si también desea utilizar el editor visual, deberá hacer clic en el icono del ojo resaltado a continuación:

CSS personalizado simple

El complemento Simple Custom CSS es un complemento liviano y fácil de usar que permite a los administradores de sitios web agregar CSS personalizado a sus sitios web.

Al instalar el complemento, deberá navegar a la sección Apariencia> CSS personalizado.

A continuación, dentro del editor renderizado, agregue su CSS personalizado. A continuación se muestra una ilustración de muestra sobre esto:

Una vez hecho esto, guarde sus cambios haciendo clic en el botón "Actualizar CSS personalizado".

Razones comunes por las que los cambios de CSS no surten efecto

En algunos casos, es posible que el CSS personalizado que agrega dentro de su sitio web no siempre surta efecto. Esto puede deberse a varias razones, entre ellas:

1. Almacenamiento en caché

Si tiene instalado un complemento de almacenamiento en caché, esto puede resultar en el almacenamiento en caché de varios activos en su sitio. Por lo tanto, es vital que borre el almacenamiento en caché del sitio después de guardar su CSS personalizado o deshabilite el complemento de almacenamiento en caché que podría estar usando.

A veces, también puede tener almacenamiento en caché a nivel de servidor si su proveedor de alojamiento brinda soporte para el almacenamiento en caché del servidor. En tales casos, es importante que su host deshabilite el almacenamiento en caché por usted o que esto se lleve a cabo desde su panel de alojamiento si se proporciona una opción para esto.

2. Errores de sintaxis

Un error de sintaxis CSS es generalmente un error en su código CSS. Podría ser, por ejemplo, que falten dos puntos, un punto y coma o incluso una propiedad mal escrita.

Es importante verificar que su código CSS no tenga este tipo de errores. Puede utilizar un validador de CSS como el Servicio de validación de CSS para realizar la validación de CSS.

3. Especificidad CSS

La especificidad de CSS básicamente determina qué CSS tiene prioridad si tiene reglas de CSS dirigidas al mismo elemento.

Digamos por ejemplo en nuestro caso si tuviéramos dos códigos CSS para alterar el color de los botones, donde uno de los códigos usa una ID para especificar el estilo y el otro usa una clase.

 #stx-btn-text { color: #000000; }

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

El código CSS con el selector de ID es lo que se utilizará. Esto se debe al hecho de que los selectores de ID tienen una mayor especificidad que las clases. En el caso anterior el color que se aplicaría sería el negro (#000000).

Sin embargo, puede usar la regla !important después del valor de la propiedad para anular la especificidad de CSS. Por ejemplo, en nuestro caso aquí, si aplicamos la regla !importante al código con una clase, entonces ese código CSS es el que se aplicará y en tal caso el color sería rojo (#ff0000).

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000 !important; }

Sin embargo, la regla !importante debe usarse con moderación (solo cuando sea realmente necesario). Una de las razones de esto es que si la regla se aplica en un elemento en varias instancias, puede causar confusión al aplicar estilos y puede resultar bastante difícil depurar el problema.

Conclusión

Comprender cómo identificar y agregar CSS personalizado dentro de su sitio de WordPress puede ser muy útil para los propietarios de sitios. Una de las ventajas de esto es reducir el tiempo necesario para diseñar su sitio. Además, también ayuda a eliminar la necesidad de subcontratar a un desarrollador para personalizaciones menores de CSS.

Esperamos que esta guía sea informativa cuando se trata de agregar CSS personalizado. Puede obtener más información sobre CSS aquí. Si tiene alguna sugerencia, pregunta o comentario, no dude en plantearlos en la sección de comentarios a continuación.