Cómo hacer un plugin de WordPress #1

Este debe ser el tutorial numero mil sobre cómo hacer plugins de WordPress pero es el primero que publico, así que pongámonos serios y apliquémonos con un simple plugin de imágenes

La base de cualquier plugin

Para comenzar debemos saber que para hacer un plugin necesitamos sí o sí saber algo de PHP. No es necesario ser un gran programador para llegar a un buen producto, solo basta la idea, un poco de análisis y buscar harto en Google o Stackoverflow.

Cuando tenemos la idea y el análisis listo seguiremos con la estructura del plugin. Dicha estructura está compuesta por un nombre, un directorio, archivos php los archivos que hacen la magia del plugin y archivos de apoyo como css y javascripts.

Luego de la estructura viene la programación y para esto debemos entender que un plugin puede funcionar e intervenir WordPress de variadas formas:

  • Como Shortcode
  • Como Widget (para sidebars)
  • Siendo usado en una funcionalidad interna
  • Dentro de la administración
  • Dentro del sitio

Cada una de estas formas son complementarias y se deben programar de una manera distinta pues utilizan distintas funciones de WordPress.
Así que teniendo en cuenta lo anterior, haré el tutorial en varias partes para contemplar cada una de las formas en que un plugin puede ser concebido.

Plugin Shortcode

Para la primera parte del tutorial haré el ejemplo de un plugin que solo agrega un shortcode a nuestro WordPress.

La idea del plugin nace de mi amigo @equistene quien me dijo un día : "oye podrías hacer un plugin que muestre vistas previas desde algun sitio usando un shortcode". Así que acá estoy, explicando como se hace un shortcode.

Para comenzar bautizaremos al plugin como "aPlaceHolder" siguiendo mi ‘éstandar’ y la programación estará en el archivo "plugin.php".
Luego, en el directorio "wp-content/plugins/" crearemos el directorio "aplaceholder" sí, en minúsculas y dentro de él crearé el archivo del plugin.

Un plugin puede tener la estructura que queramos y estar bajo cualquier estándar, si queremos hacer algo de una forma y nos sentimos cómodos haciéndolo, debemos mantenerla, y así crear nuestro propio estándar.

En el archivo plugin.php haremos la magia de agregar el shortcode usando la función también llamado hook add_shortcode y más adelante le agregaremos una configuración por administración así como también un botón en el editor.

Plugin.php

Lo primero que debemos aprender es que WordPress utiliza los llamados "Hooks", que son espacios que WordPress habilita globalmente para que puedas engancharte y ejecutar tu código. El hook que usaremos es "add_shortcode", el cual se engancha del inicio del sitio para dejarlo disponible en nuestra interfaz.

En nuestro caso, la idea es crear un shortcode que se llame "[aplaceholder]" y que muestre una imagen. Esta imagen se obtiene del sitio "Placeholdit" el cual entrega imágenes grises con texto. Como veran, esta imagen se puede configurar como nos guste, y es por eso que nuestro shortcode deberá soportar atributos de este modo "[aplaceholder width=200 height=100]" para poder entregar una imagen configurada.

El código debe considerar, entonces, una función que entregue el placeholder, para esto crearemos una función llamada "aPlaceHolder" que reciba como parámetros los atributos entregados.

<?php
/**
 * Plugin Name: aPlaceHolder
 * Plugin URI: http://alvaroveliz.cl
 * Description: Alvaro's Placeholder
 * Version: 1.0
 * Author: Alvaro Véliz
 * Author URI: http://alvaroveliz.cl
 * License: MIT
 */
 function aPlaceHolder($attributes)
 {
    $size = $attributes['width'].'x'.$attributes['height'];
    echo '<img src="http://placehold.it/'.$size.'" />';
 }

Como veran, el código lo único que hace es imprimir usando la función echo de PHP una imagen utilizando los atributos que vienen en el parámetro $attributes. Los atributos vienen en un arreglo (array) y tienen el mismo nombre que ustedes le ponen como atributo en el shortcode.

Tengan en cuenta que este código es la interpretación del shortcode, es decir, se debe utilizar dentro de un post o página para verlo funcionar.

¡Ah! ¡Otra cosa! Consideren también los comentarios desde la línea 2 hasta la 10 son necesarios para que el plugin sea reconocido por WordPress, esto lo pueden leer con mayor detalle en esta página de codex.

Luego de esto, agregaremos el shortcode al WordPress usando el hook, en la línea 17, después de la función.

add_shortcode('aplaceholder', 'aPlaceHolder');

Guardamos nuestro archivo y vamos a la sección de plugins, donde activaremos el plugin

Finalmente, podremos usarlo en el editor y verlo en acción

¡Y eso es todo! Espero que les haya gustado la primera parte, en la siguiente parte agregaremos la configuración en administración para usar otros sitios de placeholders y alguna que otra configuración por defecto.

Si quieren bajar la primera versión del plugin, pueden hacerlo aquí

Blog, Tutorial, Tutorial PHP
3 minutos
  • Amanda Pinto Perez

    Buenas, he seguido tus indicaciones pero WordPress no me reconoce el plugin. ¿Por qué?

    • alvaroveliz

      Hola, Amanda. Gracias por comentar.
      Me puedes contar ¿En qué directorio creaste el plugin?

  • Alejandro Godoy Jerez

    Excelente mi pana. muy util.