Кастомні обробники подій в елементах публікації WordPress

Публікація заснована на досвіді використання  WordPress 5.2.17 з плагіном класичного редактора публікацій Classic Editor.

Редактор Classic Editor у режимі Text дозволяє безпосередньо редагувати HTML, в т.ч. задавати теги та визначати в них обробники подій. Однак при переході редактора в режим Visual ці визначення видаляються!

Шорткод

Простая доработка позволяет реализовать определение произвольного набора атрибутов  и обработчиков событий произвольному тегу обернутому внутри парного шорткода:
[tag-atts attribute1="value" event2="js-code"...]<tag>...</tag>

Для реализации функций шорткода в файл активной темы functions.php следует добавить код:

Застосування

I. Пример определения для кнопки <button> обработчиков событий onclick, onmouseover и onmouseout:

 

II. Интерактивный пример определения для этого текста обработчика события onclick (этот текст реагирует на клик).

Каждый абзац в публикации WordPress оборачивает тегом <p>...</p>, но в исходном тексте никакого тега нет. Для определения атрибута события onclick текст необходимо обернуть в какой-нибудь тег. Тег <p> и <div> редактор удаляет, поэтому использован <span style="display:block;"> ...</span>.

Джерела

Leave a Reply