• 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 / Recursos / Copiar al portapapeles en WordPress sin plugins

Copiar al portapapeles en WordPress sin plugins

Copiar al portapapeles en WordPress sin plugins

[ hace 8 meses ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

js mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En este artículo veremos cómo tener la funcionalidad de mostrar una imagen para copiar un texto al portapapeles en WordPress, veremos cómo realizar esto directamente a través de código.

 

Resultado Final

Al final obtendremos un botón de copiado al portapapeles que aparecerá al final del párrafo, tal como se muestra en la siguiente imagen:

Copiar al clipboard resultado final

 

  • El código que usaremos se basa en una clase CSS llamada “copy”, puedes usar esta clase en el contenedor del texto a copiar.
  • El texto a copiar será todo lo que sigue al caracter de “:”

 

Código PHP para cargar el archivo javascript

La funcionalidad de copiar al portapapeles es responsabilidad del navegador y la conseguimos usando código Javascript, para esto colocaremos el código en un archivo llamado script.js, dentro de la carpeta js, como parte del tema hijo.

Código PHP necesario para encolar el archivo javascript y hacer referencia a la ruta de la imagen

add_action("wp_enqueue_scripts", "dcms_insertar_js");
function dcms_insertar_js(){
    wp_register_script('miScript', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
    wp_localize_script('miScript', 'copyImg', get_stylesheet_directory_uri().'/img/copy.svg' );
    wp_enqueue_script('miScript');
}

 
Adicional a esto necesitaremos la imagen llamada copy.svg, que estará dentro de la carpeta img del tema hijo Descargar imagen

 

Código Javascript para la funcionalidad de copiado al portapapeles

Puedes usar el siguiente código como parte del archivo script.js encolado anteriormente.

En el código anterior:

  • Agregamos una imagen en todos los contenedores que tengan la clase ‘copy’ y además que tengan el caracter ‘:’ como parte del texto
  • Cuando se hace click en la imagen se mostrará temporalmente un mensaje de copiado
  • Utilizamos la función auxiliar copyToClipboard para realizar la copia al portapapeles

 

Usando la funcionalidad de copiado

En el editor Gutenberg puedes crear un párrafo y separar el texto a copiar con el caracter ‘:’

creación de párrafo

 

Luego puedes establecer la clase ‘copy’ en las propiedades del bloque de párrafo

Establecimiento de la clase copy

 

Conclusión

Como has podido comprobar puedes agregar la funcionalidad de copiar al portapapeles de manera simple directamente a través de código.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Relación bidireccional entre diferentes tipos de contenido con ACFRelación bidireccional entre diferentes tipos de contenido con ACF
  • Creación dinámica de Custom Post Types en WordPressCreación dinámica de Custom Post Types en WordPress
  • Mostrar / ocultar bloques Gutenberg para usuarios registrados o visitantesMostrar / ocultar bloques Gutenberg para usuarios registrados o visitantes
  • Borrar tablas wp_actionscheduler_actions y wp_actionscheduler_logsBorrar tablas wp_actionscheduler_actions y wp_actionscheduler_logs
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jose

    5 agosto, 2022

    Buenos días y gracias por compartir sus conocimientos. Una consulta aparte por favor. Tengo una tienda online en Woocommerce y quisiera saber como puedo imprimir y/o exportar a pdf los “pedidos completados”, en una impresora de papel térmico, es decir, 80mm o similar. Un millón de gracias.

    • Jhon Marreros Guzmán

      5 agosto, 2022

      Hola, podrías probar un plugin, adaptar una de las plantillas de facturas para la impresora que tienes, revisa: https://es.wordpress.org/plugins/woocommerce-pdf-invoices-packing-slips/

      • Jose

        5 agosto, 2022

        Ok gracias por responder, ya he visto ese plugin pero solo viene predeterminado para papel tamaño carta y A4, y no se como hacerlo porque apenas estoy metiéndome en este mundo. No seria posible que me pudiera por lo menos ayudar sobre como se podría modificar ese plugin para que tome ese tamaño de papel? Gracias y disculpe.

        PD: La impresora que tengo es la XPrinter modelo XP-58IIH. Ojala pueda ayudarme.

  2. Jose Henao

    7 agosto, 2022

    O de que otra forma puedo lograr imprimir en dicho tamaño de papel. Le agradezco de verdad. Tengo un proyecto que hice y me piden esa opción. Gracias de verdad.

    • Jhon Marreros Guzmán

      8 agosto, 2022

      Hola, por lo que comentas es algo muy personalizado, tendrías que hacerlo directamente con PHP, construyendo un plugin por ejemplo y creando el reporte por código, revisa por ejemplo el siguiente artículo de guía: https://parzibyte.me/blog/2017/09/10/imprimir-ticket-en-impresora-termica-php/

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

Metadata de imágenes en WordPress

Páginas en ancho completo en el tema Storefront

Poner WordPress en Mantenimiento sin plugins

Instalar WordPress localmente con MAMP

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