392 | Trucos de CSS en WordPress (para novatos)

En el episodio 392 de WordPress Semanal hablamos de servicios, extensiones y herramientas que pueden facilitarte el uso de CSS en tu web con WordPress aunque partas desde cero. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 392 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy hablamos de trucos de CSS, porque hay una cosa que veo muy clara y es que cada vez tenemos más opciones a nuestra disposición para generar CSS, que a priori es bastante complejo y que luego solo tendríamos que pegar en nuestra web. Es decir, nos valemos de herramientas, de opciones, se genera CSS y después nos vamos a nuestra web y lo pegamos. Pero voy a poner mucho foco en cómo esa parte de irnos a nuestra web y pegarlo es importante tenerla controlada, porque si no, de nada nos sirven todas estas herramientas, todas estas opciones, si no tenemos esos pequeños conocimientos básicos que son muy fáciles de aprender. Y ahora te voy a guiar sobre cómo puedes hacerlo, además de, por supuesto, hablarte de todos los trucos y todas estas herramientas que digo que nos facilitan mucho la vida. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos por un lado nuevo vídeo de la Zona Código y precisamente enfocado al CSS. Y me lo he sacado porque la semana pasada hablábamos en el grupo de Telegram, uno de los miembros previos preguntaba sobre el parpadeo. Hay una animación dentro del CSS que te permite ese efecto de parpadeo, como que algo aparece y desaparece, puede ser una caja, puede ser un texto, básicamente lo que sea. Y la pregunta iba un poco relacionada porque existe una etiqueta de HTML que realmente no es una etiqueta estándar. El HTML tiene una base, una estandarización, y luego había otras etiquetas de HTML, o las hay que algunos navegadores las aceptan, pero ya digo, no son las estándar. Y en el caso del parpadeo había una que se llamaba Blink y esta no solo no es estándar, sino que además ya está en desuso, entonces muy pocos navegadores la reconocen, de modo que aunque tú la uses y la veas en el momento que te está funcionando, después navegas desde cualquier otro navegador, desde uno de móvil, desde Safari, lo que sea y no se va a ver ese efecto. Entonces en este vídeo te enseño a crear ese efecto por CSS para que puedas utilizarlo en cualquier lugar. Y además te enseño ese proceso, ya digo que es tan importante para hacerlo efectivo, no solo que copies y pegues el CSS, que ya digo, te muestro el proceso, sino también después cómo hacer que se reflejen los elementos que tú quieras. Y muy importante, no tienes que saber absolutamente nada de CSS ni de HTML ni nada, porque te lo explico todo en el vídeo y en su mayoría consiste en copiar y pegar. Te lo dejo enlazado y ya sabes que esto es parte de la zona código, que son vídeos como este que voy sacando cada semana, que vamos por 340 o más. Y la idea es esa, que puedas ir aplicando esos truquitos, estas mejoras no sólo de CSS, sino de otro tipo de código HTML, JavaScript, script, PHP, sin que sepas nada de desarrollo ni de código ni nada. Bien, en esta línea ya te lo comenté la semana pasada, pero publiqué una guía, una mega guía de CSS práctico en WordPress y es un recopilatorio de todos los vídeos que he ido publicando durante estos años sobre el CSS ordenado por temática. Por ejemplo, hay una sección que se llama Trucos de CSS, que está muy relacionada con lo que vamos a hablar en este episodio, que tiene su buscador, que puedes ir marcando los vídeos que hayas visto como completados y así te queda en todo ese índice, pues puedes ir viendo los que están ya vistos y los que no. En fin, un poco para que lo tengas todo mejor ordenado y puedas acceder a todo este contenido que ya se va acumulando. Y además te voy a dejar otros enlaces útiles y muy relacionados con este episodio, como por ejemplo el curso de CSS básico enfocado a WordPress o el curso de HTML básico también enfocado a WordPress. Para acceder a todos estos enlaces recuerda que lo más fácil es ir a las notas del episodio y las tienes escribiendo en tu navegador Gonzalo Navarro es 392, que es el número de este episodio Gonzalo Navarro es 392. Estas son las novedades y las recomendaciones. Vamos ahora con el plugin de la semana que se llama Publish Press Series. Y si te suena esto de Publish Press es porque ya he hablado de algunos plugins de esta misma empresa o digamos de estos mismos desarrolladores. Por ejemplo la semana pasada ya te hablé de uno muy popular que está activo en más de 100.000 webs con WordPress y que te permite despublicar o hacer que caduquen contenidos en tu web a partir de una determinada fecha. Y te comenté que estos mismos, pues los de PublishPress tienen más plugins relacionados con con la publicación de contenidos y en este caso este que te comento es uno que te permite organizar las entradas en series o en entregas y pues es ideal para los que tienen un blog donde además son una revista o son periódicos o por ejemplo escritores, no lo sé, de cuentos o si eres profesor de algo y escribes varias entradas sobre una misma temática o sobre una misma materia, pues lo puedes tener como organizados, entonces les puedes dar una numeración o los puedes agrupar en torno a un mismo tema o organizarlos ya digo por capital, capítulos o similar. Esto es un poco la idea, lo puedes hacer desde la parte de administración, te da las opciones y luego en la parte frontal queda registrado, pues por ejemplo esto es la entrega 1 de 5 de la serie no sé qué. Esta es un poco la idea, así que lo dejo enlazado en las notas del episodio. De nuevo se llama Publish Press Series, el nombre es un poco más largo, pero si lo buscas seguro que lo encuentras y si no ya sabes que lo tienes directamente en las notas, recuerda en Gonzalo Navarro es perfecto. Pues ahora sí, vámonos con el tema central del trucos CSS para novatos y por supuesto aplicado a WordPress. Pero el gran truco, lo primero de lo primero de todo, lo que te va a dar la ventaja de poder aprovechar todas las herramientas que tenemos a nuestro alrededor es entender dónde pegar el CSS y los conceptos esenciales para poder utilizarlo. Fíjate que no te digo que aprendas CSS, te digo que aprendas dónde ponerlo y los conceptos básicos. Primero, dónde pegas el CSS, que por supuesto estoy empezando por aquí porque doy por hecho que sabes lo que hace el CSS, que básicamente es un lenguaje que me permite personalizar la apariencia de mi página web, Le puedo decir el color de los elementos que hay en mi página web, le puedo decir el tamaño, le puedo decir si tiene un borde no tiene un borde, le puedo decir cuánto va a ser de ancho y cuánto va a ser de alto, o puedo crear animaciones como la que te comentaba antes de un parpadeo. Entonces, ¿Dónde pego CSS en mi web? ¿Puedo decir pego o escribo? Pues hay varias zonas donde lo puedes hacer. Por ejemplo, si utilizas un tema clásico, que esto lo sabes yéndote al menú apariencia, si ves una parte que pone personalizar, pues estás usando un tema clásico de WordPress, te vas a Apariencia, Personalizar, y ahí tienes una opción que se llama CSS adicional, ahí pegas tu CSS, le das a guardar y ya está. Si utilizas un tema de bloques, que esto lo sabes si te vas al menú Apariencia dentro de tu panel de administración de WordPress y no ves el menú de personalizar, pero sí que ves uno que pone Editor, pues entonces estás usando un tema de bloques o un tema basado en bloques, te vas al editor, te vas a una parte que es Estilos, le das a los tres puntitos para ver más opciones y ahí tienes una que es CSS adicional y ahí puedes pegar tu CSS. Otra opción es pegar los cambios en el propio archivo a nivel de tu tema destinado a ello, que se llama Style CSS. Esto debes hacerlo, si lo quieres hacer así, debes hacerlo con un tema hijo, que es básicamente crear una copia de tu fin para que puedas aplicarle cambios y que cuando se actualice tu fin no los pierdas. Estas tres cosas las tengo explicadas de sobra en vídeos específicos y en el curso de CSS, ¿De acuerdo? Así que en la parte de enlaces te voy a ir dejando todo para si no lo tienes claro así en formato audio porque nunca lo has hecho, pues yo tengo vídeos paso a paso explicándote cómo se hace. Más aspectos esenciales además de saber dónde pegar el CSS. Bueno, otro problema para alguien que nunca digamos se ha metido en esto, es que luego el CSS está relacionado con elementos de tu web, y esos elementos, pues digamos que lo podemos simplificar en el HTML. El HTML es lo que da estructura a nuestra web a nivel de semántica. Es como si yo lo estuviese escribiendo al navegador y le digo, pues aquí va a la cabecera, aquí empieza el cuerpo de mi página y aquí va el pie de página, y luego dentro de la cabecera, pues aquí van tres artículos, aquí va no sé qué. Todo eso se lo explico, se lo marco con código HTML. Entonces a ese código HTML yo le puedo decir después que quiero que tenga un aspecto determinado gracias al CSS que yo estoy pegando. Esto es a grandes rasgos, esto debes entenderlo y debes entender cómo por ejemplo, hacer que un elemento de HTML esté asociado con cierto CSS que yo he pegado. Que esto lo hacemos editando expresamente el elemento HTML, asignándole una clase, asignándole un identificador, conceptos que te pueden sonar un poco extraños pero que en cuanto lo veas, ya digo, por ejemplo en el curso de HTML básico o el de CSS, lo vas a entender muy fácilmente. Y otro concepto importante es el de especificidad, el saber si por ejemplo yo le estoy dando dos instrucciones de CSS para un mismo elemento, saber cuál va a aparecer antes y a cuál me van a hacer caso y a cuál no. Entendiendo todo esto, que parece mucho pero es poco, ya vas a poder, aunque no generes tú el CSS, aunque no sepas escribirlo, vas a poder utilizarlo, vas a poder copiarlo, por ejemplo, del CSS que yo te ofrezco o de herramientas como las que te voy a hablar en este episodio. Así que lo primero es que tengas controlado estos conceptos que te he dicho y a los que te voy a dejar enlaces para que los puedas dominar sin problemas. Si te queda alguna duda me escribes, si eres suscriptor desde el soporte y si aún no estás apuntado, pues por contacto. Oye Gonzalo, ¿Qué vídeos me recomiendas ver? Y te los paso. Pero ya digo, voy a intentar dejarlo todo bien ordenadito y bien especificado en las notas del episodio. Vale, pues vámonos con esas herramientas que nos van a facilitar la vida y que nos van a permitir usar CSS sin realmente saberlo, más allá de esos conceptos básicos. Bueno, la primera es mi favorita. Es una extensión de navegador que te permite personalizar el CSS de tu web sin escribir el CSS. También te permite escribirlo si sabes, o pegarlo y lo ves como con vista previa, te puedes ir a cualquier web y utilizas esta extensión, la activas y empiezas a modificar el CSS de esa web y tú ves los cambios, los ves en el momento, por supuesto no se activan porque si no tú podrías ir cambiando el aspecto visual de cualquier web por ahí, dejarlo permanente. Esto simplemente como una especie de previsualización. Pero lo bueno es que te genera ese código CSS que tú después puedes copiar y te lo llevas, como hemos visto antes, a pegarlo en tu web. Y esta extensión se llama Stylebot. Yo recomiendo esta porque está tanto para Google Chrome como para Firefox y es bastante popular, se utiliza mucho, ya grabé yo hace muchísimo tiempo un vídeo en la zona código sobre cómo se utilizaba y después mejoraron un poco el aspecto, cambiaron lo típico, la renovaron un poquito y saqué otro vídeo explicando también cómo utilizarlo en esa nueva interfaz un poquito más renovada. Así que os dejo el enlace porque es una extensión muy interesante, pero si no, pues la podéis buscar. Se llama Style Bot y ya digo, está disponible tanto para el navegador Chrome como para el navegador Firefox, no sé si para alguno más, pero vamos, para estos dos seguro. Después también hay cosas así del estilo que puedes utilizar directamente desde tu web con WordPress. Por ejemplo hay un plugin que se llama CSS Hero, que básicamente es eso, es un editor de CSS visual, entonces te ofrece como un inspector avanzado con unas opciones increíbles. Por ejemplo en este caso trae muchas más opciones que Style Bot, está un poquito más limitado y no te permite modificar hasta tanto nivel o de forma tan granular como CSS Hero. De hecho CSS Hero tiene su curva de aprendizaje porque al final, aunque lo edites de forma visual, pues te ponen todos los nombres de todas las partes, pues altura de línea, por ejemplo, si vas a editar la tipografía de un título, pues altura de línea, colores, para que lo puedas poner con sombra, sin sombra y todo esto. Y la idea es lo mismo, te va generando el CSS debajo para que tú después lo copies y lo pegues en tu web, vamos, o lo actives a través del plugin, ¿De acuerdo? Es un plugin de pago y lo mismo, aunque lo utilices, debes conocer los conceptos básicos del CSS, si no, no vas a poder aprovechar todo lo que ofrece. Y los precios son desde 29 dólares al año por web. No voy a comentar demasiadas opciones de cada uno porque prefiero que sea como extensión de navegador. Style Bot, plugin de WordPress para modificar CSS visualmente. CSS Hero no quiero tampoco volveros locos con opciones, pero bueno, sabiendo las categorías podéis buscar alternativas. Puedes buscar alternativas a CSS o a Stylebot y así puedes ir investigando por tu cuenta. Yo te voy a decir un poco las más populares o las que yo conozco más bien. Ahora venimos al mundo de la IA, la inteligencia artificial. Para generar CSS por ejemplo, aquí han salido infinidad de opciones y van a salir muchísimas más. Antes de que explotara Chat GPT ya había servicios que te generaban CSS o que te generan también código PHP para WordPress. Por ejemplo, en el curso de WordPress avanzado yo me valgo de una herramienta que se llama Generate WordPress, que precisamente hace esto, te genera código PHP, te genera plugins, te genera shortcodes, te genera tipos de contenido personalizado a través de unas preguntas que te hace y luego tú copias ese código y te lo llevas a tu web. También con CSS hay servicios que lo hacen, pero hoy en día realmente con Chat GPT es que es lo mismo, porque al final tú le puedes decir compórtate como un generador de CSS para WordPress y le preguntas, pues quiero que el ancho de la página de mis artículos esté siempre al 80%, dime el código CSS y dime cómo lo tengo que aplicar en la web. Y lo tienes todo ahí realmente. Entonces verás muchos servicios. Hay uno ahora que se llama WP Turbo, que ya digo, este también antes de Chat GPT ya existía y que desde Chat GPT se ha potenciado un poco también en ese sentido. Han añadido inteligencia artificial, pero básicamente se valen del poder de vincular, pues eso, ya digo, chat GPT o la API en este caso de OpenAI con su servicio. Así que en cuanto a la inteligencia artificial para generar CSS, mi recomendación no es muy original y yo utilizaría, de hecho lo utilizo, Chat GPT. Por cierto, tenéis un par de vídeos, si os vais a la zona código y escribís Chat GPT, tenéis un par de vídeos donde os explico cómo aprovecharlo, incluso con ejemplos prácticos, como por ejemplo generar shortcodes para cosas determinadas. De todos modos, si queréis utilizar servicios y generadores de CSS para cosas concretas, hay una página que está muy bien que se llama Web Code Tools y después tenéis esto de CSS Generator, yo voy a dejar el enlace para que podáis ir directamente. Es generador de CSS y de HTML, no con inteligencia artificial, sino tú quieres generar por ejemplo una animación, te vas a la parte de animación y con sus opciones las generas y luego la copias y la pegas en tu web. Y esto para cosas como animaciones, que es más complejo escribir SCSS, o para hacer degradados de distintos colores, con más porcentaje de un color que de otro, con más o menos transparencia en un lugar o en otro, pues todo eso también escribirlo por código, aunque sepas hacerlo, es un rollo. Entonces es mejor utilizar un generador de estos y luego copiar y pegar el código. Yo al menos lo hago así. Así que os voy a dejar varias opciones para degradados, para sombras, para animaciones y luego el generador este, digamos, global, que también te permite incluso crear una tipografía, vamos, las opciones para una tipografía, qué color va a tener, qué grosor, todo esto para que no tengas que escribirlo, te lo genera y luego lo copias y lo pegas. Por cierto, publiqué un vídeo de Zona Código, que creo que lo he dejado, sí, lo he dejado enlazado, que es precisamente cómo utilizar generadores de CSS para personalizar tu web con WordPress. Entonces ahí lo ves en vídeo, con pasos, con ejemplos prácticos para que te hagas una idea de cómo sería eso de pasar del generador a después aplicarlo en tu web con WordPress. Pero el espíritu de este episodio, que yo sé que gustan mucho estas las mejores herramientas para diseñadores y te ponen pues esto, los generadores de degradados, de sombras, de tal, está muy bien, pero de verdad que lo que más te va a aportar es aprender estas BAS, que te digo que no quiere decir que sepas escribir el CSS, pero sí entender bien la relación del CSS con los elementos de tu web, entender dónde pegar el CSS y estos conceptos básicos que te van a permitir de verdad poder aprovechar todas estas herramientas de las que te he hablado en el episodio de hoy. Fantástico. Por último, recuerda que cuando estés listo para dar el siguiente paso, puedes apuntarte en Gonzalo Navarro, es hacerte miembro y acceder a los más de 70 cursos que hay publicados, a los más de 340 vídeos de la Zona Código, a la comunidad privada de Telegram y a soporte personalizado directamente conmigo. Tienes toda la info en gonzalonabarro. Es Nada más por este episodio, nos seguimos escuchando. Adiós.