Como ves, cuando me da por algo, me da. Soy consciente de que estos episodios del podcast no son precisamente lo mas aclamado por la audiencia. Sin embargo, siempre he pensado que es fundamental acercar la tecnología a todo el mundo. Muchas de estas tecnologías que estoy comentando en los últimos episodios del podcast, están muy enfocadas en un determinado sector, en concreto en IT. Sin embargo, la genialidad reside en la transversalidad. Me refiero al hacking, es decir, al echo de utilizar una herramienta para la que inicialmente no estaba pensada. Así, por ejemplo, esto de actualizar WordPress con Ansible, es algo que se sale de lo común. Simplemente, se trata de ver distintas herramientas, y en un momento concreto, algo te hace clic, y dices, esto lo podría utilizar yo…. El para que es cuestión tuya, lo importante es utilizarlo.

Actualizando WordPress con Ansible

Un poquito de trasfondo

El sitio que estás leyendo ahora mismo, me refiero a esta página web, a atareao.es, la puse en marcha hace ya como 13 años. Durante los primeros años, fui cambiando de CMS en CMS (Content Management System, o gestor de contenidos), Joomla, Drupal, hasta llegar a WordPress…. Incluso en un momento concreto llegué a platear la posibilidad de tener un sitio estático.

Ha sido con WordPress cuando este sitio llegó a su madurez, y esto es precisamente una a de las razones que me atan a este CMS.

En 2017, rediseñé el sitio, con el aspecto tal y como lo ves actualmente. Y durante todo este tiempo me he encontrado muy cómodo con el. Sin embargo, en estos años, como te puedes imaginar, han sucedido todo tipo de cosas, por supuesto relacionadas con el mundo WordPress, y todo lo que ello relaciona. En concreto con los temas de bloques.

Cuando vi las posibilidades que ofrecen los temas de bloques, en seguida me quise subir al carro, pero lo cierto es que no terminé de saber por donde subirme a ese carro.

Sobre los temas de bloques de WordPress

Los bloques son un elemento fundamental de la experiencia de edición de WordPress desde la versión 5.0. En lugar de depender exclusivamente del editor clásico, los bloques permiten a los usuarios crear contenido utilizando diferentes tipos de elementos modulares, llamados «bloques».

Algunos de los bloques más comunes en WordPress:

• Bloque de párrafo: Este es el bloque más común y básico en WordPress. Se utiliza para escribir texto.
• Bloque de imagen: Este bloque se utiliza para agregar imágenes al contenido. Puedes ajustar el tamaño y la alineación de la imagen, así como agregar texto alternativo y leyendas.
• Bloque de encabezado: Este bloque se utiliza para agregar encabezados y subtítulos al contenido.
• Bloque de lista: Este bloque se utiliza para crear listas ordenadas o no ordenadas.
• Bloque de cita: Este bloque se utiliza para agregar citas al contenido.
• Bloque de video: Este bloque se utiliza para agregar videos al contenido.
• Bloque de audio: Este bloque se utiliza para agregar audio al contenido.
• Bloque de formulario: Este bloque se utiliza para agregar formularios al contenido.
• Bloque de tabla: Este bloque se utiliza para agregar tablas al contenido.
• Bloque de código: Este bloque se utiliza para agregar código al contenido.

Hay muchos más bloques disponibles en WordPress, y también puedes crear tus propios bloques personalizados utilizando HTML, CSS y JavaScript.

Esto de los bloques no es lo único que se ha incorporado en WordPress, todavía hay mas novedades con las que exprimir al máximo este CMS. Una de estas nuevas características son los patrones en WordPress.

Los patrones en WordPress son una nueva característica introducida en la versión 5.8 que permite a los usuarios crear diseños de página complejos y visualmente atractivos con solo unos pocos clics. Básicamente, los patrones son un conjunto de bloques predefinidos que se agrupan para crear diseños específicos de página.

Al igual que los bloques, los patrones se pueden agregar al contenido de la página y personalizarse según sea necesario. Por ejemplo, un patrón podría incluir un encabezado, un bloque de imagen, un bloque de texto y un botón, todo con el mismo diseño y estilo.

La biblioteca de patrones de WordPress ya cuenta con una gran cantidad de diseños diferentes, incluyendo diseños para testimonios, horarios, productos y mucho más. Además, los desarrolladores también pueden crear sus propios patrones personalizados para adaptarse a sus necesidades específicas.

Los patrones pueden ser especialmente útiles para aquellos que no tienen experiencia en diseño web o que no quieren dedicar mucho tiempo a la creación de diseños personalizados. Simplemente puedes elegir un patrón que se ajuste a tus necesidades y personalizarlo según sea necesario para crear una página atractiva y efectiva.

Mi personalización de los bloques

En mi caso, llevo algún tiempo ya jugueteando con los bloques de WordPress. Llevo implementados cinco y espero, que la familia vaya creciendo poco a poco, porque me parece una solución perfecta para personalizar tu sitio web según tu consideres. Es un poco como la filosofía Linux en general. No te tienes que adaptar a lo que te ofrece un tercero, sino que tu eliges exactamente que es lo que quieres mostrar y como hacerlo. Te permite componer tu sitio web exactamente como tu quieres hacerlo, lo que me parece una auténtica maravilla.

Como te decía, hasta el momento he implementado cinco bloques, además de distintas temáticas. Así, tengo uno para mostrar los vídeos de YouTube. Si bien WordPres, ya trae uno por defecto, este permite que sea responsive o adaptativo. Me parece muy extraño que esto no lo hayan implementado, o quizá depende del tema que esté utilizando cada uno.

También he implementado uno para formulario, con un captcha un tanto especial, que me permite escapar de los tradicionales y hacerlo de una forma un tanto diferente.

Hacia donde quiero llevar mi tema de WordPress

Mi objetivo es simplificarlo al máximo, dejando en total cuatro patrones. Cuatro patrones realmente sencillos.

• El primero de los patrones es la página de inicio, que quiero que quede mas o menos como está pero modificando el mensaje y algunos detalles, como la llamada al acción.
• El siguiente de los patrones es uno de archivo, que me permite mostrar todos los elementos de archivo en formato de tarjetas cuadradas, con tres columnas y que las filas se carguen de forma dinámica. Esto sustituiría a los dos tipos de archivo que tengo actualmente, el que utilizo para los podcast y el que utilizo en general.
• Un patrón para los artículos en general.
• Y por último un patrón algo especial para los podcast, dado que estos siguen teniendo un formato diferente.

En este sentido, quiero simplificar la hoja de estilos que estoy utilizando, y por fin dar la posibilidad de seleccionar entre tema claro y tema oscuro. Una quimera que vengo persiguiendo desde hace años.

Sobre la forma de trabajo

Te preguntarás o no, como estoy desarrollando el tema?. Pues lo hago en vivo y en directo. Para esto, he levantado un WordPress en un VPS y allí voy desplegando las actualizaciones del tema.

Ciertamente podía haber levantado un WordPress local, pero es que me parece que tiene mucho mas glamour tenerlo en vivo y en directo.

Docker

Actualmente estoy utilizando Docker para estos trabajos, y por supuesto el plugin compose de Docker. El archivo docker-compose.yml que estoy utilizando actualmente para estos despliegues es el siguiente,

version: '3.7'

services:

  at_wordpress:
    image: wordpress
    container_name: atareao_wordpress
    restart: always
    init: true
    depends_on:
      - at_mariadb
      - at_redis
    environment:
      WORDPRESS_DB_HOST: at_mariadb
      WORDPRESS_DB_USER: ${DB_USER}
      WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}
      WORDPRESS_DB_NAME: ${DB_NAME}
    volumes:
      - wordpress_atareao:/var/www/html
      - ./plugins:/var/www/html/wp-content/plugins
      - ./themes:/var/www/html/wp-content/themes
      - ./uploads:/var/www/html/wp-content/uploads
      - ./wp-config.php:/var/www/html/wp-config.php
    networks:
      - internal

  at_mariadb:
    image: mariadb
    container_name: atareao_mariadb
    restart: always
    init: true
    environment:
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - db_atareao:/var/lib/mysql
    networks:
      - internal

  at_redis:
    image: redis:6
    container_name: atareao_redis
    restart: unless-stopped
    init: true
    depends_on:
      - at_mariadb
    volumes:
      - redis_atareao:/data
    networks:
      - internal

volumes:
  wordpress_atareao: {}
  db_atareao: {}
  redis_atareao: {}

networks:
  internal: {}

Junto con docker-compose.override.yml que me permite añadir las etiquetas correspondientes de Traefik, dado que estoy utilizando este proxy inverso para desplegar esta herramienta junto con otras. Así este archivo contiene lo siguiente,

version: "3.7"
services:
  at_wordpress:
    networks:
      - proxy
    labels:
      traefik.enable: true
      traefik.http.services.atareao_wordpress.loadbalancer.server.port: 80
      traefik.http.routers.atareao_wordpress-http.rule: Host(`${FQDN}`)
      traefik.http.routers.atareao_wordpress-http.entrypoints: http
      traefik.http.routers.atareao_wordpress.middlewares: atareao_wordpress-https-redirect
      traefik.http.middlewares.atareao_wordpress-https-redirect.redirectscheme.scheme: https
      traefik.http.routers.atareao_wordpress-https.rule: Host(`${FQDN}`)
      traefik.http.routers.atareao_wordpress-https.entrypoints: https
      traefik.http.routers.atareao_wordpress-https.tls: true
      traefik.http.routers.atareao_wordpress-https.tls.certresolver: myresolver

networks:
  proxy:
    external: true

Las herramientas

Para el desarrollo estoy utilizando, como no podía ser de otra manera Neovim, del que tanto te he hablado últimamente. Pero además estoy utilizando just y Ansible. Sobre Ansible te he hablado ya en otras ocasiones, y además tienes un tutorial en atareao.es. Y sobre just también.

just es una sencilla herramienta que te permite hacer sencillos scripts para realizar tareas cotidianas. Así, en mi caso, lo tengo en mi .justfile, es lo siguiente,

base-styles:
    #!/usr/bin/env bash
    cd sass/base/@wordpress/base-styles/
    wget https://github.com/WordPress/gutenberg/archive/refs/heads/trunk.zip
    while read -r filename; do unzip -o -j trunk.zip "$filename"; done < <(unzip -Z1 trunk.zip| grep base-styles | grep scss)
    rm -rf trunk.zip

compile-sass:
    grass ./sass/ponyfill.scss > ./assets/ponyfill.css

deploy:
    ansible-playbook -i co1, .playbook.yml

Como ves estoy utilizando básicamente tres scripts,

• base-styles para descargar los estilos de WordPress
• copile-sass que me permite compilar sass y scss css
• deploy que es el que se encarga de realizar el despliegue utilizando ansible.

Esto me simplifica mucho la tarea, porque no tengo que ir pensando en que herramientas tengo que utilizar en cada momento, ni que opciones y argumentos le tengo que pasar a cada una de estas herramientas.

En cuanto al compilador de scss, me refiero a grass, es una auténtica maravilla. Se trata de una herramienta implementada en Rust, que me permite ademas de realizar la compilación reducir el tamaño del css saliente.

¿Porque Ansible?

Llegados a este punto te estarás preguntando que porque estoy utilizando Ansible para el despliegue. Simplemente por comodidad. Actualmente, me he implementado un playbook, que me permite sincronizar los archivos entre mi local y el VPS de forma muy sencilla, y posteriormente confirmar los permisos. Así el playbook.yml que estoy utilizando tiene el siguiente aspecto,

---
- hosts: all
  gather_facts: false
  become: true
  tasks:
    - name: Copy
      synchronize:
        src: ./
        dest: /home/lorenzo/docker/webs/atareao.es/themes/atareao23/
        rsync_opts:
            - "--exclude=.git"
            - "--exclude=.justfile"
            - "--exclude=.playbook.yml"
            - "--delete"
    - name: Owner, Group and Permissions
      file:
        dest: /home/lorenzo/docker/webs/atareao.es/themes/atareao23/
        owner: www-data
        group: www-data
        recurse: true

De esta manera me evito lidiar con uno de los problemas que habitualmente mas dolores de cabeza, los permisos. Mas que nada, por algo que ya he comentado en otras ocasiones no utilizar el 777, que tantos problemas de seguridad pueden conllevar.

Conclusión

Pues con esto, ya te he contado todo lo que ando haciendo en referencia a la actualización de este sitio web. Que es lo que quiero conseguir y como estoy trabajando, herramientas y procedimientos. Espero que algo te sea de utilidad.

---

Espero que te haya gustado este nuevo episodio del podcast. Si puedes, te agradecería una valoración en iVoox y/o en Apple Podcast.