En esta guía aprenderemos a crear un plugin personalizado para WordPress desde cero de forma sencilla y rápida.

Contenido de la guía:

• Parte 1: preparar del plugin, crear páginas de administración y crear etiquetas/shortcodes.
• Parte 2: crear funciones personalizadas en una página de administración y como usar el registro de WordPress.
• Parte 3: guardar datos usando el sistema de ajustes de WordPress.
• Parte 4: crear y eliminar tablas de datos en la instalación y desinstalación del plugin.

Descargar la plantilla

Primero descargamos el plugin-plantilla-librería: Backend Frontend Template: the WordPress Plugin Template, ya sea desde este enlace o desde GitHub. Este plugin es totalmente gratuito porque utiliza la licencia GPL-3.0 que nos permite hacer lo que queramos con el código, y gracias a esta plantilla tendremos nuestro plugin listo mucho antes que si seguimos “el camino difícil”

Descomprimimos el archivo ZIP (si no sabes como, puedes descargarte el programa Open Source 7-Zip) y copiamos la carpeta “backend-frontend-template” en “/wp-content/plugins”

Una vez hagamos esto ya tenemos un plugin totalmente funcional en nuestra instalación de WordPress

Tus páginas de administración

Una vez tenemos un plugin funcional, el siguiente paso será personalizar el menú de administración con las páginas que necesitemos.

Para ello vamos a backend-frontend-template/admin/class-your-plugin-admin.php y buscamos $this->admin_pages, ahí decidiremos cuál serán nuestras páginas (si no sabes qué programa usar para editar archivos PHP y HTML, puedes descargarte el programa Open Source Visual Studio Code), por ejemplo vamos a crear un par de páginas de administración:

$this->admin_pages = [
	"first_page" => [
		"menu_title" => $this->__("First page"),
		"page_title" => $this->__("This is my first admin page"),
		"file" => "your-plugin-admin-display-first-page.php",
	],
	"second_page" => [
		"menu_title" => $this->__("Second page"),
		"page_title" => $this->__("This is my second admin page"),
		"file" => "your-plugin-admin-display-second-page.php",
	],
];

Y lo siguiente siguiente será crear los archivos parciales HTML con la información que queremos mostrar, estos archivos se guardan en backend-frontend-template/admin/partials, aunque no será necesario crear un archivo desde cero, pues podemos clonar your-plugin-display-blank-page-with-title.php para tener un archivo ya listo para personalizar.

Por lo que clonamos los archivos, los renombramos a your-plugin-admin-display-first-page.php y your-plugin-admin-display-second-page.php (o los nombres que hayas designado en $this->admin_pages), y añadimos los textos necesarios para nuestras páginas de administración.

Tus etiquetas

Y por último necesitarás mostrar tus resultados a los usuarios que visitan la página, ya que normalmente queremos que un plugin actúe tanto en la parte de administración como en la parte de los usuarios que visitan la web, y para eso necesitaremos crear nuevas etiquetas/shortcodes, que son los trozos de código que se utilizan en los post y páginas de WordPress para invocar funciones de los plugins

Los shortcodes se especifican en backend-frontend-template/public/class-your-plugin-public.php en la función shortcodes_init_plugin(), sólo será necesario poner el nombre del shortcode y a qué función apunta.

Como nota adicional: un shortcode y la función pueden llamarse diferentes, además de que varios shortcodes pueden invocar a una misma función.

En este ejemplo crearemos el shortcode “my-first-shortcode-function” que llamará a la función “my_first_shortcode_function”.

add_shortcode("my-first-shortcode-function", array($this, "my_first_shortcode_function"));

Por lo que ahora crearemos la función “my_first_shorcode_function” en el mismo archivo, sabiendo que las funciones para shortcodes tienen tres parámetros de entrada:

• $atts[], array con los atributos que han detallado en la etiqueta.
• $content, el contenido que hay en medio en caso de que tenga etiqueta de apertura y de cierre.
• $tag, la etiqueta del shortcode, útil si varios shortcodes llaman a la misma función.

Con estos parámetros de entrada y los parciales HTML que decidas usar alojados en backend-frontend-template/public/partials, ya estás listo para programar tu shortcode y mostrarlo después con [my-first-shortcode-function]

public function my_first_shortcode_function ($atts = [], $content = null, $tag = '') {}

Aunque como puede resultar un poco lioso entender $atts[] y $content, lo mejor es ver un ejemplo en acción de [bft-shortcode-test], el shortcode de ejemplo preparado por defecto en Backend Frontend Template: the WordPress Plugin Template.

Aquí vemos tanto un ejemplo en el que se ha puesto la etiqueta bft-shortcode-test con el atributo $atts[“additional_text”] y además texto en medio de sus etiquetas que será el dato $content, como un ejemplo simple en el que sólo se invoca la etiqueta sin ningún parámetro adicional.

Sigue en la parte 2

Gracias a esta guía has ahorrado ya decenas de horas, pero te espera ahorrar cientos de horas de trabajo e investigación con las próximas entradas.

¡El viaje continúa en la parte 2 de la guía!