Додати 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, тому можливо, я писав це зовсім неправильно.

Хтось знає, як це зробити? Я хотів би це зробити, не використовуючи плагін.

Добре, що це працює. Якщо це для клієнта або ви просто хочете отримати більш чистий код, ви можете зробити це так, як запропонував @Tom J Nowell.

Додайте спеціальний елемент меню, зв’яжіть його ніде і ніде. Дізнайтеся ідентифікатор елемента меню (кожен елемент має його), а потім націліть його на jQuery.

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

Таким чином, кожен раз, коли користувач натискає, що menu-itemбуде запущений вищезазначений сценарій. Ви можете епдіеій скрипт JQuery з допомогою functions.php.

Оновлення:

1. Переконайтеся, що ваш olark.js завантажується. Якщо ви додаєте його у колонтитул чи колонтитул, перегляньте свою сторінку та переконайтеся, що сценарій є. Також переконайтеся, що ви не отримуєте помилок у консолі браузера.

2. Оберніть ваш 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, який слухає хешхайн:

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'

[/ редагувати]

Ви можете використовувати це, щоб functions.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');