Cómo crear un plugin de widget para WordPress

Category: Tutorial 5 0

WordPress es un asombroso sistema de gestión de contenidos con muchas características geniales, como los widgets. En este tutorial, voy a explicarte cómo crear tus propios widgets dentro de un pequeño plugin. Este post cubrirá algunos puntos extra que necesitas entender antes de crear el widget en sí. Aquí lo tenemos!

Paso 1: Crea tu plugin de widgets

Recientemente he creado un plugin llamado "Freelancer Widgets Bundle", y algunas personas me preguntaron cómo crear dicho plugin, así que decidí escribir este post. El primer paso es la creación del plugin. Y como verán, no es la parte más difícil. Un plugin es un código extra que se añade a WordPress una vez que lo activas. WordPress crea un bucle a través de una carpeta para recuperar todos los plugins disponibles y listarlos en la oficina de atrás. Para crear tu plugin, necesitarás un editor como Coda (Mac), o Dreamweaver (PC & Mac). Te recomiendo que crees tu plugin en una instalación local de WordPress, hacerlo en un servidor en vivo puede causar algunos problemas si cometes un error. Así que por favor, espera a probar nuestro plugin antes de colocar en él tu hosting.

Abre ahora la carpeta wp-content/plugins. Aquí es donde vas a añadir tu plugin. Crea un nuevo directorio y llámalo "widget-plugin" (en realidad, este nombre puede ser el que quieras). Aunque nuestro plugin sólo tenga un único archivo, siempre es mejor usar una carpeta para cada plugin. En el directorio, crea un nuevo archivo llamado "widget-plugin.php" (este nombre también puede cambiarse), y ábrelo. Ahora estamos a punto de añadir nuestras primeras líneas de código. La definición de un plugin en WordPress sigue algunas reglas que puedes leer aquí en el códice. Aquí está cómo WordPress define un plugin:

pre line-numbers language-php"<?php /* Nombre del plugin: Nombre del Plugin Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates Descripción: Una breve descripción del Plugin. Versión: El número de versión del plugin y de los apos, por ejemplo: 1.0 Autor: Nombre del Autor del Plugin Autor URI: http://URI_Of_The_Plugin_Author Licencia: A "Slug" nombre de la licencia, por ejemplo, GPL2 */

Por lo tanto, tenemos que modificar este código para que se ajuste a nuestras necesidades:

pre line-numbers language-php"<?php /* Nombre del plugin: My Widget Plugin Plugin URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/ Descripción: Este plugin añade un widget personalizado. Versión: 1.0 Autor: AJ Clarke Autor URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/ Licencia: GPL2 */

Guarda tu archivo. Sólo añadiendo código a nuestro archivo widget-plugin.php hemos creado un plugin! Bueno, por ahora el plugin no hace nada, pero WordPress lo reconoce. Para asegurarte de que así sea, ve a tu administración, y ve a "Plugins" menú. Si tu plugin aparece en la lista de plugins estás bien, de lo contrario asegúrate de seguir mis instrucciones e inténtalo de nuevo. Ahora puedes activar el plugin.

Paso 2: Crear el Widget

Ahora vamos a crear el propio widget. Este widget será una clase PHP que extiende el núcleo de la clase WordPress WP_Widget. Básicamente, nuestro widget se definirá de esta manera:

La clase de los widgets class My_Custom_Widget extiende WP_Widget { // Constructor principal función pública __construir() { /* … */ } // La forma del widget (para el backend ) forma de función pública( $instancia ) { /* … */ } // Actualizar la configuración del widget actualización de la función pública( $nueva_instancia, $antigua_instancia ) { /* … */ } // Mostrar el widget widget de función pública( $args, $instance ) { /* … */ } } // Registrar el widget functionar mi_registro_widget_de_usuario() { 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. El constructor , para iniciar el widget
  2. La función form() para crear la forma de widget en la administración
  3. La función update() , para guardar los datos del widget durante la edición
  4. Y la 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 puede ser.

Pre-línea-números-lenguaje-fp"// Constructor principal función pública __construir() { padre::__construir( 'mi_vidente_de_acostumbre', 'mi_widget&apos personalizado;, 'text_domain' ), array( 'customize_selective_refresh' => true, ) ); }

Por favor, no uses __() alrededor del nombre del widget, esta función es usada por WordPress para la traducción. Realmente te recomiendo que siempre uses estas funciones, para hacer tu tema completamente traducible. Y el uso del parámetro customize_selective_refresh permite que el widget sea refrescado bajo Apariencia > Personalizar cuando se edita el widget, así que en lugar de refrescar toda la página sólo se refresca el widget cuando se hacen cambios.

2 – La función form()

Esta función es la que crea la configuración del formulario de los widgets en el área de administración de WordPress (ya sea en Apariencia > Widgets o Apariencia > Personalizar > Widgets). Aquí es donde introducirás tus datos para que aparezcan en el sitio web. Así que te explicaré cómo puedes añadir campos de texto, áreas de texto, casillas de selección y casillas de verificación a la configuración de tu formulario de widgets.

El formulario del widget (para el backend ) forma de función pública( $instancia ) { // Establecer los valores por defecto del widget $defaults = array( 'título' => '', 'texto' => '', 'textarea' => '', 'checkbox' => '', 'select' => '', ); // Analizar la configuración actual con los valores por defecto extract( wp_parse_args( ( ( array ) $instance, $defaults ) ); ?> <?php // Título del widget ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Widget Title', 'text_domain' ); ?></label> <input name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <?php // Campo de texto ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>"><?php _e( 'Text:', 'text_domain' ); ?></label> <input name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" value="<?php echo esc_attr( $text ); ?>" /> </p> <?php // Textarea Field ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'textarea' ) ); ?>"><?php _e( 'Textarea:', 'text_domain' ); ?></label> <textarea name="<?php echo esc_attr( $this->get_field_name( 'textarea' ) ); ?>"><?php echo wp_kses_post( $textarea ); ?></textarea> </p> <?php // Checkbox ?> <p> <input name="<?php echo esc_attr( $this->get_field_name( 'checkbox' ) ); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> /> <label for="<?php echo esc_attr( $this->get_field_id( 'checkbox' ) ); ?>"><?php _e( 'Checkbox', 'text_domain' ); ?></label> </p> <?php // Dropdown ?> <p> <label for="<?php echo $this<span

Related Articles