Cómo hacer una aplicación con WordPress Headless

Lo primero a aclarar sería saber qué es un WordPress Headless. Resumiendo, sería utilizar una instalación de WordPress como backend o como maestro de datos y contenidos. Es decir, un WordPress únicamente para contribuir contenidos, pero que no dispone por sí mismo de «parte pública», o mejor dicho, esta parte se deshabilita.

Por otro lado se construye una aplicación en el lenguaje o con la librería que tú quieras (JavaScript, Angular, Vue, React…) que consume los contenidos del WordPress Headless a través de su REST API.

¿Qué beneficios tiene un WordPress Headless?

Pueden ser muchos, entre los que se pueden encontrar:

• Mejorar el rendimiento de tu sitio, ya que podrías construir aplicaciones más rápidas, evitar consultas a BBDD, etc…
• Mejorar la seguridad, ya que la parte pública será más estática y puedes evitar ataques a tu backend o prevenir ataques por vulnerabilidades conocidas de plugins, temas o core desactualizados
• Centralización de contenidos. Podrías tener varias aplicaciones que consuman información desde un único origen de datos, lo que se conoce como máster de datos.
• Mayor flexibilidad y versatilidad en lo que el usuario ve. Puedes construir cualquier aplicación con la tecnología o framework que desees: Vue, Angular, React, Next.js, Ionic, SPA, PWA, IOs, Android…

¿Cómo lo hacemos?

Por un lado deberemos tener una instalación de WordPress al uso donde generaremos nuestra arquitectura de información: Custom Post Types, Taxonomías, Custom Fields, etc… Este WordPress deberá tener un dominio y dos características básicas:

• Deshabilitar la parte pública
• Tener habilitada la REST API, y generar incluso nuestros propios endpoints para devolver la info que consideremos para ser consumida por nuestra aplicación.

Para entenderlo mejor, veámoslo con un ejemplo. Por un lado tendremos nuestro WordPress Headless en un servidor al que accederemos a través de https://mywordpressheadless.com. Por otro lado tendremos nuestra aplicación alojada en otro sitio, a la que accederemos a través de https://myapp.com.

Para deshabilitar la parte pública de mywordpressheadless.com podemos crear un plugin o pegar en el functions.php de nuestro tema el siguiente snippet de código:

<?php

function wordpress_headless_mode() {
    if (is_user_logged_in()) {
        return;
    }

    if (defined( 'DOING_CRON' ) || defined( 'REST_REQUEST' ) || is_admin()) {
        return;
    }

    global $wp;
    $url = "https://myapp.com" . $wp->request;

    header('Location: ' . $url, true, 301);
		
    exit();
}
add_action( 'parse_request', 'wordpress_headless_mode', 100 );

Actuamos en todas las peticiones que nuestro WordPress Headless recibe a través del hook parse_request, y no hacemos nada para usuarios logueados, si se ejecuta un cron, si es una petición REST o si estamos en el administrador de WordPress. Para el resto de peticiones hacemos una redirección a nuestra aplicación.

De este modo, desde nuestra aplicación (myapp.com), podremos hacer peticiones a nuestros endpoints de mywordpressheadless.com y obtener la información que deseemos para mostrar en nuestra aplicación ajena a WordPress.

• « Cómo hacer tu sitio en…
• Cómo actualizar un plugin de… »