371 | CSS en WordPress para principiantes

En el episodio 371 de WordPress Semanal hablamos de la oportunidad que puedes estar perdiéndote si aún no te has animado a aprender CSS para hacer modificaciones en tu web con WordPress. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 371 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy hablamos de un tema que para algunos será una tontería porque a lo mejor ya lo domináis, pero para otros os parecerá un mundo, os parecerá algo súper complejo. Y voy a intentar desmitificar esto porque aprender a utilizar CSS no es complicado y te aporta muchísimas ventajas. En concreto, en este episodio te voy a hablar de seis ventajas que yo considero que te aportan aprender un poquito de CSS y luego cómo puedes enfocar este aprendizaje para que sea lo más sencillo posible, sea algo natural y te aporte a la hora de tener control en el aspecto de tu web con WordPress. Sí, pero antes, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues como siempre tenemos nuevo vídeo de la zona código y en este caso está enfocado a WooCommerce. Ya sabes que cada semana publico un vídeo que va acompañado de un poquito de código y está enfocado a que hagas pequeños cambios y que te puedas ahorrar plugins. Estos cambios pueden ser de aspecto de tu web, pueden ser de funcionamiento general de tu web, pueden ser añadir una característica extra, puede ser modificar un plugin que estés utilizando. Y como digo, en este caso está enfocado a las tiendas online con WooCommerce. Si tú tienes esto y tienes la típica tienda en la que la gente puede buscar productos y puede filtrarlos, pues el filtro que viene por defecto con woocommerce trae como muchas opciones y hay gente que algunas de esas opciones no las quiere, es decir, no quiere permitir que un posible comprador filtre, pues no lo sé, por lo que sea, por valoraciones del producto. Pues te voy a enseñar a desactivarlas por completo simplemente con un poquito de código. Este va a ser parte de una serie de vídeos que voy a ir sacando sobre la parte esta del filtro. Voy a enseñar en este primer vídeo cómo eliminarlo. Más adelante enseñaré cómo reordenar las opciones que aparecen para filtrar los productos, en otro vídeo te enseñaré cómo renombrarlas por si no te gusta mucho el nombre que aparece en ese filtro, pues que lo puedas cambiar. Y además, en un vídeo posterior te enseñaré cómo crear tu propia opción de filtrado, por ejemplo, para ordenar según stock. Bueno, esto será a lo largo de las siguientes semanas. Por cierto, si te interesa, si eres suscriptor y te interesa esto, escríbeme porque así los adelanto. Si no, los iré intercalando con otros vídeos, pero si veo que hay interés, pues los adelanto. Igual que tengo vídeos enfocados a WooCommerce, pues ya sabes que también tienes enfocados a Restrict Content Pro. Por ejemplo, el vídeo anterior era cómo añadir el IVA a las facturas de Restrict Content Pro. También vídeos enfocados Alarm Dash a Eddie, el otro plugin para vender productos digitales. Y luego, por supuesto, WordPress puro y duro y un montón de detalles. Échale un vistazo en Gonzalo Navarro, es fantástico. Estas son las novedades. Vámonos ahora con el plugin de la semana que se llama Contour Copy Code Button. Este plugin es súper nuevo, apenas está activo en. A ver que lo mire. 70 instalaciones de WordPress. Es muy liviano, muy chiquitito, tiene muy buen rendimiento y te permite añadir el botón de copiar cuando tú usas un bloque de código desde el edito de WordPress. ¿Qué quiere decir esto? Bueno, si te dedicas, por ejemplo, como es mi caso, a mostrar un trocito de código a los que leen tu blog o los que leen algún artículo tuyo para que lo puedan copiar, esto lo que hace es que en lugar de que el visitante tenga que seleccionar todo el texto y copiarlo con su teclado o con su ratón, que le aparezca directamente un iconito para permitir copiar todo. Es así de sencillo. Así que con esto lo tienes. Y además se va a añadir a todo, todos los sitios donde haya código, ahí vas a tener la opción de tener el botón de si por ejemplo, algún plugin te muestra código para que tú lo copies y lo pegues en algún lugar, en la parte de administración también te va a aparecer esta opción. De nuevo, Contour Copy Code Button, pero lo tienes disponible en las notas del episodio. Así que ya sabes, puedes ir a Gonzalo Navarro, es 371, y ahí verás todo lo que voy comentando, el esquema del episodio y todos los enlaces. Perfecto, pues ahora sí, vámonos con el tema central del episodio, cómo empezar a usar CSS en tu web con WordPress. Y antes de nada vamos a hacer una pequeña introducción al CSS muy rápida para que estemos todos en la misma línea. Y el CSS no es otra cosa que lo que define el aspecto de tu webs, se utiliza básicamente para personalizar la apariencia de páginas, entradas, cabeceras de toda tu web y por esto los teams y los plugins que instalas ya traen sus hojas de estilos con el CSS necesario, pero tú puedes modificar a tu gusto ese CSS e incluso puedes crear estilos nuevos por CSS. Es interesante que si te adentras en el CSS también conozcas lo que es el HTML y que al menos sepas interpretarlo. Más o menos el HTML sería el marcado, es como una especie de lenguaje que va diciendo qué elementos hay en cada página o en cada parte de tu web y luego a cada uno de esos elementos, por ejemplo la cabecera, la parte central del cuerpo, el pie de página y a cada uno de esos elementos con CSS le damos el aspecto, no solo colores, sino por ejemplo también tamaño, cuánto va a tener de ancho, cuánto va a ocupar de alto, cómo se va a comportar cuando la pantalla se haga más pequeña, este tipo de cosas. Entonces van muy de la mano cuando hablamos de CSS la parte de HTML, HTML da la estructura, el esqueleto y con CSS le damos forma a esa estructura. Bien, esto conceptualmente para hacernos una idea de lo que hace el CSS. Ahora, ¿Por qué digo que es muy interesante que lo aprendas si aún no sabes utilizarlo? Pues me han salido seis ventajas para aprender el CSS. La primera es la más obvia, vas a tener control sobre la personalización de tu web, te va a permitir personalizar tus páginas, tus contenidos de una forma en la que los temas y los plugins pues por sí solos no te van a permitir. Prácticamente todo puede ser modificado por CSS, por supuesto si utilizas algún constructor visual pues te va a dar opciones, si utilizas algún plugin de estos que te dan características para controlar el diseño también te van a ofrecer opciones, pero siempre hay un límite, siempre haber un momento en el que digas uy esto no lo puedo hacer, ¿Cómo hago esto? No viene entre las opciones de este plugin o este constructor que estoy utilizando. Bueno pues si sabes un poquito de CSS lo podrías aplicar de forma relativamente sencilla, más saber CSS te va a permitir tener más control sobre la optimización del rendimiento de tu web. Muchas veces añades plugins porque no sabes hacer cosas que a priori podrías hacer con un poquito de CSS, con lo cual si haces estos cambios de forma más ligera y más eficiente, te va a ayudar a mantener un mejor rendimiento de tu web. Tercera ventaja, puedes ahorrar dinero, ahorrar costes, ahorrar inversión. Muchos temas y plugins premium ofrecen opciones de personalización avanzadas, pero todos suelen costar dinero, por ejemplo Elementor Pro o lo que sea, o incluso hay uno que se llama algo que se llama Hero, algo así, que te da como opciones para editar el CSS, digamos de forma visual, Pues todo esto cuesta dinero. Si tú sabes hacerlo ya porque sabes un poquito de CSS, pues te ahorras todo eso, y además va en la línea de lo anterior, te ahorras cosas, te ahorras plugins, entonces tienes también mejor rendimiento. Cuarta ventaja, esto ya es un poco a nivel general, te va a aportar experiencia, te va a abrir puertas para otras habilidades. Si aprendes CSS puede que empieces a sentirte cómodo o cómoda y quieras empezar a aprender otras cosas, un poquito de JavaScript o que incluso te salgan posibilidades para trabajar en otras webs, ya que tienes esa experiencia extra u otros proyectos tuyos que vayas a tener en el futuro. Así que en general a ti como persona o como profesional, pues te va a aportar esa experiencia o esas habilidades. Quinta ventaja, resolución de problemas. No sabes la cantidad de preguntas que me llegan al soporte que realmente inspeccionando un poquito cómo está puesto el CSS se solucionan. A lo mejor un pequeño cambio o lo que sea, o que te llega una web o que alguien, un desarrollador te ha hecho cosas en una web, luego te la entrega y ya no tienes contacto con ese desarrollador. ¿Si sabes un poquito te puedes ir a sus cambios, a los que ha hecho y decir, a ver, esto que ha hecho? Aquí puede estar el problema aquí, Entonces te ayuda a resolver problemas de tu web o de tus webs. Y la sexta ventaja es que te da control extra sobre la parte responsive. Eso también pasa mucho, la gente me suele preguntar, Gonzalo, no me gusta cómo se ve esto en móvil, me parece que está perfecto en ordenador, pero luego cuando se adapta a móvil si se adapta, pero no me gusta no me gusta cómo lo veo. Por ejemplo, en algunos vídeos de la zona código te enseño truquitos concretos para la parte de móvil. En una de ellas, por ejemplo, veo vemos cómo puedes invertir el orden de las columnas, lo típico, tienes una pantalla grande, se va haciendo más pequeña, más pequeña, y el contenido se pone en columnas para que quepa bien en móvil. Tiene lógica, pues a veces queremos el orden inverso, porque queremos que una parte esté antes que la otra. Entonces, si nuestra web se ve bien en móvil, pero queremos tener un poquito de control, bueno, pues si sabes un pelín de CSS puedes lograrlo. ¿Sí? Bueno, Estas son las 6 ventajas de aprender CSS. Seguro que hay más, pero son las que se me han ocurrido. Así que una vez te he convencido, que estoy seguro de que estás a tope ahora con aprender CSS, vamos a empezar por lo más importante. Mi consejo para afrontar el aprendizaj del CSS es que empieces de la base. Aprende las bases del CSS. Esto sí que sería un poco la parte teórica, pero es importante para que tú luego cuando empieces a investigar cómo está hecha tu web, para hacer tus primeros cambios, que entiendas lo básico. Entonces, aunque no escribas desde cero, es súper útil saber interpretar CSS. Por eso te recomiendo que aprendas los conceptos de selectores, que básicamente son los nombres que se le dan a los elementos en el HTML para que después el CSS sepa dónde aplicar los estilos. Entonces, un selector, yo le digo, quiero que esto que va a ser un selector tenga el fondo rojo. Y un selector puede ser una etiqueta de HTML, por ejemplo, un párrafo, un enlace, un quingentés, que es simplemente una caja, puede ser una clase. Las clases son cosas que nosotros le damos a un elemento para después poderle aplicar estilos por CSS. Por ejemplo, es muy típico tener una clase que se llame button botón, y a esta se le pone un puntito delante. Le pones un punto delante, escribes el nombre que quieras y ya es una clase. Y luego le das estilos, pues el fondo rojo, el texto de encima blanco, cuando paso el ratón por encima, el fondo se va a poner blanco y el texto se va a poner rojo, se va a invertir. Y ya tienes esa clase preparada. Y luego cada vez que tú vas a poner un botón, le asignas esa clase. Así todos tus botones van a tener siempre, o los que quieras, van a tener siempre ese fondo rojo y ese texto blanco encima, que quizás no se vea muy bien, mejor negro, pero bueno, te haces una idea. Y otro selector son los identificadores. Identificadores es algo específico para una página, es un ID, A diferencia de las clases que se usan a nivel global en toda tu web, los identificadores deben ser únicos y no deben ser usados en más de un elemento en la misma página. No te preocupes si tampoco entiendes mucho estos conceptos, simplemente quería que supieras que es importante que los aprendas. Una vez te animes, pues tienes por ejemplo el curso de CSS básico y ahí lo explico visualmente para que lo entiendas a la perfección o donde lo aprendas, pero que sepas que las bases son importantes, después va a ir todo mucho más fácil. Entonces, por un lado concepto de selectores, por otro lado, bueno que tiene estas tres variantes, más o menos, tiene más, pero estas son las importantes. Segundo concepto es propiedades. Las propiedades son los aspectos de los elementos a los que vamos a dar estilos que quieres cambiar por color, tamaño de fuente, que sería font size, margin, que sería el margen, border, que sería el borde de un elemento, background, que sería el fondo, un elemento. Entonces yo digo, quiero coger un selector, que puede ser por ejemplo los párrafos, le aplico o digo quiero cambiar su propiedad, ¿Qué propiedad? Pues la propiedad color y luego le doy lo que es el siguiente elemento, el siguiente concepto que debes aprender, que son los valores. Entonces un valor para color, pues puede ser cualquier color, blanco, negro, rojo, lo que sea. Entonces tenemos selector, ¿Que es lo que voy a modificar? Propiedades, ¿Qué parte quiero modificar? El color, el tamaño, lo que sea. Y valores, ¿Cómo lo voy a modificar? Bueno, esto es un poquito un resumen de lo más importante de lo que te aconsejo aprender, y ya digo que tienes el curso de CSS básico donde vemos esto y muchísimo más, pero está muy bien para aprender estas bases. Bien, esto por un lado, cómo enfocas ese aprendizaje. Por otro, cómo se edita, ¿Cómo edito CSS dentro de WordPress? Bueno, si quieres pegar o escribir código CSS, pues depende de cómo tengas hecha tu web, tienes que ir a un sitio u otro, por ejemplo, si utilizas un tema clásico, estos que se utilizan, que aún no utilizan el editor global del sitio, pues entonces tienes que irte a apariencia, esto en el menú de WordPress, en la parte administración te vas a apariencia, te vas al menú personalizar y hay una parte que pone CSS adicional, hay puedes pegar o escribir código CSS y se va a aplicar al thing que tengas instalado en ese momento, si utilizas un tema basado en bloques, entonces esta parte está en otro lado, tienes que ir apariencia, editor, estilos, que está un poquito escondido, está en tres puntitos, esto lo vimos en la masterclass del editor del sitio y bueno, y ahí tienes una opción que es CSS adicional. Por otro lado, si es un constructor visual tipo Elementor, tipo DIVI, siempre tienen una o varias zonas donde puedes aplicar CSS, a veces lo tienen los ajustes, como por ejemplo DIVI, o a veces lo tienen dentro del propio constructor, incluso a nivel de cada elemento, normalmente estos constructores te permiten poner también CSS que solo se aplica a un elemento en cuestión y luego si quieres editarlo a nivel de tu zim, a nivel de los archivos, entonces tienes que crear un tema hijo de tu web, esto lo tengo explicado en multitud de tutoriales y modificar la hoja de estilo, es el style CSS de tu tema hijo, ¿Por qué? Porque si modificas este archivo, que es donde se contiene todo el CSS de tu web, si lo modificas en tu tema original, cuando se actualice se va a perder, porque se descarga una versión nueva y entonces lo que tú habías hecho se pierde, por eso hay que hacerlo en un tema hijo, en el caso de que lo hagas a nivel de tema, a nivel de archivo, si no, para no complicarte, lo haces como te comento en la parte del CSS adicional, esto si quieres pegar o escribir código CSS. ¿Qué pasa si quieres revisar el CSS existente en tu web? Bueno, puedes irte a este archivo que te comentaba, al style CSS de tu fin y puedes ver todo, además suele estar ordenado, suele tener un índice para que puedas ir por zonas viendo qué CSS tiene eso, pues por ejemplo te lo pueden dividir por primero te pueden poner los textos de toda tu web y ahí ves qué estilos tienen los encabezados, los párrafos y demás, después te pueden poner los estilos para la cabecera, los estilos para el footer, me lo estoy inventando un poco así al vuelo, pero un poco esa es la idea, o puedes utilizar, si estás viendo tu web o cualquier otra web, puedes utilizar el inspector de los navegadores, tanto en Chrome como Firefox como en casi todos, si haces botón derecho en una página y le das a inspeccionar, a veces por inspeccionar elemento, a veces inspeccionar, te aparece el CSS de esa página específica, bueno el HTML con el CSS y demás, incluso puedes modificar al vuelo, que no se van a hacer efectivos, solo lo vas a ver tú, pero puedes modificar al vuelo el CSS de esas zonas específicas. Tengo un vídeo explicándote cómo se hace esto, de hecho en la zona código, que es uno de los vídeos esenciales que siempre recomiendo ver, de hecho si te vas a la zona código y filtras por esenciales, es uno de los que te va a aparecer. Bien, esto es cómo editar CSS dentro de WordPress. Ahora, hay una pregunta muy típica, porque existen plugins que instalas y te permiten pegar CSS, te permiten tenerlo como ordenado por partes, te permiten decir pues quiero que este CSS se aplique solo en la parte frontal y no en la parte de administración y te dan como opciones. Entonces, ¿Es buena idea utilizar un plugin de este tipo para editar el CSS en WordPress? Bueno, a ver, lo más limpio y lo más ordenado es utilizar la hoja de estilos de un tema hijo, lo que te comentaba antes, lo tienes todo ahí ordenadito en tu hoja de estilos. A nivel interno, lo más rápido y cómodo es utilizar la zona de CSS adicional que aparece en la parte de personalizar de WordPress, porque al final estás en tu administración, te vas ahí y pegas el código ahí. En cualquiera de estos dos casos que te acabo de comentar, es muy importante para tu salud, para tu bien, que documentes bien las modificaciones, es decir, cuando pongas un trozo de CSS, ponle un comentario, también lo explico en el curso de CSS básico, es muy fácil poner un comentario y decir pues este CSS va a hacer esto y esto, después cuando en el futuro lo vayas a revisar o tengas que hacer algún cambio, ya sabes qué es cada cosa y hazme caso que se te va a olvidar, ponlo, aunque tú pienses que te vas a acordar, ponle comentarios a todo. Entonces, después de decir todo esto, el uso de un plugin para añadir código al final no deja de ser otro extra que estás añadiendo en tu web, normalmente tiene un impacto en el rendimiento, también en la memoria. Entonces yo prefiero ahorrarme este tipo de plugins, si para ti es muy cómodo, pues bueno, lo puedes utilizar, yo prefiero ahorrarme. Entonces, tres consejos que te doy o algunos truquitos si te animas a trabajar con CSS en WordPress. Primero, lo que te comentaba antes, familiarízate con el inspector del navegador, esto es clave, y cuando empieces a utilizarlo y empieces a ver que no es tan complicado, te va a ayudar muchísimo, porque te vas a cualquier zona, la inspeccionas, ves el CSS, lo puedes modificar ahí en ese momento para ver cómo quedaría y luego ya si te gusta, lo copias, lo pegas y ya lo tienes. Después también puedes utilizar, y también tengo un vídeo al respecto, una extensión de navegador que te ayude visualmente a hacer estos cambios. Cuando estás empezando, no vas muy rápido con esto que te comentaba antes de escribir las etiquetas, las clases, las propiedades, los valores, todo esto que suena un poco al principio muy técnico, pues te va a costar. Entonces hay una herramienta que se llama Stylebot, que ya digo, tengo un vídeo dedicado a ella, que te permite elegir los estilos dándole a botones en lugar de escribirlos. Entonces tú le das y luego ves cómo está escrito y entonces no sólo te ayuda a que sea más fácil que hagas los cambios, sino que vas aprendiendo, porque lo que eliges lo ves luego en código. Entonces también recomiendo mucho empezar a utilizar cuando estás aprendiendo CSS, empezar con una extensión como esta. Y luego, consejo, te va a pasar seguro cuando empieces, que haces cambios y no los ves, ¿Vale? ¿Esto por qué es? Porque están guardados en la caché. Entonces primero limpia la caché de tu plugin de caché, depúralo y luego límpiala de tu propio navegador o entra en una ventana de incógnito. Pero bueno, normalmente si haces un hard refresh después de limpiar la caché, un hard refresh es una actualización de la página limpiando la caché del navegador. En Mac se hace con mayúscula, comando r. En Windows no estoy seguro, pero puedes buscarlo y también depende del navegador, eso busca si usas esto, te hablo de Chrome y de Mac, pero si usas Windows y Firefox, pues busca hard refresh, hard de duro, hard refresh Firefox Windows y pues lo verás en Google, si no le preguntas a chat GPT. Bueno, estos son tres consejitos así a nivel general que creo que te vendrán muy bien. Ahora ¿Estás convencido, ¿Has visto un poco cómo es todo, ¿Qué camino tomas para aprender CSS enfocado a WordPress? Bueno, viéndolo desde mi web, yo te recomiendo, recomendaría sí o sí hacer los cursos de HTML básico enfocado a WordPress y de CSS básico enfocado a WordPress. Esa es la base que yo considero que debes ver. Y después empieza por hacer pequeñas modificaciones de tu web, pues vete a un botón, por ejemplo, de tu web y cambia el color de fondo, ese tipo de cosas antes de ponerte a crear clases nuevas o lo que sea. Para hacer esto puedes hacer, para no empezar de cero, porque seguramente no se te ocurra nada, pues te puedes ir a la zona código y filtras por CSS y ahí es que es justo esto, son cambios pequeñitos que hago para ciertas zonas de la web, incluso te enseño cómo puedes aplicar CSS a bloques del editor de de Guttenberg. Entonces te vas a la zona código, ya digo, filtros por CSS y vas viendo y lo que te interese pues lo aplicas en tu web, lo puedes hacer en una web de prueba si quieres o en tu web original, lo que quieras. Y luego ya avanzado, pues puedes crear tu propio child theme, es decir, una copia de un thing que te guste o de un fin que estés utilizando y te pones a hacer modificaciones a lo loco, incluso desde cero. Ya digo, esto ya si quieres profundizar a nivel así más avanzado. Bueno, esto es un poco lo que te quería contar a nivel de cómo se puede enfocar el aprendizaje de CSS cuando uno es principiante, cuando se quiere adentrar en ello y lo importante que lo veo para lo, para mí sencillo que es aprenderlo un poquito, no hace falta que lo domines para que seas desarrollador, que bueno, no se considera desarrollo, pero para que sepas crear una hoja de estilos desde cero, sino simplemente para hacer esos cambios, esas cositas que te van a dar muchísimo más control, muchísima más libertad y muchísimas más opciones. ¿Voy a dejar por aquí lo que he comentado de los cursos y demás, pero si tienes alguna duda me contactas a través del formulario de la web, me dice Gonzalo, me gustaría aprender esto y esto y esto, por dónde voy? Y te paso enlaces para que puedas lograrlo. Bueno, nada más por este episodio, recuerda que si quieres aprender a crear y gestionar webs con WordPress desde cero a profesional, pues tienes la formación y el soporte en Gonzalo Navarro es comunidad de Telegram, todo por 10 euros al mes, con más de 70 cursos en vídeo ya publicados, más de 300 vídeos un poquito más avanzados de la zona código y es sin permanencia, así que lo pruebas y encima si no te gusta, escríbeme y te devuelvo el dinero. Nada más por este episodio, nos seguimos escuchando. Adiós.