Hoy veremos como programar un plugin para wordpress paso a paso, antes configuraremos nuestro ambiente de trabajo para poder tener una instalación de wordpress local y poder trabajar libremente, también veremos conceptos básicos del desarrollo de plugins para wordpress, después veremos paso a paso como programar un plugin para wordpress desde cero hasta tenerlo disponible para los usuarios de todo el mundo, al final del post veremos como actualizar nuestra versión del plugin para agregarle una nueva funcionalidad y el proceso que esto implica en wordpress.org. Espero que este tutorial te anime a programar plugins para este CMS y que sirva como base para echar a andar tu imaginación..

Configurando nuestro ambiente de desarrollo

Lo primero que haremos sera descargar un servidor apache para montar nuestro wordpress de forma local, también necesitaremos mysql para las bases de datos. Todo esto viene junto en el XAMPP así que nos lo descargamos e instalamos.

Una vez instalado abrimos el XAMPP Control Panel y nos aseguramos de tener corriendo los servicios apache y mysql.

Lo primero sera crearnos una base de datos para nuestra instalacion de wordpress, puedes hacerlo por linea de comandos asi:

mysql -u root -p

escribes tu contraseña

create database wp;

o mediante el phpmyadmin dando click sobre el boton admin junto a mysql en el XAMPP Control Pane -> luego en la pestaña Base de Datos -> Crear Base de Datos -> Escribes el nombre, por ejemplo wp.

Ahora el siguiente paso es descargarnos wordpress.

Dentro de C:\xampp\htdocs nos creamos una carpeta llamada wp. En esta carpeta descomprimimos nuestro wordpress para que nos queden aqui los archivos de wordpress (no la carpeta de wordpress).

Renombramos el archivo wp-config-sample.php para que se llame wp-config.php.

Ahora abrimos este archivo y cambiamos los parametros de conexion de nuestra base de datos.

/** The name of the database for WordPress */
define('DB_NAME', 'WP');

/** MySQL database username */
define('DB_USER', 'XXXXXX');

/** MySQL database password */
define('DB_PASSWORD', 'XXXXXX');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Donde XXXXXX es tu usuario o contraseña de tu mysql, WP es el nombre de mi base de datos que creamos en los pasos anteriores.

Ahora vamos a nuestro navegador web y escribimos:

http://localhost/wp/

Escribimos los datos de instalación de nuestro sitio de pruebas wordpress para finalizar, ahora podemos acceder a nuestro panel de administración de wordpress en http://localhost/wp/wp-admin y tenemos nuestra carpeta de plugins en C:\xampp\htdocs\wp\wp-content\plugins.

Activando WordPress Multisite

Podemos saltar al paso siguiente sin problemas pero si quieres poder administrar varios sitios de wordpress facilmente activaremos esta caracteristica.

Abrimos nuestro archivo wp-config.php en el directorio raiz de nuestro wordpress y agregamos lo siguiente.

/**
* For developers: WordPress debugging mode.
*
* Change this to true to enable the display of notices during development.
* It is strongly recommended that plugin and theme developers use WP_DEBUG
* in their development environments.
*/
define('WP_DEBUG', true);
define('WP_ALLOW_MULTISITE',true);

Cerramos sesion e iniciamos de nuevo.

Navegamos a Herramientas -> Configuracion de la red, que se acaba de agregar despues de nuestra edicion del archivo wp-config.php.

En nombre de la red escribimos «Mis Sitios WP» y damos click en Instalar.

Despues nos aparecera una ventana con instrucciones de lo que tenemos que hacer, en resumen deberemos editar nuestro archivo wp-config.php y nuestro .htaccess.

wp-config.php

define('WP_DEBUG', true);
define('WP_ALLOW_MULTISITE',true);

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'localhost');
define('PATH_CURRENT_SITE', '/wp/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

.htaccess

RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

Ahora tendremos multisite activado en nuestro wordpress local.

Basicos de programacion de plugins para wordpress

Plugin WordPress: Es un programa o conjunto de instrucciones/funciones en php que dan una caracteristica agregada a WordPress.

Acciones: Son llamadas cuando se ejecuta cierto evento en wordpress, por ejemplo cuando se publica un post, se cambia la base de datos, etc.

Filtros: Son Funciones que ponemos en el medio de proceso de wordpress, por ejemplo cuando se regresa el contenido de un post podemos agregar un filtro para nosotros capturar ese texto, modificarlo y luego regresarlo a su camino normal.

Nosotros vamos a desarrollar nuestro plugin directamente en nuestra carpeta de plugins en nuestra instalacion de wordpress local, dentro de esta carpeta debera ir otra carpeta con el nombre de nuestro plugin y dentro nuestros archivos de codigo fuente (php, css, js, etc..) que componen nuestro plugin.

Conforme avancemos en el proceso de programar un plugin para wordpress iremos viendo otros conceptos basicos, comencemos!

Creacion de un plugin para wordpress

Yo voy a desarrollar un plugin que simplemente agrege propiedades css a un texto dado, lo llamare Easy Highlight Text.

Creamos nuestro directorio de trabajo en C:\xampp\htdocs\wp\wp-content\plugins\easy-highlight-text\

Dentro de esta carpeta crearemos nuestro archivo php easy-highlight-text.php y por el momento lo llenaremos con esto:

<?php
/**
*
/**
Plugin Name: Easy Highlight Text
Plugin URI: https://jonathanmelgoza.com/wp/easy-highlight-text/
Description: This plugin allows you highlight any text, let you choose from 6 different types: success, error, tip, warning, simple and message. Just add the class "eht-success" and so on.. to any span tag and enjoy.
Author: Jonathan Melgoza
Version: 1.0
Author URI: https://jonathanmelgoza.com/
*/


?>

lo que significa este codigo comentado es información sobre nuestro plugin que sera mostrada a los usuarios de wordpress al momento de buscar este plugin, así que tomárselo en serio.

Para mas información sobre estas headers visita este enlace.

Después de escribir nuestra información vamos a analizar lo que queremos, queremos agregar un codigo css a cualquier texto que se desee asi que necesitamos agregar un archivo css al momento de que wordpress este cargando los estilos.

Haremos uso de una accion, escribiremos una funcion que se llamara cuando se ejecute la funcion wp_enqueue_scripts de wordpress.

Para registrar una accion se utiliza la funcion add_action(‘funcionWP’,’funcionPropia’);

quedaria algo asi,

function eht_add_css(){
wp_enqueue_style('easy-highlight-text', plugins_url() . '/easy-highlight-text/css/style.css');
}
add_action('wp_enqueue_scripts', 'eht_add_css');

Aqui simplemente escribimos una funcion llamada eht_add_css(), nota que agregamos las letras de nuestro plugin eht para evitar llamar funciones ya establecidas en wordpress, que lo que hace es agregar una hoja de estilos css llamada style.css que tenemos dentro de nuestra carpeta del plugin en un folder llamado css. El primer parametro indica un ID para nuestra llamada de hoja de estilo, el segundo parametro es solo la url de nuestro css (toma nota que la funcion plugins_url() trae la ruta de la carpeta plugins en nuestro wp ).

Finalmente llamamos a la funcion add_action con 2 parametros: el primero es la funcion de wordpress que va a desatar nuestra accion y el segundo parametro indica nuestra funcion que se llamara cuando esta accion occurra.

Dentro de nuestra carpeta del plugin creamos otra llamada css con un archivo style.css dentro que simplemente contiene,

.eht-success{
background-color:#5cb85c;
color:#fff;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #fff;
}

.eht-error{
background-color:#c9302c;
color:#fff;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #fff;
}

.eht-tip{
background-color:#FFFF99;
color:#404040;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #fff;
}

.eht-warning{
background-color:#ec971f;
color:#fff;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #fff;
}

.eht-simple{
background-color:#fff;
color:#404040;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #000;
}

.eht-message{
background-color:#31b0d5;
color:#fff;
font-size:80%;
font-style:italic;
padding:5px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #fff;
}

solo son diferentes clases con propiedades para resaltar el texto seleccionado.

Tambien necesitamos un archivo readme.txt que acompañe nuestro proyecto, aqui un ejemplo de lo que un archivo readme.txt debe tener.

Aqui te muestro el que utilice para nuestro plugin:

=== Easy Highlight Text ===
Contributors: jonathanmelgoza
Donate link: https://jonathanmelgoza.com/
Tags: 
Requires at least: 3.1
Tested up to: 4.1
Stable tag: 3.1
License: GPLv2 or later

This plugin allows you highlight any text, let you choose from 6 different types: success, error, tip, warning, simple and message.

== Description ==

This plugin allows you highlight any text, let you choose from 6 different types: success, error, tip, warning, simple and message. Just add the class "eht-success" and so on.. to any span tag and enjoy.

== Installation ==

This section describes how to install the plugin and get it working.

1. Activate the plugin through the 'Plugins' menu in WordPress
2. Add a span tag with the class you want from the list

for example:

<span class="eht-success">an important message</span>

list:
eht-success class.
eht-error class.
eht-tip class.
eht-warning class.
eht-simple class.
eht-message class.

and it's all.

Enjoy.

== Frequently Asked Questions ==

= Can i put the class in a div tag? =

Yes, you can do it.

== Screenshots ==

1. screenshoot-1.JPG

== Upgrade Notice ==

= 1.0 =
Primera version de Easy Highlight Text.

== Changelog ==

= 1.0 =
* First version of Easy Highlight Text
+ Added 6 classes to choose

puedes validar tus archivos readme.txt con esta herramienta de validacion.

Ahora nuestra carpeta del plugin easy-highlight-text contiene:

Archivo readme.txt
carpeta css con un style.css
Archivo principal del plugin easy-highlight-text.php

Agrega también una screenshot de tu plugin en acción ( que ya deberías poder probar en tu instalación de wordpress local ) dentro de esta carpeta raiz de tu plugin, llámalo screenshoot-1.jpg así como lo llamamos en nuestro archivo readme.txt en la sección de Screenshots.

Comprimamos esta carpeta de nuestro plugin en formato zip y dispongamos a subirlo a wordpress!

Tenemos que ir a wordpress.org y hacernos una cuenta.

Luegos vamos a la sección add your plugin para mandarlo a revisión, esperemos un par de horas dependiendo de la carga de trabajo que tengan.

Una vez validado nos mandaran a nuestro email un correo diciendonos que se autorizo el hosting de nuestro plugin en los servidores de wordpress así como la dirección del mismo, en mi caso fue:

http://plugins.svn.wordpress.org/easy-highlight-text/

Ahora desde nuestra consola de comandos en windows (Ctrl + R -> cmd) creamos una carpeta con el nombre de nuestro proyecto,

mkdir easy-highlight-text

luego bajamos el proyecto con subversion a la carpeta que recien creamos

svn co http://plugins.svn.wordpress.org/easy-highlight-text/ easy-highlight-text

Copiamos el contenido de nuestra carpeta de nuestro plugin y lo pegamos en el directorio trunk que se acaba de crear en easy-highlight-text.

Luego agregamos estos archivos al repositorio de svn con

svn add trunk/*

y subimos al servidor de wordpress nuestro plugin

svn ci -m "Primer version de mi plugin easy highlight text."

y comprobamos en nuestro navegador que los archivos se han subido a nuestro repositorio de wordpress.

Despues de esto nuestro plugin aun no esta disponible para los usuarios de wordpress, para que esto ocurra debemos etiquetar esta version como la version release, esto lo hacemos moviendola a la carpeta tags y etiquetandola con un numero de version asi,

easy-highlight-text/$ svn cp trunk tags/1.0

Con esto le decimos que copie todo el contenido de trunk a la carpeta 1.0 dentro de tags, asi nuestro plugin ahora estara disponible para todos los usuarios que lo deseen.

Nota: Si queremos establecer una imagen de banner para nuestra pagina de nuestro plugin así..

entonces tenemos que crear una imagen de 722×250 en formato png o jpg y subirla a nuestro repositorio en el directorio assets, deberemos llamarla banner-722×250.png.

Ahora nuestro plugin esta disponible en wordpress!

El usuario solo tiene que instalarlo y en su contenido podra utilizarlo escribiendo las distintas clases disponibles en el texto que quiere resaltar por ejemplo,

Un <span class="eht-success">mensaje importante</span> para ti.

daria como resultado,

Un mensaje importante para ti.

Pero .. el usuario tendria que meterse a la edicion html de su contenido lo cual puede ser molesto, que tal que mejoramos un poco este plugin..

Actualizar la version de nuestro plugin para wordpress

proximamente…

Como programar un plugin para wordpress

Clic para valorar esta información

[Total: 1 Promedio: 5]

Configurando nuestro ambiente de desarrollo

Basicos de programacion de plugins para wordpress

Creacion de un plugin para wordpress

Actualizar la version de nuestro plugin para wordpress

Como programar un plugin para wordpress

jonathan__melgoza