Imprimir

Manual de WordPress: Crear un widget

Los widgets de WordPress nos proporcionan una forma sencilla de organizar los elementos del sidebar (la columna lateral) sin tener que editar código.

Recursos

Vamos a añadir un widget en el plugin "Hello World 2.0" obteniendo la versión "Hello World 3.0", que constará también de cinco archivos:
- helloworld.php
- readme.txt
ubicados en el directorio:
wp-content/plugins/helloworld/
y:
- helloworld.pot
- helloworld-es_ES.po
- helloworld-es_ES.mo
en:
wp-content/plugins/helloworld/lang/

Editaremos el archivo helloworld.php de "Hello World 2.0" y añadiremos una sección en la que se define el widget:

  • Widget
    <?php
    // ejecutar una funcion una vez que WordPress ha cargado
    add_action('init', 'helloworld_register_widget');
     
    // funcion que se ejecuta una vez que WordPress ha cargado
    function helloworld_register_widget() {
        // añadir el widget a la lista de widgets
        register_sidebar_widget('Hello World','helloworld_widget');
     
        // añadir una pagina de configuracion al widget
        register_widget_control('Hello World','helloworld_widget_control');
    }
     
    // funcion del widget
    function helloworld_widget($args) {
        // $args es una matriz que contiene cuatro cadenas con el HTML
        // las keys son;
        //     before_widget, before_title, after_widget y after_title
        // los valores por defecto son:
        //     before_widget y after_widget: li
        //     before_title y after_title:   h4
        extract($args);
     
        $title = get_option('helloworld_widget_title');
     
        // output del widget
        echo $before_widget;
        echo $before_title.$title.$after_title;
        echo helloworld();
        echo $after_widget;
    }
     
    // funcion que muestra la pagina de configuracion del widget
    function helloworld_widget_control() {
        // comprobar si la peticion procede del form
        if (isset($_POST['title_new']) && !empty($_POST['title_new'])) {
     
            update_option('helloworld_widget_title', $_POST['title_new']);
     
        }
     
        $title = get_option('helloworld_widget_title');
     
        // la pagina de configuracion del widget esta embebida en un form
        // ya existente por lo que no debemos incluir ni la etiqueta <form>
        // ni el boton submit
        echo "<p>".__('Title', 'helloworld').": <b>".$title."</b></p>\n";
        echo __('New', 'helloworld')." ".__('Title', 'helloworld').":
            <input type='text' name='title_new' /><br />\n";
    }
    ?>

Ésta será la página de configuración del widget en inglés (en_US)...

WordPress helloworld screenshot 3

... y ésta traducida al español (es_ES):

WordPress helloworld screenshot 4

Deja un comentario