Como crear plugins o widgets para WordPress

Hoy vamos a hacer algo que no había tenido la necesidad de hacer hasta hoy, se trata de crear un widget para wordpress.

Los pasos para crear un plugin son los mismos, así que el proceso es aplicable.

Porque crear un widget? Yo edito el theme y listo…

Sí… editar el theme es simple y rápido pero tiene unas cuantas desventajas que los widget no presentan:

  1. Facilidad:
  2. Intenta explicarle a un cliente como instalar tu código editando un theme

  3. Flexibilidad:
  4. Cada vez que cambie de theme, o actualice el mismo, tengo que agregar el código. Sin embargo, si uso un widget, el código no se modifica.

  5. Movimiento (flexibilidad2):
  6. Puedo mover mi código a cualquier sidebar que yo quiera… en cualquier posicion con un simple drag&drop

  7. Profesionalidad:
  8. Si el trabajo es para un cliente, quedamos mucho mejor presentando un widget que se instala con 2 o 3 pasos que dando un documento de 20 lineas de como modificar un theme

Primeros archivos

Lo primero que vamos a hacer es crear nuestro archivo en la carpeta wp-content/plugins. Si nos fuese necesario podemos crear una carpeta y dentro el archivo.

En mi caso se llamará recipe-browser.php y estará dentro de la carpeta recipe-browser.

Estructura del widget

La estrucutra básica es bastante simple.
Lo primero es un encabezado para darle información a wordpress sobre el plugin y su creador.

/*
Plugin Name: Recipe Browser
Plugin URI: http://www.skamasle.com
Descrition: Browse all your recipes from recipe-press
Author: Ignacio T.
Version: 1
Author URI: http://apuntes.skamasle.com
*/

Estos datos los podremos ver en el panel de administración de plugins más tarde.

Ahora vamos a crear nuestra primera función, esta función la usaré para mostrar una estructura en el panel.
En esta ocasión será “hola mundo”.

function recipe_browser() {
   echo "Hola mundo!";
	
}

Ahora tenemos que crear la función que activará todo

function init_recipe_browser() {
	register_sidebar_widget("Recipe Browser", "recipe_browser");
}

Si os fijáis, esta acción registra nuestro widget. El primer parámetro es el nombre y el segundo el Nombre identificador único. slug .

Como último paso vamos a hacer la llamada para que wordpress ejecute el código:

 add_action("plugins_loaded", "init_recipe_browser");

Simplemente añadimos a la acción plugins_loaded la funcion init_recipe_browser.
Este será el desencadenante de todo nuestro widget.

Puesta en marcha

Ahora que tenemos nuestro widget acabado, vamos a nuestro wordpress y activamos nuestro plugin en la pestaña Plugins.
Luego vamos a Apariencia > Widgets y arrastramos nuestro widget al sidebar.

Ahora seremos capaces de ver nuestro widget en la barra de wordpress.

Incluir javascript y CSS

Hay algo más allá de lo que los widgets ofrecen por defecto, y de eso nos daremos cuenta en el momento en que queramos introducir un poco de javascript o algo de CSS.

WordPress es un CMS de uso simple y por dicha simplicidad se caracteriza, a la hora de programar la cosa no cambia.
Si queremos agregar un css nos basta con crear una función de este estilo:

function addHeaderCode() {
	wp_register_style("myStyle", WP_PLUGIN_URL . '/recipe-browser/css/recipe-browser.css');
	wp_enqueue_style("myStyle");
	
}
Usamos la constante WP_PLUGIN_URL para no tener problemas con los includes y registers.

A esta función también hay que darle un Detonante, la acción que lo activa. trigger que será el siguiente:

add_action("init", "addHeaderCode");

Para agregar javascript seguiremos las mismas pautas:

	wp_register_script("myAutocomplete", WP_PLUGIN_URL.'/recipe-browser/js/autocomplete.js');
	wp_enqueue_script("myAutocomplete");

Javascript que requiere otros javascripts previos

Aveces, puede darse la necesidad de cargar un javascript antes que otro.

Por ejemplo, tenemos un script en jQuery, pero resulta que wordpress carga antes nuestro script y por eso no nos funciona.
Así que le agregamos un parámetro a la función wp_register_script.

	wp_register_script('myScript', WP_PLUGIN_URL.'/recipe-browser/js/jquery-ui-1.8.custom.min.js', array("jquery"));
	wp_enqueue_script('myScript');
	wp_register_script("myAutocomplete", WP_PLUGIN_URL.'/recipe-browser/js/autocomplete.js', array("jquery"));
	wp_enqueue_script("myAutocomplete");

En el ejemplo, ambos scripts requieren jquery antes de ser cargados.

La función para incluir javascript y css queda así:

 add_action("init", "addHeaderCode");
function addHeaderCode() {
	wp_register_script('myScript', WP_PLUGIN_URL.'/recipe-browser/js/jquery-ui-1.8.custom.min.js', array("jquery"));
	wp_enqueue_script('myScript');
	wp_register_script("myAutocomplete", WP_PLUGIN_URL.'/recipe-browser/js/autocomplete.js', array("jquery"));
	wp_enqueue_script("myAutocomplete");
	
	wp_register_style("myStyle", WP_PLUGIN_URL . '/recipe-browser/css/recipe-browser.css');
	wp_enqueue_style("myStyle");
	
}

El código entero sería el siguiente:

/*
Plugin Name: Recipe Browser
Plugin URI: http://www.skamasle.com
Descrition: Browse all your recipes from recipe-press
Author: Ignacio T.
Version: 1
Author URI: http://apuntes.skamasle.com
*/


add_action("init", "addHeaderCode");
function addHeaderCode() {
	wp_register_script('myScript', WP_PLUGIN_URL.'/recipe-browser/js/jquery-ui-1.8.custom.min.js', array("jquery"));
	wp_enqueue_script('myScript');
	wp_register_script("myAutocomplete", WP_PLUGIN_URL.'/recipe-browser/js/autocomplete.js', array("jquery"));
	wp_enqueue_script("myAutocomplete");
	
	wp_register_style("myStyle", WP_PLUGIN_URL . '/recipe-browser/css/recipe-browser.css');
	wp_enqueue_style("myStyle");
	
}


function recipe_browser() {
	echo 'hola mundo';	
}

function init_recipe_browser() {
	register_sidebar_widget("Recipe Browser", "recipe_browser");
}

add_action("plugins_loaded", "init_recipe_browser");

Conclusión

Como se puede apreciar, crear un widget no es tan costoso como pueda parecer a primera vista y nos simplifica mucho el trabajo de instalación, sobretodo si se trabaja con terceros y menos experimentados.

Así que les recomiendo usar widgets a partir de ahora para sus modificaciones.
No subo código porque lo he pegado previamente pero si hubiese dudas no duden en avisar ;)


Así nos han encontrado!

  • crear widget wordpress
  • widgets para wordpress 2011
  • como programar widgets wordpress
  • crear plugin wordpress
  • como crear un widget en wordpress
  • plugin wordpress para darle estilo a los
  • crear un widget wordpress
  • widget para wordpress 2011
  • como crear plugins para wordpress

2 Responses to Como crear plugins o widgets para WordPress

  1. admin dice:

    Lo intentaré me quedaron dudas pero es por que no lo e puesto en practica.. pero veré si lo hago.. ya que como vez en varios blogs tengo cosas similares en el sidebar que no estarían nada mal todas en un solo widget por lo mismo que dices a la hora de cambiar el theme hay que modificar las cosas y no me gusta nada :S

  2. Morfil dice:

    Hola mira seguí al pie las indicaciones, además consulte en otras páginas para tratar de resolverlo.. todo el día nada que ver… bueno lo tuyo me ayudo mucho; el estilo css si se imprime en el frontend, pero algo pasa con javascript, tengo dos archivos jquery (.js) pero además tengo un script (javascript) que según yo debería ir dentro de la etiqueta … y bueno ahi esta el problema..??!!
    Mira, de esta pagina me descargue unos ejemplos de popup http://www.jacklmoore.com/colorbox donde dice “Current version” y se baja. Ahi dentro hay como 5 ejemplos de popups, escogi el ejemplo 1 borré la parte correspondiente hasta que dequen dos hipervinculos (del video de youtube y el div); abro el index.html y funciona correctamente…El problema esta cuando a eso lo quise convertir en plugin y mi duda es donde pongo este script:

    $(document).ready(function(){
    //Examples of how to assign the ColorBox event to elements

    $(“.youtube”).colorbox({iframe:true, innerWidth:425, innerHeight:344});

    $(“.inline”).colorbox({inline:true, width:”50%”});

    //Example of preserving a JavaScript event for inline calls.
    $(“#click”).click(function(){
    $(‘#click’).css({“background-color”:”#f00″, “color”:”#fff”, “cursor”:”inherit”}).text(“Open this window again and this message will still be here.”);
    return false;
    });
    });

    Todo esto es para que aparezca un hipervinculo en un sidebar y al hacer clic sobre él se abra un popup, en un caso con video y otros con texto (divs).
    Si me das una guía te estaría infinitamente agradecido, a pesar de que ya me has dado demasiada con tu tutorial..
    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">