Tarifa plana de servicios 煤nicos para profesionales WordPress

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. 馃檪

NO te pierdas las novedades en SumaPress

Contacto directo
1
驴Tienes dudas? 馃
Hola! 馃懄馃徎
驴tienes dudas? 驴No tienes claro si te ser谩 de utilidad lo que te ofrece SumaPress?
En ese caso no dudes en contactar para resolverlas :)
pd: no te pierdas el canal de Telegram https://t.me/sumapress
Powered by