Добавить 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, так что, возможно, я написал это совершенно неправильно.

Кто-нибудь знает, как это сделать? Я хотел бы сделать это, не используя плагин.

7 голосов | спросил mcography 9 J000000Wednesday14 2014, 00:28:03

4 ответа


5

Хорошо, что он работает. Если это для клиента или вам нужен только чистый код, вы можете сделать это, как предложил @Tom J Nowell.

Добавить пользовательский пункт меню, связать его с нигде или где угодно. Выясните идентификатор элемента меню (каждый элемент имеет один), а затем настройте его с помощью jQuery.

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

Таким образом, каждый раз, когда пользователь нажимает этот menu-item, запускается сценарий выше. Вы можете установить сценарий jquery через функции.php.

Update:

  1. Убедитесь, что ваш olark.js загружается. Если вы добавляете его в нижний колонтитул или заголовок, проверьте свою страницу и убедитесь, что сценарий есть. Кроме того, убедитесь, что вы не получаете никаких ошибок в консоли браузера.

  2. Оберните js с готовым документом, чтобы скрипт выполнялся в нужное время:

    jQuery(document).ready(function($) {
      $("#menu-item-38872").on("click", function(e){
      e.preventDefault();
      olark('api.box.expand');
      });
    });
    

Тот факт, что ссылка не загружается, означает, что что-то не так с самим скриптом или сценарий не загружается вообще.

ответил gdaniel 9 J000000Wednesday14 2014, 02:52:15
2

Решение № 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().

ответил mcography 9 J000000Wednesday14 2014, 01:15:54
1

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

Альтернативой может быть ссылка на несуществующий якорь, например #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'

[/править]

ответил Bart McLeod 29 PM00000010000005231 2014, 13:24:52
-2

Вы можете использовать это для функций.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');
ответил Pk Ray 15 32017vEurope/Moscow11bEurope/MoscowWed, 15 Nov 2017 12:01:41 +0300 2017, 12:01:41

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132