Cómo duplicar un Widget en WordPress con Javascript

[ 11 agosto 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

¿Alguna vez has duplicado el contenido de un Widget, creando uno nuevo?, si te ha pasado, te entiendo, es lo que comúnmente se hace, sin embargo existe otra alternativa; en este artículo veremos cómo duplicar un Widget con Javascript.

Explicaré a continuación un caso real.

Generalidades

Tenemos un Widget de texto, con código HTML, que muestra los links de redes sociales de nuestro sitio, pero queremos mostrarlo en dos lugares distintos de nuestro sitio web.

De momento tenemos agregado el Widget de texto en la posición header del theme, pero queremos mostrarlo adicionalmente en otra sección de nuestro sitio y que no necesariamente sea una posición de la plantilla.

Duplicando el Widget

Ubicamos la clase contenedora del widget que queremos duplicar, en este caso usaremos directamente la clase: social-icons.
Necesitamos también la clase del contenedor destino, en el caso del theme de ejemplo usaremos la clase del footer llamada: site-footer
Localizamos algún archivo jasvascript que el theme ya este cargando.
Finalmente usaremos jquery con el siguiente código en javascript para duplicar el Widget


(function($){
	$('.social-icons').clone().appendTo('.site-footer');
})(jQuery);

Tener en cuenta

Este código se ejecutará una vez cargado jquery y cargado el código HTML del Widget a duplicar.
Para ubicar la clase CSS de destino en nuestro theme podemos usar Firebug.
Podemos obviar la envoltura de jquery en caso ya tengamos esto en nuestro archivo javascript.

¿Aún con dudas?, revisa el siguiente video con el cual se aclaran todos los puntos comentados anteriormente.