• 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

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

js optimización

Suscríbete a DecodeCMS:  

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar contenido solo a usuarios que compraron un producto en WooCommerceMostrar contenido solo a usuarios que compraron un producto en WooCommerce
  • Optimizar la carga de Javascript en WordPress con Async y DeferOptimizar la carga de Javascript en WordPress con Async y Defer
  • Agregar Iconos Font Awesome en el menú de WordPressAgregar Iconos Font Awesome en el menú de WordPress
  • Deshabilitar métodos de pago en WooCommerce según el total de pedidoDeshabilitar métodos de pago en WooCommerce según el total de pedido
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

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

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Eliminar Opciones de Pantalla en WordPress

Optimizar la carga de Javascript en WordPress con Async y Defer

Formulario de login sin plugins en WordPress

Deshabilitar métodos de pago en WooCommerce según el total de pedido

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