Добавление действий javascript к словам в сообщении

Я хотел бы, чтобы мой блог запускал некоторый код JavaScript, когда на него нажимали определенные слова.

Один из подходов заключался бы в том, чтобы включить обработчики onClick в HTML-элементы в сообщениях и отключить любую фильтрацию, которая удалит их, но это кажется довольно опасным.

Другим подходом было бы создание ссылки, адрес которой начинается с «#» и имеет скрипт для изменения суффикса адреса, но это кажется довольно хоккеем.

Третий подход состоял бы в том, чтобы сканирование скрипта через дерево DOM для определенного тега и привязка событий к любым элементам, которые его содержат. Это может сработать, хотя это оставит открытым вопрос о том, как обеспечить, чтобы переключение редактора между HTML и WYSIWYG-режимом не сожрало какую-либо существенную информацию из аннотаций.

Я подозреваю, что правильный подход заключается в использовании коротких кодов, но я только начинаю с WordPress, и, хотя я знаю Javascript, я не знаю PHP.

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

Если мне захочется, чтобы многие слова выполняли один и тот же метод, но присваивали каждому другому значение параметра строки (например, я мог бы прикрепить параметр «птица» к «robin» и «fish» to «guppy», так что нажатие «robin» будет запускать ClickedWord("bird") и нажатие «guppy» будет запускать ClickedWord("fish") ), какой был бы лучший ClickedWord("fish") облегчить это?

Solutions Collecting From Web of "Добавление действий javascript к словам в сообщении"

Предположим, у вас есть javascript:

 function clickedTag( tag ) { var d = new Date(); console.log( 'A word with tag ' + tag + 'has been cliked at ' + d.toDateString() ); } 

И в вашем посте у вас есть это предложение:

Быстрая коричневая лиса прыгает через ленивую собаку

И вы хотите, чтобы javascript clickedTag( "pet" ); будет запускаться при нажатии пользователем слова «собака».

Вероятно, правильный подход на стороне javascript заключается в написании одной функции с помощью атрибутов данных, например:

Быстрая коричневая лиса прыгает через ленивый <span class="click-tag" data-tag="pet"> dog </span>

и javascript:

 jQuery(document).on( 'click', 'span.click-tag', function(e) { e.preventDefault(); var tag = jQuery(this).data('tag'); if ( typeof tag === 'string' && tag !== '' ) { return clickedTag( jQuery(this).data('tag') ); } }); 

Таким образом, используя одну крошечную функцию, вы можете запускать функцию javascript любым словом, а само слово не связано с параметром, переданным функции.

Все идет нормально. Однако это не имеет ничего общего с WordPress, и да, добавив, что тег для публикации контента вызывает некоторые проблемы, которые вы объяснили в OP, а также вручную добавление кода диапазона для каждого слова, где вам нужно, может быть затруднено, если у вас много сообщений и много слов, которые нужно «помечать».

Но, да, короткие коды могут быть решением.

Просто возьмите один из примеров в документах add_shortcode в Codex и немного измените его:

 function my_first_shortcode( $atts, $word='' ) { $atts = shortcode_atts( array ( 'tag' => '' ), $atts ); $format = '<span class="click-tag" data-tag="%s">' . esc_html( $word ) . '</span>'; return sprintf( $format, esc_attr( $atts['tag'] ) ); } add_shortcode( 'clicktag', 'my_first_shortcode' ); 

Когда у вас есть несколько строк PHP в вашем файле functions.php или в файле плагина, вы сможете использовать shortcode 'clicktag' в своих сообщениях, например, вы можете написать

Быстрая коричневая лиса прыгает через ленивый [clicktag tag = "pet"] dog [/ clicktag]

и диапазон с атрибутом данных обернет слово «собака» в ваш пост.

Объедините это с функцией jQuery, опубликованной выше, и вы закончите.

Обратите внимание, что javascript, который я опубликовал, а также ваш код javascript (функция clickedTag в этом примере) должны быть помещены в очередь на страницах, используя wp_enqueue_script . Удобный способ – вызвать wp_enqueue_script внутри обратного вызова my_first_shortcode (функция my_first_shortcode PHP, в примере выше).

Наконец, вы, вероятно, захотите использовать класс «click-tag» для стилирования диапазона и позволить пользователям понять, что они доступны для просмотра.

В этом Gist вы найдете рабочий, готовый к установке плагин (просто загрузите 2 файла и поместите их в папку внутри вашей папки с плагинами), которая содержит только небольшую измененную версию кода, которую я разместил здесь.

Осталось только написать реальный код javascript для функции clickedTag , но это не будет clickedTag здесь.