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


9

มีวิธีในการวางจาวาสคริปต์ในส่วน 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 มากนักดังนั้นจึงเป็นไปได้ว่าฉันเขียนผิดทั้งหมด

ไม่มีใครรู้วิธีการทำเช่นนี้? ฉันต้องการที่จะทำโดยไม่ต้องใช้ปลั๊กอิน


คุณไม่ควรเพิ่มจาวาสคริปต์ในเมนูผ่านทางส่วนต่อประสานผู้ใช้และคุณไม่ควรพึ่งพาonclickจาวาสคริปต์ในการรันจาวาสคริปต์
Tom J Nowell

ทำไมจะไม่ล่ะ? นั่นคือรหัสที่ บริษัท แชทสดมอบให้ฉัน
mcography

1
ไม่ได้หมายความว่าเป็นวิธีที่ถูกต้องในการค้นหา.click()เหตุการณ์jQuerys
Tom J Nowell

ฉันไม่ได้พยายามจะบอกว่ามันเป็น ฉันแค่พยายามถามว่าทำไมฉันไม่ควรonclickเชื่อถือคุณลักษณะนี้ .click()ฉันจะเงยหน้าขึ้นมอง
mcography

เนื่องจาก HTML ใช้สำหรับกำหนดเอกสารการเพิ่มแอททริบิว onclick นั้นไม่ดีในลักษณะเดียวกับการเพิ่มแท็กสไตล์หรือแอททริบิวแบบไม่ดี ดูคำถามนี้ว่าทำไมจึงไม่ดี
Tom J Nowell

คำตอบ:


7

ดีที่มันใช้งานได้ หากเป็นของไคลเอนต์หรือหากคุณต้องการรหัสที่สะอาดกว่าคุณสามารถทำได้ตามที่ @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');
      });
    });
    

ความจริงที่ว่าลิงค์ไม่โหลดหมายความว่ามีบางอย่างผิดปกติกับสคริปต์หรือสคริปต์ไม่โหลดเลย


ขอบคุณสำหรับคำตอบ. ฉันไม่รู้เกี่ยวกับ Javascript มากนักดังนั้นคุณสามารถบอกฉันได้ว่าทำไมทางออกของคุณถึงดีกว่า / สะอาดกว่า? แค่พยายามเข้าใจ
mcography

ฉันสร้างไฟล์ชื่อ olark.js และทำการจัดคิว แต่ลิงก์ยังคงนำไปสู่#(เพราะนั่นคือสิ่งที่ฉันตั้งไว้ในแดชบอร์ด Wordpress) นี่คือสิ่งที่ฉันใส่ใน olark.js: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); });ฉันกำลังทำอะไรผิด
mcography

อ้า! jQuery(document).ready(function($) {ได้เคล็ดลับ! ขอบคุณ @ gdaniel!
mcography

ดีใจที่มันทำงาน แนวคิดคือการแยกสคริปต์ออกจากเนื้อหา นั่นเป็นเหตุผลที่แนะนำให้ทำเช่นนั้น
gdaniel

3

โซลูชัน # 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()


1

ฉันคิดว่ามีตัวเลือก 'น่าเชื่อถือมากขึ้น' การใช้หมายเลขรายการเมนูนั้นไม่ได้รับการรับประกันหากคุณย้ายรหัสจากการพัฒนาเป็นการผลิต หากคุณเปลี่ยนตัวเลขให้เป็นการตั้งค่ามันจะดีขึ้น แต่ก็ยังไม่ค่อยดีนัก

ทางเลือกอื่นอาจเป็นการเชื่อมโยงไปยังจุดยึดที่ไม่มีอยู่จริงเช่น #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'

[/ แก้ไข]


-2

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

นี่ไม่ใช่วิธีแก้ปัญหาที่เหมาะสมมันจะทำให้เมนูแตกทั้งหมดเพราะปุ่มทั้งหมดจะได้รับผลกระทบและจะไม่ทำสิ่งที่เป็นปัญหา
Milan Petrovic
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.