Tambahkan Javascript ke Menu WordPress

9

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.

mcography
sumber
Anda seharusnya tidak dapat menambahkan javascript ke menu melalui antarmuka pengguna, dan Anda tidak boleh mengandalkan onclickatribut untuk mengeksekusi javascript
Tom J Nowell
Kenapa tidak? Itulah kode yang disediakan perusahaan obrolan langsung kepada saya.
mcography
1
Itu tidak berarti itu cara yang tepat untuk melakukannya, lihat .click()acara jQuerys
Tom J Nowell
Saya tidak berusaha mengatakan itu. Saya hanya mencoba bertanya mengapa saya tidak boleh mengandalkan onclickatribut. Saya akan melihat ke atas .click().
mcography
Karena HTML adalah untuk mendefinisikan dokumen, menambahkan atribut onclick buruk dengan cara yang sama bahwa menambahkan tag gaya inline atau atribut buruk, itu mencampurnya. Lihat pertanyaan ini untuk alasan mengapa itu buruk
Tom J Nowell

Jawaban:

7

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.

gdaniel
sumber
Terima kasih atas jawaban anda. Saya tidak tahu banyak tentang Javascript, jadi bisakah Anda memberi tahu saya mengapa solusi Anda lebih baik / bersih? Hanya berusaha mengerti.
mcography
Saya membuat file bernama olark.js dan membuatnya enqueued, tetapi tautannya masih mengarah #(karena di situlah saya mengaturnya di dashboard Wordpress). Ini yang saya masukkan ke olark.js: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); });Apa yang saya lakukan salah?
mcography
Ah ha! Itu jQuery(document).ready(function($) {berhasil! Terima kasih, @ gdaniel!
mcography
Senang itu berhasil. Idenya adalah untuk memisahkan skrip dari konten. Itu sebabnya disarankan melakukannya dengan cara itu.
gdaniel
3

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().

mcography
sumber
1

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]

Bart McLeod
sumber
-2

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');
Pk Ray
sumber
Ini bukan solusi yang tepat, itu akan benar-benar merusak menu, karena semua tombol akan terpengaruh, dan tidak melakukan apa pertanyaannya.
Milan Petrovic