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

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

9
22.07.2016, 01:03
3 ответа

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

Добавьте пользовательский элемент меню, не свяжите его с нигде или нигде. Узнайте пункт меню ID (каждый объект имеет один), и затем будьте нацелены на тот идентификатор с 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');
      });
    });
    

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

7
19.02.2020, 22:01
  • 1
    Спасибо за Ваш ответ. Я не знаю много о JavaScript, таким образом, можно сказать мне, почему решение лучше/более чисто? Просто попытка понять. –  mcography 09.07.2014, 17:27
  • 2
    я создал файл, названный olark.js, и ставил в очередь его, но ссылка все еще просто приводит к # (потому что это - то, где я установил его в панели инструментов Wordpress). Это - то, что я вставил olark.js: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); }); Что я делаю неправильно? А-ч –  mcography 09.07.2014, 18:36
  • 3
    ха! jQuery(document).ready(function($) { добился цели! Спасибо, @gdaniel! –  mcography 09.07.2014, 18:42
  • 4
    Glad это работало. Идея состоит в том, чтобы разделить сценарий от содержания. Вот почему это предложило делать его тот путь. –  gdaniel 09.07.2014, 18:52

Я думаю, что существует 'более надежная' опция. Доверие числу пункта меню, как гарантируют, не будет работать при миграции кода от разработки до производства, например. Если Вы превращаете число в установку, это - улучшение, но все еще не действительно хороший.

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

[/редактирование]

1
19.02.2020, 22:01

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

3
19.02.2020, 22:01