Posted in

Crear un Widget para WordPress

1- Creamos la carpeta de nuestro proyecto en wp-content/plugins, en este ejemplo nuestro plugin se llamara ejemplo.

2- Generamos un archivo dentro de la nueva carpeta /ejemlo/ y lo llamaremos ejemplo.php (el nombre no tiene porqué ser el mismo del widget).

3- Añadiremos la cabecera donde estará la información relativa al widget:

/*
oPlugin Name: Ejemplo Widget!
oPlugin URI: http://www.oskratch.com/
oDescription: Sistema para bla bla bla...
oVersion: 1.0
oAuthor: Òscar Periche
oAuthor URI: http://www.oskratch.com/
oLicense: GPL2
o*/

4- Añadiremos el código básico y en los siguientes puntos pondré un ejemplo de cada una de las funciones que contiene:

class wp_ejemplo extends WP_Widget {

o// constructor
ofunction wp_ejemplo() {
o/* ... */
o}

o// widget form creation
ofunction form($instance) {
o/* ... */
o}

o// widget update
ofunction update($new_instance, $old_instance) {
o/* ... */
o}

o// widget display
ofunction widget($args, $instance) {
o/* ... */
o}
}

// register widget
add_action('widgets_init', create_function('', 'return register_widget("wp_ejemplo");'));

5- Función constructora (The Constructor)

function wp_my_plugin() {
        parent::WP_Widget(false, $name = __('Ejemplo widget!', 'wp_widget_plugin') );
    }

6- La función form()

// widget form creation
function form($instance) {

// Check values
if( $instance) {
     $title = esc_attr($instance['title']);
     $text = esc_attr($instance['text']);
     $textarea = esc_textarea($instance['textarea']);
} else {
     $title = '';
     $text = '';
     $textarea = '';
}
?>

<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text:', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
</p>
<?php 
}

7- La update function()

// update widget
function update($new_instance, $old_instance) {
      $instance = $old_instance;
      // Fields
      $instance['title'] = strip_tags($new_instance['title']);
      $instance['text'] = strip_tags($new_instance['text']);
      $instance['textarea'] = strip_tags($new_instance['textarea']);
     return $instance;
}

8- La función widget() que se encarga de mostrar nuestro widget

// display widget
function widget($args, $instance) {
   extract( $args );
   // these are the widget options
   $title = apply_filters('widget_title', $instance['title']);
   $text = $instance['text'];
   $textarea = $instance['textarea'];
   echo $before_widget;
   // Display the widget
   echo '<div class="widget-text wp_widget_plugin_box">';

   // Check if title is set
   if ( $title ) {
      echo $before_title . $title . $after_title;
   }

   // Check if text is set
   if( $text ) {
      echo '<p class="wp_widget_plugin_text">'.$text.'</p>';
   }
   // Check if textarea is set
   if( $textarea ) {
     echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
   }
   echo '</div>';
   echo $after_widget;
}

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *


The reCAPTCHA verification period has expired. Please reload the page.