WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Cómo crear un widget personalizado en WordPress

Jorge López by Jorge López
12 enero 2018
in General
Reading Time: 4 mins read
0

Los sidebars nos permiten agregar contenido adicional en la portada, en posts, páginas y demás zonas de nuestro WordPress. Estos sidebars se nutren de widgets, que a fin de cuentas son fragmentos de código que actuan como módulos independientes en nuestra plataforma. WordPress nos ofrece ciertos widgets por defecto, pero es muy fácil que echemos en falta ciertas funcionalidades a añadir en nuestro sidebar. En este artículo te mostraremos cómo crear de forma sencilla un widget personalizado en WordPress.

Los widgets por defecto nos vienen de perlas en la mayoría de ocasiones. Widgets tan útiles como el de Texto, el de entradas más recientes, el de entradas más populares o el de categorías, nos han salvado de más de un apuro. Pero claro, son widgets genéricos, pensados para que sean apropiados en la mayoría de casos, pero con poco que nuestro sitio web se salga de la norma de lo que es un WordPress, es probable que necesitemos widgets con otras funcionalidades.

Seguramente alguna vez has descargado un tema o un plugin, y al entrar en la sección de Widgets has visto que hay nuevos widgets relacionados con dicho tema o con dicho plugin. Esto se debe a que, por suerte, WordPress permite a los desarrolladores crear sus propios widgets personalizados. Estos widgets también pueden ser agregados al sidebar que designes necesario.

Artículos relacionados

Presentando el nuevo editor de WordPress: Proyecto Gutenberg

4 junio 2018

Referencias WordPress para 4-septiembre-2012

4 septiembre 2012

Consejos útiles a la hora de crear un blog en WordPress

13 marzo 2018

¿Qué novedades trae la nueva versión de WordPress 5.2.4?

16 octubre 2019

Pero no todo iba a ser bueno. Para crear widgets personalizados, lógicamente debes tener nociones de desarrollo web. Si no es tu caso, te recomiendo que dejes de leer aquí y que busques lo que necesitas en el repositorio de plugins de WordPress. Es decir, si necesitas mostrar el botón de Periscope en un sidebar, quizás haya algún plugin que pueda ayudarte con ello.

Crear un widget personalizado en WordPress

Antes de empezar, también debes saber cómo pegar código en los ficheros del tema que estés actualizando actualmente en tu WordPress, y como he dicho antes, algo de idea sobre programación, lógicamente. Si no has hecho esto nunca, visita nuestro artículo sobre cómo editar ficheros de WordPress mediante un cliente FTP.

El widget personalizado que vamos a crear en este tutorial saludará a nuestros visitantes. Presta atención al código y pégalo en el fichero functions.php del tema que estés utilizando actualmente para verlo en acción.

// Registramos el widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creamos el widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// El ID de nuestro widget
'wpb_widget', 

// El nombre con el cual aparecerá en el backoffice de WP
__('Widget de Prueba', 'wpb_widget_domain'), 

// Descripción del widget
array( 'description' => __( 'Ejemplo para probar widget personalizado', 'wpb_widget_domain' ), ) 
);
}

// Creamos la parte pública del widget

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );

// los argumentos del antes y después del widget vienen definidos por el tema
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// Aquí es donde debemos introducir el código que queremos que se ejecute
echo __( 'Hola Mundo', 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Backend  del widget
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Titulo', 'wpb_widget_domain' );
}
// Formulario del backend
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Titulo:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
	
// Actualizamos el widget reemplazando las viejas instancias con las nuevas
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // La clase wp_widget termina aquí

Una vez hecho esto, tenemos que ir a Apariencia > Widgets. Verás el nuevo widget que acabamos de crear en la lista de widgets disponibles. Solo tienes que arrastrarlo al sidebar donde quieras mostrarlo y soltarlo.

widget personalizado

Ahora puedes visitar la parte pública de tu sitio web para verlo en acción.

widget personalizado

¿Pero qué hemos hecho en el código?

Lo primero que hemos hecho es registrar «wp_widget» y cargarlo en nuestro widget personalizado. Una vez hecho esto tendremos que definir qué va a hacer el widget, y como lo mostraremos en el backoffice.

Seguramente tengas algunas dudas, como por ejemplo, ¿cuál es el propósito wp_text_domain?

WordPress utiliza gettext para gestionar las traducciones y la localización. Este wp_text_domain y __e le indican a gettext que cree una cadena para la traducción. Si estás creando un widget personalizado para tu tema, puede reemplazar wp_text_domain por el dominio de texto de tu tema.

Y hasta aquí nuestro artículo sobre cómo mostrar los próximos posts programados en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Icono: Hector

 

Guardar

Tags: crear widgetscrear widgets en WordPresswidgetswidgets personalizados
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

General

Atajos con el mouse para trabajar más rápido en el computador

16 junio 2025

Hoy en día, saber usar bien el computador no significa solo conocer atajos de...

General

WordPress 6.8 acelera la web con carga especulativa: el rendimiento invisible que mejora la experiencia de millones

31 mayo 2025

Una innovación silenciosa que mejora la velocidad de navegación sin intervención del usuario, gracias...

General

Scallywag: la operación de fraude publicitario que explotó plugins de WordPress para generar 1.400 millones de peticiones falsas al día

22 abril 2025

Una red internacional de fraude publicitario denominada Scallywag ha sido desmantelada tras generar hasta...

General

Optimización de Velocidad Web con Perfmatters en 2025

20 marzo 2025

La velocidad de carga de una página web es un factor crítico para la...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Willbrige un impresionante tema para WordPress

11 enero 2016

¿Qué es el rel=»noopener» de WordPress y cómo eliminarlo?

22 octubre 2024

Las mejores plantillas de WordPress para un safari

25 marzo 2019

Graves vulnerabilidades afectan a populares complementos de WordPress para sitios inmobiliarios

23 enero 2025

Referencias WordPress para 4-septiembre-2012

4 septiembre 2012
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.