Добавить Javascript в меню WordPress
Есть ли способ разместить javascript в части URL-адреса элемента меню WordPress? У меня есть функция чата на моем сайте, и я должен разместить этот код на сайте, чтобы создать ссылку для открытия чата (как это предлагается здесь).
<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->
Клиент хочет, чтобы ссылка в панели навигации утилиты, которая была создана, использовала меню WordPress на панели инструментов WordPress. Но когда я копирую и вставляю javascript:void(0);" onclick="olark('api.box.expand')
в поле URL-адреса на панели инструментов WordPress, он просто исчезает, и ссылка остается неактивной.
Что-то, что я прочитал, сказал, что, возможно, я могу разместить собственный класс в соответствующей ссылке, а затем написать функцию Javascript, которая срабатывает при нажатии ссылки с этим классом. Я пытался это сделать, и я не мог заставить его работать. Я не знаю много Javascript, так что, возможно, я написал это совершенно неправильно.
Кто-нибудь знает, как это сделать? Я хотел бы сделать это, не используя плагин.
4 ответа
Хорошо, что он работает. Если это для клиента или вам нужен только чистый код, вы можете сделать это, как предложил @Tom J Nowell.
Добавить пользовательский пункт меню, связать его с нигде или где угодно. Выясните идентификатор элемента меню (каждый элемент имеет один), а затем настройте его с помощью jQuery.
$("#menu-item-num").on("click", function(e){
e.preventDefault();
// olark code here
});
Таким образом, каждый раз, когда пользователь нажимает этот menu-item
, запускается сценарий выше. Вы можете установить сценарий jquery через функции.php.
Update:
-
Убедитесь, что ваш olark.js загружается. Если вы добавляете его в нижний колонтитул или заголовок, проверьте свою страницу и убедитесь, что сценарий есть. Кроме того, убедитесь, что вы не получаете никаких ошибок в консоли браузера.
-
Оберните js с готовым документом, чтобы скрипт выполнялся в нужное время:
jQuery(document).ready(function($) { $("#menu-item-38872").on("click", function(e){ e.preventDefault(); olark('api.box.expand'); }); });
Тот факт, что ссылка не загружается, означает, что что-то не так с самим скриптом или сценарий не загружается вообще.
Решение № 1 (не идеально, но оно работает):
// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
if ( $args->theme_location == 'utility' ) {
$items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
}
return $items;
}
Решение №2 (идеальное):
С помощью комментариев выше, вот решение, которое сработало для меня. Я создал новый файл olark.js и поместил в него этот код:
jQuery(document).ready(function($) {
$("#menu-item-38872").on("click", function(e){
e.preventDefault();
// olark code here
olark('api.box.expand');
});
});
Затем я выделил скрипт в моем functions.php следующим кодом:
function olark_script() {
wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
wp_enqueue_script( 'olark' );
}
add_action( 'wp_enqueue_scripts', 'olark_script' );
Если это не работает, убедитесь, что вы правильно загрузили свой скрипт. Я использую дочернюю тему, поэтому мне пришлось использовать get_stylesheet_directory_uri()
вместо get_template_directory_uri()
.
Я думаю, что есть «более надежный» вариант. Опора на номер пункта меню не гарантируется для работы, если вы, например, перенести код с разработки на производство. Если вы превращаете число в настройку, оно становится лучше, но все равно не очень хорошо.
Альтернативой может быть ссылка на несуществующий якорь, например #olark, из вашего пункта меню. Это может быть установлено с использованием пользовательского интерфейса и является надежной средой. Затем ваш отдельный скрипт должен наблюдать изменение хэша (в адресной строке браузера) и действовать соответственно.
Простой пример сценария кофе, который компилируется в javascript, который слушает hashchange:
if window.addEventListener
window.addEventListener 'hashchange', (event) =>
@showLogin()
else
window.attachEvent 'onhashchange', (event) =>
@showLogin()
#enable sharing the url
if location.hash then @showLogin()
@showLogin
- это функция, которая отображает диалоговое окно, позволяющее вам войти, если хеш равен «#login».
[править] Забавно, что хэш в адресе не изменяется , если вы нажмете элемент меню. Это неожиданно и может быть связано с другим скриптом, предотвращающим событие по умолчанию. Поэтому мне пришлось добавить еще одну строку, чтобы изменить местоположение окна в ответ на щелчок ссылки:
# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
window.location = $(event.currentTarget).attr 'href'
[/править]
Вы можете использовать это для функций.php, чтобы добавить скрипт добавления в элемент навигационного меню
function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');