Cum să creezi un eveniment onclick pe o imagine într-o postare?

Question

Cum să creezi un eveniment onclick pe o imagine într-o postare?

2 apr. 2018, 18:37:23

Vizualizări: 21.7K

Voturi: 1

Iată cum ar trebui să arate:

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

Dar se transformă în:

<img style="cursor: pointer;" src="/wp-content/uploads/2018/04/downloadnow1.png" alt="Buton descărcare" title="Apasă pentru descărcare" width="455" height="116" />

Presupun că trebuie adăugat ceva în functions.php dar soluția este peste nivelul meu de cunoștințe, cineva m-ar putea ajuta?

Mulțumesc.

Editare: Hmm am citit întrebări puțin diferite dar toate menționau că are legătură cu editorul de text WP.

Iar codul este pentru a apela un content locker al cărui script l-am adăugat în tag-ul head.

Pe un site static funcționează deja, dar pentru că editorul modifică mereu codul, nu va apela locker-ul.

Am încercat asta pentru a elimina limitarea tag-urilor

Metoda 1: Dezactivarea filtrării WordPress a tag-urilor script

Dacă ai încredere că autorii nu vor avea probleme, poți dezactiva blocarea tag-urilor script din JavaScript. În wp-config.php din directorul rădăcină web, va trebui să activezi tag-urile personalizate adăugând următoarea linie de cod:

define( 'CUSTOM_TAGS', true );

În pagina functions.php, poți adăuga următorul cod:

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

Din păcate asta a dat această eroare:

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

Și pentru clarificare, este o imagine într-o postare care la click trebuie să apeleze content locker-ul.

Actualizare:

Ok asta e ciudat, când înlocuiesc URL-ul imaginii în "inspect element" cu

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

Funcționează...

Acum să aflăm cum să-l facem să funcționeze efectiv.

Ultima Actualizare: Slavă Domnului că în sfârșit funcționează, singurul lucru neplăcut este că dacă trec la editorul vizual, acesta șterge codul.

Space Money

11

funcții

Comentarii

Poți să postezi codul tău PHP pentru afișarea imaginii? Această informație nu este suficientă pentru a oferi ajutor/ghidare

Pabamato

2 apr. 2018 18:43:19

Îmi pare rău, nu știu la ce cod PHP te referi. Evident, nu sunt cel mai mare expert în WordPress :)

Space Money

2 apr. 2018 19:29:27

În opinia mea, nu vei rezolva problema prin editarea manuală (deși s-ar putea, dar va dura mult timp). Folosind soluția mea, vei putea repara toate cazurile viitoare ale problemei. (Aceasta presupunând că trebuie să 'repari' toate instanțele unui tag img în toate articolele.) Chiar și așa, s-ar putea ajusta soluția să se aplice doar imaginilor unde ai pus manual o anumită 'clasă' în imaginile cărora vrei să adaugi acea funcție onclick. Dar problema trebuie rezolvată 'programatic', nu manual. Și asta necesită cunoștințe de PHP, fie de la tine, fie de la altcineva.

Rick Hellewell

3 apr. 2018 03:22:04

Editorul vizual elimină implicit atributele onclick. Acest comportament poate fi suprascris folosind filtrul tiny_mce_before_init. Poți adapta această soluție pentru a ținti etichetele img în loc de link-uri.

Dave Romsey

4 apr. 2018 23:55:44

Toate răspunsurile la întrebare

Comentarii

Pentru mine a sunat mai mult ca și cum <img> este în conținutul postării. Prin urmare, partea despre ierarhia șabloanelor este irelevantă.

swissspidy

2 apr. 2018 19:05:46

Nu este clar la ce se referă OP. Eu am văzut-o ca o problemă de șablon de temă. Tu nu ai văzut-o așa. Nu este un motiv bun pentru un vot negativ al răspunsului meu, după părerea mea, mai ales că paragraful meu final spunea că sunt necesare mai multe informații.

Rick Hellewell

2 apr. 2018 19:20:22

Imaginea este într-adevăr în conținutul postării.

Space Money

2 apr. 2018 19:31:52

Atunci poate acest lucru te va ajuta: https://www.sitepoint.com/wordpress-change-img-tag-html/ , care arată cum să adaugi un filtru care va modifica tag-ul img. Acest articol https://wordpress.stackexchange.com/questions/81522/change-html-structure-of-all-img-tags-in-wordpress te va ajuta să înțelegi cum să folosești obiectul DOM pentru a schimba toate tag-urile img și a adăuga evenimentul on-click. Depinde când vrei să adaugi acel parametru onclick la tag-ul img; la 'salvare' postării sau la 'vizualizare' postării. Personal, aș folosi obiectul DOM, deoarece pare că vrei să adaugi acea funcție pentru toate tag-urile img.

Rick Hellewell

2 apr. 2018 19:36:56

Mulțumesc Rick, o să verific imediat.

Space Money

2 apr. 2018 19:48:10

Arată celelalte 1 comentarii

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

Fără a intra în detalii specifice, în general, codul paginii care este afișat este generat de codul temei tale. Prin urmare, va trebui să analizezi șablonul temei care este utilizat pentru acea pagină.

Șablonul folosit este determinat de ierarhia temelor WordPress, detalii găsiți aici: https://developer.wordpress.org/themes/basics/template-hierarchy/ ; aruncă o privire la grafic care te va ajuta să înțelegi care șablon este folosit.

Apoi, uită-te la acel fișier de șablon pentru a găsi ce generează tag-ul 'img'. Asta va necesita puțină investigație. Odată ce găsești acel cod, postează-l aici pentru a primi mai mult ajutor.

De asemenea, este posibil să folosești obiectul DOM pentru a modifica toate tag-urile 'img' cu niște Javascript, dar asta va afecta toate tag-urile 'img', ceea ce poate să nu fie ceea ce dorești. Există multe tutoriale despre cum să faci asta.

Dar fără mai multe detalii despre codul care generează tag-ul 'img', este dificil să îți ofer un răspuns definitiv. Procesul de mai sus te va ajuta să descoperi care este acel cod.

Adăugat

Iată niște cod care va schimba atributul 'class' într-un obiect DOM:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // suprima erorile
    $dom->loadHTML($html, LIBXML_NOERROR);  // suprima erorile
    // img = schimbă clasa în myclass (eliminând orice altă declarație de clasă)
    foreach ($dom->getElementsByTagName('img') as $node) {
        $node->setattribute('class','myclass');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // salvează obiectul (întregul html) ca să îl putem returna   
    return $html;
}

Bazându-te pe acel cod și pe obiectul DOM în sine, ar trebui să poți descoperi cum să adaugi elementul onclick la tag-ul img. Reține că codul de mai sus va schimba toate tag-urile img.

Apoi, doar află cum să adaugi funcția la filtrul the_content()... indiciu: https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM este un subiect interesant de cunoscut. Poți face multe lucruri cu obiectul DOM.

(Reține că îți ofer indicații despre cum să înveți să faci sarcina și să o implementezi. Este bine să înveți lucruri noi.)