06. Programar Wordpress Desde Cero

06.-Programar WordPress desde cero [widgets]

06. Programar%2BWordpress%2BDesde%2BCero

INTRODUCCIÓN

Los widgets son una excelente opción para agregar elementos extras a nuestra web y wordpress los sabe muy bien, por eso nos ofrece rápidas y fáciles opciones para gestionar y programarlos.

En este tutorial vamos a prender a crear widgets y en particular vamos a crear dos widgets para poder gestionar el área del footer desde nuestro administrador de wordpress.

PROCEDIMIENTOS

1.- En wp-content/plugins/ creamos una carpeta llamada mi-widget

2.- Dentro de la carpeta mi-widget creamos un archivo llamado mi-widget.php donde colocaremos este código:

<?php
/*
Plugin Name: mi-widget
Plugin URI: programadornovato.com
Description: Este pluging crea un widget
Version: 1.0.0
Author: Eugenio Chaparro
Author URI: programadornovato.com
License: GPLv2
*/

// Llamamos la clase donde estan las funcionalidades del widget
require_once 'mi_widget_class.php';

// Accion que inicializa el widget
add_action("widgets_init","widget_carga");

if(!function_exists("widget_carga")){
    function widget_carga(){
        // Creamos el widget y le pasamos el nombre de la clase que alamacena las funcionalidades del widget
        register_widget("mi_widget_class");
    }
}

Ademas creamos el archivo mi_widget_class.php con este código:

<?php

class mi_widget_class extends WP_Widget {

    public function __construct() {
        //$this->WP_Widget($id_base, $name              , $widget_options);
        $this->WP_Widget('css_id'  , 'Nombre del widget', array("classname" => "clase-del-widget", "description" => "Descripción del widget"));
    }

    // Creamos el cuerpo del widget
    public function form($instance){
        $defaults=array("titulo"=>"Lenguajes de Programación");
        // A la variable instance le agregamos el array $defaults el cual contiene el titulo
        $instance=wp_parse_args((array)$instance,$defaults);
        $titulo=esc_attr($instance["titulo"]);
        ?>
        <!--Dibujamos el cuerpo del widget-->
        <p>Título : <input type="text" name="<?php echo $this->get_field_name("titulo");?>" value="<?php echo $titulo;?>" class="widefat" /></p>
        <?php        
    }
    
    // Guardamos lo cambios
    public function update($new_instance,$old_instance){
        // Inicializamos la instancia con el valor anterior
        $instance=$old_instance;
        // Actualizamos la instancia con el nuevo valor
        $instance["titulo"]=strip_tags($new_instance["titulo"]);
        // Retornamos la instancia con el nuevo valor
        return $instance;
    }
    
    //Mostramos nuestro widget en el fronten
    public function widget($args,$instance){
        //Extraemos los argumentos before_widget,after_widget,before_title,after_title
        extract($args);
        // Extraemos el valor previamente gurdado en titulo
        $titulo=apply_filters('widget_title',$instance['titulo']);
        // Dibujamos como queremos que se muestre el widget
        echo $before_widget;
        echo $before_title.$titulo.$after_title;
        echo $after_widget;        
    }
        
}

Deja un comentario

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