• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cómo duplicar un Widget en WordPress con Javascript

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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de 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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Insertar código fuente en WordPress usando Prism

Cambiar el logo en la versión móvil de tu sitio Web

Mostrar mensajes en la administración de WordPress y en Gutenberg

Contenido de relleno para probar Gutenberg

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados