303 | Diseño global en WordPress sin plugins

En el episodio 303 de WordPress semanal te hablo del editor de temas de WordPress, qué puedes hacer con él y qué nos depara el futuro tras este gran cambio. Vamos allá. Hola, hola, Soy Gonzalo de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tu propia web con WordPress. Y vamos a hablar de un tema que ahora mismo está de actualidad en el momento en el que grabo este episodio, pero que quiero que te sirva en cualquier momento que lo escuches, porque estamos hablando del editor del tema de WordPress, Site Editor en inglés, y que si bien está apareciendo ahora, es el futuro cercano. Así que aquí lo vamos a poder definir bien. Voy a hablar de qué exactamente, sus características y el futuro a lo que nos lleva a grandes rasgos. Así si lo estás escuchando dentro de un tiempo, pues puedes comparar lo que yo pensaba con tu momento presente. Bueno, en un momentito vamos a hablar de todo esto, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos una novedad en cuanto a los cursos y es la renovación del curso de WordPress básico, que ya sabéis que es gratuito, siempre lo ha sido en los seis años que llevamos con la plataforma y con el podcast y siempre lo será. Es un curso que voy renovando mínimo una vez al año, porque en WordPress hay muchos cambios, sobre todo ahora. Y esto lo intento hacer pues con otros cursos y voy un poco priorizando según lo que me vais diciendo, noto que alguien quiere o en general que queréis que actualice un curso más que otro y es lo que voy haciendo. Pero el curso de WordPress básico siempre me gusta mantenerlo primero, es un poco la puerta de entrada y como es muy importante tener los fundamentos claros, pues por eso aquí lo tenéis. Y en este curso, que incluso fui añadiendo lecciones con el tiempo, al principio me parece que eran 10 lecciones, íbamos por 14. Y dentro de cada lección pues hay varios vídeos dividido para que lo puedas consumir de la forma más sencilla posible. Si en lugar de ver todos los ajustes de WordPress necesitas recordar cómo es la parte de ajustes de lectura, pues te vas a ese vídeo. Y no he renovado todas las clases porque hay muchas que son iguales. Y en muchos casos he dejado explicaciones anteriores porque ahora estamos en un momento de transición dentro de WordPress, en el que dependiendo de si, por ejemplo, tienes un tema de WordPress preparado para el editor de bloques o no, pues el menú de WordPress te cambia, cosa que no me gusta nada, porque WordPress siempre ha ido en la línea de simplificar todo, poner la menor cantidad de funcionalidades posibles, y estamos entrando en una deriva de demasiadas cosas y demasiadas diferencias. Pero bueno, al final vamos a dejarnos llevar por la corriente porque no queda otra, al final va a ser la tendencia. Al principio todo el mundo criticaba el editor de Gutenberg, ya lo usa cada vez más gente y. Y un poco esta es la idea, ¿No? Pero bueno, en el curso tenéis renovadas las clases que necesitaban renovación y tenéis extendidas las clases que necesitaban, pues eso, una extensión. Y como principales novedades vais a tener explicado en vídeo de lo que vamos a hablar a lo largo de este episodio, que es el editor de temas. Además, he mejorado desde mi punto de vista, la primera clase en la que en lugar de adentrarme directamente a contratar hosting, dominio e instalar WordPress, primero doy un poco de contexto y. Y resuelvo dudas que yo noto que me llegan de algunos de vosotros, algunos alumnos, cuando empiezan el curso de WordPress básico. Así que esto de renovar los cursos también me sirve para ir mejorando, ir añadiendo o resolviendo dudas o problemillas con los que os encontráis, ¿Sí? Bueno, no me extiendo más. Tenéis curso de WordPress básico renovado, gratuito, y tenéis el enlace en las notas de este episodio, ya sabéis, para ir a las notas donde están los enlaces, donde está el esquema del programa, GonzaloNabarro es 303, siempre poniendo el número del episodio, gonzalonabarro es el número del episodio. Vais a las notas completas y los enlaces. Bien, más novedades en cuanto a contenidos. Tenéis nuevo vídeo de la zona código, ya sabéis, ahí os enseño a modificar el funcionamiento y el aspecto de vuestras webs con WordPress, sin usar plugins y sin que sepáis desarrollo ni programación. Veis el vídeo, copiais el código que os dejo y lo pegáis tal y como os muestro. En este caso se trata del vídeo 253 y en él te enseño, si tienes una tienda online con WooCommerce, te enseño a mostrar solo la recogida local y el envío gratuito a partir de cierta cantidad. ¿Por qué he sacado este vídeo? Porque en el anterior vídeo de la zona código lo que hice es enseñaros a mostrar el envío gratuito a partir de cierta cantidad y que el resto de formas de envío que tú tienes disponibles para tus clientes desaparecieran. Pero claro, tiene sentido que desaparezca en la que hay que pagar, pero si tú tienes, por ejemplo, recogida local, que mucha gente lo tiene, pues también te desaparecía. En este caso te enseño a modificar un poquito ese código, que ya digo, es copiar y pegar, para que la recogida local también esté disponible cuando se llega a esa cierta cantidad en el que el envío, si la persona elige que se lo envíes a su casa, sea gratuito. De nuevo, todo en la parte de enlaces. Fantástico. Esto en cuanto a las novedades. Vamos ahora con el plugin de la semana que se llama F Total Stock Value for WooCommerce. El nombre no hay por dónde cogerlo, pero lo que hace es una cosa muy específica y es añadirte. Este plugin lo descubrí porque me lo preguntó un suscriptor. Ya sabéis que los suscriptores en Gonzalo es, además de los cursos, la zona código, las descargas, pues tenéis soporte para las dudas que vayan surgiendo o para las cosas que vayáis necesitando. Y este suscriptor, que me perdone que no me acuerdo ahora mismo del nombre, necesitaba que en los informes que genera WooCommerce apareciese la información de el total de stock que quedaba y el valor de ese stock. Y aquí tienes un plugin que lo hace, sí, es muy específico, pero está activo en más de 700 webs con WordPress, así que es un plugin que la gente utiliza. ¿De acuerdo? De nuevo, también lo tenéis en las notas del episodio. Recordad, Gonzalo Navarro es 303. Fantástico. Pues ahora sí, vámonos con el tema central de este episodio, el editor de temas de WordPress, también conocido como Site Editor. Bien, vamos a definirlo. Vamos a comenzar por definir qué es esto del editor de temas, que tiene un nombre muy genérico, así que puede llevar a confusión. Bien, esto básicamente es un editor global del diseño de tu tema de WordPress, del diseño de tu theme. Ahora mismo sólo está accesible si usas un tema basado en bloques. Bueno, ahora mismo, y yo entiendo que en el futuro, porque si no tienes un tema basado en bloques, esto es, en bloques del editor de Gutenberg. No que uses Gutenberg en tu web, sino que el tema permita que su diseño estructural se pueda retocar o se pueda hacer con bloques del editor de Gutenberg, ¿De acuerdo? Son especiales, tienen que estar desarrollados para esto. Entonces, si tú tienes este tema que está a partir de la versión 5.9 de WordPress, me refiero a esta característica del editor de temas, pues puedes hacer básicamente dos cosas. Ahora nos vamos a adentrar en todo ello un poco más, pero es elegir los estilos globales de tu web, algo así como lo que harías con un constructor visual tipo Elementor, Divi, etcétera, y diseñar la estructura de tu tema, algo así también a lo que harías con constructores visuales. Fíjate un poco la línea que está siguiendo WordPress, más que nada por intentar competir con soluciones como Wix, Squarespace, etc. Aunque ya sabemos que La fortaleza de WordPress es que no dependes de otras empresas. WordPress te lo descargas tú, lo instalas en tu propio servidor, en tu propio hosting y es tuyo, es tu web y haces con ello lo que quieras. En Wix estás en Wix y en Squarespace estás en Squarespace y incluso en WordPress. Com Estás en WordPress. Com. La fortaleza de WordPress va más por ahí y no tanto por lo que te permite hacer, que también vamos a hablar en detalle de esto que te he dicho que incluye el editor de temas, que básicamente son los estilos generales por un lado y el diseño estructural de tu web por otro. Vamos a centrarnos primero en los estilos. Bien, para llegar a estas funcionalidades, lo que ocurre desde la parte de administración es que tienes un menú que se llama Editor y que está dentro del menú Apariencia de WordPress. Vas a Apariencia, te pone Editor, le das y apareces en la edición del sitio. Y aquí una de las características fundamentales es la parte de estilos. ¿Qué puedes definir aquí? Pues lo que generalmente conocemos como estilos cuando vamos a diseñar una web, la tipografía. Puedes editar qué tipografía es tanto para los párrafos, los textos generales, como los títulos, como los enlaces para a nivel bastante básico. Pero lo fundamental por otro lado, puedes definir o escoger los colores generales de tu web, con una particularidad que muchísimos usuarios de WordPress han buscado siempre y que se podía solucionar antes con plugins, pero que ahora viene establecido y es crear tu propia paleta de colores aquí seleccionas los colores que quieras, puedes elegir con un color picker, es decir, con una pantalla donde eliges el color digamos manualmente a ojo, o poner el código de color exacto y guardar esa paleta de colores de modo que cuando tú estés editando cualquier página de tu web y vayas a usar un bloque del editor que permita modificar colores, puedas acceder directamente a tu paleta de colores, que aunque parece increíble, esto no venía antes en WordPress, no existía, salvo que lo añadieses con una extensión en WordPress digo antes, si no recuerdo mal, en alguna versión anterior ya lo introdujeron, pero aquí digamos que lo tenemos a nivel global y ya implementado dentro del editor de temas. Y aquí en colores, pues además de elegir tu paleta, puedes definir por ejemplo los colores de los textos, de los títulos y también de los enlaces. Y luego dentro de los estilos globales tienes una parte de diseño que de momento lo único que te permite definir es el padding de tu web. ¿Qué es el padding? Los espacios de los contenidos con respecto al final de la página, al marco o a los límites que están marcados por la ventana de tu navegador web. Esto ya digo, es a nivel global, a nivel estructural de toda la web. Y otra característica interesante que puedes hacer aquí desde la parte de estilos es personalizar el diseño inicial de todos los bloques o de muchos de ellos. Ya sabes que hay un bloque de botón, por ejemplo cuando estás editando cualquier página, cualquier entrada, puedes añadir un botón. Pues claro, había una característica que seguramente mucha gente echaba en falta y es que el botón cuando tú le das que ya te aparezca con tus colores corporativos y no que te aparezca con el típico azul que no usa nadie o que usa mucha gente por flojera. Entonces claro, esto te ahorra mucho trabajo. Defines primero tus estilos generales para los bloques que más utilizas, que dependiendo del bloque te deja definir unas cosas u otras y luego pues te facilita mucho la vida cuando quieras diseñar cualquier página. Bien, esto es una gran característica, una de las más importantes del editor del sitio. ¿Qué más tenemos aquí en esta zona de edición global de de nuestra web? Pues tenemos el diseño de plantillas, que esto comúnmente o históricamente se ha llamado en WordPress como plantillas de página. Ahora lo han simplificado y lo llaman plantillas antes esto si tú lo querías modificar tenías que hacerlo por código, porque las plantillas de página se refieren a la estructura de los contenidos de tu web. Es decir, por ejemplo, yo digo que todas las páginas, no las entradas, sino las páginas estáticas de mi web quiero que tengan siempre, pues arriba la cabecera, en el medio el contenido, que ese contenido tenga un ancho determinado, debajo tengo la zona de comentarios y debajo el footer. Esto que es estructural, que ya no se mete en los contenidos de si tengo un texto, de si tengo una imagen, de si tengo un botón, de si tengo un formulario, sino simplemente la parte estructural, es algo que ya digo, antes en WordPress solo se podía cambiar a través de código o con soluciones que empezaron a salir como son los Page Builders o los constructores visuales que ya he mencionado en este episodio, como puede ser Elementor Pro, solo la parte Pro te permite cambiar la estructura o más adelante Divi, si no recuerdo mal, también sacó esta funcionalidad, pues WordPress empieza a introducir esto, empieza a. Gracias a que sacó el editor de Gutenberg hace ya bastante tiempo, pues te empieza a permitir usarlo para definir la estructura general de tus distintos contenidos. Por ejemplo, la estructura de las páginas por un lado, la estructura de las entradas del blog por otra, la estructura de la home. Puedes tener por ejemplo una plantilla de página específica para la página de inicio, porque normalmente o muchas veces tiene una estructura diferente, otra también para la página del blog, otra para la página de error 404. Dependiendo del tema de WordPress que tengas, que ya sabes que el requisito es que sea un tema basado en bloques, vas a poder crear plantillas para una cosa u otra o modificar plantillas para una cosa u otra. Y tú después cuando estés dentro de un contenido específico, imagínate que yo estoy en lo que considero una página, que es una página de venta, una landing page, y que quiero que tenga una estructura especial que yo he definido previamente en este editor de temas, en la parte de plantillas, donde por ejemplo no muestro la cabecera porque no quiero los menús para que la gente no se me despiste, donde no muestro una caja de comentarios, donde incluso he quitado el footer porque lo quiero minimalista al máximo para que la gente se centre en la compra, pues te puedes ir a una opción dentro de tus páginas en la parte derecha de la edición que se llama Plantillas y seleccionas la plantilla que tú tienes preparada para una landing page. Esto es un poco la idea. Y para esto claro, WordPress ya empezó a sacar bloques especiales. Un bloque donde se pueda mostrar el logo de tu web, un bloque donde se puedan mostrar los menús de navegación, que por cierto ahora se trabajan de forma diferente y lo explico también dentro del curso, un bloque donde se pueda mostrar automáticamente el título de tu web. Todo esto que faltaba antes, ahora sí nos permiten diseñar todo este tipo de páginas. Y esto me lleva al cuarto punto que es importante dentro de de la parte del editor de temas de WordPress, que es el diseño de partes de plantilla. ¿Que por qué hay plantillas por un lado y partes de plantilla por otro? Porque las partes de plantilla son secciones globales. Por ejemplo, esto lo vais a ver muy claro, la cabecera de la web, el header, el footer de la web. Estos son secciones que suelen aparecer en todas las páginas, en todos los contenidos de tu web y se llama template parts en inglés, a modo de desarrollo desde el punto de vista del código. En WordPress siempre se ha hecho así, hay zonas que son comunes a todas las páginas de tu web y en lugar de llamarlo plantilla se llaman partes de plantilla, porque yo puedo tener una plantilla para mis páginas, otra para las entradas, pero siempre van a recoger las partes de plantilla que salen en toda la web, como son por ejemplo, como digo, la cabecera donde está el menú de navegación, el logo y demás, y el footer donde están los típicos enlaces menos importantes de tu web. Entonces puedes también diseñar la estructura de estas zonas, las estructuras del header, de la cabecera, las la estructura del footer, del pie de página, incluso puedes crear personalizadas, podrías crear una llamada a la acción para que aparezca en todas tus páginas y la creas por ejemplo como parte de plantilla. Esto te permite que cuando tú estés diseñando una plantilla global, la puedas coger y decir pues aquí voy a mostrar mi CTA y de esa forma en todas tus páginas tendrás tu CTA. Es un poco la idea global. Vale, una vez definido todo esto, que sé que por audio puede ser un poco complejo, por eso te animo a a que veas el curso de WordPress básico, que es ya digo, 100% gratuito. Pues como digo, una vez cubierto esto, vamos a ver el futuro de la edición de temas de WordPress. Y el futuro es muy grande, hay muchas cosas, muchos detalles, pero me quería centrar en una parte interesante que creo que le puede venir a la gente. Ahora está habiendo un problema porque antes era muy fácil o relativamente fácil convertirte en desarrollador WordPress, porque PHP es relativamente sencillo de aprender y con las guías de WordPress era relativamente sencillo desarrollar un theme. Aunque fuese fácil, perdón, aunque fuese sencillo, sin mucha historia, de hecho tenéis un curso en el que os enseño a pasar una página de HTML a convertirla en un theme de WordPress, que no lo tengo apuntado pero a ver si me acuerdo y lo dejo en las notas del episodio. Bueno, en cualquier caso, como ahora va todo en base a los bloques de Gutenberg o va a empezar a ir en base a los bloques de Gutenberg y hay que saber JavaScript, pues se complica un poco la cosa y la barrera de entrada crece. Pero como contrapartida yo veo en el futuro una cosa muy positiva y es que yo creo que vamos a poder crear themes directamente desde el editor de temas de WordPress. ¿Por qué? Porque ahora vamos a poder diseñar todas estas partes estructurales, la cabecera, el footer, las plantillas de página, es decir, cómo va a ser la estructura de las páginas, de las entradas, de la página de blog y luego hay una funcionalidad que es exportar todas esas plantillas. Entonces en el momento en que nosotros podamos exportarlo todo junto, que aún no funciona esto bien, pero, pero en el momento en que podamos exportarlo todo junto e importarlo todo junto en otra web, vamos a tener un tema de WordPress, un thing. Podemos partir de uno hiper básico, de uno de los que vienen ya con WordPress o no lo sé, no he buscado, pero quizás ya exista uno que te sirva de punto de partida y que sea súper lean, que no tenga nada más que la base y lo vas a poder diseñar a tu gusto y aquí no necesitas saber código, de hecho hay soluciones ahora también que están saliendo. Genesis tiene un plugin de bloques que te permite crear bloques directamente desde la administración de WordPress. Bueno, es un mundo que se está abriendo. Entonces si por un lado yo creo que se cierran posibilidades para sobre todo desarrolladores, por otro creo que también se abren para gente que incluso ni sabía PHP. Y esto es algo por supuesto que conforme se vayan dando pasos pues hablaré de más de ello porque es interesante. Bueno, si os interesa ya sabéis que valoro mucho vuestro feedback, si estáis suscritos, por ejemplo, tenéis una pestaña de vuestra cuenta para sugerirme lo que queráis y si no, pues me mandáis un correo y me decís que os gusta el tema o que no, o aprovechad vuestra plataforma de podcast para dejarme un comentario ahí. Bueno, ya me decís qué os parece todo esto del editor de temas de WordPress, si os encaja, si no os encaja, si os parece difícil. Y por último pediros un pequeño favor y es que si os ha gustado el episodio, si creéis que le puede gustar a alguien, pues que lo podáis compartir en vuestras redes sociales o donde queráis. Si estáis en Apple Podcast, ayuda mucho a que os suscribáis al podcast y que dejéis una reseña si aún no lo habéis hecho. Si estáis en iVoox, pues lo mismo, que os suscribáis, un comentario y en general en cualquier plataforma de podcast que estéis, cualquier acción que podáis tomar, pues es bienvenida porque ayuda a que este podcast llegue a más gente y que sigamos ahí al pie del cañón por mucho más tiempo. Así que nada más por este episodio, nos seguimos escuchando. Adiós.