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!
Jawaban:
Saya punya beberapa ide:
#
yang tidak akan mengembalikan apa punsumber
href=""
karena sebagian besar pengguna perangkat taktil tidak akan dapat melihat menu dropdown tanpa menggunakan JSwp_list_pages()
, bukanwp_nav_menu()
Cara termudah untuk melakukannya tanpa plugin atau apa pun adalah dengan menggunakan fungsi "Menu" di WordPress. Berikut adalah instruksi untuk WordPress 4.8:
sumber
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
href
atribut dari tautan itu seluruhnya. Sebuaha
elemen tanpahref
atribut adalah benar metode HTML 5 menciptakan link placeholder.sumber
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:
sumber
#
sebagai target tautan dan kemudian menerapkan kelas CSS khusus untuk keperluan penataan, adalah solusi paling tidak menarik menurut saya. Namun, pengaturanpointer-events: none
tidak masuk akal bagi saya, karena akan merusak sub menu. Bisakah Anda menguraikan mengapa Anda menetapkan atribut itu?Menggunakan pendekatan PHP saya menambahkan kode ini ke functions.php:
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.
sumber
Saya memecahkan masalah ini: di header.php (tema Anda) saya mencari:
dan diganti dengan:
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 :-)
sumber
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.
sumber
Ini akan menghapus klik (dan menghapus gaya item). Dengan cara ini, Anda tidak perlu menggunakan tautan # kustom di menu Anda.
sumber
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.
sumber
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.
sumber
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.
sumber
Tambahkan filter ini:
Edit span CSS untuk mendapatkan gaya yang sama dengan
<a>
, jangan lupacursor: context-menu;
.sumber
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.
sumber
Menulis dari 1/2019, solusi yang menghasilkan HTML5 yang tepat adalah dengan melakukan hal berikut.
Ini akan menghasilkan nav tingkat atas
<a>Menu</a>
yang merupakan cara yang benar untuk mewakili tautan yang tidak dapat diklik.sumber
Anda dapat menonaktifkan acara pada
<a>
tag untuk semua item menu tingkat pertama menggunakan css murni..main-menu
kelas mungkin memiliki nama lain sesuai dengan penamaan menu Anda.sumber
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.
sumber