วิธีทำให้รายการเมนูระดับบนสุดไม่มีลิงค์ แต่มีเมนูย่อยที่เชื่อมโยง

ฉันกำลังสร้างเมนูแนวนอนและบางรายการในเมนูนั้นจะมีเมนูแบบเลื่อนลง (เมนูย่อย) และบางรายการจะไม่ ผู้ที่มีเมนูย่อยไม่ใช่หน้าจริง ๆ พวกมันตั้งใจจะเป็นแนวทางสำหรับการเลื่อนลง

ตัวอย่างเช่นสมมติว่าเมนูแนวนอนเป็นดังนี้:

หน้าแรก | เกี่ยวกับเรา | ผลิตภัณฑ์ | เส้นทาง | ติดต่อ

และรายการ "ผลิตภัณฑ์" li นั้นมี 3 หน้าเชื่อมโยงในรายการดรอปดาวน์แนวตั้งด้านล่างดังนั้น "ผลิตภัณฑ์" เองไม่ได้แสดงถึงหน้าจริงฉันจะทำสิ่งนั้นใน WP ได้อย่างไร

(ฉันใช้ WP เป็น CMS กับหน้าโฮมคงที่และภายในฉันสร้างเทมเพลตของตัวเองจัดวางเมนูใน CSS จากนั้นลงทะเบียนเมนูในฟังก์ชั่น phph และเรียกใช้งานในเทมเพลต) ใน WP คุณเพิ่มรายการลงใน เมนูผ่านรายการหน้าหรือโดยลิงก์ที่กำหนดเอง แต่ฉันไม่ต้องการให้ "ผลิตภัณฑ์" เชื่อมโยง ถ้าฉันไม่เพิ่มลิงค์ไปยังลิงค์ที่กำหนดเองมันจะไม่ให้ฉันเพิ่มเข้าไปในเมนู

สิ่งนี้ทำได้ผ่านทางเมนู admin หรือฉันต้องเข้าหามันด้วยวิธีอื่นไหม?

ขอบคุณสำหรับความช่วยเหลือ!

ฉันมีความคิดไม่กี่:

1. ตั้งค่าลิงก์ที่กำหนดเอง#ซึ่งจะไม่ส่งคืนสิ่งใด
2. เพิ่มคลาสที่กำหนดเองให้กับรายการจากนั้นใช้ jQuery เพื่อลบลิงก์
3. ใช้ PHP ที่เทียบเท่ากับวิธี jQuery
4. ใช้ปลั๊กอินเชื่อมโยงปิดการใช้งานเมนูหลัก (หรือแยกมันออกและเขียนของคุณเอง)

วิธีที่ง่ายที่สุดในการทำโดยไม่มีปลั๊กอินหรืออะไรก็คือการใช้ฟังก์ชั่น "เมนู" ของ WordPress นี่คือคำแนะนำสำหรับ WordPress 4.8:

1. จากแดชบอร์ด WordPress ของคุณไปที่ "ลักษณะ -> เมนู"
2. ในแท็บ "แก้ไขเมนู" เลือก "ลิงก์ที่กำหนดเอง"
3. สำหรับ URL ให้ป้อน "#" (ไม่มีเครื่องหมายคำพูด)
4. สำหรับข้อความลิงค์ให้ป้อนข้อความที่ต้องการสำหรับระดับบนสุดของเมนูแบบเลื่อนลง
5. คลิกปุ่ม "เพิ่มไปที่เมนู"
6. ลากรายการเมนูไปยังตำแหน่งที่ต้องการภายในเมนูของคุณ
7. สำหรับรายการเมนูที่คุณเพิ่งเพิ่มคลิกลูกศรลงทางด้านขวาของรายการ (มันจะอ่าน "ลิงค์ที่กำหนดเอง" ทางด้านซ้ายของรายการ)
8. ลบ "#" ออกจาก URL สิ่งนี้ - ในเบราว์เซอร์ทั้งหมด - จะแปลงลิงก์เป็นข้อความธรรมดา
9. คลิกที่ปุ่ม "บันทึกเมนู"

วิธีที่ง่ายที่สุดที่ฉันมาด้วยคือการสร้างรายการลิงก์ที่กำหนดเองที่มีค่าลิงค์ URL #ของ สิ่งนี้กำลังส่งผู้ใช้ไปยังแฮชว่างในหน้าเดียวกันดังนั้นโดยทั่วไปจะไม่มีลิงก์

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

วิธีแก้ไขคือการรวมวิธีแฮชว่างกับชิ้นส่วนของรหัสเพื่อตรวจสอบเมื่อมีการใช้ลิงค์แฮชว่างในเมนูและเพื่อลบhrefแอตทริบิวต์ออกจากลิงก์นั้นโดยสิ้นเชิง aองค์ประกอบโดยไม่ต้องhrefแอตทริบิวต์เป็นที่ถูกต้อง HTML 5 วิธีในการสร้างการเชื่อมโยงตัวยึด

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

สิ่งนี้ใช้ได้กับฉัน:

ฉันเปิดใช้งานCSS Classesในเมนู> ตัวเลือกหน้าจอ> CSS Classes จากนั้นฉันให้องค์ประกอบเมนูที่ฉันต้องการปิดการใช้งานคลาส ".nolink" และเพิ่มรหัสชิ้นนี้ลงในแผง CSS ที่กำหนดเองของฉัน:

.nolink {
   pointer-events: none;
   cursor: default;
}

ใช้วิธี PHP ฉันเพิ่มรหัสนี้เพื่อ functions.php:

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

สิ่งนี้จะแทนที่ลิงก์ด้วยองค์ประกอบการขยายสำหรับเมนูรายการด้วย post_name == "contact" ซึ่งเป็นสิ่งที่ฉันกำลังมองหา คุณสามารถเปลี่ยนสิ่งนั้นเพื่อตรวจสอบชื่อเมนูหรือ ID หรือเพิ่มรหัสเพื่อตรวจสอบว่ามีรายการเมนูลูก ๆ หรือไม่

ฉันแก้ไขด้วยวิธีนี้: ในheader.php (จากธีมของคุณ) ฉันค้นหา:

'link_before'     => '',
'link_after'      => '',

และแทนที่ด้วย:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

กล่าวง่ายๆว่าสคริปต์นี้จะตรวจสอบว่าลิงก์หลักนั้นลงท้ายด้วย "#" หรือไม่ในกรณีนี้มันจะเพิ่มองค์ประกอบการขยายรอบเนื้อหาของแท็กที่ปิดการคลิก

หวังว่าจะช่วย :-)

ตามที่คนอื่นที่นี่แนะนำคุณสามารถสร้างรายการเมนูลิงค์ที่กำหนดเองด้วย # เป็น URL ของมัน จากนั้นลบ # เมื่อเพิ่มลงในเมนู และในที่สุดคุณสามารถใช้ regex ง่าย ๆ นี้เพื่อตัดแท็กจริงออกจากลิงก์เหล่านั้น

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

การดำเนินการนี้จะลบการคลิก (และยกเลิกการจัดรายการ) ด้วยวิธีนี้คุณไม่จำเป็นต้องใช้ลิงก์ # แบบกำหนดเองในเมนูของคุณ

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

เห็นคุณค่านี้เป็นหัวข้อเก่า แต่สำหรับวิธีที่รวดเร็วและสกปรกในการมีลิงค์ใน Wordpress คือการทำลิงค์ URL เป็น:

#_

สังเกตเห็นขีดล่างหลังแฮชแท็ก ด้วยวิธีนี้หากเมนูของคุณเลื่อนหน้าลง (เช่นแก้ไข) คุณจะไม่ถูกข้ามไปที่ด้านบนของหน้าเมื่อคลิกที่มันและไม่ต้องการปลั๊กอิน / สคริปต์ใด ๆ

ฉันรู้ว่าฉันมาสาย แต่ก็มีสองวิธีที่ฉันใช้:

1) ทำให้ไอเท็มเมนูพาเรนต์ซ้ำกับรายการย่อยแรกและเปลี่ยนเลเบล ตัวอย่างเช่นหากรายการแรกภายใต้ "ผลิตภัณฑ์" คือ "ผลิตภัณฑ์ 1" ให้ใช้ "ผลิตภัณฑ์ 1" เป็นรายการเมนูหลักจากนั้นเปลี่ยนฉลากเป็น "ผลิตภัณฑ์" ด้วยวิธีนี้ทั้ง "ผลิตภัณฑ์" และ "ผลิตภัณฑ์ 1" จะนำไปสู่หน้าผลิตภัณฑ์ 1

2) เพิ่มการเปลี่ยนเส้นทางเพื่อให้หน้าผลิตภัณฑ์ถูกเปลี่ยนเส้นทางไปยังผลิตภัณฑ์ 1. ประโยชน์ของตัวเลือกนี้คือช่วยให้คุณสร้างหน้าผลิตภัณฑ์เปล่าเพื่อสร้างรายการแบบลำดับชั้นในหน้า แต่ถ้าใครพยายามไปที่ผลิตภัณฑ์เปล่า หน้าพวกเขาจะถูกเปลี่ยนเส้นทาง

ไปที่ลักษณะที่ปรากฏจากนั้นคลิกที่เมนู ในส่วนนี้ไปภายใต้โครงสร้างเมนูและคลิกที่ลูกศรลงเพื่อขยายหน้าและคุณจะเห็นกล่องที่ระบุว่าปิดการใช้งานลิงค์ ทำเครื่องหมายที่ช่องนั้นและบันทึก

1. ตั้งค่าลิงก์ที่กำหนดเองเป็น # ซึ่งจะไม่ส่งคืนรายการใด ๆ

2. เพิ่มตัวกรองนี้:

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }

3. แก้ไขช่วง CSS ที่จะได้รับรูปแบบเช่นเดียวกับไม่ลืม<a>cursor: context-menu;

สร้างรายการเมนู "ลิงก์ที่กำหนดเอง" และเพิ่ม "javascript :;" (ไม่มีเครื่องหมายคำพูด) สำหรับฟิลด์ URL นี่เป็นวิธีที่ดีกว่าการใช้ "#" เพราะจะไม่เลื่อนหน้าของคุณไปด้านบนเมื่อคลิก

เขียนจาก 1/2019 วิธีแก้ปัญหาที่สร้าง HTML5 ที่เหมาะสมคือการทำดังต่อไปนี้

1. เพิ่มลิงก์ที่กำหนดเองโดยตั้ง URL เป็น # และชื่ออะไรก็ได้ที่คุณต้องการ ต้องระบุทั้งสองฟิลด์
2. แก้ไขลิงค์ที่กำหนดเองที่เพิ่งเพิ่มเข้าไปเพื่อให้ URL นั้นว่างเปล่า
3. บันทึกการเปลี่ยนแปลง

สิ่งนี้จะสร้างการนำทางระดับบนสุด<a>Menu</a>ซึ่งเป็นวิธีที่ถูกต้องในการนำเสนอลิงค์ที่ไม่สามารถคลิกได้

คุณสามารถปิดการใช้งานกิจกรรมบน<a>แท็กสำหรับรายการเมนูระดับแรกทั้งหมดโดยใช้ CSS บริสุทธิ์ .main-menuคลาสอาจมีชื่ออื่นตามการตั้งชื่อเมนูของคุณ

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}

สามารถหาคำตอบที่ง่ายกว่านี้ในคำถามอื่น:

เมนูผู้ดูแลระบบ - ไฮไลต์เมนูระดับบนสุดเมื่ออยู่ในหน้าเมนูย่อย (โดยไม่แสดงเมนูย่อย)

มองหาคำตอบของ Askelon ทำงานได้อย่างสมบูรณ์แบบโดยไม่จำเป็นต้องทำ preg_replaces หรือ jquery ใด ๆ