Eklenti WP Mega Menü: İşlevsellik, Kurulum, Kurulum. Yatay açılır menü Süper eklenti WordPress Dikey Mega Menü WordPress

Alt menü.Alt (alt) menüsünün görüntüleneceği şablonun (footer.php) bodrumuna yerleştiririz:

"Aşağı Menü" konumuna eklenmiş yöneticide oluşturulan menüyü geri çekin. Yapı önce aynı olacaktır.

Not, birinci düzenlemede, parametreler bir dizi (dizi) iletildi. İkinci dize boyunca. Her iki seçenek de doğru. Bu, WordPress işlevleri için ortak bir durumdur - parametreler hem bir dizi hem de dize yoluyla iletilebilir (dize bir diziye dönüştürülür).

# 2 adına göre menü ekran

Menüyü adına göre görüntülemek için "Menü" argümanını kullanabilirsiniz. Ad, yöneticide bir menü oluştururken belirtildiği belirtilir. Örneğimizde (resme bakın) "Ana Menü". Menü argümanı, tema_location'dan büyük bir önceliğe sahiptir, bu da isme göre görüntüleniriz, daha sonra tema_location parametresi göz ardı edilir.

Adını değil menü kimliğini belirleyebilirsiniz. Bu nedenle, menü adını değiştirirken, kod çalışmaya devam eder. Menü kimliği, menüyü düzenlerken URL'de görüntülenebilir:

Notlar

Sarıcı Div Kaldır

Muhtemelen "döndüğü" menüsünün, genellikle gereksiz div etiketini fark ettiniz. WP_NAV_MENU () işlevi () Boş parametre "Konteyner" \u003d\u003e "" için argümanlarda belirtilerek silinebilir.

Varsayılan ayarları değiştirin

Takılan menü için aynı parametreyi sürekli olarak belirtmemek için, bunları Factors.php'de geçersiz kılabilirsiniz. WP_NAV_MENU_ARGS filtresi ile yapılır:

Register_nav_menus (diziyi ("üstten" \u003d\u003e "Üst menü", "alt" \u003d\u003e "Aşağı Menü")); Add_filter ("wp_nav_menu_args", "my_wp_nav_menu_args"); Fonksiyon my_wp_nav_menu_args ($ args \u003d "") ($ args ["konteyner"] \u003d ""; $ args;)

Analoji ile, varsayılan argümanlarınızı oluşturabilirsiniz: $ args ["argüman"] \u003d "değer".

Menünün kayıtlı olup olmadığını kontrol edin

Wordpress'te ayrıca bir fonksiyon vardır: has_nav_menu ("üstten") - Üst menünün konumunun kayıtlı olup olmadığını kontrol eder. Menü belirtilmemişse, WP_NAV_MENU () işlevi WP_List_Pages () olarak çalışacaktır, ancak argümanlarda çıkarmamıza rağmen "Soyguncu" div kalacaktır. Bu sorunu böyle çözebilirsiniz:

İf ("has_nav_menu (" Top ") (WP_NAV_MENU (Dizi (" Konteyner "\u003d\u003e", "Theme_Location" \u003d\u003e "Üst", "Menu_Class" \u003d\u003e "Menü"));) başka (yankı "

"; Wp_list_pages (dizi (" derinlik "\u003d\u003e 1," title_li "\u003d\u003e" ")); echo"

Sitedeki site, sitedeki ziyaretçilerin hareketini kolaylaştırır. Çok miktarda içeriğe sahip web siteleri yalnızca her zamanki menü ile çalışamaz. Bu web sitesinin içeriğinin çoğu onlara uyması muhtemel değildir. Bu durumda, Mega menüsü girer. Görünüm ve menü işlevleri büyük ölçüde kullandığınız teknolojiye bağlıdır. Mega menüsü için birçok WordPress eklentisi, kendimi için en iyisinin bu listede kendiniz için zor olduğuna söz verir.

Bu çok sayıda eklenti mega menüsünden çoğu kullanıcı için uygun olan bir tane var. Bu bir eklenti wp mega menüdür. Tüm temel işlevleri ve işlevleri sunar ve ücretsizdir.

Makalede, WP Mega Menü eklentisinin ana işlevselliğine, nasıl kurulacağını ve yapılandıracağını da inceleyeceğiz.

WP Mega Menü Özellikleri

Çok çeşitli WP Mega menü özellikleri şunları içerir:

• Sürükle ve bırak menüsü.
• Görsel Menü İnşaatı.
• Menü öğelerinde widget'lar.
• Birkaç konuda bir varyantı.
• Menü temaları dışa aktarın / ithal edin.
• Logo ve sosyal simgeler ile marka.
• Büyütme menüsü / simgeler.
• Destek simgeleri.
• Gerilmiş menü ve resim menüsünün arka planında.
• Adaptif ve mobil menü.
• Sınırsız renkler ve Google yazı tipleri.

Güçlü fonksiyonların bazılarını daha ayrıntılı olarak düşünün.

İşlevsellik Sürükle ve bırak menüsünü oluşturma

WP Mega menü eklentisi sitenize yüklendikten sonra, sürükleme işlevlerini kullanarak bir menü oluşturabilirsiniz. Dizeleri ekleyin ve ardından widget'ları bu satırların sütunlarına sürükleyin. Bu WordPress eklentisi, menü düzenlerini düzenlerken değişiklikleri otomatik olarak kaydeder. Kod yazmanıza gerek yok, programlayacak bir şey. Güçlü bir sürükleme ve bırakma sistemi WP MEGA menüsü, minimum çabayla en iyi menüleri oluşturmayı mümkün kılar.

Tamamen Uyarlanabilir ve Mobil Menü

WP Mega menü kullanılarak oluşturulan menü% 100 uyarlanabilir ve mobil olacaktır. Sitenizin çalıştığı cihazların boyutuna bakılmaksızın, ekranda sorun olmaz. Masaüstü ve mobil sürümler arasında otomatik olarak geçiş yapmak için adaptasyonu ekran çözünürlüğüne kontrol edebilirsiniz. Web sitenizin menünüz tüm işletim sistemlerinde mükemmel şekilde çalışacaktır.

WooCommerce ile entegrasyon

Sitenizde ekran ve satış için ürünleriniz varsa, WP Mega Menü, ziyaretçilere doğrudan menüden ürün ayrıntılarına erişmek için harika bir yol sunar. Menü öğelerinde e-ticaret ürünlerini görüntülemek için bir sisteminiz var. Mega menü kullanarak yüksek oranda organize edilmiş e-ticaret navigasyonu ile web sitenizi siteye çevirin.

Çok seviyeli açılır menü

İstediğiniz kadar çok menü öğesi oluşturun. Çok seviyeli bir açılır menü tasarlayabilirsiniz ve eşit derecede güzel görünüyorlar. Aşağı açılır listeyle alt menüyü kullanarak ana menünün elemanlarını zenginleştirin. Size daha fazla navigasyon özelliği verecektir. Bu tür çok seviyeli açılır menüleri oluşturmak, bu düzenleyici eklentisi ile çok daha kolaydır.

Genişletilmiş fonksiyonlar

Menüde herhangi bir kısa kod kullanın. Bununla birlikte, önceden kurulmuş iki yüklü genişletilmiş widget kullanma fırsatınız var: Üstlerinin üstünde görüntülenecek fotoğraflar, başlıklar ve küçük parçalar ekleyin.

Menüde sosyal simgeler ve arama seçeneği

Doğrudan menünüzde varsayılan WordPress Arama Sisteminiz var. Eklenti WP Mega Menüsü ile sadece birkaç tıklamayla yapabilirsiniz.

Ayarlarla dolu

WP MEGA menüsü, menüyü tamamen yapılandırmanıza izin verir. Bu menüyü ayarlama ve gerekli değişiklikleri yapmak oldukça basittir. Menüdeki herhangi bir öğenin girintilerini ve alanlarını takın. Menünün çalışacağı cihazlara uygun olarak menünün görünürlüğünü kontrol edin. Menü öğelerine efektler de uygulayabilirsiniz. Menüyü ayarlarken simgeler, arka plan seçenekleri gibi çeşitli öğeler kullanın.

Çok dilli: WPML uyumlu

Sitenizin hangi dilin çalışacağı ne olursa olsun, WP Mega Menüsü herhangi bir dilde herhangi bir sorun yaşamayacak. WPML ile tamamen uyumludur. Menü içeriğinizi herhangi bir dilde yapın ve menü çalışacaktır.

WordPress web sitenizde bir mega menüsü nasıl oluşturulur?

1. wp mega menü eklentisini yükleyin

Başka bir Wordpress eklentisi gibi, sitenize iki farklı şekilde yükleyebilirsiniz. İlk önce kişisel hesabınıza gidin -\u003e Eklentiler -\u003e Yeni ekle. "WP Mega Menu" Arama Dizini'nde belirtin ve "Şimdi Ayarla" ı tıklayın. Ardından Etkinleştir düğmesi göründüğünde eklentiyi etkinleştirin.

Ayrıca indirebilirsiniz eklenti WP Mega Menüsü WordPress kataloğundan. Ardından WordPress araç çubuğunu açın. Eklentilere Git -\u003e Yeni Ekle -\u003e Eklentiyi İndir. Bir eklentiye sahip bir zip dosyası yükleyin ve "Şimdi Set" i tıklayın.

Başarılı bir kurulum mesajından sonra eklentiyi etkinleştirin. Aslında, sistemin kendisi etkinleştirmesini isteyecektir.

2. Bir menü oluşturun

Her şeyden önce, WordPress Toolbar -\u003e Görünüm -\u003e menüsünü tıklatarak bir menü oluşturun. Sonra yeni bir menü oluşturun. Böylece WordPress, varsayılan menüyü oluşturmanıza olanak sağlar.

3. Global Ayarlar WP Mega Menüsü

Sol kenar çubuğundaki WP Mega Menü sekmesini bulun ve üzerine tıklayın.

4. Menü için bir konu oluşturun

Menü Temaları, menüdeki navigasyon panellerinin stillerini ve davranışlarını tanımlar. Menü temasını oluşturmak için, WP Mega Menü -\u003e Temaları açın. Yeni bir konu oluşturabilir veya ithal edebilirsiniz. Bir eylem gerçekleştirmek için "İthalat Tema" veya "Yeni Bir Konu Oluştur" nı tıklayın.

5. Ayarlar Mega Menü Elemanları

WordPress Toolbar -\u003e Görünüm -\u003e Menü'ü ziyaret edin. WP MEGA menü parametresi, menü öğelerinde fare imlecini vurduğunuzda görünecektir.

Kurulum yapmak için üzerine tıklayın. Mega menü parametresini "Evet" olarak ayarlayın ve satırları ve sütunları seçmek için "Bir Dize Ekle" yi tıklayın. Ayrıca sol taraftaki menü temasını seçin.

Mega menüsünde alışveriş yapın

Solda, genişletilmiş işlevler ekleyebileceğiniz faydalı widget'ları göreceksiniz. Widget WPMM Izgara WooCommerce'i sürükleyin ve sütununa yerleştirin.

WPMM Grid WooCommerce Widget'ı düzenleyin. Ürünlerinizi alıcıların onları görmesini istediğiniz gibi görüntüleri ve bilgilere yerleştirin. Tüm kategorilerden ürünleri görüntülemek için adı belirleyebilir ve belirli bir kategori veya tüm kategorileri seçin.

WordPress web siteniz için ilk Mega menüsünüzü oluşturmayı tamamladınız. Bu devrimci Wordpress tasarımcısı menü için çok şey yapabilirsiniz. Başka neler yapabileceğini ve nasıl yapılacağını öğrenmek için detaylı oku belgeler Eklentiye.

Rengini veya görünümlerini değiştirmek için Wordpress Gezinme menüsünü yapılandırmak ister misiniz? Konu WordPress'iniz sitenizdeki navigasyon menüsünün görünümünü işler. Gereksinimlerinizi karşılamak için CSS kullanarak kolayca yapılandırabilirsiniz. Bu yazıda, navigasyon menüsünün Wordpress stilini nasıl yapılandıracağınızı göstereceğiz.

Yöntem 1: WordPress'te Manuel Değiştir Stil Navigasyon Menüsünü Kullanın

Bu yöntem, WordPress Tema dosyalarını düzenlemenizi gerektirir. Sadece kodu düzenlemek ve nasıl çalıştığını anlamak için uygunsanız kullanmanız gerekir.

WordPress temanıza özel ayarlar yapmanın en iyi yolu. Yalnızca CSS'yi değiştirirseniz, tema dosyalarını değiştirmeden rehberimizi görebilirsiniz.

WordPress'deki gezinme menüsü, sırasız bir liste (etiket) olarak görüntülenir.

Bir sonraki etiketi az önce kullandıysanız, listeyi bununla ilişkili herhangi bir CSS sınıfı olmadan görüntüler.

Düzensiz listeniz, kendi sınıfına sahip listenin her bir öğesi olan 'Menü' sınıfının adına sahip olacaktır.

Sadece bir yer menünüz varsa çalışabilir. Bununla birlikte, konuların çoğu navigasyon menüsünü görüntüleyebileceğiniz çeşitli yerlere sahiptir.

Yalnızca CSS sınıflarını varsayılan olarak, diğer yerlerde menüden bir çakışmaya yol açabilir.

Bu nedenle CSS sınıfını ve menü konumunu belirlemeniz gerekir. Büyük olasılıkla, WordPress temanız zaten kod kullanarak bir navigasyon menüsü ekleyerek yapılır:

"Birincil", "Menu_Class" \u003d\u003e "Birincil menü",)); ?\u003e.

Bu kod, WordPress'in bu konunun ilk menüyü gösterdiğini bildirir. Ayrıca CSS birincil menü sınıfını menü navigasyonuna ekleyecektir.

Artık bu CSS yapısını kullanarak navigasyon menünüzün stilini yapılandırabilirsiniz.

#Header .primary-menu () // konteyner sınıfı #header .primary-menu ul () // konteyner sınıfı ilk sıralanmamış liste #header .primary-menü ul UL () // sıralanmamış bir liste içinde sıralanmamış liste #header .Primary -Menu li () // her navigasyon maddesi #header .primary-Menu li a () // her navigasyon madde bağlantı #header .Primary-Menu Li ul () // Aşağıdaki öğeler varsa #header .Primary - Menü Li Li () // her açılır navigasyon öğesi #header .Primary-menu li li a () // Her Döküm Navigasyon Öğesi Çapa

#Header'ı WordPress temanızın kullandığı kapsayıcı veya kimliğin sınıfına değiştirin.

Bu yapı, navigasyon menüsünün görünümünü tamamen değiştirmenize yardımcı olacaktır.

Bununla birlikte, her menü öğesi ve menü için WordPress kullanarak otomatik olarak eklenen başka sınıflar da vardır. Bu sınıflar, navigasyon menüsünü daha da fazla yapılandırmanıza izin verir.

Current_page_item () // Geçerli sayfa için sınıf .current-cat () // Geçerli kategori için Sınıf .Current-Menu-item () // diğer geçerli menü öğesi için Sınıf .Menu-item tipi-taksonomi () // Bir kategori için sınıf. Menü-item-type-post_type () // sayfalar için Sınıf .Menu-item-type-custom () // .Menu-item-home () // sınıfı eklediğiniz herhangi bir özel öğe için Ev bağlantısı için

WordPress ayrıca menü öğelerini yönetici alanından ayırmak için CSS sınıfları eklemenizi sağlar.

Menü öğeleri stilleri için bu özelliği, menü içeren bir görüntü simgeleri ekleyerek veya menü öğesini vurgulamak için rengi değiştirerek kullanabilirsiniz.

Sayfaya git Görünüm »Menüler. Ve düğmeye tıklayın.

Bu ayarları kontrol ettikten sonra, her bir menü öğesini düzenlerken ek bir alanın ekleneceğini göreceksiniz.

Artık özel bir CSS eklemek için bu CSS sınıfını stil sayfasında kullanabilirsiniz. Eklediğiniz CSS sınıfını kullanarak yalnızca menü öğesini etkileyecektir.

Yöntem 2: Menü stilini WordPress'te eklentilerle yapılandırın

WordPress temanızın navigasyon menüsü için stili kullanır. Birçok yeni başlayanlar, dosyaları düzenlemek veya CSS'yi bağımsız olarak yazmak için çok uygun değildir.

WordPress Menu Styling eklentisi kullanışlı olduğunda. Dosyayı düzenlemekten veya dosya yazarken sizi ortadan kaldırır.

Öncelikle, CSS Hero eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla bilgi için, adım adım bir rehbere bakın.

CSS Hero, bir kod kodu (HTML veya CSS olmadan) yazmadan kendi WordPress temanızı tasarlamanızı sağlayan WordPress'te prim bir eklentidir.

Aktivasyondan sonra, CSS kahraman anahtarınızı almak için yönlendirileceksiniz. Sadece ekrandaki talimatları izleyin ve sitenize birkaç tıklamayla tekrar yönlendirileceksiniz.

Şimdi WordPress Yönetici panelinizdeki CSS Hero düğmesine tıklamanız gerekir.

CSS Hero, WYSIWYG Editörü (ne gördüğünüzü ve al) sunar. Düğmeye basmak, ekranda görünen bir yüzer CSS kahraman araç çubuğu ile sitenizde sizi oluşturur.

Düzenlemeye başlamak için üstteki mavi simgeye tıklamanız gerekir.

Fareyi navigasyon menünüze yönlendirin ve CSS Hero, etrafındaki sınırları göstererek vurgulayın. Vurgulanan gezinme menüsüne tıkladığınızda, düzenleyebileceğiniz eşyaları size gösterecektir.

Yukarıdaki ekran görüntüsü bize menü öğesini, menü navigasyonu, menü navigasyon kabı, vb.

Gezinti menüsündeki tüm öğelerin metninin rengini değiştirmek istediğimizi varsayalım. Bu durumda, tüm menüleri etkileyen navigasyon menüsünü seçeceğiz.

Şimdi CSS Hero size metin, arka plan, sınır, alanlar, girintiler vb. Olarak düzenlenebilecek çeşitli özellikleri gösterecektir.

Değiştirmek istediğiniz herhangi bir mülke tıklayabilirsiniz. CSS Hero size değişikliklerinizi yapabileceğiniz basit bir arayüz gösterecektir.

Yukarıdaki ekran görüntüsünde, metni seçtik ve bize yazı tiplerini seçmek için iyi bir arayüz gösterdi, metnin, boyut ve diğer özelliklerin rengini değiştirme.

Değişiklikler yapıldıkça, önizleme konusundaki onları canlı olarak görebileceksiniz.

Değişikliklerden memnun kaldıktan sonra, değişiklikleri kaydetmek için CSS Hero Araç Çubuğundaki Kaydet düğmesine tıklayın.

Yaptığınız değişiklikleri kolayca iptal edebileceğiniz bu yöntemi kullanmak en iyisidir. CSS HERO, tüm değişikliklerinizin tam geçmişini kaydeder ve bu değişiklikler arasında ileri geri gidebilirsiniz.

Bu makalenin WordPress'te navigasyonun bir stil menüsü oluşturulacağını öğrenmenize yardımcı olacağını umuyoruz.

Bu stillerle yapılabilir.
Ancak menüyü aldığınızı anlamanız gerekir, o zaman henüz sahip olmadığınız kenar çubuğuna geçmeniz gerekir.
Yani, eğer bu konu, sağ taraftaki kenar çubuğunu birbirine bağlamanıza ve menüyü aktarmanıza izin verir.
Ve böylece dikey, CSS eklemek / değiştirmek için yeterlidir.

Main-navigasyon UL Li, .Seconary-navigasyon UL Li (Ekran: Blok! Önemli;)

Peki, bundan sonra bile girintileri ve diğer özellikleri değiştirmeniz gerekir.

Belki seni yanlış anladım, ancak Max Mega Menüsü zaten sol sütun alanında (siyahtır, bölgenin tersi olduğundan dolayı 2 satırda sıraya girdi ve bu nedenle eklenti yatayında varsayılandır) eklendi Orada widget'larda, üstte standart bir konu menüsüne sahibim ve ikisi de onlara ihtiyacım var, şimdi CSS'yi deneyeceğim, teşekkürler

Ayrıca tam olarak anlamadım.
Bir salata renginin yatay üst bloğunda ekran görüntüsünde sahip olduğunuz menüden bahsediyorum "Çay tatlıları ..."
Ama cevabını yeniden okudum, farklı menüler hakkında konuştuğumuzu anlıyorum.
Ekranda, sol taraftaki en fazla Mega menüsünü görürsünüz, ancak sitede linkinize göre göremiyorum.
M.Ö Onu ve dün görmedim, sonra ekrana bakmadım.
Şimdi de gözlemlemiyorum.

Sürekli bir şey yapmaya çalışıyorum, bu menünün dikey yapıldığını anlayana kadar, başka bir uygun hale getirene kadar farklı bir şekilde koydum ve temizlerim. Bu menü için, yazdığınız gibi CSS kullanarak aynı çözüm uygulanabilir mi? Kodun hangi kısmını eklentiye hangi bölümünü kendi eklentisine yerleştirmediğini söyleyemezsiniz. Konum önemli mi?
Düzenleme eklentisi-seçti Max Mega menüsü, daha sonra böyle bölümler var:
CSS.
Megamenu.scss.
Reset.scss
Blocks.scss
Yönetici.
mixin.scss
Hiçbiri tamir etmek için bu tür satırları bulunamadı

Ben sadece kesinlikle noob ve bunu göründüğünü, görünüşte bir şekilde görüntülemek ve kodu söylemeye ihtiyacınız olduğunu anlamadı. Destek Forumunda bulundu Max Mega Menüsü, yalnızca (ücretli) sürümünde dikey olan yöneticinin cevabı, bu yüzden terk etmek zorunda kalacak. Lütfen benzer eklentiyi tavsiye eder misiniz, bu kriterler:
- SidBar'a yükleme yeteneği
- menü bırakılmalı
- Kategorilerden herhangi birine geçerken, böylece bu aşamada açık kalır ve sayfa güncelleştirmesiyle tamamen kapanmaz

Kesinlikle.
Bu menüyü görmeden - tavsiye ve tavsiyeler vermek imkansızdır. CSS'de yeterince çizgi çiftleri olması mümkündür. Ama bir gerçek değil.

Her ne kadar bu Max Mega menüsünü gerçekten tüm yeteneklerini ortaya çıkaran, daha sonra böyle bir ürün için 23 dolara kullanmayı planlıyorsanız, pek değil. Buna değer.