Saltar al contenido principal

¿Cómo crear un widget personalizado en WordPress

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

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]

¿Quieres crear tus propios widgets personalizados en WordPress?

Los widgets le permiten arrastrar y soltar elementos en cualquier barra lateral o área de widgets de su sitio web. En este artículo, le mostraremos cómo crear fácilmente un widget personalizado de WordPress.

Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog

Luego de vuelta a por qué estamos aquí.

¿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 interfaz simple de "Arrastrar y soltar".

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

Descubrir también nuestros mejores temas premium 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, puedes agregar un formulario de contacto, un formulario de inicio de sesión personalizado o una galería de fotos en una barra lateral sin escribir ningún código.

Dicho esto, veamos cómo crear fácilmente sus 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, sería mejor crear un complemento específico en el sitio web donde pegue el código del widget para este tutorial.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

También puede pegar el código en el archivo "functions.php" de su tema de WordPress. Sin embargo, solo estará disponible cuando ese tema particular de WordPress 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.

// 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, debe 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 echemos un vistazo a este código.

Primero, grabamos " wpb_widget Y cargó 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 es posible que desee saber. Por ejemplo, cuál es el objetivo " Wpb_text_domain »?

¿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]

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 de WordPress, puede reemplazar "wpb_text_domain" con el texto del dominio de su tema.

Descubre también algunos complementos premium de WordPress

Puede usar otros complementos de WordPress para darle un aspecto moderno y optimizar el agarre de su blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Galaxy Funder

Galaxy Funder es un sistema de crowdfunding diseñado para cualquier sitio web de WooCommerce y rico en funciones. Con el complemento premium de WordPress Galaxy Funder, puede administrar su propio sitio web de crowdfunding o agregar campañas de recaudación de fondos en el encabezado de su tienda en línea WooCommerce.

También puedes usar cualquier pasarela de pago compatible con WooCommerce. Tenga en cuenta que "Galaxy Funder" funciona directamente en la página de la tienda en línea, lo que facilita el proceso de contribución del usuario.

Descargar | Demo | alojamiento web

2. Haga clic para WhatsApp Chat

El complemento premium de WordPress Click to WhatsApp Chat permite a los clientes de WordPress conectarse fácilmente con el propietario del sitio web o el soporte al cliente utilizando su cuenta de WhatsApp.

Simplemente haga clic en la cuenta de WhatsApp y se dirigirá directamente a la cuenta de WhatsApp móvil con un mensaje predeterminado. Y si el cliente está en una computadora de escritorio o portátil, será redirigido a WhatsApp Web.

Este complemento requiere el número, la hora y el día de WhatsApp, que el propietario del sitio web o el equipo de soporte utilizarán para chatear. El botón de chat se puede agregar a la página de detalles del producto WooCommerce, que está directamente relacionado con este producto.

Descargar | Demo | alojamiento web

3. Descargar Image Watermark

Esta extensión premium de WordPress le permite agregar fácilmente marcas de agua a sus imágenes Fácil descargas digitales.marca de agua digital-de descarga de archivos de imágenes fácil

Ces marcas de agua puede ser una imagen de símbolo de copyright, un logotipo de la empresao parte de la imagen de marca como una imagen PNG transparente.

Descargar | Demo | alojamiento web

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. [Recomendado]

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

Conclusión

Listo ! Eso es todo por este tutorial, espero que te permita crear widgets personalizados en tu blog de WordPress. Si tienes comentarios o sugerencias, no dude en hacérnoslo saber en la sección reservada.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...

Este artículo contiene los comentarios 0

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.

Volver arriba
10 acciones
cuota8
Tweet1
Siguiente 1