Come creare un evento onclick su un'immagine in un post?

Question

Come creare un evento onclick su un'immagine in un post?

2 apr 2018, 18:37:23

Visualizzazioni: 21.7K

Voti: 1

Questo è come dovrebbe essere:

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

Ma continua a trasformarsi in:

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

Suppongo che qualcosa debba essere aggiunto nel functions.php ma la soluzione è al di sopra delle mie conoscenze, qualcuno potrebbe darmi una mano?

Grazie.

Modifica: Hmm ho letto domande leggermente diverse ma tutte indicavano che ha qualcosa a che fare con l'editor di testo di WP.

E il codice serve per chiamare un content locker il cui script ho aggiunto al tag head.

In un sito statico sono già riuscito a farlo funzionare ma poiché l'editor continua a modificare il codice non chiamerà il locker.

Ho provato questo per rimuovere la limitazione dei tag

Metodo 1: Disabilitare il filtro WordPress dei tag script

Se ti fidi che i tuoi autori non si metteranno nei guai, puoi disabilitare il blocco dei tag script all'interno di JavaScript. Nel file wp-config.php all'interno della directory root del web, dovrai abilitare i tag personalizzati aggiungendo la seguente riga di codice:

define( 'CUSTOM_TAGS', true );

All'interno della tua pagina functions.php, puoi aggiungere il seguente codice:

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

Sfortunatamente questo ha generato questo errore:

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

E per chiarire è un'immagine in un post che quando cliccata deve chiamare il content locker.

Aggiornamento:

Ok questo è strano, quando sostituisco l'URL dell'immagine in "ispeziona elemento" con

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

Funziona...

Ora devo scoprire come farlo funzionare effettivamente.

Ultimo Aggiornamento: Santa madre di Dio finalmente sono riuscito a farlo funzionare, l'unica cosa che fa schifo è che se passo all'editor visuale rimuove il codice.

Space Money

11

funzioni

Commenti

Puoi pubblicare il tuo codice PHP per l'output dell'immagine? Non è sufficiente per fornire aiuto/indicazioni

Pabamato

2 apr 2018 18:43:19

Scusa non so a quale codice PHP ti riferisci. Non sono ovviamente il massimo esperto di WP :)

Space Money

2 apr 2018 19:29:27

IMHO, non risolverai il problema modificando manualmente le cose (beh, potresti, ma ci vorrà molto tempo). Seguendo le indicazioni della mia soluzione, sarai in grado di risolvere tutte le future occorrenze del problema. (Questo presupponendo che tu debba 'correggere' tutte le istanze di un tag img in tutti gli articoli.) Anche in quel caso, si potrebbe perfezionare la soluzione per applicarla solo alle immagini in cui hai inserito manualmente una specifica 'classe' nelle immagini a cui vuoi aggiungere quella funzione onclick. Ma il problema deve essere risolto 'programmaticamente', non manualmente. E questo richiederà una certa conoscenza di PHP, da parte tua o di qualcun altro.

Rick Hellewell

3 apr 2018 03:22:04

L'editor visivo rimuove di default gli attributi onclick. Questo comportamento può essere modificato utilizzando il filtro tiny_mce_before_init. Dovresti essere in grado di adattare questa soluzione in modo che agisca sui tag img invece che sui link.

Dave Romsey

4 apr 2018 23:55:44

Tutte le risposte alla domanda

Commenti

A me sembrava più che il <img> fosse nel contenuto del post. Quindi la parte sulla gerarchia dei template non è rilevante.

swissspidy

2 apr 2018 19:05:46

Non è chiaro a cosa si riferisca l'OP. Io l'ho interpretato come un problema con il template del tema. Tu no. Non è un buon motivo per votare negativamente la mia risposta, secondo me, soprattutto considerando che nel paragrafo conclusivo ho detto che servono maggiori informazioni.

Rick Hellewell

2 apr 2018 19:20:22

L'immagine è effettivamente nel contenuto del post.

Space Money

2 apr 2018 19:31:52

Allora forse questo ti aiuterà: https://www.sitepoint.com/wordpress-change-img-tag-html/, che mostra come aggiungere un filtro per modificare il tag img. Questo post https://wordpress.stackexchange.com/questions/81522/change-html-structure-of-all-img-tags-in-wordpress ti darà un'idea su come usare l'oggetto DOM per modificare tutti i tag img aggiungendo l'evento on-click. Dipende da quando vuoi aggiungere quel parametro onclick al tag img; al momento del 'salvataggio' del post o della 'visualizzazione'. Personalmente userei l'oggetto DOM, visto che sembra tu voglia aggiungere quella funzione a tutti i tag img.

Rick Hellewell

2 apr 2018 19:36:56

Grazie Rick, vado subito a controllare.

Space Money

2 apr 2018 19:48:10

Mostra i restanti 1 commenti

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

Senza specifiche, in generale, il codice della pagina che viene visualizzato è generato dal codice del tuo tema. Quindi dovresti esaminare il template del tema utilizzato per quella pagina.

Il template utilizzato è determinato dalla Gerarchia dei Template di WordPress, i dettagli sono qui: https://developer.wordpress.org/themes/basics/template-hierarchy/ ; dai un'occhiata alla grafica che ti aiuterà a capire quale template viene utilizzato.

Poi, esamina quel file template per trovare cosa sta generando il tag 'img'. Ci vorrà un po' di ricerca. Una volta trovato quel codice, pubblicalo qui per ottenere ulteriore aiuto.

È anche possibile utilizzare l'oggetto DOM per modificare tutti i tag 'img' con un po' di Javascript, ma questo influenzerà tutti i tag 'img', il che potrebbe non essere quello che vuoi. Ci sono molti tutorial su come farlo.

Ma senza maggiori dettagli sul codice che genera il tag 'img', è difficile darti una risposta definitiva. Il processo sopra descritto ti aiuterà a capire qual è quel codice.

Aggiunto

Ecco del codice che modificherà l'attributo 'class' in un oggetto DOM:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // sopprime gli errori
    $dom->loadHTML($html, LIBXML_NOERROR);  // sopprime gli errori
    // img = cambia la classe in myclass (rimuovendo qualsiasi altra dichiarazione di classe)
    foreach ($dom->getElementsByTagName('img') as $node) {
        $node->setattribute('class','myclass');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // salva l'oggetto (tutto l'html) così possiamo restituirlo   
    return $html;
}

Basandoti su quel codice e sull'oggetto DOM stesso, dovresti essere in grado di capire come aggiungere l'elemento onclick al tag img. Nota che il codice sopra modificherà tutti i tag img.

Poi devi solo capire come aggiungere la funzione al filtro the_content()... suggerimento: https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM è una cosa interessante da conoscere. Ci sono molte cose che puoi fare con l'oggetto DOM.

(Nota che ti sto dando indicazioni su come imparare a svolgere il compito e implementarlo. È bene imparare le cose.)