Tambahkan Javascript ke Menu WordPress

Apakah ada cara untuk meletakkan javascript di bagian URL dari item menu WordPress? Saya memiliki fungsi obrolan langsung di situs saya, dan saya harus memasukkan kode ini ke situs untuk membuat tautan untuk membuka obrolan langsung (seperti yang disarankan di sini).

<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

Klien menginginkan tautan di bilah utilitas, yang dibuat menggunakan menu WordPress di dasbor WordPress. Tetapi ketika saya menyalin dan menempel javascript:void(0);" onclick="olark('api.box.expand')ke kotak URL di dashboard WordPress, itu hanya menghilang dan tautannya tetap tidak aktif.

Sesuatu yang saya baca mengatakan bahwa mungkin saya bisa meletakkan kelas khusus pada tautan yang dimaksud dan kemudian menulis fungsi Javascript yang menyala ketika tautan dengan kelas itu diklik. Saya mencobanya, dan saya tidak bisa membuatnya bekerja. Saya tidak tahu banyak Javascript, jadi mungkin saya menulis itu sepenuhnya salah.

Adakah yang tahu bagaimana melakukan ini? Saya ingin melakukannya tanpa menggunakan plugin.

Bagus, itu berhasil. Jika itu untuk klien atau jika Anda hanya ingin kode pembersih, Anda dapat melakukannya seperti yang disarankan @Tom J Nowell.

Tambahkan item menu kustom, tautkan ke mana pun atau di mana pun. Cari tahu ID item menu (setiap item memiliki satu), lalu targetkan ID itu dengan jQuery.

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

Dengan cara ini, setiap kali pengguna mengklik bahwa menu-itemskrip di atas akan dipicu. Anda dapat membuat skrip jquery melalui functions.php.

Memperbarui:

1. Pastikan olark.js Anda memuat. Jika Anda menambahkannya ke footer atau header, periksa halaman Anda dan pastikan skrip ada di sana. Juga, pastikan Anda tidak mendapatkan kesalahan apa pun di konsol browser.

2. Bungkus js Anda dengan dokumen siap, sehingga skrip dijalankan pada waktu yang tepat:

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

Fakta bahwa tautan tidak memuat berarti ada yang salah dengan skrip itu sendiri atau skrip tidak memuat sama sekali.

Solusi # 1 (tidak ideal, tetapi berfungsi):

// 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;
}

Solusi # 2 (ideal):

Dengan bantuan komentar di atas, berikut adalah solusi yang bekerja untuk saya. Saya membuat file baru bernama olark.js dan memasukkan kode ini di dalamnya:

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

Kemudian, saya membuat skrip di functions.php saya dengan kode berikut:

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' );

Jika tidak berhasil, pastikan Anda membuat skrip dengan benar. Saya menggunakan tema anak, jadi saya harus menggunakan get_stylesheet_directory_uri()bukan get_template_directory_uri().

Saya pikir ada opsi 'lebih dapat diandalkan'. Mengandalkan nomor item menu tidak dijamin untuk bekerja jika Anda memigrasi kode Anda dari pengembangan ke produksi misalnya. Jika Anda mengubah nomor menjadi pengaturan, ini menjadi lebih baik, tetapi masih tidak terlalu bagus.

Alternatifnya bisa dengan menautkan ke jangkar yang tidak ada, seperti #olark, dari menu-item Anda. Ini dapat diatur menggunakan antarmuka pengguna dan merupakan lingkungan yang dapat diandalkan. Maka skrip terpisah Anda harus mengamati perubahan-hash (di bilah alamat browser) dan bertindak sesuai.

Contoh skrip kopi sederhana yang dikompilasi ke dalam javascript yang mendengarkan 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 adalah fungsi yang menampilkan dialog yang memungkinkan Anda masuk jika hash sama dengan '#login'.

Cukup lucu, hash di alamat tidak berubah jika Anda mengklik item menu. Ini tidak terduga dan bisa disebabkan oleh skrip lain yang mencegah acara default. Jadi saya harus menambahkan baris lain, untuk membuat perubahan lokasi jendela sebagai tanggapan terhadap mengklik tautan:

# 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'

[/ edit]

Anda dapat menggunakan ini untuk functions.php untuk menambahkan skrip tambahan di item menu-nav

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');