เพิ่ม Javascript ลงในเมนู WordPress

มีวิธีในการวางจาวาสคริปต์ในส่วน 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 แนะนำ

เพิ่มรายการเมนูที่กำหนดเองเชื่อมโยงไปยังที่ใดก็ได้ ค้นหา ID รายการเมนู (ทุกรายการมีหนึ่งรายการ) จากนั้นกำหนดเป้าหมาย ID ด้วย jQuery

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

ด้วยวิธีนี้ทุกครั้งที่ผู้ใช้คลิกที่menu-itemสคริปต์ด้านบนจะถูกเรียกใช้ คุณสามารถจัดคิวสคริปต์ jquery ผ่านทาง function.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 จากรายการเมนูของคุณ สิ่งนี้สามารถตั้งค่าได้โดยใช้ส่วนต่อประสานกับผู้ใช้และเป็นสภาพแวดล้อมที่เชื่อถือได้ จากนั้นสคริปต์แยกของคุณควรสังเกตการเปลี่ยนแปลงแฮช (ในแถบที่อยู่ของเบราว์เซอร์) และดำเนินการตามนั้น

ตัวอย่างสคริปต์กาแฟแบบง่ายที่รวบรวมเป็นจาวาสคริปต์ที่รับฟัง 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'

[/ แก้ไข]

คุณสามารถใช้ฟังก์ชันนี้เพื่อ 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');