Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Introducción al Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada (MAPA MENTAL)

Share to social media

El Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada se basa en unas pocas herramientas eficaces y un procedimiento sencillo.

Está pensado para que cualquier usuario final, sin conocimientos técnicos especiales (desarrollo web, programación, diseño, etc.) pueda sin ayuda de terceros no solo instalar, configurar y optimizar WordPress,sino también crear el front-end de su sitio web.

Todo ello, simplemente utilizando la plataforma WordPress y sus funciones nativas (plugins y themes). Acerca de los themes diferenciaremos entre aquellos que están orientados a bloques y los que son absolutamente de bloques. Explicaré esta diferencia un poco más adelante.

Lo único que se debe aprender es la administración de WordPress y, dentro de ésta, el funcionamiento del editor de bloques y del editor del sitio. Sobre esto hay mucha información en Blogpocket, así que no hay problema.

En este artículo, encontrarás un mapa mental con el resumen del método y una descripción del proceso y las herramientas recomendadas.

Mapa mental del Método Blogpocket

MAPAS-MENTALES-METODO-BLOGPOCKET Introducción al Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada (MAPA MENTAL)
Mapa mental del Método Blogpocket

Como puedes observar en este mapa mental, hay 7 burbujas donde atacar el método. A continuación se desgrana una a una. Pero veamos antes la esencia del método y que yo denomino «crear un sitio web en dos pasos».

Al principio también usamos el siguiente modelo que hemos actualizado:

1-1024x576 Introducción al Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada (MAPA MENTAL)

Creando de manera eficiente y sin código un sitio web de WordPress optimizado

2-1024x576 Introducción al Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada (MAPA MENTAL)
Primer paso del Método Blogpocket

El primer paso consiste en crear un sitio web de WordPress inicial en uno de los hostings recomendados (un «top hosting») y optimizarlo a nivel de seguridad, rendimiento, SEO y legalidad.

Los hostings recomendados son dos principalmente: SiteGround y GreenGeeks. Quédate con la idea de que son servicios de alojamiento web que poseen una infraestructura hardware y software preparada para optimizar al máximo, sin que tú apenas hagas nada, el funcionamiento de sitios de WordPress a nivel de velocidad y seguridad.

Eso que puede parecerte muy complicado, es realmente muy sencillo.

Hablamos de sitio inicial porque primero crearemos una web de WordPress, básicamente con dos cosas:

  • Un tema de los predeterminados. Por ejemplo, el Twenty Twenty One (tema clásico) o el Twenty Twenty Three (tema de bloques). No nos preocuparemos en este momento de diseñar o personalizar el front-end. Llamamos front-end a las páginas que formarán el sitio web compelto, y su diseño y contenido. El sitio web es, en este punto, un sitio independiente del proyecto que va a albergar.
  • Un plugin de seguridad. Esto es importante desde el minuto cero. Te recomiendo Wordfence. Ya veremos en próximos artículos cómo configurar bien este plugin para garantizar la seguridad de tu sitio web. Si acaso, se puede proteger el sitio inicial con el plugin básico Loginizer y, después, a la hora de lanzar el sitio instalar, activar y configurar Wordfence.

La instalación de WordPress es muy fácil y apenas con un clic.

Optimizando en rendimiento y SEO el sitio inicial

Luego, optimizaremos en rendimiento (WPO, en inglés), SEO y legalidad el sitio inicial.

¿Qué ventaja tiene el ejecutar estos dos pasos en esa secuencia? Como hemos indicado el sitio inicial está vacío de diseño y contenidos. La configuración de los plugins para optimizar el rendimiento y el SEO on-page es realmente sencilla pero el resultado en optimización es espectacular. Enpocas palabras, solo hay que:

  • Configurar el plugin de optimización del rendimiento propio del hosting. Los hostings recomendados ofrecen un plugin para optimizar el sistema de almacenamiento en caché propio. En SiteGround es SG Optimizer y en GreenGeeks es LiteSpeed. Estos plugins no solo optimizan la caché sino que tienen otras funciones para mejorar la velocidad de carga de las páginas. Realmente, es muy sencillo configurar estos plugins y, en la mayoría de los casos, no es necesario instalar plugins de optimización del rendimiento adicionales.
  • Configurar el plugin de SEO. Aquí te recomiendo el plugin Yoast SEO que es casi plug&play. Tu sitio web queda preparado para el SEO on-page, además de tener en el editor un asistente de redacción SEO muy útil sobre todo para principiantes.

Con eso, el nivel de optimización del rendimiento será del 100% para la mayoría de los sitios web. Pero te recuerdo que estamos todavía en un sitio inicial. ¡Y esta es la gran ventaja del método! A partir de este momento, tendrás el control de la optimización porque con cada nuevo elemento que incorpores (función, elemento de diseño, etc.) podrás medir y analizar el impacto que supone. Con ello, podrás rectificar fácilmente para volver a tener un nivel de rendimiento óptimo o asumir la penalización, por la razón que sea.

Si fuese necesario, hay plugins para mejorar la optimización del rendimiento, sobre todo si el hosting no es uno de los recomendados. Pero, en SiteGround y GreenGeeks, en la mayoría de los casos, obtendrás buenos niveles si empleas buenas prácticas adicionales (optimización de imágenes, evitar el uso de recursos pesados irrelevantes, etc.)

Legalidad

La adaptación legal al RGPD y las leyes de servicios de Internet de Europa y otros lugares del planeta es obligatoria para evitar multas y, sobre todo, por reputación.

A nivel legal, es preciso principalmente:

  • Mostrar documentos legales.
  • Adaptar formularios de captación de datos privados, con checkbox para aceptación de la política de privacidad y primera capa informativa.
  • Control de cookies (bloqueo de las no necesarias y aviso para el consentimiento explícito del uso de cookies).

Los plugins recomendados son: Adapta RGPD (generación del Aviso legal y la Política de privacidad), Complianz Terms&Conditions (generación de los Términos y condiciones, si la web es una tienda online) y Complianz (generación de la Política de cookies y control de las mismas).

Creación del front-end

3-1024x576 Introducción al Método Blogpocket para crear, de manera eficiente y sin código, una web de WordPress optimizada (MAPA MENTAL)
Segundo paso del Método Blogpocket

El segundo paso es rellenar la «caja vacía» (optimizada en rendimiento, seguridad, SEO y legalidad) con bloques de Gutenberg. ¡Así de fácil!

El diseño del front-end se consigue personalizando el tema de bloques que hayas elegido pero lo normal es que no te conformes con el diseño que permite el predeterminado que hemos utilizado para crear el sitio inicial.

Hay muchas posibilidades, pero puedes centrarte en usar primero un tema clásico compatible con Gutenberg (por ejemplo, Blocksy o uno de Genesis). Un tema clásico es uno que permite el uso de bloques del editor de WordPress para la personalización de los contenidos (posts y páginas) y el diseño de las plantillas del front-end (home y otras que no se consideran de contenidos, tales como la de about, contacto, etc.) Pero en un tema clásico todavía no puedes personalizar directamente con bloques ciertas áreas del sitio web (básicamente, la cabecera y el footer general).

En los temas clásicos, compatibles con Gutenberg, puedes personalizar con bloques las áreas de widgets previstas (sidebar, footers, etc.), empleando el plugin Reusable Blocks Extended.

E, incluso, es posible aplicar estilos CSS a los bloques sin saber CSS, mediante el plugin Editor Plus.

Probablemente, quieras diseñar con bloques usando todo el ancho de la pantalla (por ejemplo en la home) y eso lo puedes hacer con el plugin Fullwidth Page Template.

Pero no podrás alcanzar con bloques ni la cabecera ni el footer general. Esto es una limitación importante que se resuelve con los temas de bloques (a partir de WordPress 5.9). La edición completa del sitio (FSE, en inglés) -ahora ya denominada simplemente función de edición del sitio- es una nueva función de WordPress que se lanzó en WordPress 5.9 y que permite editar y crear plantillas y partes de plantillas con bloques de Gutenberg. Se pueden diseñar la cabecera, el footer general, el sidebar y cualquier área directamente. Las áreas y el personalizador (Apariencia > Personalizar) desaparecen. Esto es un gran paso hacia la democratización del diseño y creación de sitios web, ya que solo usando el administrador de WordPress y bloques, cualquiera es capaz de personalizar el diseño del front-end de su sitio web.

Si a eso le unimos el Método Blogpocket, tenemos todas las piezas necesarias para crear de manera eficiente y sin código un sitio web de WordPress optimizado.

Un poco más de detalle acerca del método de los 2 pasos

Accede a Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos para obtener más detalles sobre el método de creación y diseño de un sitio web en dos pasos.

Genesis y Blocksy

¿Y cómo personalizamos completamente un sitio web basado en un tema clásico, compatible con Gutenberg, incluyendo tipografía, colores, etc.?

Hay dos recursos recomendados:

  • Genesis. Este es un sistema de temas de pago, aunque el núcleo y un tema básico (Genesis Sample) son gratuitos.
  • Blocksy. Un sistema de temas de pago y gratuito, preparado para personalizar todas las partes de un sitio web. Realmente fácil y muy eficaz.

Edición (completa) del sitio

Y para personalizar completamente un sitio web basado en un tema de bloques, incluyendo tipografía, colores, etc., simplemente hay que:

  • Activar un tema de bloques. Busca en el directorio de temas oficial filtrando por «Edición completa del sitio». Solamente activándolo, tendrás acceso a la función de edición del sitio para cambiar plantillas y partes de plantilla. No hay áreas de widgets ni personalizador pero puedes cambiar todo fácilmente con bloques nativos (recomendado para empezar) o bloques -o colecciones de bloques- incorporados mediante plugins. El tema por defecto Twenty-Twenty Three es un tema de bloques.
  • Estilos globales. La edición del sitio permite acceder a los estilos globales con los que puedes cambiar tipografía, colores y dimensiones fácilmente. Incluso puedes guardar y exportar los cambios para usarlos en un nuevo sitio, lo que es equivalente a un mecanismo fantástico para crear tu propio tema desde cero.

Accede a nuestro curso de Full Site Editing para aprender todos los detalles básicos del funcionamiento de la edición completa del sitio.

Web Premium

Durante algún tiempo nos gustó denominar Web Premium al sitio web obtenido mediante la aplicación del Método Blogpocket. El manifiesto y los detalles fueron publicados en la página Creando una Web Premium.

Conclusiones

Ahora tienes todos los ingredientes del Método Blogpocket para crear, de manera eficiente. y sin código, una web de WordPress optimizada.

Si 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=67637) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido