Üst düzey menü öğesinin bağlantısı nasıl değil, birbirine bağlı alt menüleri nasıl yapar?

Yatay bir menü yapıyorum ve bu menüdeki girişlerin bazıları açılır menülere sahip olacak (alt menüler) ve bazıları olmayacak. Alt menülere sahip olanlar aslında sayfalar değil. Onlar sadece açılanlar için rehber olmak içindir.

Örneğin, yatay menünün aşağıdaki gibi olduğunu söyleyin:

Ana Sayfa | Hakkımızda | Ürünler | Yol Tarifi | Temas

Ve "products" li öğesinin altındaki dikey açılan listeye bağlı 3 sayfa olması amaçlanmıştır, bu yüzden "ürünler" in kendisi aslında bir sayfayı temsil etmiyor, WP'de bunu nasıl yapabilirim?

(WP'yi statik ev ve iç sayfalarla birlikte bir CMS olarak kullanıyorum. Kendi şablonlarımı oluşturuyorum, CSS'de menüleri düzenliyorum, sonra menüleri function.php'ye kaydettiriyorum ve bunları şablonlara çağırıyorum.) WP'de girişleri eklersiniz. sayfa listesi veya özel bağlantılar yoluyla menüler. Ancak “ürünlerin” birbiriyle ilişkilendirilmesini istemiyorum. Özel bağlantıya bir bağlantı eklemezsem, menüye eklememe izin vermez.

Bu, menüler yöneticisi aracılığıyla yapılabilir mi, yoksa başka bir şekilde mi yaklaşmak zorundayım?

Herhangi bir yardım için teşekkür ederim!

Bir kaç fikrim var:

1. #Hiçbir şey döndürmeyen özel bağlantıyı ayarla
2. Öğelere özel bir sınıf ekleyin ve bağlantıları kaldırmak için jQuery kullanın.
3. JQuery yöntemine eşdeğer bir PHP kullanın
4. Ana Menü Bağlantısı Devre Dışı Bırak eklentisini kullanın (veya ayırın ve kendi mesajınızı yazın)

Bir eklenti veya herhangi bir şey olmadan yapmanın en kolay yolu, WordPress'in "Menüler" işlevini kullanmaktır. İşte WordPress 4.8 için talimatlar:

1. WordPress panonuzdan "Görünüm -> Menüler" bölümüne gidin
2. "Menüleri Düzenle" sekmesinde "Özel Bağlantılar" ı seçin
3. URL için, "#" girin (tırnak işareti olmadan)
4. Bağlantı metni için, aşağı açılır menünüzün üst düzeyi için istediğiniz metni girin.
5. "Menüye Ekle" düğmesini tıklayın
6. Menü öğesini, menünüz içindeki istediğiniz konuma sürükleyin
7. Yeni eklediğiniz menü öğesi için, öğenin sağındaki aşağı oku tıklayın (öğenin solundaki "özel bağlantıyı" okuyacak)
8. URL’den "#" harfini kaldırın. Bu - tüm tarayıcılarda - bağlantıyı düz metne dönüştürür.
9. "Menüyü Kaydet" düğmesine tıklayın

En basit yöntem, Link URL değeri olan bir Özel Bağlantı öğesi oluşturmaktı #. Bu, kullanıcıyı aynı sayfadaki boş bir karmaşaya gönderiyor, yani temelde hiçbir yere bağlanmıyor.

Ancak, yer tutucu bağlantılar için boş karmaları kullanmanın bazı yan etkileri vardır. Bağlantı hala görünecek ve bir bağlantı gibi davranacak, böylece bir bağlantı gibi görünen bir şeyi tıklattığında bir kullanıcıyı şaşırtabilir, ancak hiçbir şey olmuyor. Diğer bir etki, boş bir karma bağlantıya tıklamak, kullanıcıyı sayfanın en üstüne göndererek mevcut herhangi bir karmaşayı geçersiz kılar. Bu, yine de sayfanın en üstünde yer alan bir menü için çok endişe verici olmayabilir, ancak özellikle de bir altbilgi menüsü için beklenmedik bir şekilde sayfa beklemiyorsa, sayfa beklenmedik bir şekilde zıpladığında sıkıntı vericidir.

Çözüm, menüde boş karma bağlantıların ne zaman kullanıldığını algılamak için boş karma yöntemini bir kod parçası ile birleştirmek ve hrefbu bağlantıdan özniteliği tamamen kaldırmaktır . Bir abir olmadan eleman hrefözelliğinde olan doğru HTML 5 yöntem bir yer tutucu bağlantı oluşturma.

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

Bu benim için çalıştı:

Menülerdeki> CSS Sınıflarını > Ekran Seçenekleri> CSS Sınıflarını etkinleştirdim Sonra ".nolink" sınıfını devre dışı bırakmak istediğim menü öğesine verdim ve bu kod parçasını özel CSS panelime ekledim:

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

PHP yaklaşımını kullanarak bu kodu functions.php dosyasına ekledim:

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

Bu, link'i item menüsü için bir span elemanı ile değiştirir, bu da aradığım şey olan post_name == "contact" olur. Menü başlığını veya kimliğini kontrol etmek için kolayca değiştirebilirsiniz veya alt menü öğelerinin olup olmadığını kontrol etmek için bazı kodlar ekleyebilirsiniz.

Bu şekilde çözdüm : header.php (temanızın içinde) Aradım :

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

ve ile değiştirilir:

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

Basit bir deyişle, bu komut dosyası üst bağlantısının "#" ile bitip bitmediğini kontrol eder, bu durumda A etiketinin içeriğine, tıklamayı engelleyen bir yayılma öğesi ekler.

Umarım yardımcı olur :-)

Buradaki diğerlerinin önerdiği gibi # ile bir URL içeren özel bir bağlantı menüsü öğesi oluşturabilirsiniz. Sonra menüye eklendikten sonra # işaretini silin. Ve son olarak, bu basit regex'i, asıl etiketi bu bağlantılardan çıkarmak için kullanabilirsiniz.

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

Bu, tıklamayı kaldıracak (ve öğenin stilini kaldıracak). Bu şekilde, menünüzdeki özel # linkleri kullanmak zorunda değilsiniz.

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

Bunun eski bir iş parçacığı olduğunu kabul edin, ancak Wordpress'te bir bağlantıya sahip olmanın hızlı ve kirli bir yolu için bağlantı URL'sini şu şekilde yapmaktır:

#_

Hashtag'den sonra alt çizgiye dikkat edin. Bu şekilde, menünüz sayfayı aşağı kaydırırsa (örn. Sabit), üzerine tıkladığınızda sayfanın üstüne atlamazsınız ve herhangi bir eklenti / komut dosyası gerektirmez.

Oyuna geç kaldığımı fark ettim ama bunlar kullandığım iki yöntem:

1) Ana menü öğesini ilk alt öğenin bir kopyası haline getirin ve etiketini değiştirin. Örneğin, "Ürünler" altındaki ilk öğe "Ürün 1" ise, üst menü öğesi olarak "Ürün 1" kullanın, ardından etiketini "Ürünler" olarak değiştirin. Bu şekilde, hem "Ürünler" hem de "Ürün 1", Ürün 1 sayfasına yönlendirilecektir.

2) Ürünler sayfasının Ürün 1'e yönlendirilmesi için bir yönlendirme ekleyin. Bu seçeneğin yararı, Sayfalar'da hiyerarşik bir liste oluşturmak için boş Ürünler sayfası oluşturmanıza izin vermesidir, ancak biri boş Ürünlere gitmeye çalışırsa sayfa, yönlendirilecekler.

Görünüm'e gidin, ardından menülere tıklayın. Bu bölümde menü yapısına girerek sayfayı genişletmek için aşağı oka tıklayın ve bağlantıyı devre dışı bırak yazan bir kutu göreceksiniz. Kutuyu işaretleyin ve kaydedin.

1. Herhangi bir Liste öğesi döndürmeyecek özel bağlantıyı # olarak ayarlayın

2. Bu filtreyi ekle:

   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. <a>Unutma, aynı stili elde etmek için CSS'yi düzenle cursor: context-menu;.

"Özel Bağlantılar" menü öğesini oluşturun ve "javascript :;" ekleyin. URL alanı için (tırnak işaretleri olmadan). Bu, "#" kullanmaktan daha iyidir, çünkü tıklandığında sayfanızı en üste kaydırmaz.

1/2019'dan itibaren, uygun HTML5 üreten çözüm aşağıdakileri yapmaktır.

1. URL'yi # olarak ayarlanmış bir Özel Bağlantı ekleyin ve istediğiniz adı girin. Her iki alan da zorunludur.
2. Yeni eklenen Özel Bağlantı'yı düzenleyin, böylece URL boş olsun.
3. Değişiklikleri kaydedin.

Bu, <a>Menu</a>tıklanabilir olmayan bir bağlantıyı temsil etmenin doğru yolu olan üst düzey bir nav üretecektir .

<a>Saf css kullanarak, tüm birinci seviye menü öğeleri için etiketteki olayları devre dışı bırakabilirsiniz . .main-menuSınıf, menü isminize göre başka bir isme sahip olabilir.

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

Başka bir soruda çok daha kolay bir çözüm bulunabilir:

Yönetici Menüsü - Bir alt menü sayfasındayken üst menü menüsünü vurgula (alt menüyü göstermeden)

Askelon'un cevabını ara. Preg_replaces veya jquery yapmak zorunda kalmadan mükemmel çalışır.