Как создать событие onclick для изображения в записи WordPress?

Question

Как создать событие onclick для изображения в записи WordPress?

2 апр. 2018 г., 18:37:23

Просмотры: 21.7K

Голосов: 1

Вот как это должно выглядеть:

<img onclick="og_load();" style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="Загрузить сейчас" title="Кнопка загрузки" width="455" height="116">

Но оно продолжает преобразовываться в:

<img style="cursor: pointer;" src="/wp-content/uploads/2018/04/downloadnow1.png" alt="Загрузить сейчас" title="Кнопка загрузки" width="455" height="116" />

Я предполагаю, что нужно что-то добавить в functions.php, но решение выходит за рамки моих знаний, кто-нибудь может помочь?

Спасибо.

Редактирование: Хм, я прочитал немного другие вопросы, но все указывали на то, что это связано с текстовым редактором WordPress.

Код предназначен для вызова контент-локера, скрипт которого я добавил в тег head.

На статическом сайте у меня уже все работает, но поскольку редактор продолжает изменять код, локер не вызывается.

Я попробовал это для снятия ограничения тегов

Метод 1: Отключение фильтрации тегов script в WordPress

Если вы доверяете своим авторам и уверены, что они не создадут проблем, вы можете отключить блокировку тегов script в JavaScript. В файле wp-config.php в корневом каталоге веб-сайта нужно включить пользовательские теги, добавив следующую строку кода:

define( 'CUSTOM_TAGS', true );

В файле functions.php можно добавить следующий код:

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

К сожалению, это вызвало следующую ошибку:

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

И для ясности: это изображение в записи, которое при клике должно вызывать контент-локер.

Обновление:

Хм, это странно. Когда я заменяю URL изображения в "inspect element" на

<img onclick="og_load();" style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="Загрузить сейчас" title="Кнопка загрузки" width="455" height="116">

Это работает...

Теперь нужно выяснить, как заставить это реально работать.

Последнее обновление: Слава богу, наконец-то я заставил это работать, единственное, что плохо - если я переключаюсь на визуальный редактор, он удаляет код.

Space Money

11

функции

Комментарии

Можете опубликовать ваш PHP код для вывода изображения? Этой информации недостаточно, чтобы помочь/дать рекомендации

Pabamato

2 апр. 2018 г. 18:43:19

Извините, я не знаю, какой именно PHP код вы имеете в виду. Я, очевидно, не самый большой эксперт по WordPress :)

Space Money

2 апр. 2018 г. 19:29:27

По моему мнению, вы не решите проблему путем ручного редактирования (ну, может быть и решите, но это займет много времени). Используя мои рекомендации, вы сможете исправить все будущие случаи этой проблемы. (Это предполагает, что вам нужно "исправить" все экземпляры тега img во всех записях.) Даже в этом случае можно настроить решение так, чтобы оно применялось только к изображениям, где вы вручную указали определенный 'class' для тех изображений, к которым хотите добавить функцию onclick. Но проблему нужно исправлять "программно", а не вручную. И для этого потребуются знания PHP - либо ваши, либо кого-то еще.

Rick Hellewell

3 апр. 2018 г. 03:22:04

Визуальный редактор по умолчанию удаляет атрибут onclick. Это поведение можно переопределить с помощью фильтра tiny_mce_before_init. Вы можете адаптировать это решение, чтобы оно работало с тегами img вместо ссылок.

Dave Romsey

4 апр. 2018 г. 23:55:44

Все ответы на вопрос

Комментарии

Мне показалось, что <img> находится в содержимом поста. Поэтому часть про иерархию шаблонов здесь не применима.

swissspidy

2 апр. 2018 г. 19:05:46

Не совсем понятно, на что ссылается автор вопроса. Я увидел в этом проблему с шаблоном темы. Вы — нет. Не самая веская причина для минусования моего ответа, ИМХО, тем более что в заключительном абзаце я указал, что требуется больше информации.

Rick Hellewell

2 апр. 2018 г. 19:20:22

Изображение действительно находится в содержимом поста.

Space Money

2 апр. 2018 г. 19:31:52

Тогда, возможно, это поможет: https://www.sitepoint.com/wordpress-change-img-tag-html/, где показано, как добавить фильтр для изменения тега img. В этой статье https://wordpress.stackexchange.com/questions/81522/change-html-structure-of-all-img-tags-in-wordpress вы найдёте начало работы с DOM-объектом для изменения всех тегов img и добавления события on-click. Всё зависит от того, когда вы хотите добавить параметр onclick к тегу img: при 'сохранении' поста или при его 'просмотре'. Лично я бы использовал DOM-объект, так как похоже, что вы хотите добавить эту функцию для всех тегов img.

Rick Hellewell

2 апр. 2018 г. 19:36:56

Спасибо, Рик, сейчас же проверю.

Space Money

2 апр. 2018 г. 19:48:10

Показать остальные 1 комментариев

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

Без конкретики, в общем случае код страницы, который выводится, генерируется кодом вашей темы. Поэтому вам нужно изучить шаблон темы, используемый для этой страницы.

Используемый шаблон определяется Иерархией шаблонов WordPress, подробности здесь: https://developer.wordpress.org/themes/basics/template-hierarchy/; посмотрите на график, который поможет вам понять, какой шаблон используется.

Затем изучите этот файл шаблона, чтобы найти, что именно выводит тег 'img'. Это потребует некоторого времени. Как только вы найдёте этот код, опубликуйте его здесь, чтобы получить более конкретную помощь.

Также возможно использовать объект DOM для изменения всех тегов 'img' с помощью JavaScript, но это повлияет на все теги 'img', что может быть не тем, чего вы хотите. Существует множество руководств о том, как это сделать.

Но без более детальной информации о коде, который генерирует тег 'img', трудно дать вам точный ответ. Опираясь на указанный выше процесс, вы сможете разобраться, что представляет собой этот код.

Дополнение

Вот пример кода, который изменяет атрибут 'class' в объекте DOM:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // подавление ошибок
    $dom->loadHTML($html, LIBXML_NOERROR);  // подавление ошибок
    // img = изменение класса на myclass (удаляя любые другие классы)
    foreach ($dom->getElementsByTagName('img') as $node) {
        $node->setattribute('class','myclass');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // сохраняет объект (весь HTML), чтобы мы могли его вернуть   
    return $html;
}

На основе этого кода и самого объекта DOM, вы сможете понять, как добавить элемент onclick к тегу img. Обратите внимание, что приведённый код изменит все теги img.

Затем останется только разобраться, как добавить функцию к фильтру the_content()... подсказка: https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM — это интересная вещь, которую стоит изучить. С помощью объекта DOM можно сделать многое.

(Обратите внимание, что я даю вам рекомендации о том, как научиться выполнять задачу и реализовать её. Это полезно для изучения новых вещей.)