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

25

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!

PVA
sumber
1
inilah solusinya bekerja sangat baik, cek it wordpress.org/support/topic/no-page-menu-item
Anda dapat melakukan ini dengan menggunakan js. coba artikel ini. kvcodes.com/2014/07/…
Kvvaradha
Di kotak URL, biarkan kosong.
AMY WANG
Tidak ada yang menyebutkan Kelas WP_NAV_MENU_WALKER, Anda bisa menulis alat bantu jalan Anda sendiri yang mengutarakan apa yang Anda inginkan.
user3135691

Jawaban:

12

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)
Brooke.
sumber
Terima kasih atas tips dan tautannya! Seperti yang disarankan Gavin, menggunakan # untuk tautan khusus "berfungsi"; opsi lain mungkin bekerja lebih baik, meskipun tidak semudah itu. Yah, plugin mungkin mudah tetapi saya benci menggunakan plugin jika saya dapat melakukan hal yang sama secara lebih langsung. Saya harus memutuskan pendekatan terbaik. Terima kasih lagi!
PVA
Jika Anda berencana untuk menggunakannya di perangkat taktil, berhati-hatilah dengan menggunakan kosong href=""karena sebagian besar pengguna perangkat taktil tidak akan dapat melihat menu dropdown tanpa menggunakan JS
Simon
Tautan putus. Anda mungkin ingin mengerjakan beberapa dari ide-ide ini dalam jawaban Anda
shea
Juga, # 2 dan # 3 merujuk pada wp_list_pages(), bukanwp_nav_menu()
shea
25

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"
GavinR
sumber
Terima kasih atas tipnya. Yaitu, meskipun tidak sempurna karena Label masih terlihat seperti "tautan" ketika Anda mengarahkan mouse, tetapi label tidak pergi ke mana pun. Sehingga bisa bekerja dalam keadaan darurat.
PVA
1
Apakah Anda membaca seluruh komentar? Setelah tautan ditambahkan, klik panah dropdown menurut nama tautan, dan hapus "#" dari kotak teks URL. Ini, di semua browser, akan menyebabkan tautan tidak dapat diklik.
GavinR
1
Ya, terima kasih, saya sudah membaca seluruh komentar. Saya kembali dan mencoba lagi dan menyadari masalah saya. Ketika saya meninggalkan #, kata itu muncul di navbar tetapi sebagai "tautan mati". Ketika saya menghapus # kata itu tidak muncul di navbar kecuali jika saya mendekatinya dan akan muncul dalam keadaan melayang. Jadi saya berasumsi itu berarti saya harus menerapkan CSS ke kata sehingga muncul tanpa ditautkan. Saya tidak yakin mengapa negara melayang muncul ...
PVA
Ini masih dalam 4.9.5, namun saya tidak yakin karena 'rasanya' seperti keuntungan hacking bug. Jika tidak .. ini akan menyelamatkan banyak orang dari sakit kepala ... Ini seperti fakta bahwa Wordpress menganggap "1 2 3 4 5 6" kata sandi yang kuat ... masih.
brooklynsweb
FYI, jika Anda melakukan Langkah 8 (untuk alasan apa pun yang baik), maka kursor Anda tidak akan menjadi pointer ketika Anda mengarahkan kursor ke tautan khusus. Dalam hal ini, Anda bisa menatanya dengan pointer: cursor.
MarsAndBack
7

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 );
} );
shea
sumber
2

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;
}
RickyBono
sumber
Ini membunuh dropdown juga.
user385917
Menggunakan #sebagai target tautan dan kemudian menerapkan kelas CSS khusus untuk keperluan penataan, adalah solusi paling tidak menarik menurut saya. Namun, pengaturan pointer-events: nonetidak masuk akal bagi saya, karena akan merusak sub menu. Bisakah Anda menguraikan mengapa Anda menetapkan atribut itu?
user1438038
1

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.

Sam Bull
sumber
0

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

niente0
sumber
Hai, saya tahu ini adalah jawaban lama tetapi untuk referensi di masa mendatang, saya tidak akan masuk dan mengubah file header tema Anda karena ketika pembaruan berikutnya semua kode Anda akan ditimpa. Solusi terbaik untuk ini adalah membuat tema anak dengan kode khusus Anda.
Scott
0

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);
deweydb
sumber
0

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 );
Doug Cassidy
sumber
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.

pengguna1249523
sumber
0

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.

Barry
sumber
0

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.

rampok
sumber
Fungsi ini tidak disediakan oleh inti. Mungkin tema atau plugin menambahkannya ke pengaturan Anda?
Dave Romsey
Saya pernah melihat ini sebelumnya, saya berharap saya tahu plugin atau tema mana yang melakukan ini.
DavGarcia
0
  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;.

tenanghag
sumber
0

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.

Tahi Reu
sumber
0

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.

DavGarcia
sumber
0

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;
}
Karl Adler
sumber