viernes, 5 de febrero de 2016

Como Hacer un Plugin en wordpress

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 estructuradel plugin. Dicha estructura está compuesta por un nombre, undirectorio, 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 partespara 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.
En el archivo plugin.phpharemos 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 decodex.
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

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

Cómo hacer un plugin de Wordpress #2

efiniremos algunas configuraciones que nuestro plugin debería tener para potenciar su funcionalidad.
Algunas de estas configuraciones serán:
  • Servicio de Placeholder : Será un select (choice) que permitirá seleccionar 1 sitio de servicios de placeholder. Ej. lorempixel, placekitten o placeholdit
  • Tamaño por defecto : Serán dos inputs (text) que por defecto mostrarán 250x250. Esta configuración se utilizará en el momento en que no se entreguen los atributos width y height
  • Texto por defecto : En algunos servicios es posible agregar un texto sobre la imagen, este texto se configurará con un input (text)
Con esto definido podremos crear nuestra pantalla de configuración del plugin utilizando una función nueva
// La función para llamar a las configuraciones
function aPlaceHolderSettings()
{
    // Verificamos si el usuario puede administrar opciones, en caso de que no pueda
    // se envía un mensaje que no tiene los permisos suficientes
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }

    // Acá se debe incluir el HTML usando la función echo
    echo '';
}
Luego, definiremos aparte como debería lucir el HTML
<div class="wrap">
    <h2>aPlaceHolder Settings</h2>
    <form>
        <label>Servicio de placeholder</label>
        <select>
            <option value="1">Placehold.it</option>
            <option value="2">LoremPixel</option>
            <option value="3">PlaceKitten</option>
        </select>
        <br />
        <label>Tamaño por defecto (width x height)</label>
        <input type="text" value="" placeholder="250"> x <input type="text" value="" placeholder="250">
        <br />
        <label>Texto por defecto</label>
        <input type="text" value="" />
    </form>
 </div>
Todo esto en conjunto generará la interfaz básica de configuración de nuestro plugin. Recuerden que esta función debe ir bajo el código que ya teníamos.
 // Configuraciones
 function aPlaceHolderSettings()
 {
    // Verificamos si el usuario puede administrar opciones, en caso de que no pueda
    // se envía un mensaje que no tiene los permisos suficientes
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }

    echo '<div class="wrap">
        <h2>aPlaceHolder Settings</h2>
        <form>
            <label>Servicio de placeholder</label>
            <select>
                <option value="1">Placehold.it</option>
                <option value="2">LoremPixel</option>
                <option value="3">PlaceKitten</option>
            </select>
            <br />
            <label>Tamaño por defecto (width x height)</label>
            <input type="text" value="" placeholder="250"> x <input type="text" value="" placeholder="250">
            <br />
            <label>Texto por defecto</label>
            <input type="text" value="" />
        </form>
     </div>';
 }
Menús de Administración
El siguiente paso es aprender cómo agregar nuestra página de configuraciones a un menú del administración. Para lograr esto debemos que tener en cuenta que la opción se puede agregar a cualquier menú principal de Wordpress y que, para nuestro caso, usaremos el menú de Ajustes.
Primero debemos crear una función que agrega la página de configuraciones usando la función add_options_page. Con esta función definiremos el nombre del menú, el título, la capacidad, el ID y lafunción que se utilizará para mostrar la configuración.
 function aPlaceHolderPluginMenu() {
     // Uso de Función : add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);
     add_options_page( 'aPlaceHolder Settings', 'aPlaceHolder', 'manage_options', 'aplaceholder_settings', 'aPlaceHolderSettings' );
 }
Con esta función ya creada, podremos agregar la opción a nuestro menu de ajustes usando add_action.
add_action( 'admin_menu', 'aPlaceHolderPluginMenu' );
Con estas dos simples acciones ya podremos ver la página de configuración del plugin en el menú de Ajustes.
Y al hacer click sobre ella veremos nuestro hermoso formulario de configuración.
Registrar Configuraciones
Como se habrán dado cuenta, nuestra configuración ya está lista entérminos visuales y ahora lo que sigue es guardar estas configuraciones en algún lado. Para hacer esto lo primero que debemos saber es que Wordpress cuenta con una función que agrupa las configuraciones y está especialmente pensada para los plugins.
La idea principal es ocupar la función register_setting para definir las configuraciones básicas, luego cuando estas configuraciones están registradas pueden ser utilizadas para ser almacenadas — dentro de la tabla wp_options — y gestionadas por el plugin.
Para registrar las configuraciones crearemos una función que la registre y luego la invocaremos — sí, así como en Naruto — usando la función add_action.
 function aPlaceHolderRegisterSettings()
 {
    register_setting( 'aplaceholder-settings', 'service' );
    register_setting( 'aplaceholder-settings', 'default_size_width' );
    register_setting( 'aplaceholder-settings', 'default_size_height' );
    register_setting( 'aplaceholder-settings', 'default_text' );
 }
Acá estamos definiendo las configuraciones dentro del grupoaplaceholder-settings — nombre elegido para el ejemplo y que es muy descriptivo — y cada opción corresponde a un campo de configuración.
Luego de esto, hacemos la invocación — no necesitaremos un pergamino pero si quieren despertar el Sharingan es cosa de ustedes — de nuestra función.
// Invocación de la función sin sharingan
add_action( 'admin_init', 'aPlaceHolderRegisterSettings');
Cuando actualicen la pantalla no va a pasar nada, pero internamenteWordpress dejará el espacio reservado para guardar estos datos.
Guardando Configuraciones
Como ya tenemos nuestro grupo de configuraciones reservado, el siguiente paso es almacenar las configuraciones ahí. Para lograr esto no debemos invocar nada, solo tenemos que hacer unas pequeñas modificaciones al formulario que creamos.
El primer cambio es agregar los atributos necesarios a nuestro formulario a sus campos para que cuando presionemos el botónGuardar — que dicho sea de paso aún no agregamos — los datos sean almacenados donde deben estar. Para esto vamos a ir por parte:
  1. Agregar el atributo action y method al tag "form". El atributo action debe hacer referencia a la página options.php, que es una página interna destinada a almacenar opciones y configuraciones. El atributo method es post porque no queremos que nuestros datos vayan por URL.
    <form action="options.php" method="post">
  2. Agregar el name y el atributo id a cada campo. Tengan en cuenta que los nombres deben ser los mismos que registramos anteriormente.
    <select name="service" id="service">

<input type="text" name="default_size_width" id="default_size_width" value="" placeholder="250">

<input type="text" name="default_size_height" id="default_size_height" value="" placeholder="250">

<input type="text" name="default_text" id="default_text" value="" placeholder="250">
  3. Agregar el for a cada label para que cuando hagamos click en el nombre del atributo éste se seleccione
    <label>Servicio de placeholder for="service"</label>

<label>Tamaño por defecto (width x height) for="default_size_width"</label>

<label>Texto por defecto for="default_text"</label>
  4. Agregar el botón de guardado usando la función submit_button() sobre el cierre de formulario. Ojo al corte que se genera al final del último input y el cierre de formulario
        `';
submit_button();
echo '
`
  5. Agregar las funciones de preparación del formulario que lo dejarán listo para almacenar la información. Estas dos funciones sonsettings_fields y do_settings_sections, se deben utilizar haciendo referencia al grupo de configuraciones que en este caso esaplaceholder-settings
    <form action="options.php" method="post">';
settings_fields('aplaceholder-settings');
do_settings_sections('aplaceholder-settings');
echo '
<label for="service">Servicio de placeholder</label>
    Ojo de nuevo con el corte de la función echo al final del tag form y al comienzo del tag label.
Con todos estos cambios, nuestro formulario quedará del siguiente modo
    echo '<div class="wrap">
            <h2>aPlaceHolder Settings</h2>
            <form action="options.php" method="post">';
            settings_fields('aplaceholder-settings');
            do_settings_sections('aplaceholder-settings');
    echo '
                <label for="service">Servicio de placeholder</label>
                <select name="service" id="service">
                    <option value="1">Placehold.it</option>
                    <option value="2">LoremPixel</option>
                    <option value="3">PlaceKitten</option>
                </select>
                <br />
                <label for="default_size_width">Tamaño por defecto (width x height)</label>
                <input type="text" name="default_size_width" id="default_size_width" placeholder="250"> x
                <input type="text" name="default_size_height" id="default_size_height" placeholder="250">
                <br />
                <label for="default_text">Texto por defecto</label>
                <input type="text" name="default_text" id="default_text" />';
                submit_button();
    echo '
            </form>
         </div>';
Ahora sí que pueden presionar el lindo botón guardar cambios que aparecerá al actualizar la página.
Y debería aparecer este mensaje de confirmación
Mostrando configuraciones
Como ya estamos guardando las configuraciones el siguiente paso esmostrar los valores en cada campo, como para que el usuario sepa que se están almacenando. Para eso modificaremos de nuevo — sí, de nuevo, lo lamento pero tenemos que ir parte por parte — nuestro formulario agregando el atributo "value" a cada input y haremos algo especial para el select, los valores que mostraremos se obtendrán usando la funciónget_option.
  1. Agregar el atributo value a las dimensiones por defecto, tanto enheight como en width
    <input type="text" name="default_size_width" id="default_size_width" placeholder="250" value="'. get_option('default_size_width') .'">

<input type="text" name="default_size_height" id="default_size_height" placeholder="250" value="'. get_option('default_size_height') .'">
  2. Agregar el atributo value al texto por defecto
    <input type="text" name="default_text" id="default_text" value="'. get_option('default_text') .'" />
  3. Agregar el atributo selected a la opción elegida usando una variable para cada opción. Acá, la lógica busca imprimir la variable después del option, pero solo se mostrará como selected si es que la opción es igual al ID
    <label for="service">Servicio de placeholder</label>';

$option1 = (get_option('service') == 1) ? 'selected' : '';
$option2 = (get_option('service') == 2) ? 'selected' : '';
$option3 = (get_option('service') == 3) ? 'selected' : '';

echo '
    <select id="service" name="service">
      <option value="1" '.$option1.'>Placehold.it</option>
      <option value="2" '.$option2.'>LoremPixel</option>
      <option value="3" '.$option3.'>PlaceKitten</option>
    </select>
    Ojo que ésta sería la parte más compleja del tutorial, donde ocupamos variables para imprimirlas entre el HTML y una comparación en líneadonde se pregunta el valor de la opción "service" y se define el valor de la variable con el texto "selected" que luego es agregado a la opción correspondiente.
Y con eso, terminamos todos los cambios al formulario, así que el resultado debería ser el siguiente.
echo '<div class="wrap">
    <h2>aPlaceHolder Settings</h2>
    <form action="options.php" method="post">';
    settings_fields('aplaceholder-settings');
    do_settings_sections('aplaceholder-settings');
echo '
            <label for="service">Servicio de placeholder</label>';

$option1 = (get_option('service') == 1) ? 'selected' : '';
$option2 = (get_option('service') == 2) ? 'selected' : '';
$option3 = (get_option('service') == 3) ? 'selected' : '';

echo '
            <select name="service" id="service">
                <option value="1" '.$option1.'>Placehold.it</option>
                <option value="2" '.$option2.'>LoremPixel</option>
                <option value="3" '.$option3.'>PlaceKitten</option>
            </select>
            <br />
            <label for="default_size_width">Tamaño por defecto (width x height)</label>
            <input type="text" name="default_size_width" id="default_size_width" placeholder="250" value="'.get_option('default_size_width').'"> x 
            <input type="text" name="default_size_height" id="default_size_height" placeholder="250" value="'.get_option('default_size_height').'">
            <br />
            <label for="default_text">Texto por defecto</label>
            <input type="text" name="default_text" id="default_text" value="'. get_option('default_text') .'" />';
            submit_button();
echo '
        </form>
     </div>';
Implementando las Configuraciones
El último paso que nos queda es implementar estas configuraciones guardadas en nuestro Widget y que el comportamiento dependa de lo que configuramos. Para esto modificaremos a nuestra función de widget e iremos integrando parte por parte las configuraciones
  1. Definir el texto, ancho y el alto de la imagen según configuraciones o atributos. Haciendo una comparación en línea, primero usamos el atributo si es que existe y sino existe se usa el por defecto.
    function aPlaceHolder($attributes)
{
    $width  = (isset($attributes['width']))  ? $attributes['width']  : get_option('default_size_width');
    $height = (isset($attributes['height'])) ? $attributes['height'] : get_option('default_size_height');
    $text   = (isset($attributes['text']))   ? $attributes['text']   : get_option('default_text');
  2. Definir la variable $url de acuerdo a la opción elegida. Si es 1 deberá usarse Placehold.it, si es 2 deberá usarse LoremPixel y si no, PlaceKitten. Acá se utilizarán los valores de las variables anteriores para hacer la llamada. El texto se utilizará para placeholdit.
    if (get_option('service') == 1) {
    $url = 'http://placehold.it/'.$width.'x'.$height.'?text='.$text;
} 
else if (get_option('service') == 2) {
    $url = 'http://lorempixel.com/g/'.$width.'/'.$height.'/';
}
else {
    $url = 'http://placekitten.com/g/'.$width.'/'.$height.'/';
}
  3. Y finalmente, agregamos la variable $url dentro del resultado
    echo '<img src="'.$url.'" />';
El resultado de todo el código deja la función así
function aPlaceHolder($attributes)
 {
    $width  = (isset($attributes['width']))  ? $attributes['width']  : get_option('default_size_width');
    $height = (isset($attributes['height'])) ? $attributes['height'] : get_option('default_size_height');
    $text   = (isset($attributes['text']))   ? $attributes['text']   : get_option('default_text');

    if (get_option('service') == 1) {
        $url = 'http://placehold.it/'.$width.'x'.$height;
    } 
    else if (get_option('service') == 2) {
        $url = 'http://lorempixel.com/'.$width.'/'.$height.'/';
    }
    else {
        $url = 'http://placekitten.com/g/'.$width.'/'.$height.'/';
    }

    echo '<img src="'.$url.'" />';
 }
La prueba final
Ahora, cuando lo probamos con nuestras configuraciones el resultado se ve así
Y acá aparece el kitten usando el shortcode [aplaceholder]
¡Eso sería todo! En el siguiente y último tutorial vamos a agregar un botón a la barra de herramientas que permita configurar este plugin.

Cómo hacer un plugin de Wordpress #3

contemplará la integración de un botón en el menú del editor de Wordpress.
El botón en el menú
Para comenzar vamos a crear un botón en el menú del editor, el objetivo será que nos muestre un diálogo con configuraciones y luego nos integre un shortcode en el editor. Esto lo lograremos agregando 3 funciones a nuestro archivo "plugin.php".
La primera función permitirá registrar el botón solo si el usuario puede editar entradas o páginas, para esto agregaremos al final de nuestro archivo plugin.php el siguiente código:
function aPlaceHolderAddButton()
{
    if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
    {
        add_filter('mce_external_plugins', 'aPlaceHolderButtonPlugin');
        add_filter('mce_buttons', 'aPlaceHolderRegisterButton');
    }
 }
Si analizamos la función se darán cuenta que en estamos creando filtros para el "TinyMCE" — el plugin que utiliza wordpress para mostrar su editor WYSIWYG — y que llama a dos funciones que tendremos que crear.
El primer filtro invoca a la función que permite agregar los plugins externos, es decir, los códigos escritos javascript (apoyados en jQuery) que se encontrarán en el archivo "aplaceholder.js"
 function aPlaceHolderButtonPlugin($plugin_array)
 {
    $plugin_array['aplaceholder'] = plugins_url('aplaceholder.js', __FILE__);
    return $plugin_array;
 }
El segundo filtro invoca a la función que registra el botón:
 function aPlaceHolderRegisterButton($buttons)
 {
    array_push($buttons, 'aplaceholder');
    return $buttons;
 }
esta función agrega a un arreglo nuestro botón llamado "aplaceholder" y lo retorna del mismo modo.
Luego, tenemos que habilitar nuestra función "aPlaceHolderAddButton" a la carga inicial de Wordpress usando el hook "init":
add_action('init', 'aPlaceHolderAddButton');
El archivo javascript
Cuando ya tenemos todo lo necesario para que nuestro botón exista, usaremos la magia de Javascript y jQuery para agregarle la funcionalidad. Para lograr esto, crearemos un archivo nuevo en nuestro directorio del plugin llamado "aplaceholder.js". Si se dan cuenta, este archivo ya fue definido anteriormente en la función "aPlaceHolderButtonPlugin".
Para integrar la funcionalidad a este botón diviremos el problema en tres partes:
  1. Crear el botón en nuestro editor tinymce como plugin
  2. Agregar el botón (plugin) a los plugins del tinymce
  3. Agregar la interfaz de configuración del plugin que será invocada al presionar el botón
Para crear el botón en nuestro editor TinyMCE utilizaremos el método create que, por defecto, existe como variable dentro de Wordpress:
(function() {

    tinymce.create('tinymce.plugins.aplaceholder', {
        init: function(ed, url) {
            ed.addButton('aplaceholder', {
                title: 'Add a Placeholder',
                image: url + '/placeholder.png',
                onclick: function() {
                    tb_show('aplaceholder', '#TB_inline?inlineId=aplaceholder-form');
                }
            });
        },
        createControl: function(n, cm) {
            return null;
        },
    });

})();
En esta llamada, estamos utilizando la API de TinyMCE para crear un plugin llamado "aplaceholder".
Según la documentación en el método "init" es donde debemos definir qué tipo de elemento es, acá estamos utilizando la función "addButton" con las configuraciones necesarias (title, image, onclick).
  • En "title" se define el titulo del botón en caso de no tener imagen y el texto que aparecerá cuando nos ponemos sobre el botón
  • En "image" daremos la imagen que se visualizará en el botón. Utilicen esta: 
  • En "onclick" se escribe la función que se ejecutará cuando el usuario haga click sobre el botón. En este caso estoy usando una función medianamente conocida llamada "tb_show", esta función se utiliza para llamar diálogos usando el plugin "thickbox" que por defecto viene habilitado dentro de Wordpress.
  • La sintaxis de tb_show pide como primer parámetro un identificador único para el diálogo y como segundo parámetro la configuración de qué elemento debe mostrarse como thickbox. En este caso particular le diremos que es un elemento en que se encuentra en la misma página de forma oculta y que su "ID" es "aplaceholder-form" (elemento que aún no existe pero lo crearemos después)
En cuánto al método "createControl", lo dejamos nulo pero definido.
El segundo paso es agregar este botón recién creado a nuestra barra de herramientas del editor, para lograr esto agregaremos debajo del código recién creado el siguiente código:
tinymce.PluginManager.add('aplaceholder', tinymce.plugins.aplaceholder);
Que no es más que la invocación del plugin recien creado. Cuando tenemos todo esto listo y hemos ido paso por paso veremos por fin el primer resultado:
(Ahora pueden presionarlo harto porque no hará nada, pero se ve bonito ahí en el toolbar)
El tercer paso y final, para nuestro botón, es crear el dialogo que mostrará el contenido a configurar. He decidido solamente agregar los atributos de ancho y alto, para no hacer el tutorial más complejo, pero si se sienten con ganas de aprender, pueden agregar más funciones.
Entonces, para agregar el diálogo usaremos el shortcut de document ready de jQuery (¿voy muy rápido?) para agregar nuestro formulario al elemento body y ocultarlo después le daremos la funcionalidad para que se agregue al editor. ¿Veámoslo por parte?
  1. Agregar el shortcut de jQuery para document.ready
    jQuery(function() {
});
  2. Dentro de este shortcut crearemos la variable "form" que tendrá elHTML del formulario:
    var form = jQuery('<div id="aplaceholder-form">\
                    <table id="aplaceholder-table" class="form-table">\
                        <tr>\
                            <th><label for="aplaceholder-width">Width</label></th>\
                            <td>\
                                <input type="text" id="aplaceholder-width" name="width" placeholder="200" /><br />\
                                <small>specify the width </small>\
                            </td>\
                        </tr>\
                        <tr>\
                            <th><label for="aplaceholder-height">Height</label></th>\
                            <td>\
                                <input type="text" id="aplaceholder-height" name="height" placeholder="200"/><br />\
                                <small>specify the height </small>\
                            </td>\
                        </tr>\
                    </table>\
                    <p class="submit">\
                        <input type="button" id="aplaceholder-submit" class="button-primary" value="Insertar Placeholder" name="submit" />\
                    </p>\
                    </div>');
    Si analizamos bien, en este formulario (que no contiene un elemento form) cada elemento de formulario tiene como "id" el prefijo "aplaceholder". Esto nos será útil para que cuando presionemos el botón "aplaceholder-submit" se puedan obtener los valores.
    Ojo con los saltos de línea que son reemplazados con backslash "\" para evitar tener que concatenar texto.
  3. El siguiente paso es identificar la tabla que contiene nuestro elementos y dejarla en una variable para utilizarla después.
    var table = form.find('table');
  4. Luego agregamos nuestro "form" al body usando "appendTo" y lo ocultamos con "hide".
    form.appendTo('body').hide();
  5. A continuación agregaremos la función de "submit" que tendrá el input de id "aplaceholder-submit" para que cuando sea presionado agregue al editor el contenido con las configuraciones:
    form.find('#aplaceholder-submit').click(function() {
            var shortcode = '[aplaceholder';
            if (table.find('#aplaceholder-width').val() != '') {
                shortcode += ' width='+table.find('#aplaceholder-width').val();
            }
            if (table.find('#aplaceholder-height').val() != '') {
                shortcode += ' height='+table.find('#aplaceholder-height').val();
            }
            shortcode += '][/aplaceholder]';

            // agrega el contenido al editor activo
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // cierra el thickbox
            tb_remove();
 });
    Si analizan bien el código, lo que hacemos es crear la variable "shortcode" que se agrega al editor. A esta variable se le va concatenando los valores de "aplaceholder-width" y "aplaceholder-height" si es que éste valor está definido. Si ningun valor se define solo agregará el código sin atributos.
Luego, al juntar todo el código, lo veremos así:
(function() {
    tinymce.create('tinymce.plugins.aplaceholder', {
        init: function(ed, url) {
            ed.addButton('aplaceholder', {
                title: 'Add a Placeholder',
                image: url + '/placeholder.png',
                onclick: function() {
                    tb_show('aplaceholder', '#TB_inline?inlineId=aplaceholder-form');
                }
            });
        },
        createControl: function(n, cm) {
            return null;
        },
    });

    tinymce.PluginManager.add('aplaceholder', tinymce.plugins.aplaceholder);

    jQuery(function() {

        var form = jQuery('<div id="aplaceholder-form">\
                    <table id="aplaceholder-table" class="form-table">\
                        <tr>\
                            <th><label for="aplaceholder-width">Width</label></th>\
                            <td>\
                                <input type="text" id="aplaceholder-width" name="width" placeholder="200" /><br />\
                                <small>specify the width </small>\
                            </td>\
                        </tr>\
                        <tr>\
                            <th><label for="aplaceholder-height">Height</label></th>\
                            <td>\
                                <input type="text" id="aplaceholder-height" name="height" placeholder="200"/><br />\
                                <small>specify the height </small>\
                            </td>\
                        </tr>\
                    </table>\
                    <p class="submit">\
                        <input type="button" id="aplaceholder-submit" class="button-primary" value="Insertar Placeholder" name="submit" />\
                    </p>\
                    </div>');

        var table = form.find('table');
        form.appendTo('body').hide();

        form.find('#aplaceholder-submit').click(function() {
            var shortcode = '[aplaceholder';
            if (table.find('#aplaceholder-width').val() != '') {
                shortcode += ' width='+table.find('#aplaceholder-width').val();
            }
            if (table.find('#aplaceholder-height').val() != '') {
                shortcode += ' height='+table.find('#aplaceholder-height').val();
            }
            shortcode += '][/aplaceholder]';

            // agrega el contenido al editor activo
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // cierra el thickbox
            tb_remove();
        });
    });
})();
Y al presionar nuestro botón veremos algo como esto:
¡Esto es todo!
Conclusiones y agradecimientos
Luego de hacer este tutorial me di cuenta de varias cosas que quizas ustedes también notaron. Una de ellas fue que la complejidad del plugin está directamente relacionada a los objetivos que tengamos en mente.Mientras más características necesitemos crear, más es la complejidad del plugin y más es el tiempo de desarrollo.
Otro punto importante a destacar es que no es tanto el PHP que debemos saber, solo tenemos que tener en cuenta qué funciones de Wordpress usar y, a grandes rasgos, cómo funcionan para que nuestro plugin funcione correctamente.
También debo agregar que sin jQuery nada de lo visual hubiese sido posible. El uso de funciones nativas como jQuery y plugins comoTinyMCE o Thickbox nos ayudó bastante a lograr mucho con tan poco.
Finalmente agradezco a quienes han compartido este tutorial, a quienes han avanzado leyendo esto y quiero dar saludo especial a equistene que fue el que tuvo la idea inicial (Ojalá que te sirva y que ocupes la cuestión de plugin)
Eso es todo, ahora pueden descargarlo desde acá 

fuente: http://alvaroveliz.cl/blog/como-hacer-un-plugin-de-wordpress-3
Publicado por

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)