• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Cómo duplicar un Widget en WordPress con Javascript
Anuncio banner webservi

Cómo duplicar un Widget en WordPress con Javascript

Clonar Widget Wordpress con JS

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

js optimización

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Widget de texto a duplicar

 

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
  • Añadir código de Google Analytics sin plugins en WordPressAñadir código de Google Analytics sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Cómo internacionalizar un plugin en WordPress

Añadir una nueva zona de Widgets a un theme WordPress

Agregar animaciones de aparición sin plugins en WordPress

Agregar archivos de fuentes tipográficas en WordPress

Recientes

  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
  • Añadir código de Google Analytics sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad