Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Cómo he construido, con la Edición completa del sitio de WordPress, la versión 2022 de iPock

COMO-HE-HECHO-IPOCK-1024x576 Cómo he construido, con la Edición completa del sitio de WordPress, la versión 2022 de iPock

En esta guía se repasan los pasos realizados para crear la versión 2022 de iPock con la Edición completa del sitio de WordPress. iPock fue un blog grupal iniciado en mayo de 2006 dentro del mítico anillo Minoic.net.

Para conmemorar el 21º aniversario de Blogpocket, he querido recrear aquel proyecto con el fin de experimentar con la Edición completa del sitio que tenemos en el core de WordPress desde la versión 5.9.

Por lo tanto, para la construcción del front-end de iPock 2022 solo se ha utilizado el editor de bloques y la función de Edición del sitio de WordPress. Queremos que este tutorial sirva a todos aquellos, que se atrevan con la Edición completa del sitio, para ejercitarse en la personalización de un tema de bloques.

El iPock de 2006 todavía se puede consultar en la Wayback Machine. Excepto los vídeos incrustados, se pueden leer los textos y los comentarios que dejaron los visitantes.

Pasos para crear iPock 2022 con la Edición completa del sitio de WordPress

Pasemos, sin más dilación, a ver cómo se ha creado la versión 2022 de iPock con la Edición completa del sitio de WordPress.

1. Alojamiento del sitio

Lo primero fue decidir dónde se alojaría el sitio web. Como no queríamos utilizar un dominio dedicado, y nos pareció acertado emplear el dominio blogpocket.com, se decidió alojarlo en un subdominio de éste: ipock.blogpocket.com.

Por lo tanto, nos beneficiaríamos de las ventajas de un hosting de élite como SiteGround.

Eso implica tener garantizada la seguridad y el rendimiento a nivel de servidor. Por lo que, en principio, no es necesario instalar un plugin de optimización del rendimiento. La razón es que en SiteGround se utiliza un servicio de almacenamiento en caché, denominado Super Cacher. La configuración es de alto nivel, mediante el plugin SG Optimizer. Abundaremos en este sentido un poco más adelante.

En la siguiente imagen se observa el alto nivel de optimización resultante (medido con GTmetrix).

Latest_Performance_Report_for__https___ipock_blogpocket_com____GTmetrix-1024x549 Cómo he construido, con la Edición completa del sitio de WordPress, la versión 2022 de iPock

Para más información sobre el alojamiento de un sitio web en SiteGround consulta esta página: SiteGround: el mejor Hosting para WordPress y qué hacer después de abrir una cuenta. SiteGround ahora ya no emplea cPanel por lo que puedes revisar la siguiente guía para ver las diferencias entre Site Tools y cPanel: El nuevo área de clientes y Site Tools de SiteGround (comparación con cPanel). Si quieres hacerlo en cPanel pero en otro hosting (también de élite), puedes revisar nuestro curso de GreenGeeks.

Antes de instalar WordPress, debemos crear el subdominio. Para hacer esto en SiteGround sigue este vídeo: Cómo crear un website en Site Tools de SiteGround.

2. Instalación de WordPress

Previamente a la instalación de WordPress, debemos habilitar el protocolo https creando el correspondiente certificado SSL. Un SSL de tipo Let’s Encrypt es gratuito en SiteGround y puedes seguir el siguiente vídeo para ver cómo se crea y activa: Cómo crear un certificado SSL en Site Tools de SiteGround.

Revisa este vídeo para instalar WordPress en SiteGround (Site Tools): Cómo instalar WordPress en Site Tools de SiteGround.

La web que acabas de instalar es lo que denominamos en Blogpocket una «web inicial». Está vacía de contenido y su front-end, basado en uno de los temas predeterminados de WordPress, no ha sido personalizado. Es independiente del proyecto al que va a estar dedicada y debe arrojar un resultado óptimo en GTmetrix.

En la lista de plugins, solo debes ver el de seguridad de SiteGround y el optimización del rendimiento.

Para comprender todas las posibilidades del administrador de WordPress, entra en nuestro Manual de WordPress.

3. Implementar las medidas de seguridad

Antes de configurar el plugin de rendimiento SG Optimizer, e inmediatamente después de instalar WordPress, debes implementar las medidas de seguridad.

Este vídeo pertenece al Curso de WordPress para impacientes y en él se explica el método para asegurar un sitio web de WordPress.

Básicamente, se trata de:

  • Instalar y configurar el plugin Wordfence. Si por cualquier razón existe algún plugin de seguridad instalado de antemano, desactívalo y bórralo.
  • Habilitar el firewall extendido de Wordfence. Esto es obligatorio para terminar de reforzar la seguridad en tu sitio web de WordPress.
  • Instalar y configurar el plugin Akismet. Este plugin combate el spam en los comentarios del blog.

En este tutorial encontrarás más detalles: Seguridad en WordPress: cómo proteger tu sitio web de los piratas informáticos.

4. Instalar un tema de bloques y personalizarlo

screencapture-ipock-blogpocket-2022-01-21-19_35_32-626x1024 Cómo he construido, con la Edición completa del sitio de WordPress, la versión 2022 de iPock

Para experimentar con la Edición completa del sitio en iPock instalamos el plugin Gutenberg. Esto permite tener todas las funciones incluso las que todavía no están en el core.

Además, se necesita instalar y activar un tema de bloques. En el directorio oficial, accesible desde la sección de temas del administrador de WordPress, nos gustó el tema Bai.

Para personalizarlo, empleamos la función de Edición del sitio, modificando y adaptando a nuestro gusto las plantillas y partes de plantilla.

Te recomiendo, nuestro curso en vídeos de Full Site Editing para aprender a personalizar un tema de bloques.

Básicamente, tocamos la cabecera para añadirle el logo y personalizar el menú. También se modificó el footer. En las plantillas de la página de inicio, la del blog y las entradas individuales apenas se alteró nada.

Para entender las distintas maneras que hay de personalizar el front-end de un sitio web, tras la incorporación de la Edición completa del sitio (FSE), puedes repasar la siguiente página: Temas de WordPress: cómo personalizar el front-end de un sitio web.

5. Optimización del rendimiento

En Blogpocket, consideramos -junto con la seguridad- esta característica esencial a la hora de construir un sitio web. Para ello, damos un enorme valor al hosting que debe ser de élite para garantizarnos la gran parte del trabajo en esos aspectos.

De esa manera, y si hablamos de SiteGround (o de GreenGeeks) -y otros muchos servicios de alojamiento web- nos limitaremos a configurar el plugin asociado al sistema de almacenamiento en caché empleado en el servidor. No será necesario, en la mayoría de los casos, la instalación y configuración de un plugin de optimización del rendmiento adicional.

En la siguiente guía encontrarás el vídeo para aprender a configurar adecuadamente el plugin SG Optimizer (y también el vídeo para hacerlo en GreenGeeks): WPO en un hosting de élite: cómo optimizar un sitio web de WordPress.

En cuanto a buenas prácticas para conservar el alto nivel de rendimiento obtenido con la web inicial, están las siguientes:

  • Subir imágenes optimizadas. Aunque WordPress y el plugin SG Optimizer posee la opción para optimizar imágenes, es una buena idea emplear archivos de poco peso y dimensiones adecuadas, para que no haya que redimensionarlas.
  • Prescindir de recursos externos. Cuando sea posible, hay que procurar prescindir de elementos para cuyo funcionamiento se requiera llamadas a recursos externos (CSS, JS, etc.). Esto incluye también vídeos, widgets, etc.

En la construcción de iPock nos dimos cuenta de que el tamaño de la imagen de cabecera en el tema Bai, penaliza el rendimiento al empeorar una de las core web vitals. Por ello, nos vimos obligados a reducir dicho tamaño. A veces, es preciso realizar este tipo de cambios para lograr el objetivo deseado.

También, es posible que una configuración en SG Optimizer (o el plugin que se esté utilizando para optimizar el rendimiento) -y esto lo subrayaremos en el apartado siguiente- provoque un error al interpretar la página web. Por ejemplo, eso nos pasó construyendo iPock: la combinación de archivos JS arrojaba un error interno -solo detectable al entrar en la consola de javascript- que impedía el correcto funcionamiento del plugin Complianz.

6. Legalidad

Por último, trataremos un aspecto importante y que tiene que ver con el cumplimiento del RGPD.

iPock requiere una funcionalidad fundamental: la incrustación de listas de reproducción de Spotify y de vídeos de YouTube. Sin embargo, eso precisa carga de cookies no necesarias y, en consecuencia, hay que bloquearlas antes de que el usuario exprese su consentimiento explícito.

Existen muchas maneras de bloquear cookies. Pero en Blogpocket te recomendamos el método más sencillo a través del plugin Complianz. Solo requiere contestar las preguntas de un asistente de configuración y el plugin hace el trabajo por ti.

Complianz también genera el documento «Política de cookies», muestra el banner para el consentimiento, y establece un mecanismo para revocar el consentimiento o aprobarlo.

Si accedes a iPock la primera vez, verás el banner de consentimiento y si haces clic en «Ver preferencias», observarás la posibilidad de aceptar las cookies de marketing que son las Spotify y YouTube. No hemos implementado sistema de estadísticas por lo que solo hay cookies necesarias y de marketing. Si no apruebas la descarga de cookies de marketing, las listas de Spotify y los vídeos de Yotube aparecerán con un aviso para que se consientan las cookies. Y hasta que no hagas clic en ese mensaje, o en el banner de consentimiento, no funcionarán.

Complianz hace muy fácil la adaptación legal (RGPD) respecto a las cookies.

Para la generación de los documentos «Aviso legal» y «Política de privacidad» hemos utilizado el plugin Adapta RGPD. Este plugin también muestra la primera capa informativa, exigida por el RGPD, en los comentarios.

Revisa la siguiente lección del curso para impacientes de WordPress para aprender a configurar tanto el plugin Adapta RGPD como el plugin Complianz: Cómo aumentar las visitas a tu web y conseguir clientes potenciales.

Conclusiones

Hemos construido el sitio web iPock en poco tiempo y sin código, personalizando el front-end utilizando solo bloques y la Edición completa del sitio, a partir del tema de bloques Bai.

Dedicamos también poco tiempo a optimizar el rendimiento y la seguridad, mediante la configuración, exclusiva y respectivamente, del plugin SG Optimizer y de los plugins Wordfence y Akismet.

Finalmente, controlamos las cookies de Spotify y YouTube, para que no se carguen de antemano, y hasta que el usuario dé su consentimiento, mediante una solución autogestionada, basada en el plugin Complianz. Para generar los documentos y mostrar la primera capa informativa en los comentarios, se utilizó el plugin Adapta RGPD.

iPock es solo un ejemplo de un sitio web de WordPress optimizado, creado de manera eficiente, sin código y empleando solo Gutenberg.

Dame feedback, por favor.

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