En este artículo veremos la manera de crear y diseñar una web de WordPress eficiente y realizar el diseño completo del sitio con Gutenberg.
Nos dimos cuenta de que desarrollar un sitio web de WordPress eficiente consiste básicamente en dos pasos. En el primero, se debe crear una web inicial 100% optimizada, independiente del proyecto. En el segundo, la personalizaríamos creando los contenidos y diseñándola mediante un tema.
Pero la pregunta que nos hicimos fue ¿y se puede hacer todo eso sin ser un desarrollador web ni saber HTML, CSS, PHP, javascript, etc? Hemos llegado a la conclusión de que, en la mayoría de los casos y en estos momentos, sí es posible con el nuevo editor de bloques y la función de edición (completa) del sitio. Al principio, esta función se denominó FSE (Full Site Editing) pero ahora simplemente se llama «edición del sitio». La edición del sitio solo es compatible con un tema de bloques. Consulta nuestro FAQ para revisar la diferencia entre un tema de bloques y un tema clásico.
Hoy en día, desarrollar y realizar el diseño completo de una web de WordPress se reduce a aprender el funcionamiento tanto del editor de bloques como de la función de edición del sitio.
Los 2 únicos pasos para desarrollar una web de WordPress eficiente
En el Método Blogpocket, también conocido como Método de la caja 😉 , solo necesitas dos pasos para crear y diseñar una web de WordPress eficiente: lograr una web inicial optimizada, independiente del proyecto, y «rellenarla» de diseño y contenido. A continuación, tienes los puntos de partida.
Web inicial
Primero aprendimos a crear una web de WordPress inicial eficiente e independiente del proyecto. Esto es como si tuvieses una caja vacía preparada para albergar cualquier tipo de diseño y contenidos (ver imagen inferior). Y sabemos hacerlo con el Método Blogpocket que es un conjunto de herramientas sólidas y un procedimiento consistente con el que obtenemos una web rápida y optimizada para móviles, segura, preparada para el SEO y adaptada al RGPD. Al fin y al cabo, es como conseguir un sitio web de WordPress.com con esteroides como punto de partida 😉 .
Diseño y contenido
Después, supimos que para personalizar el sitio web (contenidos y diseño), creado en el paso 1, solo teníamos que usar Gutenberg. En un tema clásico, podemos emplear los bloques nativos, las colecciones de bloques extras y algunas otras herramientas como el plugin Reusable Blocks Extended; para diseñar a nuestro gusto, no solo la home sino también cualquiera de las áreas de widgets disponibles en el theme. Probablemente en la actualidad, y en un tema clásico, exceptuando la cabecera, podamos diseñar el sitio completamente con Gutenberg (ver imagen inferior).
A raíz del lanzamiento de WordPress 5.9, la edición completa del sitio (FSE, por sus siglas en inglés) nos permitió editar todo el sitio incluida la cabecera, con la capacidad de personalizar plantillas y partes de plantilla (cabecera, pie, footer, etc.). Ahora esta función se llama simplemente «edición del sitio». Ya no es necesario, en este caso, hacer uso de plugins como Reusable Blocks Extended para llevar bloques a las áreas de widgets, porque en un tema de bloques no existen dichas áreas. La función del sitio (FSE) solo se activa, a partir de WordPress 5.9, activando un tema de bloques o instalando el plugin Gutenberg. Los temas clásicos siguen funcionando igual. Acude a nuestro FAQ para aclarar conceptos.
Una plataforma para poner en práctica la creación de una web de WordPress eficiente
A principios de 2020, pusimos en marcha la plataforma Lanzatu.blog con la idea de proporcionar a freelancers, emprendedoras y emprendedores; y bloggers, una herramienta pedagógica de creación y diseño completo de una web de WordPress con el Método Blogpocket y Gutenberg. El principal elemento fue el tema (de desarrollo propio) Blogpocket Nineteen (en dos versiones, Genesis Framework y para todos los públicos); un add-on completamente funcional para que desarrolles y diseñes desde cero y al gusto tu web de WordPress por ti mism@.
Blogpocket Nineteen nació como un tema basado en el Sample de Genesis. Requería el framework de Genesis y tenía sentido cuando todavía no se había avanzado casi nada en el mundo de bloques de Gutenberg y, sobre todo, en la idea de que -en realidad- una página web, en los temas clásicos, es un «folio en blanco» que se puede rellenar, sin código, con bloques del editor de WordPress. Lo maravilloso es que en los temas de bloques (a partir de WordPress 5.9) es mucho más fácil personalizar las páginas web, incluso desde cero. Por eso, Blogpocket Nineteen sigue disponible pero ahora es un add-on; es decir, un conjunto de funciones y plugins que pueden aplicarse a cualquier tema clásico.
¿Qué fue Lanzatu.blog?
Fue una plataforma pedagógica, pero plenamente funcional, basada en el add-on Blogpocket Nineteen, para que puedas probar el Método Blogpocket, con un tema clásico compatible con Gutenberg, incluyendo el diseño de la web desde cero y por ti mism@.
Descarga el add-on Blogpocket Nineteen y personalízalo a tu gusto con Gutenberg. Lee las instrucciones, la guía de configuración y el blog para más información sobre cómo diseñar una web, basada en un tema clásico, solo con Gutenberg.
Recursos útiles
¿Qué es Gutenberg? El editor de bloques Gutenberg aparece en la versión 5.0 WordPress (nov 18) y presenta una nueva manera de elaborar contenidos más intuitiva y sencilla.
Cómo configurar un theme de StudioPress con bloques de Gutenberg. Revolution Pro fue la primera apuesta de StudioPress (Genesis Framework) para tener un tema clásico de WordPress totalmente compatible con Gutenberg. Con este artículo, aprenderás el concepto de diseñar la home con Gutenberg, paso inicial y primordial para entender qué significa diseñar una web, basada en un tema clásico, solo con Gutenberg.
Ya no tienes que ser Antonio Cambronero para aprender Gutenberg. En este artículo se exponen las distintas piezas que, actualmente, nos permiten personalizar contenidos y el diseño completo de un sitio, basado en un tema clásico, con Gutenberg. Una de las herramientas fundamentales es el plugin Reusable Blocks Extended, con el que podemos llevar bloques reutilizables de Gutenberg a las distintas áreas de widgets que tenga preparada el tema.
Edición completa del sitio. En este curso te enseñamos el funcionamiento de la edición completa del sitio. Si tienes instalado un tema de bloques, entonces puedes acceder a esta función para personalizar todo el front-end fácilmente y sin código, incluyendo partes de plantilla (cabecera, menús, sidebar, etc.)
¿Qué diferencia hay entre el diseño de una web de WordPress en la era pre-Gutenberg respecto a la era post-Gutenberg?
Si hablamos de temas clásicos, básicamente en la era Pre-Gutenberg el diseño de la home, por ejemplo, estaba supeditada a las áreas de widgets preparadas en el theme y a los widgets disponibles para arrastrar a aquellas. Digamos que estaba prohibido diseñar la home a nuestro gusto.
En la era Post-Gutenberg, sin embargo, podemos diseñar la home a nuestro gusto, porque tenemos el mecanismo para llevar bloques reutilizables a determinadas áreas de widgets (sidebar, footers, etc.) y, por supuesto, usar Gutenberg en la propia área de contenidos central. Incluso, si el tema lo permite, probablemente exista un área de widgets asociado a la cabecera.
Todo esto, claro está, si nos limitamos a personalizaciones a nivel de usuario. Con código se puede hacer cualquier cosa, antes y ahora 😉
Lo que aporta la edición completa del sitio (FSE, por sus siglas en inglés) a todo ello es, a partir de WordPress 5.9, desentendernos totalmente de las áreas de widgets (que ya no existen) e incluso del personalizador (Apariencia > Personalizar), y tener la posibilidad de crear y diseñar desde cero y sin código -o modificando el tema de bloques original- todo el front-end del sitio. Eso aporta un facilidad extrema a los usuarios finales, administradores y creadores de contenido para ajustar los temas de bloques a su gusto y necesidades, sin recurrir a plugins constructores de terceros. De manera nativa, sencilla, flexible y potente, WordPress se convierte en un constructor de sitios web.
Conclusiones
El Método Blogpocket, para crear y diseñar -de manera eficiente y sin código, una web de WordPress, está orientado a usuarios finales, freelancers, emprendedoras y emprendedores, bloggers, que no pueden delegar la labor de desarrollo y diseño de su web a un tercero.
La idea es que, ahora mismo, el desarrollo y diseño de una web de WordPress solo requiere seguir el procedimiento del Método Blogpocket para implementar la web inicial independiente del proyecto, como primer paso; y aprender Gutenberg esencialmente (con un tema clásico -un poco restringido a la hora de diseñar con bloques dentro de las áreas de widgets pero resuelto con el uso de algunas herramientas como Reusable Blocks Extended- o con un tema de bloques -donde podemos usar libremente la edición completa del sitio para personalizar todo el front-end sin limitaciones-.
Por lo tanto, si asumimos que la primera parte es metódica y muy fácil de llevar a cabo; todo se reduce a aprender a sacarle el máximo provecho al editor de bloques de WordPress y, desde WordPress 5.9, a la edición completa del sitio.
Aprender Gutenberg es muy fácil y más si sigues las guías, videotutoriales y webinars de Blogpocket. ¿Necesitas ayuda? Por favor, contacta con nosotros.
Responder en Mastodon (requiere usuario en esa plataforma)
Puedes usar tu cuenta de Mastodon para responder a este post de acambronero
Copia y pega esta URL (https://www.blogpocket.com/?p=63699) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.
Comparte en Mastodon:
Y aún hay más…
Cómo se hace un sitio web
Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.
Recursos
La lista de recursos recomendada en Blogpocket.
Mi lista de plugins
La lista de plugins de WordPress recomendada en Blogpocket
Suscríbete a la newsletter
En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.
Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.
Deja una respuesta