Cómo crear un complemento de widgets para WordPress

WordPress es un sorprendente sistema de gestión de contenido con muchas funciones excelentes, como widgets. En este tutorial, le explicaré cómo crear sus propios widgets dentro de un pequeño complemento. Esta publicación cubrirá algunos puntos adicionales que debe comprender antes de crear el widget en sí. Aquí vamos!


Paso 1: crea tu complemento de widgets

Recientemente creé un complemento llamado “Freelancer Widgets Bundle”, y algunas personas me preguntaron cómo crear dicho complemento, así que decidí escribir esta publicación. El primer paso es la creación del complemento. Y como verá, no es la parte más difícil. Un complemento es un código adicional agregado a WordPress una vez que lo activa. WordPress crea un bucle a través de una carpeta para recuperar todos los complementos disponibles y enumerarlos en la oficina administrativa. Para crear su complemento, necesitará un editor como Coda (Mac) o Dreamweaver (PC y Mac). Le recomiendo que cree su complemento en una instalación local de WordPress, ya que hacerlo en un servidor en vivo puede causar algunos problemas si comete un error. Entonces, espere para probar nuestro complemento antes de colocar su alojamiento.

Abra ahora la carpeta wp-content / plugins. Aquí es donde vas a agregar tu complemento. Cree un nuevo directorio y llámelo “widget-plugin” (en realidad, este nombre puede ser lo que quiera). Aunque nuestro complemento solo tenga un único archivo, siempre es mejor usar una carpeta para cada complemento. En su directorio, cree un nuevo archivo llamado “widget-plugin.php” (este nombre también se puede cambiar) y ábralo. Ahora estamos a punto de agregar nuestras primeras líneas de código. La definición de un complemento en WordPress sigue algunas reglas que puedes leer aquí en el códice. Así es como WordPress define un complemento:

Entonces, tenemos que modificar este código para que se ajuste a nuestras necesidades:

Guarda tu archivo. ¡Al agregar solo código a nuestro archivo widget-plugin.php, hemos creado un complemento! Bueno, por ahora el complemento no hace nada, pero WordPress lo reconoce. Para asegurarse de que sea así, vaya a su administración y vaya al menú "Complementos". Si su complemento aparece en la lista de complementos, es bueno, de lo contrario, asegúrese de seguir mis instrucciones e intente nuevamente. Ahora puedes activar el complemento.

Paso 2: crea el widget

Ahora vamos a crear el widget en sí. Este widget será una clase PHP que extenderá la clase principal de WordPress WP_Widget. Básicamente, nuestro widget se definirá de esta manera:

// La clase de widget
La clase My_Custom_Widget extiende WP_Widget {

// Constructor principal
función pública __construct () {
/ * ... * /
}

// El formulario del widget (para el backend)
formulario de función pública ($ instancia) {
/ * ... * /
}

// Actualizar la configuración del widget
actualización de la función pública ($ new_instance, $ old_instance) {
/ * ... * /
}

// Mostrar el widget
widget de función pública ($ args, $ instancia) {
/ * ... * /
}

}

// Registra el widget
function my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Este código le da a WordPress toda la información que el sistema necesita para poder usar el widget:

  1. los constructor, para iniciar el widget
  2. los función form () para crear el formulario del widget en la administración
  3. los función update (), para guardar los datos del widget durante la edición
  4. Y el función widget () para mostrar el contenido del widget en el front-end

1 - El constructor

El constructor es la parte del código que define el nombre del widget y los argumentos principales, a continuación se muestra un ejemplo de cómo se verá..

// Constructor principal
función pública __construct () {
parent :: __ construct (
'my_custom_widget',
__ ('Mi widget personalizado', 'dominio_texto'),
formación(
'personalizar_selectivo_refresh' => verdadero,
)
);
}

No utilice __ () alrededor del nombre del widget, WordPress utiliza esta función para la traducción. Realmente te recomiendo que uses siempre estas funciones, para que tu tema sea totalmente traducible. Y el uso del parámetro "personalizar_selectivo_refrescar" permite que el widget se actualice en Apariencia> Personalizar al editar el widget, por lo que en lugar de actualizar toda la página, solo se actualiza el widget al realizar cambios.

2 - La función form ()

Esta función es la que crea la configuración del formulario del widget en el área de administración de WordPress (ya sea en Apariencia> Widgets o Apariencia> Personalizar> Widgets). Aquí es donde ingresará sus datos para que se muestren en el sitio web. Así que explicaré cómo puede agregar campos de texto, áreas de texto, cuadros de selección y casillas de verificación a la configuración del formulario del widget.

// El formulario del widget (para el backend)
formulario de función pública ($ instancia) {

// Establecer valores predeterminados del widget
$ valores predeterminados = matriz (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analiza la configuración actual con los valores predeterminados
extract (wp_parse_args ((array) $ instancia, $ valores predeterminados)); ?>


/>

Este código simplemente agrega 5 campos al widget (Título, texto, área de texto, selección y casilla de verificación). Entonces, primero define los valores predeterminados para su widget, luego la siguiente función analiza la configuración actual definida / guardada para su widget con los valores predeterminados (por lo que cualquier configuración que no exista volvería a la predeterminada, como cuando agrega un widget por primera vez) tu barra lateral). Y el último es el html para cada campo. Observe el uso de esc_attr () al agregar los campos del formulario, esto se hace por razones de seguridad. Siempre que haga eco de una variable definida por el usuario en su sitio, debe asegurarse de que primero se desinfecte.

3 - La función update ()

La función update () es realmente simple. Como los desarrolladores principales de WordPress agregaron una API de widgets realmente poderosa, solo necesitamos agregar este código para actualizar cada campo:

// Actualizar la configuración del widget
actualización de la función pública ($ new_instance, $ old_instance) {
$ instancia = $ instancia_antigua;
$ instancia ['título'] = isset ($ nueva_instancia ['título'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instancia ['texto'] = isset ($ nueva_instancia ['texto'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instancia ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falso;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
devolver $ instancia;
}

Como puede ver, todo lo que tenemos que hacer es verificar cada configuración y, si no está vacía, guárdela en la base de datos. Observe el uso de las funciones wp_strip_all_tags () y wp_kses_post (), que se utilizan para desinfectar los datos antes de agregarlos a la base de datos. Siempre que inserte CUALQUIER contenido enviado por el usuario en una base de datos, debe asegurarse de que no tenga ningún código malicioso. La primera función wp_strip_all_tags elimina todo excepto el texto básico, por lo que puede usarlo para cualquier campo donde el valor final sea una cadena y la segunda función wp_kses_post () es la misma función utilizada para el contenido de la publicación y elimina todas las etiquetas además de html básico como enlaces , tramos, divs, imágenes, etc..

4 - La función widget ()

La función widget () es la que generará el contenido en el sitio web. Es lo que verán tus visitantes. Esta función se puede personalizar para incluir clases CSS y etiquetas específicas para que coincidan perfectamente con la visualización de su tema. Aquí está el código (no es que este código pueda modificarse fácilmente para satisfacer sus necesidades):

// Mostrar el widget
widget de función pública ($ args, $ instancia) {

extracto ($ args);

// Comprueba las opciones del widget
$ title = isset ($ instancia ['título'])? apply_filters ('widget_title', $ instancia ['título']): '';
$ text = isset ($ instancia ['texto'])? $ instancia ['texto']: '';
$ textarea = isset ($ instancia ['textarea'])? $ instancia ['textarea']: '';
$ select = isset ($ instancia ['select'])? $ instancia ['select']: '';
$ casilla de verificación =! vacío ($ instancia ['casilla de verificación'])? $ instancia ['casilla de verificación']: falso;

// WordPress core before_widget hook (incluir siempre)
echo $ before_widget;

// Mostrar el widget
eco '
'; // Mostrar el título del widget si está definido if ($ título) { echo $ before_title. $ title. $ after_title; } // Mostrar campo de texto if ($ texto) { eco '

'. $ texto. '

'; } // Mostrar campo de área de texto if ($ textarea) { eco '

'. $ textarea. '

'; } // Mostrar campo de selección if ($ select) { eco '

'. $ select. '

'; } // Mostrar algo si la casilla de verificación es verdadera if ($ casilla de verificación) { eco '

Algo asombroso

'; } eco '
'; // WordPress core after_widget hook (siempre incluir) echo $ after_widget; }

Este código no es complejo, todo lo que debe recordar es verificar si una variable está configurada, si no lo hace y si desea imprimirlo, recibirá un mensaje de error.

El código completo del complemento del widget

Ahora, si ha estado siguiendo correctamente, su complemento ahora debería ser completamente funcional y puede personalizarlo para satisfacer sus necesidades. Si no ha seguido la guía o desea verificar el código, puede visitar la página de Github para ver el código completo.

Ver código completo en Github

Conclusión

Vimos que crear un widget dentro de un complemento es muy interesante, ahora debe saber cómo crear un complemento simple que contenga un widget con diferentes tipos de campo y aprendió a ir un poco más allá utilizando técnicas avanzadas para personalizar el widget. Felicidades, hiciste un trabajo increíble!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map