El potencial de WordPress – Embebiendo una aplicación web – Parte 1

WordPress, sin lugar a dudas, revolucionó la forma en la que creamos y gestionamos sitios web. Una de las razones principales por las que WordPress es tan popular es su versatilidad y extensibilidad. Existen más de 50.000 Plugins a los que se puede acceder de forma totalmente gratuita pero, ¿alguna vez has intentado buscar un plugin concreto y no lo has podido encontrar? ¿Has pensado en crearlo tú mismo? ¿Has querido solucionarlo utilizando una aplicación web pero no sabes cómo? ¡Aquí es donde entra en juego la magia de incrustar o embeber una aplicación web como un plugin de WordPress!

Actualmente, la colaboración entre diversas plataformas y la integración de funcionalidades externas son fundamentales para ofrecer una experiencia completa. En esta entrada exploraremos en profundidad cómo embeber una aplicación web en WordPress utilizando Plugins, abriendo así un mundo de posibilidades para expandir las capacidades de tu sitio web.

Introducción a WordPress Plugins

Los Plugins de WordPress son herramientas que permiten expandir y personalizar la funcionalidad de cualquier sitio web creado con WordPress. Ofrecen una diversidad de características adicionales, desde la integración de nuevas funcionalidades hasta la simplificación de tareas específicas. Los Plugins son piezas de código que pueden ser instaladas y activadas con un par de clics. Permiten transformar un sitio web básico en una plataforma altamente funcional y adaptada a las necesidades del usuario, sin requerir conocimientos profundos de programación.

Los Plugins pueden emplearse de diferentes maneras, como puede ser utilizando widgets. Otros, sin embargo, se usan automáticamente al activarlos en la pantalla de Plugins. Este es el caso de la seguridad del sitio, ya que no requiere otras acciones directas por parte del usuario. Históricamente, una de las formas más habituales de incluir un Plugin es a través de un “shortcode”, es decir, un fragmento de código que permite utilizarlo. Si el Plugin necesita recibir algún parámetro, es posible pasarle argumentos desde el shortcode. A continuación te mostramos un ejemplo, utilizando el shortcode Gallery:

[gallery ids="60,21,35"]

Si eres un entusiasta de la programación web y has decidido crear tu propio plugin utilizando como base una aplicación web, aquí te enseñaremos cómo llevarlo a cabo. Vamos a explicar cómo implementar un Plugin de WordPress. Para ello, crearemos una pequeña aplicación web que muestre un texto aleatorio cada vez que se renderice e incrustaremos la aplicación en el Plugin. Subiremos el Plugin a un sitio de WordPress, lo activaremos y lo usaremos en una página a través del shortcode.

Creación del proyecto

Vamos a nombrar nuestro proyecto como `WebappWpPlugin`, ya que será un Plugin con una Webapp embebida. Para la creación de la estructura del proyecto utilizaremos `npm` de la siguiente manera:

mkdir webappwpplugin
cd webappwpplugin
npm init --yes

Esto nos va a generar el `package.json` base de nuestro proyecto. A partir de aquí podemos utilizar el package manager que más nos guste, como `pnpm`, `yarn`, etc. Nosotros usaremos `pnpm`:

pnpm install

Para probar el Plugin debemos tener acceso a un sitio de WordPress como administrador.

Implementación de la aplicación web

La creación de la webapp la haremos con `vite`. Para ello, entraremos al root del proyecto y ejecutaremos el siguiente comando:

npm create vite@latest

Nos va a realizar una serie de preguntas, a las que contestaremos de la siguiente manera:

✔ Project name: … webapp
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Esto nos va a generar una carpeta `webapp` con el siguiente contenido:

webapp
|--- public
|    |    vite.svg
|
|--- src
|    |--- assets
|    |    |    react.svg
|    |
|    |    App.css
|    |    App.tsx
|    |    index.css
|    |    main.tsx
|    |    vite-env.d.ts
|
|    .eslintrc.cjs
|    .gitignore
|    index.html
|    package.json
|    README.md
|    tsconfig.json
|    tsconfig.node.json
|    vite.config.ts

Ahora podemos entrar en `webapp` e instalar las dependencias:

cd webapp
pnpm install

Para implementar la generación aleatoria de textos vamos a utilizar Advice Slip JSON API. La idea es mostrar un texto aleatorio cada vez que recargamos la página de WordPress.

Primero, añadimos React-Query:

pnpm add @tanstack/react-query

Además, modificamos el fichero `main.tsx` de la siguiente manera:

// Other imports
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Hecho esto, ya podremos acceder a la API para obtener los textos aleatorios. Para ello, vamos a modificar crear un fichero de hooks, por ejemplo, `src/hooks/api.hook.ts`:

import { useQuery } from "@tanstack/react-query";

const getRandomPhrase = async () => {
  const response = await fetch("https://api.adviceslip.com/advice");
  const randomPhrase = await response.json();
  return randomPhrase.slip.advice;
};

const useApi = () => {
  const { data: randomPhrase, isLoading } = useQuery({
    queryKey: ["randomPhrase"],
    queryFn: getRandomPhrase
  });

  return {
    randomPhrase,
    isLoading
  };
};

Por otro lado, para la interfaz de usuario utilizaremos Material UI. Esto nos permitirá tener acceso a componentes prediseñados sin necesidad de implementarlos nosotros. Para agregar Material UI, primero añadiremos las dependencias:

pnpm add @mui/material @emotion/react @emotion/styled

A continuación, modificaremos `App.tsx` para mostrar un texto:

import { Box, CircularProgress, Paper, Typography } from "@mui/material";

function App() {
  const isLoading = false;
  const randomPhrase = "";

  return (
    <Box sx={{ p: 2, w: "100%" }}>
      <Paper sx={{ p: 2, w: "100%", textAlign: "center" }}>
        <Typography variant="h2" gutterBottom>
          WP WebApp
        </Typography>
        <Typography variant="h4" gutterBottom>
          Here you will find a new sentence every time you get in.
        </Typography>
        {isLoading ? (
          <CircularProgress />
        ) : (
          <Typography variant="h4" color="textSecondary">
            {randomPhrase}
          </Typography>
        )}
      </Paper>
    </Box>
  );
}

export default App;

Por último, usaremos el hook de acceso a la API en `App.tsx`:

// Other imports
import { useApi } from "./hooks/api.hook.ts";

function App() {
  const { randomPhrase, isLoading } = useApi();

  // ...
}

Como extra, podemos mostrar la versión del plugin en la UI. ¡Cuidado! Queremos mostrar la versión del plugin en el fichero `package.json` más externo, no el fichero `package.json` de la webapp. Vamos a añadirla en `App.tsx` de la siguiente manera:

import { version } from "../../package.json";

function App() {
  // ...

  return (
    <Box sx={{ p: 2, w: "100%" }}>
      <Paper sx={{ p: 2, w: "100%", textAlign: "center" }}>
        // ...
        <Box sx={{
          mt: 5,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center"
        }}>
          <Typography variant="body1" color="textSecondary">
            Version - v{version}
          </Typography>
        </Box>
      </Paper>
    </Box>
  );
}

export default App;

Con esto ya tenemos todo lo relacionado con la aplicación que nos generará textos aleatorios. Para probarlo, basta con ejecutar el comando `pnpm dev` desde `webapp`, lo cual nos mostrará algo como esto:

En próximas entradas implementaremos el plugin de WordPress y embeberemos la aplicación que acabamos de implementar en un sitio WordPress de ejemplo.