Bagaimana membuat item menu tingkat atas tidak memiliki tautan, tetapi memiliki sub-menu yang ditautkan?

Saya sedang membangun menu horisontal dan beberapa entri pada menu itu akan memiliki dropdown (sub-menu), dan beberapa tidak. Mereka yang memiliki sub-menu sebenarnya bukan halaman. Mereka hanya dimaksudkan sebagai panduan untuk dropdown.

Misalnya, katakanlah menu horizontal adalah seperti berikut:

Beranda | Tentang Kami | Produk | Petunjuk Arah | Kontak

Dan "produk" li item dimaksudkan untuk memiliki 3 halaman yang ditautkan dalam daftar dropdown vertikal di bawahnya, jadi "produk" itu sendiri sebenarnya tidak mewakili halaman, bagaimana saya bisa melakukannya di WP?

(Saya menggunakan WP sebagai CMS, dengan halaman statis di dalam dan di dalam. Saya membangun templat saya sendiri, mendesain menu dalam CSS, kemudian mendaftarkan menu di functions.php dan memanggil mereka di templat.) Di WP Anda menambahkan entri ke menu melalui daftar halaman, atau oleh tautan khusus. Tetapi saya tidak ingin "produk" dihubungkan. Jika saya tidak menambahkan tautan ke tautan ubahsuaian itu tidak akan membiarkan saya menambahkannya ke menu.

Apakah ini bisa dilakukan melalui menu admin atau apakah saya harus mendekatinya dengan cara lain?

Terima kasih atas bantuannya!

Saya punya beberapa ide:

1. Tetapkan tautan khusus #yang tidak akan mengembalikan apa pun
2. Tambahkan kelas khusus ke item dan kemudian gunakan jQuery untuk menghapus tautan.
3. Gunakan PHP yang setara dengan metode jQuery
4. Gunakan plugin Disable Parent Menu Link (atau pisahkan dan tulis sendiri)

Cara termudah untuk melakukannya tanpa plugin atau apa pun adalah dengan menggunakan fungsi "Menu" di WordPress. Berikut adalah instruksi untuk WordPress 4.8:

1. Dari dasbor WordPress Anda, pergi ke "Appearance -> Menus"
2. Di tab "Edit Menu", pilih "Tautan Khusus"
3. Untuk URL, Masukkan "#" (tanpa tanda kutip)
4. Untuk teks tautan, masukkan teks yang Anda inginkan untuk tingkat atas dari menu drop-down Anda
5. Klik tombol "Tambahkan ke Menu"
6. Seret item menu ke posisi yang diinginkan di dalam menu Anda
7. Untuk item menu yang baru saja Anda tambahkan, klik panah bawah di sebelah kanan item (itu akan membaca "tautan khusus" di sebelah kiri item)
8. Hapus "#" dari URL. Ini - di semua browser - akan mengonversi tautan menjadi teks biasa.
9. Klik pada tombol "Simpan Menu"

Metode paling sederhana yang saya buat adalah membuat item Tautan Kustom dengan nilai URL Tautan #. Ini mengirim pengguna ke hash kosong di halaman yang sama, jadi pada dasarnya tidak ada tautan.

Namun, ada beberapa efek samping menggunakan hash kosong untuk tautan placeholder. Tautan akan tetap muncul dan berperilaku seperti tautan, sehingga bisa membingungkan pengguna ketika mereka mengklik apa yang tampak sebagai tautan tetapi tidak ada yang terjadi. Efek lainnya adalah mengklik tautan hash kosong akan mengesampingkan hash yang ada, mengirimkan pengguna ke bagian atas halaman. Ini mungkin tidak terlalu mengkhawatirkan untuk menu yang ada di bagian atas halaman, tetapi cukup menggelegar ketika halaman tiba-tiba melompat ketika Anda tidak mengharapkannya, terutama jika ini adalah untuk menu footer.

Solusinya adalah menggabungkan metode hash kosong dengan sepotong kode untuk mendeteksi kapan tautan hash kosong digunakan dalam menu dan menghapus hrefatribut dari tautan itu seluruhnya. Sebuah aelemen tanpa hrefatribut adalah benar metode HTML 5 menciptakan link placeholder.

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

Ini bekerja untuk saya:

Saya mengaktifkan Kelas CSS di Menu> Opsi Layar> Kelas CSS Kemudian saya memberikan elemen menu yang ingin saya nonaktifkan kelas ".nolink" dan menambahkan potongan kode ini ke panel CSS kustom saya:

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

Menggunakan pendekatan PHP saya menambahkan kode ini ke 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);

Ini akan mengganti tautan dengan elemen span untuk menu item dengan post_name == "kontak", yang saya cari. Anda dapat dengan mudah mengubahnya untuk memeriksa judul menu atau ID, atau menambahkan beberapa kode untuk memeriksa apakah ada item menu anak, dll.

Saya memecahkan masalah ini: di header.php (tema Anda) saya mencari:

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

dan diganti dengan:

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

Dengan kata sederhana, skrip ini memeriksa apakah tautan induknya berakhir dengan "#", dalam hal ini menambahkan elemen rentang di sekitar konten tag A, yang menonaktifkan klik.

Semoga bisa membantu :-)

Seperti yang disarankan orang lain di sini, Anda dapat membuat item menu tautan kustom dengan # sebagai url-nya. Kemudian hapus # setelah ditambahkan ke menu. Dan akhirnya, Anda dapat menggunakan regex sederhana ini untuk menghapus tag sebenarnya dari tautan tersebut.

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

Ini akan menghapus klik (dan menghapus gaya item). Dengan cara ini, Anda tidak perlu menggunakan tautan # kustom di menu Anda.

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

Menghargai ini adalah utas lama, tetapi untuk cara cepat dan kotor memiliki tautan di Wordpress adalah dengan menjadikan URL tautan sebagai:

#_

Perhatikan garis bawah setelah tagar. Dengan cara ini jika menu Anda menggulir ke bawah halaman (mis. Diperbaiki), Anda tidak mendapatkan lompatan ke bagian atas halaman saat mengkliknya dan tidak memerlukan plugin / skrip.

Saya menyadari bahwa saya terlambat dalam permainan, tetapi ini adalah dua metode yang saya gunakan:

1) Jadikan item menu induk sebagai duplikat dari sub-item pertama, dan ubah labelnya. Misalnya, jika item pertama di bawah "Produk" adalah "Produk 1", gunakan "Produk 1" sebagai item menu induk, lalu ubah labelnya menjadi "Produk". Dengan begitu, "Produk" dan "Produk 1" akan mengarah ke halaman Produk 1.

2) Tambahkan pengalihan sehingga halaman Produk dialihkan ke Produk 1. Manfaat dari opsi ini adalah memungkinkan Anda untuk membuat halaman Produk kosong untuk membuat daftar hierarkis di Halaman, tetapi jika ada yang mencoba untuk pergi ke Produk kosong halaman, mereka akan diarahkan.

Pergi ke Penampilan, lalu klik pada menu. Di bagian ini, masuk di bawah struktur menu dan klik panah ke bawah untuk membuka halaman dan Anda akan melihat kotak yang mengatakan tautan nonaktifkan. Centang kotak itu dan simpan.

1. Tetapkan tautan khusus ke # yang tidak akan mengembalikan item Daftar apa pun

2. Tambahkan filter ini:

   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. Edit span CSS untuk mendapatkan gaya yang sama dengan <a>, jangan lupa cursor: context-menu;.

Buat item menu "Tautan Khusus" dan tambahkan "javascript:;" (tanpa tanda kutip) untuk bidang URL. Ini cara yang lebih baik daripada menggunakan "#" karena itu tidak akan menggulir halaman Anda ke atas ketika diklik.

Menulis dari 1/2019, solusi yang menghasilkan HTML5 yang tepat adalah dengan melakukan hal berikut.

1. Tambahkan Tautan Ubahsuaian dengan URL yang disetel ke #, dan nama apa pun yang Anda inginkan. Kedua bidang wajib diisi.
2. Edit Tautan Kustom yang baru ditambahkan sehingga URL kosong.
3. Simpan perubahannya.

Ini akan menghasilkan nav tingkat atas <a>Menu</a>yang merupakan cara yang benar untuk mewakili tautan yang tidak dapat diklik.

Anda dapat menonaktifkan acara pada <a>tag untuk semua item menu tingkat pertama menggunakan css murni. .main-menukelas mungkin memiliki nama lain sesuai dengan penamaan menu Anda.

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

Solusi yang jauh lebih mudah dapat ditemukan pada pertanyaan lain:

Menu Admin - Sorot menu tingkat atas saat berada di halaman sub-menu (tanpa menunjukkan sub-menu)

Cari jawaban Askelon. Bekerja dengan sempurna, tanpa perlu melakukan preg_replaces atau jquery.