Método Blogpocket Curso Web: Lección 4

Crea tú mism@ tu web de WordPress profesional y optimizada

Lección 4

Cómo diseñar tu web a tu gusto fácilmente

Ahora, es el momento de elegir una plantilla (theme) en tu WordPress y personalizarla a tu gusto y necesidades. Recuerda que la instalación automática de WordPress te da en la mano un theme "por defecto" que, a la hora de escribir esta guía, es el denominado "Twenty Twenty". Esta parte la puedes complicar tanto como quieras pero en este curso nuestra misión es proporcionarte un procedimiento sencillo, al alcance de cualquiera y sin código, -aunque no posea conocimientos técnicos de desarrollo web- y con las herramientas más fáciles de usar.

Esta lección es, en realidad, un «juguete» made in Blogpocket. Te vamos a enseñar, como por arte de magia, a diseñar por ti mism@ tu web sin código, sin conocimientos de diseño ni de desarrollo web. No vas a utilizar ninguna herramienta externa: únicamente el editor de bloques Gutenberg de WordPress y un theme que hemos desarrollado pensando en ti.

• Gutenberg es el nombre que recibe el editor de WordPress, a partir de su versión 5.0. Se basa en el uso de bloques, una unidad de diseño que va desde estructuras simples como el encabezado, el párrafo, la imagen, etc. hasta composiciones más complejas que pueden consistir en agrupaciones de otros bloques. Gutenberg representa un gran salto hacia delante en WordPress porque facilita la creación de contenidos viéndolos tal y como van a visualizarse en un navegador; eliminando las distracciones y alejándonos de las restricciones de configuraciones técnicas y complicadas. Gutenberg es la única herramienta que vas a necesitar para diseñar el aspecto visual y funcional de tu web profesional creada por ti mism@.

Módulos de esta lección

Aprenderás, sobre todo, a utilizar Gutenberg para diseñar la home de tu web desde cero. En definitiva lo que se ve en esta lección es:

• Instala y configura un Theme de WordPress. Además, de aprende a cambiar el theme por defecto, qué es Genesis Framework como motor de themes, te enseñaremos cómo instalar y configurar el theme Blogpocket Nineteen. y cómo puedes utilizarlo para personalizar tú mism@ y darle forma a tu web.
• Aprende Gutenberg. El editor de bloques de Gutenberg es una gran herramienta que no solo sirve para editar y componer tus contenidos (posts y páginas) sino que también te servirá para diseñar y desarrollar la página de inicio (home) de tu web. En este apartado veremos qué es y cómo funciona el editor de bloques de Gutenberg, algo muy sencillo y potente a la vez.
• Usa el Kit de composición de Gutenberg Hub. Una vez elegido un theme compatible con Gutenberg (como nuestra plantilla Blogpocket Nineteen) y conociendo el funcionamiento de los bloques de Gutenberg estarás abierto a todo un mundo de posibilidades en cuanto al diseño de tus contenidos y al aspecto visual y funcional de tu web. En este apartado revisaremos Gutenberg Hub y su builder como recurso de diseño de tu web. Este recurso es, junto a unos pocos plugins adicionales, el complemento ideal para usar con cualquiera de las dos versiones del theme Blogpocket Nineteen (Genesis o para todos los públicos) y te permitirá diseñar la home de tu web desde cero y conseguir un aspecto PRO para tu web.

1. Instala y configura un Theme de WordPress

Tienes un WordPress instalado con un theme por defecto (el Twenty Twenty u otro), y un plugin llamado Wordfence como medida de seguridad principal.

Ahora lo que queremos es cambiar el theme por defecto y personalizarlo en funciones y aspecto visual. Probablemente habrás escuchado que para eso se requiere de alguien que sepa desarrollo web. Eso es verdad. Pero también es cierto que WordPress posee un recurso valioso y fácil de usar: se llama Gutenberg, su editor de bloques. De esa manera, tú mism@ vas a poder diseñar tu web, ahorrándote mucho dinero. Así que nuestro objetivo sería buscar un theme de nuestro agrado, que sea compatible con Gutenberg, o esté especialmente preparado para funcionar con él, y que nos permita incluir las funciones que requiere nuestra web.

Existen muchos themes, pero convendría buscar uno que cumpla algunos principios básicos y fundamentales:

• Bien codificado, seguro y preparado para el SEO.
• Fácil de personalizar mediante la opción del escritorio de WordPress "Apariencia > Personalizar".
• Que tenga soporte técnico y actualizaciones.

¿Qué es un theme en WordPress y nociones básicas de HTML y CSS?

Aunque no necesitas profundizar casi nada en los lenguajes HTML y CSS para construir una página web profesional con el Método Blogpocket; es conveniente que sepas qué es y cómo funciona un theme de WordPress.

Para aprender qué es un theme: Los themes de WordPress, qué son y cómo se gestionan

En la práctica, un theme de WordPress se compone de una serie de ficheros (escritos en lenguaje PHP). Dentro del conjunto de archivos de un theme hay uno que determina el aspecto visual de las páginas: style.css y que coloquialmente se denomina el CSS de la página.

• HTML es el lenguaje en el que están escritas las páginas web y que permite mostrar en un navegador un cierto contenido. El HTML describe el qué aparecerá en el navegador cuando tecleemos en la barra de navegación la dirección web de esa página.
• CSS es el lenguaje que describe cómo aparacerá en el navegador una página web: posición de los elementos, tamaños, colores, etc. El CSS va asociado a un archivo HTML, de manera que la misma página web se verá de dos maneras diferentes si sustituimos un archivos CSS por otro distinto.
• PHP es un lenguaje de programación que permite combinar instrucciones HTML con sentencias de dicho lenguaje para crear páginas web dinámicas; es decir, que se muestran en un navegado distinto contenido dependiendo de determinadas circunstancias. Un ejemplo típico es un blog en el que se van mostrando publicaciones en orden cronológico inverso (posts) a medida que se van escribiendo y editando.

WordPress posee un mecanismo dentro del escritorio, en "Apariencia > Personalizar > CSS Adicional" para realizar modificaciones al CSS sin necesidad de tocar el archivo style.css del theme. Un poco más adelante, veremos que los bloques de Gutenberg también poseen su propio CSS y que se puede alterar instalando un plugin.

Por lo general, puedes personalizar bloques de Gutenberg y los parámetros de un theme sin necesidad de alterar ningún CSS. Y por supuesto nunca tendrías que, ni se debería, tocar los archivos PHP.

Genesis Framework

En este vídeo tienes una introducción a este motor de themes de WordPress.

El Método Blogpocket también posee una herramienta que consideramos muy recomendable por esas razones. No es gratuita pero merece la pena dado el ahorro, sobre todo, que te va a suponer no delegar la tarea de diseño de tu web.

Esa herramienta es Genesis Framework, un sistema de plantillas de WordPress reconocida, que posee los principios elementales antes mencionados y a cuya introducción temática puedes acceder mediante el vídeo que precede estas líneas.

• Lo primero, busca un theme que te guste dentro del catálogo de StudioPress (todos pertenecen a Genesis Framework). También encontrarás themes de Genesis en AsiThemes.com.
• Instala y activa el theme que hayas elegido. Aquí tienes las instrucciones: Los themes de WordPress, qué son y cómo se gestionan.
• Configura el theme según tus necesidades funcionales: Los pasos generales están en Cómo configurar un theme de Framework Genesis para WordPress.
• Si el theme es compatible con Gutenberg, lee Cómo configurar un theme de StudioPress con bloques de Gutenberg.

Lo importante de la idea es que una vez que elijamos un theme solo vamos a modificarlo de acuerdo a lo que se contemple en su documentación. Hagamos las siguientes consideraciones:

• Tipografía y tamaño de fuentes: no se van a cambiar.
• Estructura de las páginas (posts y páginas): cabecera (header), contenido, columna lateral (sidebar) y footer: Se pueden eliminar, con ciertas restricciones, elementos con "Apariencia > Personalizar".
• Estructura de la página de inicio (home): en Genesis pre-Gutenberg, los cambios en la estructura (configuración de cada área) se realiza mediante widgets. En la era post-Gutenberg es posible partir de una página de inicio en blanco y tú mimos puedes diseñarla y componerla con bloques de Gutenberg. Algunos themes de Genesis compatibles con Gutenberg vienen con un asistente para que importes la estructura y el contenido de la demo y te sirva así de punto de partida.

• Un widget es un mecanismo que posee WordPress ("Apariencia > Widgets", dentro del escdritorio de WordPress) para añadir elementos nuevos a la estructura del theme. Por ejemplo, puedes añadir nuevas secciones en el sidebar o en las columnas del footer.

Sin embargo, esas limitaciones que nos hemos impuesto a la hora de personalizar un theme no son tales en absoluto. Todo estará más organizado y será más fácil obtener un diseño óptimo, en cuanto a la usabilidad, rendimiento y seguridad. Y Gutenberg nos permitirá diseñar la página de inicio a nuestro gusto. ¡Eso no se podía hacer en la era pre-Gutenberg!

Es posible que ahora te resulte todo algo confuso. Espero que no, pero seguro que con lo que viene a continuación, te van a encajar todas las piezas del puzzle.

Blogpocket Nineteen

Blogpocket Nineteen es un theme de Genesis Framework basado en Genesis Sample, el theme más sencillo y minimalista de StudioPress.

Lo desarrollamos con una idea muy básica: proporcionar un recurso de aprendizaje de Gutenberg. Pero, al estar basado en Genesis Sample te puede servir perfectamente para construir tu página web profesional. No hay fronteras.

También está disponible la versión no Genesis o para todos los público, denominada Blogpocket Sustie que también puedes descargar desde Lanzatu.blog.

Es por tanto una herramienta muy útil para este curso.

• Descarga Blogpocket Nineteen en Lanzatu.blog.
• Instala y activa Blogpocket Nineteen, según las instrucciones. Es todo muy sencillo.
• A partir de ahí, posees un "folio" en blanco para componer el diseño de la página de inicio de tu web con Gutenberg.

Volveremos a Blogpocket Nineteen pero ahora es el momento de pararnos, descansar y pasar luego a aprender Gutenberg.

2. Aprende Gutenberg

Abrimos este apartado con este webinar emitido en Noches de Blogging.

En Gutenberg de WordPress 5.0: qué es y cómo funciona el nuevo editor hallarás un manual de introducción a Gutenberg, incluyendo 3 vídeotutoriales.

Gutenberg evoluciona rápido, así que hemos elaborado un curso de Gutenberg básico con el siguiente contenido:

1. Introducción
2. Revisión de la interfaz
3. Bloques nativos
4. Bloques reutilizables
5. Colecciones de bloques

Accede también gratis al curso: Curso básico de Gutenberg

Te recomiendo también la lectura de Recursos y trucos de Gutenberg: 10 maneras de exprimirlo a fondo y las reflexiones de ¿Es Gutenberg un virus dentro de WordPress?.

¿Por qué le damos tanta importancia al aprendizaje de Gutenberg? Por favor, lee este artículo donde se explica el nuevo paradigma en la creación de webs de WordPress profesionales, sin código y eficientes.

Efectivamente, hoy es posible crear una web en tan solo dos pasos:

1. Creación de una web inicial eficiente y optimizada.
2. Relleno de la web (diseño y contenidos) con Gutenberg.

El siguiente post de Blogpocket se mantiene permanentemente actualizado con toda la información novedosa sobre Gutenberg: Tips, consejos y recursos para aprender Gutenberg.

Colecciones de bloques

Una vez que domines el funcionamiento de todos los bloques nativos, te recomiendo que pases a explorar algunas colecciones de bloques. Puedes hacerlo instalando los siguientes plugins y viendo sus posibilidades.

• Genesis Blocks. Esta es una apuesta de StudioPress. Antes Atomic Blocks. Mira aquí cómo migrar de Atomic Blocks a Genesis Blocks.
• Coblocks. La apuesta de Godaddy.
• Stackable. Una de las opciones más interesante por su versatilidad.
• La zanahoria. Vulgarmente, "La zanahoria".

3. Usa el Kit de composición de Gutenberg Hub

Y ahora que:

• Tienes una plantilla de WordPress de Genesis Framework, compatible con Gutenberg, y preparada con un "folio en blanco" para que diseñes la página de tu web. Se llama Blogpocket Nineteen y la has descargado desde Lanzatu.blog y la has configurado de acuerdo a estas instrucciones.
• Has aprendido Gutenberg, a componer contenidos de bloques y todas sus posibilidades, con los bloques nativos de WordPress y algunas colecciones de bloques extra.

Estamos en disposición de dar una vuelta de tuerca y, utilizando lo que sabes hasta este momento, más algunos datos que vienen a continuación, diseñar y componer la home de nuestra página web. Y lo harás tú sol@, sin ayuda de nadie. ¡Eso es maravilloso!

Gutenberg Hub es un recurso que permite componer tus contenidos basados en bloques de Gutenberg de manera plug&play! Sin saber ni una gota de HMTL ni CSS ;)

Lo que vamos a hacer ahora es combinar el theme Blogpocket Nineteen, Gutenberg y Gutenberg Hub como kit de desarrollo con el que podrás fácilmente y sin ayuda de nadie, construir la home de tu web. Copiar y pegar, sin saber nada de desarrollo web ¿no es fantástico?

Tenemos, pues, las siguientes piezas:

• El theme Blogpocket Nineteen por supuesto. Tanto si eres usuario de Genesis Framework como si no, se proporciona un folio en blanco para que puedas diseñar la home a tu gusto.
• La librería de plantillas. Un poco más adelante, se explica en detalle Cómo insertar plantillas de bloques de Gutenberg con la librería de Gutenberg Hub.
• La extensión de Chrome para gestionar la librería de Gutenberg Hub. Si ya era fácil trabajar con la librería de Gutenberg Hub, ahora lo es mucho más con la correspondiente extensión de Google Chrome.
• Builder de GutenbergHub. Y aquí la explicación: Introducing Gutenberg Template Builder.
• Editor Plus. Este plugin se requiere para que Gutenberg Hub sea totalmente funcional. Sirve para que puedas cambiar el aspecto y estilo de los bloques sin codificar CSS.
• Reusable Block Extended. Este plugin te permite reusar plantillas de bloques, añadirlas a las áreas de widgets y convertirlas en patrones de bloques. Estudia qué son los patrones de bloques en el anexo 2, al final de esta lección.
• Full width page templates. En algunas plantillas necesitarás ampliar el ancho a toda la pantalla.

Cómo insertar plantillas de bloques de Gutenberg con la librería de Gutenberg Hub

Gutenberg Hub posee una librería de plantillas de bloques de Gutenberg plug&play. Aunque, en realidad, para que te sea totalmente funcional, debes instalar el plugin Editor Plus.

Mira primero el siguiente vídeo.

ACCEDER AL VÍDEO

Para insertar una de las plantillas de Gutenberg Hub lo primero es seleccionar la plantilla en cuestión, dentro de su catálogo. Una vez con la página de la plantilla a la vista, haz clic en «Copy Code».

Una vez con el código en el portapapeles, pégalo en un bloque de párrafo vacio y lo tendrás listo. Con las opciones de configuración del plugin Editor Plus podrás modificar el aspecto y estilo de los bloques.

Con la librería de bloques de Gutenberg Hub, junto con el plugin Reusable Blocks Extended tienes ahora mismo el mejor Kit de composición de contenidos para Gutenberg que puedas imaginar.

Anexo 1: Kit para pequeños hacks en bloques de texto y Guía básica para personalizar el theme Blogpocket Nineteen

Finalizamos esta lección con un par de anexos. El primero compuesto de dos apartados muy interesantes. Con todo ello, lograrás los conocimientos necesarios para diseñar tu web de WordPress profesional, no-code y eficiente tú mism@.

Kit para pequeños hacks en bloques de texto

A continuación, un conjunto de herramientas (plugins de WordPress) que te van a resultar muy útiles a la hora de terminar de configurar a tu gusto los bloques de texto (encabezados, párrafos, botones, etc.).

Estos hacks te resolverán pequeños problemas de configuración si usas librerías de bloques.

• Blocks CSS: CSS Editor for Gutenberg Blocks. Este plugin añade la posibilidad de añadir CSS a cada bloque que tengas insertado en el editor. Con el «selector» se puede aplicar cualquier instrucción CSS al bloque en cuestión. En la imagen superior, se ha eliminado el subrayado de los enlaces de cada bloque de encabezado, en las 4 columnas, añadiendo el siguiente código en el apartado «Custom CSS»: selector a:link {text-decoration: none;}
• EditorsKit. Este plugin pertenece al kit de blogging de Blogpocket y permite añadir muchas funciones a nivel de formateado de textos. En la imagen que ilustra este apartado, se observa cómo hemos reducido el tamaño de la fuente del encabezado de la primera columna, empezando por la izquierda. Simplemente, se ha usado la nueva opción de configuración de texto que se incluye con EditorsKit. El fondo blanco de cada encabezado también se ha obtenido usando EditorsKit. Algunas de las opciones de este plugin ya están incluidas en el core de WordPress y en el plugin Editor Plus.

Guía básica para personalizar el theme Blogpocket Nineteen

Guía de instalación del theme Blogpocket Nineteen (incluye tips interesesantes sobre Gutenberg): página con 10 vídeotutoriales.

Anexo 2: Patrones de bloques y bloques reutilizables

Los patrones de bloques es una funcionalidad añadida a la versión 5.5 de WordPress.

Tú mismo puedes crear tus propios patrones de bloques para diseñar tu theme. La diferencia entre un patrón de bloques y un bloque reutilizable es muy sutil. Pero ella está en lo siguiente:

• Un bloque reutilizable está pensado para ahorrarte trabajo y está también orientado al trabajo colaborativo. Puedes insertar distintas instancias del mismo bloque reutilizable en diferentes entradas y páginas, e incluso exportarlo a otro sitio web. También importarlo, claro está. Si modificas un bloque reutilizable, editándolo, todas las instancias sufren la modificación.
• Un patrón de bloques es único, en el sentido de que no hay instancias del mismo. Si lo insertas en distintas páginas o posts y lo modificas en cualquiera de dichas páginas o posts, el resto no sufre la modificación.

Se pueden crear patrones de bloques, sin código, con el plugin Reusable Blocks Extended.

Mira este vídeo donde se explica qué son y cómo crear patrones de bloques sin código.

Conclusiones

Al finalizar la lección 4 de este curso, sabes:

• Elegir un theme compatible con Gutenberg del catálogo de StudioPress o AsiThemes.
• Asistirte de la documentación de cada theme de StudioPress para personalizarla. Si no está orientada a Gutenberg, hay que configurar las áreas de widgets que tenga preparada.
• Que si está orientada a Gutenberg, puedes usar el editor de bloques y el builder de Gutenberg Hub para componer la página de inicio desde cero.
• Que si quiero usar una plantilla totalmente operativa de Genesis Framework, preparada para usarse con Gutenberg desde el principio, tengo lista Blogpocket Nineteen como alternativa.

En la próxima lección pasamos a ver los mecanismos que existen para optimizar el rendimiento de tu web.