Guia: Crear plugins para wordpress

Al fin me decidí a hacer una serie de guias para aquellos que comienzan en el desarrollo en wordpress, el cual a pesar de ser un blog-engine se ha ido desarrollando tanto con los años, que hoy en día las posibilidades son casi ilimitadas.

Y una prueba de que las posibilidades son ilimitadas es el extenso API que pone a nuestra disposición toda la funcionalidad del core de wordpress.

Crear plugins en wordpress es extremadamente fácil y puede los resultados son excelentes. Para esta guía creare un plugin bastante sencillo que permitirá incluir javascript personalizado dentro de todos los posts y paginas dentro de wordpress.

Vamos a ello:

Paso 1
El primer paso para crear un plugin para wordpress tiene dos opciones: archivo o directorio? y decidimos entre estos, si nuestro plugin tendrá mas de un archivo pues directorio, y si nuestro plugin sera de un solo archivo pues basta con crear ese archivo php. En donde lo creamos? hechemos un vistazo a la estructura de archivos de wordpress:

Estructura de archivos wordpress

Estructura de archivos wordpress

Notamos que los plugins estan ubicados debajo del directorio wp-content/plugins, bastante obvio no? en wordpress todo es obvio ya veran. procedemos a crear nuestro plugin, y lo llamaremos jsIncluder.

A mi me gusta crear directorios poqeue se ve elegante y ordenado :3 pero ustedes pueden hacer lo que gusten.

Luego de crear ese directorio agregamos un archivo php dentro de el y lo nombramos como querramos pero lo importante es que incluya como primera cosa lo siguiente:

Cuando ustedes agregan este encabezado en el archivo wordpress automaticamente sabe (por arte de magia) que hacer con el, e incluye sin mas nuestro plugin en la lista:

Lista Plugins

Lista Plugins

 

Bueno si, pero es un plugin bastante inutil! aun tenemos que hacer que funcione, pero para ir viendo los resultados automaticamente damos click en “Activate” o “Activar” para que aparezca activo.

Entonces vamos a agregar un panel de configuración para nuestro plugin, con el siguiente codigo:

El resultado del código anterior es que aparecerá una opción de configuración en el menú “Settings” de nuestro panel de administración, primero utilizamos el “hook” nativo de WordPress “add action” le pasamos que queremos agregar una accion a admin_menu, y la funcion que lo maneja, en esta funcion le decimos que queremos una pagina de opciones que se define asi:

 

la parte de permisos requiere que el string sea exacto para poder determinar que permisos tiene que tener el usuario, hay una larga lista de combinaciones descritas a detalle aqui

Bien si han hecho todo correctamente deberá verse así:

wp_settings

 

Ahora bien, la funcion que colocamos al final y como ultimo parámetro de la función add_options_page, es la que actúa para “renderizar” la pagina de opciones del plugin, a la cual yo llame “Config.php”, en ella inlcuyo un formulario para guardar las opciones utilizando la función “add_option”, a continuación los contenidos de dicho archivo:

el resultado sera el siguiente:

includer

Muy bien! ahora para que nuestra nueva opción sea utilizable en cada pagina, debemos hacer uso de el hook “wp_head” en nuestro archivo jsIncluder.php

agregamos las siguientes lineas:

este hook habilita el código javascript dentro de los tags head de cada una de las paginas/posts de wordpress! muy útil cuando necesitas incluir algo y no quieres tocar el default del tema.

Como siempre les dejo por aquí la descarga del código completo

DESCARGAR EL PLUGIN JSINCLUDER PARA WORDPRESS

ahora bien hay dos cosas que pueden hacer con este archivo:

  1. Desempacarlo y analizar el codigo de un hilo para comprenderlo mejor
  2. Instalarlo y usarlo!

Como lo instalo?

Facil en su panel de administracion se van Plugins->Install new

add_new_plugin

 

En la parte superior seleccionan “Upload”

upload_new_plugin

 

Seleccionamos el archivo zip del plugin y hacemos click en “Install Now”, luego lo activamos y esta listo para usarse!

Espero que esto les sirva para aprender algo, cualquier pregunta no duden en comentar :3

Saludos!

Loading Comments…
more
Allowed HTML tags and attributes: <a href="" title=""> <blockquote> <code> <em> <strong>