Crear widget WordPress

Home » Blog » Crear widget WordPress

Los widget de WordPress son zonas en las que el usuario puede añadir información de forma sencilla (arrastrando) desde la sección widgets en apariencia, y permite una configuración muy sencilla. Podemos examinar el fichero widgets.php en la carpeta wp-includes para entender las funciones que podemos usar.

Registrar un Widget

El primer paso es registrar un Widget, que será el elemento que el usuario podrá arrastrar a sus zonas de widgets.

add_action('widgets_init','imacPrestashop_widget'); 
function imacPrestashop_widget() { 
register_widget( 'imacPrestashop_1_widget' );
 }

Simplemente llamamos al conector widgets_init y le indicamos que ‘conecte’ el nuevo mediante register_widget, ahora hay que darle funcionalidad para los que extenderemos de la clase de WordPress WP_Widget.

WP_Widget{class mi_widget extends WP_Widget{ 
function __construct(){ 
} 
}

En primer lugar vamos a definir, dentro de la clase anterior, la información que se visualiza sobre el widget:

$options = array( 
'classname' => 'mi_class', 
'description' => 'Mostrar productos prestashop.' 
); 
__construct('id_widget','name_widget',$options);
  • id_widget: Es el identificador del bloque.
  • name_widget: Título del widget, se visualiza en el bloque.
  • $options => Se define, primero el clasname (la clase que se incorporara en el diseño para poder darle diseño mediante css a nuestro widget) y  la descripción que será visual antes de ser arrastrado.

Y con esto ya tendremos un Widget que se podrá incorporar a las diferentes zonas establecidas.

Definir ajustes de Widget

Los ajustes del Widget son aquellos que se presentan al usuario cuando arrastra el mismo a una de las zonas de Widget.

function form($instance){                                                               
$defaults= array(
‘title‘ => ‘título’,
‘name ‘ => ‘imacreste’,
'email’ => '[email protected]'
);
$instance=wp_parse_args((array) $instance, $defaults);                          
$name =$instance[‘name’];
$title=$instance[‘title’];
$email =$instance[‘email’];
?>  
<p>title: <input type="text" class="widefat" name="<?php echo $this->get_field_name(' title')?>" 
value="<?php echo esc_attr($title)?>" /></p>                             
<p>name: <input type="text" class="widefat" name="<?php echo $this->get_field_name(‘name’)?>" 
value="<?php echo esc_attr($name)?>" /></p>
<p>email: <input type="text" class="widefat" name="<?php echo $this->get_field_name(' email ')?>" 
value="<?php echo esc_attr($email)?>" /></p>
<?php
}

En primer lugar creamos un array con las diferentes variables y sus valores por defecto. Luego recuperamos los valores introducidos por el usuario o los de por defecto y los mostramos en el cuadro de configuraciones del widget.

Y por último usamos la clase update para actualizar la información, escapando los datos.

function update($new_instance,$old_instance){
$instance=$old_instance;
$instance['name']=sanitize_text_field($new_instance['name']);
$instance['n_products']=sanitize_text_field($new_instance['n_products']);   
$instance['email']=sanitize_text_field($new_instance['email']);     
return $instance;
}

Visualizar el Widget

Una vez desarrollado el Widget hay crear el código de visualización e integración con el tema instalado.

function widget($args, $instance){
extract($args);
echo $before_widget;
$name=$instance['name'];
$email=$instance['email'];
$title=$instance['title'];
if ( !empty($title) ){echo $before_title.esc_html($title).$after_title;}
echo "<p>name: ".esc_attr($name)."</p>";
echo "<p>email: ".esc_attr($email)."</p>";
echo $after_widget;
}

En este código solo hay que prestar atención a las etiquetas:

  • $before_widget: Esta etiqueta recogerá el HTML que englobara el widget, y es en el tema donde se define. Marca la etiqueta de inicio, ejemplo: <div>
  • $after_widget: marca la etiqueta de cierre, </div>.
  • $before_title: Marca la etiqueta inicial HTML del título, por ejemplo: <h1>.
  • $after_title: Marca la etiqueta de cierre HTML del título. </h1>.

Y ya se puede ver nuestro widget en cualquier tema adaptado al diseño establecido por el diseñador del mismo.

Widgets de escritorio

Los Wodgets de escritorio son los que se muestran el escritorio principal de WordPress y que se suele usar para mostrar actividad relevante en nuestra web,

add_action('wp_dashboard_setup','ejemplo_escritorio_widget');
function ejemplo_escritorio_widget(){
wp_add_dasboard_widget('identificador_widget_escritorio','Título del widget','funcion');
}

function funcion(){
echo "hello world";
}
  • identificador_widget_escritorio: nombre único que identifica el widget de escritorio.
  • Título del widget: Título que será visible.
  • funcion: La función en la que desarrollaremos nuestro código fuente, y que se mostrará en el interior del cajón.


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023