NO te pierdas las novedades de este repositorio de plugins

SumaPress Boilerplate: plugin base

Un plugin base bien organizado y sencillo para que puedas crear tus propios plugins para WordPress.

Permite integrar otros plugins dentro y es perfecto para usar como mu-plugin.

Boilerplate

Se trata de un plugin base con la estructura necesaria para empezar a crear tu propio plugin bien organizado, siguiendo buenas prácticas y con potencial para crear cualquier desarrollo con WordPress.

Gutenberg
Preparado para crear tus propios bloques para el nuevo editor de WordPress desde la versión 5.0 de diciembre de 2018 llamado Gutenberg. Se incluyen varios bloques de ejemplo y funciones preparadas para realizar varias configuraciones y así puedas usarlo como base de partida aunque con esto deja de ser tan propiamente un boilerplate. 🙂

Es un plugin base que permite integrar dentro otros plugins como el que ya trae (carpeta plugin-name), con sólo situar la carpeta de los plugins dentro del mismo.

IMPORTANTE: dentro de este plugin base hay una carpeta llamada plugin-name que es en si mismo un plugin base que puedes utilizar de modo independiente y separado como base para crear tu propio plugin, o que puedes dejar tal y como viene planteado e ir añadiendo otros plugins con solo copiar y pegar este ( cambiando el nombre de la carpeta así como del fichero principal ).

Este plugin base a modo boilerplate lo puedes usar como cualquier otro plugin o dentro de la carpeta mu-plugins. El único requisito para que funcionen correctamente los plugins que vayas integrando es que cada uno de ellos tenga la carpeta y el fichero principal dentro con el mismo nombre. Ejemplo: plugin-name/plugin-name.php

Los plugins dentro de este plugin base se pueden usar de modo independiente o integrandolos en este y sin tener que quitar las cabeceras del fichero principal como puedes ver en el plugin base de ejemplo.

Si los plugins que integres dentro de este plugin base tienen la misma estructura que el plugin de ejemplo base (carpeta plugin-name), con una carpeta setup donde se situen los ficheros a ejecutar para la activación y desactivación de cada plugin, estos se ejecutarán correctamente sin importar el modo de instalación y uso del plugin base:

  • En el caso de que instales este plugin base con otros plugins en su interior, pero lo uses como cualquier otro plugin, se ejecutarán todos los ficheros /setup/activation.php al activarlo, así como al desactivarlo los correspondientes /setup/deactivation.php
  • En el caso de que lo instales como mu-plugin los hooks de activación y desactivación no están disponibles ya que es un modo que no permite estas opciones. Para poder lanzar los citados ficheros de activación y desactivación hay disponibles 2 botones para ejecutarlo de modo manual. (ver imagen )

Este plugin base para WordPress es un buen punto de partida para crear tus propios plugins siguiendo una buena estructura de trabajo y buenas prácticas recomendadas.

Al igual que WordPress Plugin Boilerplate OOP + Gutenberg este Boilerplate utiliza un esquema de organización de archivos que te ayudará a separar las funcionalidades y el código para el back-end o zona de administración ( carpeta admin ) respecto de la parte visible de la web o front-end (carpeta public), así como el uso de librerias externas (carpeta includes) e incluso una parte diferenciada para crear bloques para Gutenberg (carpeta gutenberg).


Estructura de carpetas y ficheros del plugin base:

  • sumapress-boilerplate.php –> este es el fichero base que llama de modo auto al resto de carpetas (plugins) que se integren en su interior, de tal modo que se puedan añadir otros plugins fácilmente en un mismo plugin base. Solo es necesario que cambies la cabecera con el nombre, descripción, autor, etc con tus propios datos.
  • make –> fichero opcional que te permite desde la consola de comandos crear un zip del plugin con sólo ejecutar php make zip
  • /plugin-name –> carpeta con un plugin base en su interior que puedes usar de modo separado si lo sacas de este plugin base, o que puedes copiar/pegar para añadir más plugins dentro de este plugin base que los integra a todos.
  • Situa en su interior todas las carpetas a modo de plugins que quieras. Perfecto para integrar tus propios plugins y/o los plugins de este repositorio SumaPress de plugins “marca blanca” en un solo mu-plugin. ( No compatible ni recomendable añadir plugins oficiales subidos al respositorio WordPress.org ya que sufren actualizaciones )
  • Nota: los plugins internos tienen que tener igual el nombre de la carpeta como del fichero principal.
    Ejemplo: plugin-name/plugin-name.php

Estructura del plugin base interno en “plugin-name”:

Estructura propuesta similar a WordPress Plugin Boilerplate OOP + Gutenberg pero sin usar programación orientada a objetos, de tal modo que se puedan integrar las funciones de modo habitual en WordPress usando prefijos, pero separando el código en carpetas para una mejor estructura.

  • plugin-name.php –> este es el fichero base que llama de modo auto al resto de carpetas que se integran en su interior. Solo es necesario que cambies la cabecera con el nombre, descripción, autor, etc con tus propios datos en el caso de que uses este plugin de modo independiente, ya que en otro caso sólo se mostrarán en el admin de WordPress los datos situados en el fichero principal sumapress-boilerplate.php
  • make –> fichero opcional que te permite desde la consola de comandos crear un zip del plugin interno con sólo ejecutar php make zip (si te situas dentro de la carpeta de este plugin interno).
  • /gutenberg –> de modo opcional aquí situaremos todo lo relacionado con el nuevo editor de WordPress para poder crear bloques para Gutenberg. Simplemenmte borra la carpeta si no la vas a usar.
  • /core –> integra todas las llamadas para conectarnos con el core de WordPress mediante los hooks: acciones y filtros. Preparado ya para llamar a los assets: CSS & JS.
  • /admin –> para todas las funciones con destino el admin
  • /public –> para todas las funciones a presentar en la parte pública o visible de la web
  • /includes –> para situar todas las funcionalidades útiles tanto para el back-end como para el front-end, donde por ejemplo situar las funciones de ayuda y/o librerias externas
  • /setup –> para situar todas los valores configurables del plugin u otras funciones, y que se ejecutaran tanto al activar como al desactivar el plugin
  • /views –> para situar todas las vistas de utilidad para el plugin, de tal modo que sean ficheros con el mínimo de php y mayormente HTML
  • /assets –> con carpetas en su interior para los ficheros CSS y JS, los cuales ya están correctamente llamados desde la carpeta CORE. También puedes situar imágenes.
  • NOTA: puedes borrar las carpetas que no uses sin problema, salvo la carpeta setup recomendada mantener para situar los valores configurables.

Carpeta GUTENBERG:

La carpeta para trabajar con la creación de bloques para Gutenberg funciona de manera similar a https://github.com/ahmadawais/create-guten-block debido a que tiene sus dependencias en el package.json del plugin. Esto nos permite tener actualizaciones sin problemas de esta única dependencia cgb-scripts.

Puedes crear rápidamente nuevos bloques para Gutenberg basándote en los bloques de ejemplo proporcionados. Puedes copiar y pegar cada carpeta dentro de src que coincide cada una con un bloque:

  • Copiar desde –> plugin-name \ gutenberg \ src \ basic
  • Pegar como -> plugin-name \ gutenberg \ src \ nombre-bloque

IMPORTANTE: recuerda incluir las nuevas referencias a las nuevas subcarpetas en el archivo plugin-name \ gutenberg \ src \ blocks.js y manten el nombre del archivo JS principal de cada nuevo bloque como index.js para una referencia más fácil desde el citado archivo blocks.js

Esta carpeta de trabajo dentro del plugin está preparada para que directamente ya puedas trabajar en cada nuevo bloque para Gutenberg con las últimas herramientas de desarrollo web como Sass, React, JSX y ES6.

Para que todo el código se compile correctamente ( y con ello hagamos el código compatible con todos los navegadores aunque usemos código avanzado ) hacia la carpeta de distribución situada en plugin-name \ gutenberg \ dist es necesario tener en cuenta los siguientes pasos:

  1. Situa el terminal en la carpeta plugin-name \ gutenberg y ejecuta npm install
  2. npm-start para modo desarrollo: observa cualquier cambio cuando guardas un fichero, compila todo y te informa de cualquier error.
  3. npm run build para terminar el modo desarrollo y construir el codigo final para producción en la carpeta dist (la cual no debes tocar)

Todo el código compilado y comprimido que se situa dentro de la citada carpeta plugin-name \ gutenberg \ dist ya está todo bien llamado/encolado (enqueue) por este plugin base que estamos presentado aquí. Puedes comprobarlo si miras el código del fichero /plugin-name/gutenberg/gutenber.php


NOTA: En el interior del plugin encontrarás planteadas funciones anónimas, como por ejemplo las llamadas desde los hooks de WordPress como los “enqueues” dentro de la carpeta CORE. Esto permite no tener que plantear nombres de funciones con prefijos, de tal modo que el plugin base queda limpio, y sin llegar a requerir OOP para que sea más accesible a usar y modificar por todos. 🙂