Publicidad

Cómo crear un widget personalizado para WordPress

Autor: | Categoría:

¿Necesitas un widget para tu wordpress y los que te hay no te gustan? NO CAMBIES LOS ESTILOS, ¡CREA UN PLUGIN A TU MEDIDA!

En este post voy a explicar cómo crear un plugin personalizado para cada una de las situaciones que necesites. Pero antes te preguntarás, ¿Por qué crear un plugin para algo que puedo arreglar con CSS? Pues bién, la respuesta es la siguiente: las actualizaciones de wordpress.

Si cambias los estilos que vienen por defecto en widget, te arriesgas a que en una actualización de wordpress cambien los nombres de los estilos que le habían dado a los widgets en anteriores versiones y te fastidien el CSS; Solución: crear tu plugin con los estilos que tu quieras y con el nombre que quieras.

Vamos a ver como hacemos esto:

Paso 1: Datos del plugin

Con un editor de texto, o con el Dreamweaver o cualquier editor de código vamos a poner esto:

  <?php
/*
Plugin Name: NOMBRE
Plugin URI: URL
Description: DESCRIPCION
Author: AUTOR
Version: VERSION
Author URI: URL
*/

Sólo necesitas cambiar los datos en mayúscula para que wordpress identifique el plugin y puedas activarlo y usarlo en el editor de widgets.

Paso 2: Implementación del código

Lo que vamos a poner ahora se tiene que poner porqué son las órdenes que hacen que el plugin haga algo:

add_action("widgets_init", array('Widget_name', 'register'));
class Widget_name {
  function control(){
    echo 'I am a control panel';
  }
  function widget($args){

Paso 3: Tu personalización

Aquí es donde ponemos exáctamente las funciones que hará nuestro plugin (que se convertirá en widget más tarde):

	echo $args['before_widget'];
        //si quisieramos un título lo pondríamos aquí --> echo $args['before_title'] . 'El título como lo quisieras aquí' . $args['after_title'];
	echo '<div class="tu_veras">
    	//aquí ponemos todo lo que necesitamos, un buscador, un blogroll, un formulario para suscripción por mail...
            </div>';
    echo $args['after_widget'];
  }

Si quisieras un título tuneado lo pondrías dónde poner “El título como lo quieras aquí”, con sus div y sus estilos.

Paso 4: Cierre de plugin

Aquí vamos a poner el código para poder activar el plugin en el administrador de plugins de wordpress.

  function register(){
    register_sidebar_widget('Buscador Personalizado', array('Widget_name', 'widget'));
    register_widget_control('Buscador Personalizado', array('Widget_name', 'control'));
  }
}
?>

Paso 5: Implantación del widget

Tiene que quedar así:

<?php
/*
Plugin Name: NOMBRE
Plugin URI: URL
Description: DESCRIPCION
Author: AUTOR
Version: VERSION
Author URI: URL
*/
add_action("widgets_init", array('Widget_name', 'register'));
class Widget_name {
  function control(){
    echo 'I am a control panel';
  }
  function widget($args){
  echo $args['before_widget'];
        //si quisieramos un título lo pondríamos aquí --> echo $args['before_title'] . 'El título como lo quisieras aquí' . $args['after_title'];
	echo '<div class="tu_veras">
    	//aquí ponemos todo lo que necesitamos, un buscador, un blogroll, un formulario para suscripción por mail...
            </div>';
    echo $args['after_widget'];
  }
   function register(){
    register_sidebar_widget('Buscador Personalizado', array('Widget_name', 'widget'));
    register_widget_control('Buscador Personalizado', array('Widget_name', 'control'));
  }
}
?>

Ahora sólo queda activar el plugin en el administrador de plugins de tu wordpress, y una vez hecho esto, tendrás que ir a “Widgets” y allí verás que se ha creado un widget nuevo con el nombre que tú le has dado en el paso 1. Sólo tendrás que arrastrar el widget a tu sidebar y ya tendrás tu widget personalizado. ¡Disfrútalo!

Publicidad
Etiquetas: , , , ,
  • esta muy bueno tu tutorial pero no explicas como subes al blog el archivo.php, digo para los que tienen blog en wordpress.com como se hace para cargar el widget

  • Gracias Eleacast ^^ tienes razón, bueno, para los que no sepan dónde subir el archivo creado, es dentro del directorio del wordpress –> wp-content/plugins/tu_carpeta/archivo.php

  • Jose

    Gracias por la info,
    lo único que me faltaría sería saber como agregar buscador, formularios, etc…
    simplemente busco el código…?

  • Bueno, la verdad es que si necesitas un buscador puedes agregar el que viene por defecto en los widgets de WordPress, pero si, si quieres hacerlo por tu cuenta sólo con que busques el código ya te funcionará, eso si, no acepta php

  • Neo

    He creado mi widget y aparece en los plugins de wordpress. Lo active, pero cuando fui a Widgets… no aparece habiéndolo activado.
    ¿Alguna pista?
    Muchas gracias anticipadas.

  • Morfil

    Hola dashft… mira tengo una pregunta, ¿como le doy estilos para la parte de frontend?, es decir como le asigno una clase de css (desde un archivo externo) al contenido que se va a ver desde el frontend.
    Saludos, muy buen tutorial

    • Hola Morfil! los css los puedes poner en la hoja de de estilos que viene en tu theme. Mientras coincidan los nombres asignados en el widget y en la hoja de estilos te funcinará perfectamente.
      Gracias por tu comentario!

  • Morfil

    Hola dashft… mira tengo una pregunta, ¿como le doy estilos para la parte de frontend?, es decir como le asigno una clase de css (desde un archivo externo) al contenido que se va a ver desde el frontend.
    Saludos, muy buen tutorial

    • Hola Morfil! los css los puedes poner en la hoja de de estilos que viene en tu theme. Mientras coincidan los nombres asignados en el widget y en la hoja de estilos te funcinará perfectamente.
      Gracias por tu comentario!

  • Morfil

    Ejemplo: ‘
    //aquí ponemos todo lo que necesitamos, un buscador, un blogroll, un formulario para suscripción por mail…
    ‘;

    Donde coloco el archivo con el estilo para la clase “tu_veras”..saludos..

  • Morfil

    Ejemplo: ‘
    //aquí ponemos todo lo que necesitamos, un buscador, un blogroll, un formulario para suscripción por mail…
    ‘;

    Donde coloco el archivo con el estilo para la clase “tu_veras”..saludos..

  • smoogle

    seguí todos los pasos y en Widgets no aparece

  • smoogle

    seguí todos los pasos y en Widgets no aparece

  • Iván

    Si es sólo para crear un widget yo recomendaría el API Widget http://codex.wordpress.org/Widgets_API con el que se hereda de WP_Widget y se implementa el constructor, el método “form” con el que se genera el formulario del widget en el backend, el método “update” con el que se guarda la info de este formulario y el método “widget” con el que se muestra en el frontend la info que hemos guardado previamente.

    • Hola Iván! gracias por el apunte! la verdad es que este post ya tiene un tiempecito y las cosas han cambiado mucho desde entonces 🙂
      Gracias por el apunte!

    • Alan

      ¿Perdona y como se hace todo eso? De antemano te agradezco tu aportación.

  • Iván

    Si es sólo para crear un widget yo recomendaría el API Widget http://codex.wordpress.org/Widgets_API con el que se hereda de WP_Widget y se implementa el constructor, el método “form” con el que se genera el formulario del widget en el backend, el método “update” con el que se guarda la info de este formulario y el método “widget” con el que se muestra en el frontend la info que hemos guardado previamente.

    • Hola Iván! gracias por el apunte! la verdad es que este post ya tiene un tiempecito y las cosas han cambiado mucho desde entonces 🙂
      Gracias por el apunte!

    • Alan

      ¿Perdona y como se hace todo eso? De antemano te agradezco tu aportación.

  • Daniel

    ¡Muchas gracias! Justo lo que buscaba.

¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies