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.
La entrada Copiar al portapapeles en WordPress sin plugins es un artículo reciente del sitio DecodeCMS.
0 Commentaires