¿Cómo crear un evento onclick en una imagen dentro de una entrada?

Question

¿Cómo crear un evento onclick en una imagen dentro de una entrada?

2 abr 2018, 18:37:23

Vistas: 21.7K

Votos: 1

Esto es lo que debería ser:

<img onclick="og_load();" style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="Botón de descarga" width="455" height="116">

Pero se sigue transformando en:

<img style="cursor: pointer;" src="/wp-content/uploads/2018/04/downloadnow1.png" alt="Botón de descarga" width="455" height="116" />

Supongo que hay que añadir algo en el functions.php pero la solución está más allá de mis conocimientos, ¿alguien podría echarme una mano?

Saludos.

Edición: Hmm leí preguntas ligeramente diferentes pero todas indicaban que tiene algo que ver con el editor de texto de WP.

Y el código es para llamar a un bloqueador de contenido cuyo script añadí a la etiqueta head.

En un sitio estático ya lo tengo funcionando pero como el editor sigue cambiando el código no llamará al bloqueador.

Intenté esto para eliminar la limitación de etiquetas

Método 1: Deshabilitar el filtrado de WordPress de etiquetas script

Si confías en que tus autores no se meterán en problemas, puedes deshabilitar el bloqueo de etiquetas script desde JavaScript. En wp-config.php dentro de tu directorio raíz web, necesitarás habilitar etiquetas personalizadas añadiendo la siguiente línea de código:

define( 'CUSTOM_TAGS', true );

Dentro de tu página functions.php, puedes añadir el siguiente código:

function add_scriptfilter( $string ) { global $allowedtags; $allowedtags['script'] = array( 'src' => array () ); return $string; } add_filter( 'pre_kses', 'add_scriptfilter' );

Desafortunadamente eso dio este error:

Warning: in_array() expects parameter 2 to be array, null given in /home/a7480/public_html/wp-includes/kses.php on line 1416

Y para aclarar, es una imagen en una entrada que cuando se hace clic necesita llamar al bloqueador de contenido.

Actualización:

Ok esto es raro, cuando reemplazo la URL de la imagen en "inspeccionar elemento" con

<img onclick="og_load();" style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="Botón de descarga" width="455" height="116">

Funciona...

Ahora hay que averiguar cómo hacer que realmente funcione.

Última actualización: Santa madre de Dios, finalmente lo conseguí hacer funcionar, lo único que apesta es que si cambio al editor visual elimina el código.

Space Money

11

funciones

Comentarios

¿Puedes publicar tu código PHP para mostrar la imagen? Esto no es suficiente para ofrecer ayuda/orientación

Pabamato

2 abr 2018 18:43:19

Lo siento, no sé a qué código PHP te refieres. Obviamente no soy el mayor experto en WP :)

Space Money

2 abr 2018 19:29:27

En mi opinión, no vas a solucionar el problema editando cosas manualmente (bueno, podrías, pero te tomaría mucho tiempo). Siguiendo la orientación de mi solución, podrás corregir todas las instancias futuras del problema. (Esto asumiendo que necesitas 'corregir' todas las instancias de una etiqueta img en todas las publicaciones.) Incluso así, se podría ajustar la solución para que solo se aplique a imágenes donde hayas puesto manualmente una 'clase' específica en las imágenes a las que quieras agregar esa función onclick. Pero el problema debe solucionarse 'programáticamente', no manualmente. Y eso requerirá conocimientos de PHP, de tu parte o de alguien más.

Rick Hellewell

3 abr 2018 03:22:04

El editor visual elimina el onclick por defecto. Este comportamiento puede anularse usando el tiny_mce_before_init. Deberías poder adaptar esta solución para que apunte a etiquetas img en lugar de enlaces.

Dave Romsey

4 abr 2018 23:55:44

Todas las respuestas a la pregunta

Comentarios

A mí me sonó más como que la imagen <img> está en el contenido de la publicación. Por lo tanto, la parte sobre la jerarquía de plantillas es irrelevante.

swissspidy

2 abr 2018 19:05:46

No está claro a qué se refiere el OP. Yo lo vi como un problema de plantilla del tema. Tú no. No es una buena razón para votar negativamente mi respuesta, en mi opinión, especialmente dado que mi párrafo final decía que se necesita más información.

Rick Hellewell

2 abr 2018 19:20:22

La imagen está efectivamente en el contenido de la publicación.

Space Money

2 abr 2018 19:31:52

Entonces tal vez esto te ayude: https://www.sitepoint.com/wordpress-change-img-tag-html/, que muestra cómo agregar un filtro para cambiar la etiqueta img. Esta publicación https://wordpress.stackexchange.com/questions/81522/change-html-structure-of-all-img-tags-in-wordpress te ayudará a comenzar sobre cómo usar el objeto DOM para cambiar todas las etiquetas img y agregar el evento on-click. Depende de cuándo quieras agregar ese parámetro onclick a la etiqueta img; al 'guardar' la publicación o al 'ver' la publicación. Personalmente usaría el objeto DOM, ya que parece que quieres agregar esa función para todas las etiquetas img.

Rick Hellewell

2 abr 2018 19:36:56

Gracias Rick, voy a revisarlo ahora mismo.

Space Money

2 abr 2018 19:48:10

Mostrar los 1 comentarios restantes

Rick Hellewell 7.11K · Answer 1 · 2018-04-02T18:51:11Z

Sin entrar en detalles específicos, en general, el código de la página que se genera es producido por el código de tu tema. Por lo tanto, necesitarías revisar la plantilla del tema que se utiliza para esa página.

La plantilla utilizada está determinada por la Jerarquía de Plantillas de WordPress, los detalles están aquí: https://developer.wordpress.org/themes/basics/template-hierarchy/; revisa el gráfico que te ayudará a entender qué plantilla se está utilizando.

Luego, revisa ese archivo de plantilla para encontrar qué está generando la etiqueta 'img'. Esto requerirá un poco de investigación. Una vez que encuentres ese código, publícalo aquí para obtener más ayuda.

También es posible utilizar el objeto DOM para modificar todas las etiquetas 'img' con algo de JavaScript, pero eso afectará a todas las etiquetas 'img', lo cual puede no ser lo que deseas. Hay muchos tutoriales sobre cómo hacer eso.

Pero sin más detalles del código que genera la etiqueta 'img', es difícil darte una respuesta definitiva. El proceso anterior te ayudará a descubrir cuál es ese código.

Adicional

Aquí hay un código que cambiará el atributo 'class' en un objeto DOM:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // suprimir errores
    $dom->loadHTML($html, LIBXML_NOERROR);  // suprimir errores
    // img = cambiar clase a myclass (eliminando cualquier otra declaración de clase)
    foreach ($dom->getElementsByTagName('img') as $node) {
        $node->setattribute('class','myclass');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // guarda el objeto (todo el html) para poder retornarlo   
    return $html;
}

Basado en ese código, y en el Objeto DOM mismo, deberías poder averiguar cómo agregar el elemento onclick a la etiqueta img. Nota que el código anterior cambiará todas las etiquetas img.

Luego solo debes averiguar cómo agregar la función al filtro the_content()... pista: https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM es algo interesante para conocer. Hay muchas cosas que puedes hacer con el objeto DOM.

(Nota que te estoy dando orientación sobre cómo aprender a realizar la tarea y cómo implementarla. Es bueno aprender cosas.)