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:
- 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 ‘:’
Luego puedes establecer la clase ‘copy’ en las propiedades del bloque de párrafo
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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
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.
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/
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.
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.
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/