Saltar al contenido principal

¿Cómo crear un widget personalizado en WordPress

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

¿Desea crear sus propios widgets personalizados en WordPress? Los widgets te permiten arrastrar y soltar elementos en cualquier barra lateral o área de widgets preparada para tu sitio. En este artículo, le mostraremos cómo crear fácilmente un widget de WordPress personalizado.

¿Qué es un widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puede agregar a las barras laterales de su sitio web o a las áreas compatibles con widgets. Piense en ello como módulos que puede usar para agregar diferentes elementos usando una sencilla interfaz de "arrastrar y soltar".

Por defecto, WordPress viene con un conjunto estándar de widgets que puede usar con cualquier tema de WordPress.

WordPress también permite a los desarrolladores crear sus propios widgets personalizados. Muchos temas y complementos de WordPress vienen con sus propios widgets personalizados que puede agregar a sus barras laterales.

Por ejemplo, puede agregar un formulario de contacto, un formulario de inicio de sesión personalizado o una galería de fotos a una barra lateral sin escribir ningún código.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Dicho esto, veamos cómo crear fácilmente tus propios widgets personalizados en WordPress.

Cómo crear un widget personalizado en WordPress

Este tutorial es para personas que tienen conocimiento del desarrollo web.

Antes de comenzar, es posible que desee crear un complemento específico en el sitio donde pegue el código del widget para este tutorial.

También puede pegar el código en el archivo "functions.php" de su tema. Sin embargo, solo estará disponible cuando este tema en particular esté activo.

En este tutorial, crearemos un widget simple que simplemente saludará a los visitantes. Mire este código, luego péguelo en su complemento específico para verlo en acción.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

// Registrar y cargar el wpb_load_widget función widget de () {register_widget ( 'wpb_widget'); } Add_action ( 'widgets_init', 'wpb_load_widget'); // Crear el wpb_widget clase Widget extiende WP_Widget {__construct función () {parent :: __ construct (// Base ID de tu widget wpb_widget '// Nombre de control aparecerá en IU __ (' PCB Widget '' wpb_widget_domain ') // Descripción Widget array ( 'description' => __ ( 'simple Widget WordPress', 'wpb_widget_domain'))); } // widget de la función pública de front-end widget de Creación ($ args, $ ejemplo) {$ title = apply_filters ( 'widget_title' $ instancia [ 'titulo']); // antes y después en widgets argumentos están definidas por temas echo $ args [ 'before_widget']; if (! empty ($ título)) echo $ args [ 'before_title']. $ Título. $ Args [ 'after_title']; // Aquí es donde se ejecuta el código y mostrar el eco de salida __ ( 'Widget simple', 'wpb_widget_domain'); echo $ args [ 'after_widget']; } // Widget backend forma de función pública ($ ejemplo) {if (isset ($ instancia [ 'titulo'])) {$ title = $ instancia [ 'titulo']; } Else {$ title = __ ( 'Nuevo título', 'wpb_widget_domain'); ?} // formulario de administración Widget> <p> <label for = "<? Php echo $ this-> get_field_id ( 'titulo');>?"> <_e PHP? ( 'Título:'); ?> </ Label> <input class = "widefat" id = "<? Php echo $ this-> get_field_id ( 'titulo');?>"? Name = "<? Php echo $ this-> get_field_name ( 'titulo'? );?> "type =" text "value =" <? php echo esc_attr ($ titulo);???> "/> </ p> <? php} // actualización de instancias de widgets reemplazo viejo con la nueva actualización de la función pública ($? new_instance, old_instance $) {$ instance = array (); $ Instancia [ 'titulo'] = (! Empty ($ new_instance [ 'titulo']))? strip_tags ($ new_instance [ 'titulo']): ''; devolver $ instancia; }} // wpb_widget clase termina aquí

Después de agregar el código, debes ir a " Apariencia> Widgets ". Notarás el nuevo widget " PCB Widget En la lista de widgets disponibles. Debe arrastrar y soltar este widget en una barra lateral.

Ahora, al visitar su blog, verá un widget en la barra lateral donde agregó el widget en cuestión.

Ahora estudiemos un poco este código.

Primero, grabamos " wpb_widget Y cargamos nuestro widget personalizado. Luego definimos qué hace este widget y cómo mostrarlo en el tablero.

Finalmente, definimos cómo manejar los cambios realizados en el widget.

Ahora, hay algunas cosas que tal vez quiera saber. Por ejemplo, ¿cuál es el propósito? Wpb_text_domain "¿?"

WordPress utiliza "gettext" para gestionar la traducción y localización. Entonces " Wpb_text_domain Y __e le dice a gettext cómo recuperar una cadena de traducción si existe.

Si crea un widget personalizado para su tema, puede reemplazar "wpb_text_domain" con el campo de texto de su tema.

Eso es todo por este tutorial, espero que te permita crear widgets personalizados en tu blog de WordPress.

Dejar un comentario

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

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
18 acciones
cuota16
Tweet1
Siguiente 1
WhatsApp