Cómo hacer cambios sencillos de CSS a tu tema sin un tema infantil

A veces quieres editar el aspecto de tu tema, pero los cambios son tan pequeños que ni siquiera quieres molestarte con un tema infantil.

O tal vez eres nuevo en el trabajo con el funcionamiento interno de WordPress, y no quieres meterte en temas infantiles todavía, pero conoces tu CSS.

De cualquier manera, hay una solución bastante simple para tu problema: usa un plugin CSS personalizado. Al usar un plugin CSS personalizado, puedes básicamente anular las líneas de código que quieras y cambiar el aspecto de tu código al instante sin tener que lidiar con un tema infantil.

Paso 1. Instalar un plugin CSS personalizado

Así que lo primero que tienes que hacer, es instalar un plugin CSS personalizado. Me gusta usar el plugin «Simple Custom CSS», o la funcionalidad css personalizada que se incluye en Jetpack.

Paso 2. Identifica el CSS que quieres cambiar

El segundo paso aquí, es identificar exactamente qué código quieres cambiar o anular. Es importante obtener la identificación o la clase correcta, de lo contrario el resto del código que escribas no importará en absoluto.

Abra su sitio en una nueva ventana del navegador. Si utilizas cromo, sólo tienes que hacer clic con el botón derecho del ratón en algún lugar o resaltar algo en la sección correspondiente y luego hacer clic con el botón derecho del ratón y seleccionar «Inspeccionar».

(Si usas FireFox, puedes usar un complemento llamado Firebug que te dará herramientas de inspección similares, si no superiores).

Por ejemplo, si quieres editar cosas en la barra lateral, simplemente pasa el cursor por encima, haz clic con el botón derecho y haz clic en inspeccionar así:

Google Chrome Dev Tools Inspect - Make Simple CSS Changes Without Child Theme

Eso nos lleva a la herramienta de inspección, y justo para el código relevante que va en el estilo de lo que se ha revuelto. En este caso, el ratón estaba flotando el título del widget, así que cuando se inspecciona, nos lleva directamente a los estilos y el html para el título del widget.

Google Chrome Dev Tools Inspect - Make Simple CSS Changes Without Child Theme

Si ya estás acostumbrado a trabajar con el CSS, puede que sepas exactamente lo que estás buscando. Si eres un principiante, tómate un segundo para familiarizarte.

A la izquierda, se ven las diferentes etiquetas html y el texto que da salida al contenido del sitio. A la derecha, ves el CSS que estiliza este contenido, a menudo múltiples instancias del mismo.

Si queremos centrarnos en la edición del título de las áreas de los widgets, asegúrate de que en la sección de HTML seleccionas la línea de HTML que tiene un aspecto similar a este:

www. www. www. www. www. www. www. www. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww.

El nombre real de la clase depende del tema que esté usando, pero los temas del repositorio WP.org, siguen ciertos estándares para nombrar las clases.

Entonces mira de cerca cómo está diseñado. En Veintiséis, está diseñado así:

.widget .widget-title {

fuente-familia: Montserrat, «Helvetica Neue», sans-serif;

tamaño de letra: 16px;

tamaño de letra: 1rem;

el espaciado de las letras: 0.046875em;

altura de la línea: 1.3125;

margen: 0 0 1.75em;

transformación de texto: mayúsculas;

Si quieres estilizar algo más en el área de los widgets, simplemente busca hasta que encuentres la sección de código apropiada, y luego selecciónala.

Por ejemplo, si seleccionamos la sección de widgets en lugar del encabezado, ahora vemos los estilos de esa sección.

Paso 3. Anular el CSS escribiéndolo en el plugin

Ahora es el momento de hacer negocios y anular el CSS, pero antes de eso…

Consiga las preguntas de los medios de comunicación antes de ir más lejos

La mayoría de los temas de WordPress de hoy en día, utilizan consultas de medios en CSS para ayudar a que el tema sea más sensible y amigable para los móviles.

Son las líneas de código en el css que comienzan con @media. Si miramos uno de los puntos de ruptura del tema de los Veintiséis como ejemplo, se ve así:

@pantalla de medios y (ancho mín.: 61.5625em)

Si no sabes cómo funcionan las consultas de los medios de comunicación e intentas anular el CSS en tu tema, puedes romper completamente el aspecto del sitio en varios dispositivos. (A veces incluso todos.)

Las Consultas de Medios, se usan típicamente para establecer puntos de ruptura de píxeles o EM para el ancho de la pantalla, permitiéndole cambiar el estilo del sitio para cada uno de estos puntos de ruptura.

Afortunadamente son bastante sencillos de trabajar en la mayoría de los temas. Por lo general, establecen múltiples consultas de medios para diferentes anchos mínimos (mira el ejemplo anterior).

Esto significa que todo lo que tienes que hacer es asegurarte de poner las líneas de código para estilizar tu sitio en diferentes tamaños de pantalla.

Puede leer más sobre las consultas de los medios de comunicación aquí.

Ahora que sabes un poco sobre las preguntas de los medios de comunicación, estás mucho mejor equipado para abordar los temas más actuales de WordPress.

Para anular un cierto estilo, simplemente copia el código css original en el plugin CSS personalizado de tu elección.

.widget .widget-title {

fuente-familia: Montserrat, «Helvetica Neue», sans-serif;

tamaño de letra: 16px;

tamaño de letra: 1rem;

el espaciado de las letras: 0.046875em;

altura de la línea: 1.3125;

margen: 0 0 1.75em;

transformación de texto: mayúsculas;

Y ahora todo lo que tenemos que hacer es hacer los cambios que queremos. Borrar las líneas que no quieres anular, pero si quieres poner los márgenes u otras cosas a 0, borrar las líneas de código no funciona.

La forma en que funciona el plugin es que el css del plugin se llama último, y luego anula el CSS original. Así que si borras la línea, entonces no se encuentra nada del plugin, y al navegador se le enviará la línea del tema, ininterrumpidamente, haciendo que se vea exactamente igual que antes del intento de cambio.

Si sólo quieres eliminar el espaciado de las letras y los márgenes del código anterior, se ve así:

.widget .widget-title {

el espaciado de las letras: 0;

margen: 0 0 0;

}

Paso 4. Confirmar que está funcionando

La forma en que vas a confirmar que tus cambios están en efecto, depende de dónde decidiste poner tus cambios.

Si sólo has cambiado el estilo de la pantalla de un móvil, querrás comprobar el móvil y también todos los demás tamaños de pantalla.

Si cambiaste los estilos para todo, deberías revisar lo más ampliamente posible.

(Paso 5. Solucionar los problemas si no funciona)

¿Funciona correctamente tu CSS? Si no es así, es hora de solucionar los problemas.

¿Hiciste tus consultas a los medios correctamente?

Si estropeas una consulta de los medios de comunicación, puede significar que ninguno de tus cambios aparezca como querías. Por ejemplo, si accidentalmente fijas el ancho máximo en lugar del ancho mínimo, o viceversa, no te lo vas a pasar muy bien.

Una forma fácil de solucionar problemas, es comprobar si los estilos que querías aplicar en un determinado con, aparecen en otros anchos. Si lo hiciste usando una consulta básica de ancho mínimo o máximo, puedes comprobarlo con sólo cambiar el tamaño de la ventana del navegador y ver los cambios.

Por ejemplo, si una de mis consultas es accidentalmente de ancho máximo, puede anular todos mis estilos para otros anchos, puntos de ruptura con un ancho superior a ese ancho.

(Puedes leer más sobre ellos en la sección de consulta de los medios de comunicación más arriba.)

¿Es tu CSS lo suficientemente específico?

La especificidad del CSS se refiere básicamente a las áreas de precalificación que quieres estilizar. Básicamente funciona dando condiciones para las cosas que deben estar en su lugar antes de que el estilo se debe aplicar.

Por ejemplo, si escribes:

aparte h2 {

Esto sólo apuntará a los H2 en el lateral, y los estilizará. Cualquier H2 en el resto de la página se dejará solo.

Si escribes:

.site-artículo principal h2

Esto sólo afectará a los H2s dentro de los artículos, dentro de un elemento de clase .site-main.

Los temas de WordPress suelen hacer uso de la especificidad de CSS un poco. Esto significa que cuando quieres hacer cambios simples en CSS, necesitas prestar mucha atención a la especificidad con la que el CSS original está estilizando la sección que quieres estilizar. Entonces copia ese nivel de especificidad, y añade otro nivel.

Digamos que el fragmento original de código apunta a los elementos apropiados como este:

.site-artículo principal

Si sólo quieres apuntar a una página determinada, puedes usar un identificador de página:

.page-id-19 .site-main article

(Esto sólo funciona si el tema utiliza la función body_class())

Si quieres dirigirte a las páginas con una determinada plantilla, puedes usar la plantilla de la página:

.page-template-page-blabla .site-main article

Si sólo quieres anular en general, puedes añadir otro elemento genérico para mayor especificidad, como el cuerpo:

cuerpo .sitio-artículo principal

Estas son sólo algunas ideas de lo que podría estar mal con tu CSS. Puedes leer más sobre la solución de problemas de CSS en el códice, aquí.

Conclusión

No necesitas trabajar con temas infantiles para anular el CSS de tu sitio web. Si quieres hacer algunos cambios simples (o si quieres anular los estilos de un plugin), un plugin CSS personalizado es una gran herramienta.

Si estás haciendo muchos cambios pequeños, o unos pocos realmente grandes, lleva mucho tiempo aprender a hacer los cambios de la manera correcta. Así que aprender a trabajar con un tema infantil, tendrá sentido.

También será la mejor opción o los cambios complejos. Y en realidad es muy simple, también. Puedes leer más sobre cómo trabajar con ellos aquí.

Deja un comentario