Merhaba! Her zaman olduğu gibi hayatımda çok şey oluyor, bu yüzden blog yazmaya zaman bulmak çok zor. Dün Sri Lanka'ya bilet aldık ve 4 aylığına yakında yola çıkıyoruz, gelin ziyaret edin! Ve şimdi en güzel gelinliği arıyorum :))
Bugün WordPress'te nasıl menü oluşturulacağı ve bu blokların şablonun özel alanlarına nasıl ekleneceği hakkında konuşacağız.
Menüyü nasıl kişiselleştireceğinizi ve kendi takdirinize göre nasıl düzenleyeceğinizi öğreneceğiz.

WordPress'te menüleri düzenleme ve özelleştirme

Öncelikle blog yönetici panelinde bize sunulan işlevselliğe bakalım. Uyumlu yeni şablonlarda en son sürümler WordPress'in menü ekranı oldukça basittir ve kurulumu özellikle zor değildir.

Ana temayı etkilemeden değiştirilebilecek bir alt tema oluşturduğumuzda, aşağıdaki fonksiyonu onun function.php dosyasına ekleyeceğiz.

Register_nav_menus(array("additionalmenu" => __("Ek Menü", "Temanın Adı")));

Bir alt tema oluşturmazsanız, onu temanızın ana işlevler dosyasına ekleyin.

Bu fonksiyon eklememize izin verecek ekstra menü WordPress'i şablonumuza ekleyeceğiz ve bunun için başka bir alan oluşturacağız.

Ekledikten sonra "Alanları yönet" bölümündeki yönetici paneline gidin:

Fonksiyonda belirlediğimiz isimle ek bir konu alanı görünmelidir.

Ek alanın bölümlerini değiştirmek istiyorsak “Yeni menüyü kullan”a tıklayın veya “Ana Sayfa”yı seçin. Daha sonra yeni alan Ana Menüdekiyle aynı bölümler görüntülenecektir.

Bizim durumumuzda Ek adında yeni bir menü oluşturuyoruz:

Bunun için “Ek Menü” tema alanını seçin.

Ancak şimdi bu alanı şablon bloklarına bağlamamız gerekiyor. Örneğin bir WordPress sitesinin başlığı altına ek bir menü yapmamız gerekiyor. Header.php dosyasına gidin veya onu alt temaya kopyalayın. Body etiketinden sonra aşağıdakileri ekleyin:

Sonucu görelim:

Başlığın üstünde ek bir menümüz var. Şimdi bunun için stilleri ayarlamamız, öğeleri bir çizgi halinde hizalamamız ve bloğu başlığın altına indirmemiz gerekiyor.

Style.css dosyasında aşağıdaki değişiklikleri yapıyoruz:

#additionalmenu nav ( genişlik: 940 piksel; /*kapsayıcı genişliği */ kenar boşluğu: 0 otomatik; ) #additionalmenu li ( görüntü: satır içi; dolgu: 10 piksel; /* dolgu */ kenar boşluğu: 20 piksel 0; ) #additionalmenu ( genişlik: 100% ; top: 420px; /* Üst kenardan uzaklık */ arka plan rengi: #000; /* arka plan rengi */ konum: göreceli)

Ne olduğunu görelim:

Oluşturduğumuz menünün görünümü hala ideal olmaktan uzak, ancak dikkatli bir şekilde blogunuza uygun bir forma getirebilirsiniz.

WordPress'e menü eklemek için widget'lar ve eklentiler

Sizi WordPress'te menü oluşturmayla ilgili bir video izlemeye davet ediyorum:

Makalede Özel Menü widget'ından bahsediliyordu. Gelin buna daha detaylı bakalım.

Hadi gidelim " Dış görünüş"-"Widget'lar", "Özel Menü" widget'ını bulun ve onu temanız için uygun ve blog için uygun bir alana sürükleyin:

Bizim durumumuzda menü bloğu kenar çubuğuna eklenmiştir. Bunun için oluşturduğumuz Ek bloğun bölümlerini seçtik.

Buna göre sağdaki yan panelde aşağıdaki bloğu görüntüleyeceğiz:

Temaya yerleşik standart widget'a ek olarak, farklı türde menüler oluşturmak için tasarlanmış birçok ek eklenti de vardır: dikey, yatay, açılır vb.

Örneğin, burada WordPress'te dikey çok düzeyli bir menü oluşturmaya yönelik bir eklenti bulunmaktadır: Navgoco Dikey Çok Düzeyli Slayt Menüsü.

Veya gelişmiş özelleştirme işlevlerine sahip Açılır Menü Widget'ı.

Menüler için JQwery efektlerine sahip widget'lar da popülerdir; örneğin: JQuery Slick Menu Widget.

Bir örnek kullanarak çalışma prensibine bakalım.

JQuery Slick Menu Widget'ı yükledikten sonra “Görünüm” - “Widget'lar”a gidin.

Mevcut widget'ların listesi arasında tarafımızdan yüklenen yeni bir tane görünmelidir. Bunu erişilebilir bir alana, bizim durumumuzda kenar çubuğuna taşıyın:

Ayarlarını genişletelim:

Menünün adını seçin (oluşturduğumuz bölümler), Sekme Metni - sitede görüntülenecek bloğun adı, yerleştirme konumu (Sol - solda seçin), Ofset - üst kenardan ofset piksel, Animasyon Hızı - animasyon hızı (Hızlı). Bloğun otomatik olarak kaybolmasını sağlamak için Otomatik Kapatma Menüsünü seçebilirsiniz. Ve bloğun rengini seçin. Kaydet'i tıklayın ve sonucu görün:

Başlığın sol tarafında kayan bir menü belirdi. Sekmeye tıkladığınızda bölümlerin bir görüntüsü belirir:

Tekrar basıldığında blok tekrar kaybolacaktır.

Bu, WordPress'te menüleri kurmanın, düzenlemenin ve görüntülemenin yalnızca bir yoludur.

WordPress blogunuz için bir menü oluşturmanın en uygun ve kullanışlı yolunu seçin. İyi şanlar!

Daha yakın zamanlarda Mega Menü gibi bir özellik, premium eklentilerin ve temaların özel alanıydı. Ancak bugün siz sevgili okuyuculara, web sitenizde hızlı, kolay ve tabii ki tamamen ücretsiz, ücretli olanlardan çok da aşağı olmayan güçlü bir gezinme menüsü oluşturmanıza olanak tanıyan tamamen ücretsiz iki eklenti sunacağım. muadilleri.

Nedir bu Mega Menü? Evet, aynı şey, muhtemelen birden fazla kez karşılaştığınız ve özelleştirdiğiniz olağan gezinme menüsü. Sadece standart işlevselliğin aksine, aynı zamanda Ek özellikler Bireysel öğeleri yapılandırmak ve görüntülemek için. Örneğin sadece dikey değil yatay alt menüler eklemek, menüye simgeler ve tek tek görseller eklemek, ayrıntılı kurulum tüm menü öğelerinin görünümü vb. Bütün bunlar bugün dikkate alınan eklentilerimizde.

Bir eklentiyle sitenize süper harika bir gezinme menüsü eklemek için bir başka harika fırsat da WooRockets.com'un Mega Menü'südür. Eklentinin kurulumu ve aktivasyonu standarttır.

Bu eklentinin öğrenilmesi biraz daha zordur ancak aynı zamanda yukarıda açıklanan rakipten daha fazla olanak sunar. Burada bir menü oluşturmak, standart Visual Composer'da sayfa oluşturmaya çok benzer.

Bölüme git WR mega menüsü yönetici panelinizde ve tıklayın Yeni ekle. biz ulaşıyoruz yeni sayfa yeni bir menü oluşturmak için. Daha önce Sürükle ve Bırak bestecileriyle çalışmış olanlar kendilerini hemen evlerindeymiş gibi hissedecekler. Menü oluşturma süreci sayfa oluşturmaktan pek farklı değildir.

Öncelikle menünün üst kısmında olduğundan emin olun - Konum Menü tam olarak ihtiyacınız olan şey. Veya tıklayın Konumu Yönet Bir menü seçmek için.

Tıklamak - Öğe Ekle ve açılır pencerede menüye eklemek istediğiniz içerik türünü seçin. Sol üstte sunulan standart seçenekler arasından seçim yapabilir veya WordPress widget’ları ekleyebilirsiniz.

Gerekirse bölünmüş satırlar ekleyin gerekli miktar sütunlar. Solda menü öğelerini yukarı veya aşağı sürüklemeye yarayan sekmeler, sağda ise düzenlemeyi veya silmeyi etkinleştirebileceğiniz sekmeler bulunur. Sağdaki her zamanki düğmeye basmayı unutmayın - Yayınla veya - Güncelleme emeklerinin sonuçlarını korumak için.

Genel olarak herhangi bir metin, resim ve istenirse herhangi bir widget yeni menünüze kolayca yerleştirilebilir. Menünün görünümü düğmeye basılarak değiştirilebilir Şekillendirme veya butonunu kullanarak tablolarınızı yanına ekleyin Özel CSS.

Kısaca çok işlevsel bir şey. Yazarların, bu eklentiye ek olarak, bir iletişim formuna ve elbette, görünüşe göre mega menü eklentisinin temelini oluşturan bir besteciye de sahip olmaları boşuna değil. Çalışma demosunu tüm ihtişamıyla burada görebilirsiniz.

Hayallerinizdeki menüyü pratik olarak oluşturabileceğiniz harika ve güçlü eklentiler. Kullanıcıların keyfini biraz olsun karartabilecek tek nokta ise farklı temalara uyumluluk meselesi. Ne yazık ki hatırladığım kadarıyla bu sorun bazen premium eklentilerde ortaya çıkıyordu. Her iki eklentiyi de standart bir tema üzerinde test ettim ve herhangi bir sorun veya hata fark etmedim. Aynısını sizin için de diliyorum arkadaşlar!

Okuma süresi: 8 dakika. Yayınlanma tarihi: 11/01/2016

Merhaba! En ilginç ve en ilginç olanı analiz etmeye devam ediyoruz yararlı eklentiler bir WordPress sitesi için! Bugün yatay bir açılır menü oluşturmanıza olanak sağlayacak süper kullanışlı bir eklentiyi öğreneceksiniz. Açılır menüye herhangi bir widget, metin, düzenleyici, fotoğraf, video, form, html kodu ekleyebilirsiniz.

Menünün görünümünü tamamen kişiselleştirebilecek ve açılır menüyü özelleştirebileceksiniz. Yatay bir açılır menüye en fazla 8 adet sekiz sütunlu sütun ekleyebilirsiniz. için açılır menüyü devre dışı bırakabilirsiniz. mobil cihazlar. Çok esnek eklenti, Süper menü yapabilirsiniz!

Super eklentisini doğrudan WordPress yönetici panelinden yükleyebilirsiniz. Eklentiler – Yeni Ekle sayfasına gidin, arama formuna eklentinin adını girin, Enter tuşuna basın, eklentiyi kurun ve etkinleştirin.

Genel Ayarlar .

– Etkinlik Davranışı'nı tıklayın, tıklama davranışı. Burada seçim yapabileceğiniz iki seçeneğiniz var:

• İlk tıklama bir alt menüyü açacak, ikinci tıklama alt menüyü kapatacaktır ilk tıklama bir alt menüyü açar, ikinci tıklama alt menüyü kapatır;
• İlk tıklama bir alt menü açacak, ikinci tıklama bağlantıyı takip edecektir, ilk tıklama bir alt menüyü açar, ikinci tıklama ise bağlantıyı açar.
• Varsayılan olarak bırakın, hiçbir şeyi değiştirmeyin.

– Mobil Menü Davranışı, mobil menüdeki davranış,

• Standart – Açık alt menüler kullanıcı tarafından kapatılana kadar açık kalacaktır, Standart - açık bir alt menü, kullanıcı onu kapatıncaya kadar açık kalacaktır.
• Akordeon – Açık alt menüler, başka bir menü açıldığında otomatik olarak kapanacaktır Akordeon – açık alt menüler, bir başkası açıldığında otomatik olarak kapanacaktır.

– CSS Çıkışı Varsayılan olarak bırakın, burada hiçbir şeyin değiştirilmesine gerek yoktur.

– Menü Öğesi Açıklamaları, Menü öğeleri için açıklamaları etkinleştirin veya devre dışı bırakın.

– Etkin Menü Örnekleri Bazı temalar menü konumunu aynı sayfada birden çok kez görüntüler. Örneğin, temanız ana menüden sonra bir menü konumu görüntüleyebilir ve ardından mobil menü için tekrar görüntüleyebilir. Bu seçenek, Maksimum Mega Menünün yalnızca bu örneklerden biri için geçerli olmasını sağlamak için kullanılabilir.

– .

Menü Temaları .

– Düzenlenecek temayı seçin, Düzenleyeceğiniz menü budur. Farklı bir menü oluşturabilir ve seçebilirsiniz.

– Tema Başlığı, menü teması başlığını varsayılan olarak bırakın.

– Ok, açılır menü öğesinde görünen oku seçebilirsiniz.

– Satır yüksekliği, yükseklik çizgisi.

– Z Dizini, Z Dizini göstergesi varsayılan olarak bırakılabilir.

– Gölge, Menü gölgesini özelleştirebilirsiniz.

– vurgulu geçişler, Menü öğelerinin üzerine gelindiğinde geçişleri etkinleştirin.

– Widget Stilini Sıfırla, Mega Menü widget stillerini devre dışı bırakın.

Menü çubuğu .

– Menü Yüksekliği, menü yüksekliği.

– Menü Arka Planı, menü arka plan rengi.

– Menü Dolgusu menü döşemesi.

– Menü Kenarlık Yarıçapı, menü kenarlığı yarıçapı.

– Menü Öğelerini Hizala, Menü öğelerinin konumu.

– Menü Öğesi Arka Planı, Menü öğelerinin arka plan rengi.

– Menü Öğesi Arka Planı (Hover), Menü öğesinin üzerine gelindiğinde arka plan rengi.

– Menü Öğesi Aralığı, Menü öğelerinin aralığı.

– Yazı tipi, yazı tipi parametreleri, renk, boyut, konum, aile vb.

– Yazı Tipi (Vurgulu) vurgulu yazı tipi seçenekleri.

– Menü Öğesi Dolgusu, Menü öğelerinin döşemesi.

– Menü Öğesi Kenarlığı, menü öğesi kenarlık seçenekleri.

– Menü Öğesi Kenarlığı (Hover), Fareyle üzerine gelindiğinde menü öğesi kenarlık seçenekleri.

– Menü Öğesi Kenarlık Yarıçapı, menü öğesi kenarlık yarıçapı parametreleri.

– Menü Öğesi Bölücü, menü ayırıcı.

– Geçerli Öğeyi Vurgula, geçerli menü öğesini vurgulayın.

Mega Menüler .

– Panel Arka Planı, açılır menü arka plan rengi.

– Panel Genişliği Açılır menü penceresinin genişliği.

– Panel Dolgusu, döşeme.

– Panel Kenarlığı, kenarlık rengi ve boyutu.

– Panel Kenar Yarıçapı, sınır yarıçapı.

– Öğe Dolgusu, açılır menüdeki bir menü öğesinin döşemesi.

Widget'lar .

– Başlık Yazı Tipi, açılır menüdeki widget başlığı yazı tipi seçeneklerini seçin.

– Başlık Dolgusu başlık dolgusu.

– Başlık Marjı Widget başlık kenarlıklarındaki dolgular.

– Başlık Kenarlığı, sınır sınır parametreleri.

– İçerik Yazı Tipi, Widget içeriğindeki yazı tipi.

İkinci Seviye Menü Öğeleri .

– Yazı tipi, ikinci düzey menü öğesi yazı tipi.

–Yazı Tipi (Vurgulu) vurgulu yazı tipi.

– Arka Plan (Vurgulu), fareyle üzerine gelindiğinde arka plan rengi.

– Dolgu malzemesi, döşeme.

– Marj, girinti

– sınır, kaldırım, sınır.

Üçüncü Düzey Menü Öğeleri . Aynı ayarlar yalnızca üçüncü düzey menü öğeleri için.

Açılır Menüler .

– Menü Arka Planı, ikinci veya üçüncü düzey açılır menünün arka plan rengi.

– Menü Genişliği menü genişliği.

– Menü Dolgusu döşeme.

– Menü Kenarlığı, sınır.

– Menü Kenarlık Yarıçapı, sınır yarıçapı.

– Öğe Arka Planı, menü öğesi arka plan rengi.

– Öğe Arka Planı (Hover),Üzerine gelindiğinde öğenin arka plan rengi.

– Öğe Yüksekliği, menü öğesi yüksekliği.

– Öğe Dolgusuöğe döşemesi.

– Öğe Yazı Tipi, Menü öğesindeki metnin yazı tipi.

– Öğe Yazı Tipi (Hover), vurgulu yazı tipi.

– Öğe Bölücü eleman ayırıcı

Mobil menü .

– Çubuk Tasarımcısını Aç/Kapat, Bu, menünün mobil cihazlarda nasıl göründüğünü gösterir.

– Duyarlı Kesme Noktası, Mobil menüye geçmek için genişlik.

– Çubuk Arka Planını Değiştir, mobil menü açma düğmesinin arka plan rengi.

– Mobil Geçişi Devre Dışı Bırak, Menü anahtarını kapatabilirsiniz.

– Çubuk Yüksekliğini Değiştir, mobil menü anahtarı yüksekliği.

– Mega Menü Sütunları, Bir mobil sitedeki açılır menüde kaç sütun vardır?

– Menü Arka Planı, mobil menü arka plan rengi.

– Menü Öğesi Yüksekliği, menü öğesi yüksekliği.

Özel Stil. Burada menü için kendi CSS stillerinizi ekleyebilirsiniz.

– Değişikliklerinizi kaydedin.

Menü Konumları .

– burada daha sonra menü ekleyebileceğiniz menü alanları oluşturabilirsiniz. Menü için bir alan oluşturmak için – Başka bir menü konumu ekle düğmesine tıklayın.

Menü alanı Kısa kod veya php kodu kullanarak siteye ekleyebilirsiniz.

Sayfada: Görünüm – Menü – Alan yönetimi, alan için bir menü ekleyebileceksiniz.

Aletler .

– Önbellek Burada CSS önbelleğini temizleyebilirsiniz, buna gerek yoktur, menü her kaydedildiğinde önbellek otomatik olarak temizlenir.

– Eklenti Verileri WordPress veritabanına kaydedilen tüm eklenti verilerini silin. Yalnızca eklenti kaldırılırsa!

– İhracat Teması, Mega menü temasını JSON veya PHP formatında dışa aktarabilirsiniz.

– Temayı İçe Aktar, Mega menü temasını içe aktarabilirsiniz.

– Olanak vermek Mega menüyü etkinleştirmek için buradaki kutuyu işaretleyin.

– Etkinlik, Burada açılır menünün nasıl açılacağını seçebilirsiniz.

– etki Açılır menüden bir efekt seçebilirsiniz.

– Tema, varsayılan menü teması.

Mega menüyü açtıktan sonra, Her sayfa widget'ında üzerine gelindiğinde bir düğme görünecektir - Mega Menü. Bu menü öğesine ilişkin açılır menüyü yapılandırmak için bu düğmeye tıklayın.

Daha öte, bir pencere açılacaktır. Bir widget seçmek ve menüye eklemek için sağ üstteki geniş alana tıklayın. Sağ üstteki açılır menüden kaç sütun olacağını seçebilirsiniz. Widget'lar bir açılır panele dağıtılabilir; widget'ın hangi bölümü kaplayacağını belirleyebilirsiniz, örneğin 1/2 veya 1/3. Widget'ın hangi bölümü kaplayacağını belirtmek için sağ ve sol oklara tıklayın.

Widget'ı açmak ve yapılandırmak için, Widget'ın sağ tarafındaki anahtar simgesine tıklayın. Widget'ı kurun ve kaydedin.

– Metni Gizle, menü öğesinden metni gizleyin.

– Oku Gizle, oku gizle.

– Mobil Cihazda öğeyi gizle, mobil cihazlarda menü öğesini gizleyin.

– Öğeyi Masaüstünde gizle, bilgisayarlarda menü öğesini gizleyin.

– Menü öğesi Hizala, menü öğesi konumu.

– Alt Menü Hizala ikinci seviye menü konumu.

– Mobilde alt menüyü gizle, mobil cihazlarda ikinci seviye menüyü gizleyin.

– Değişiklikleri Kaydet.

Her şey hazır! Menüyü kaydedin, siteye gidin ve sonucun tadını çıkarın!

Dikkat! Mega Menüyü etkinleştirdikten sonra varsayılan menü stiliniz tamamen değişecektir. Ayarlar bölümündeki menü stilini özelleştirmeniz gerekecektir. “Menü Temaları”.

Hala sorularınız mı var? Bir yorum Yaz! İyi şanlar!

Anladığım kadarıyla WordPress'teki mega menü terimi, listeler, resimler, metinler, kaydırıcılar vb. gibi birçok farklı öğeye sahip süper işlevsel büyük bir blok anlamına gelir. Elbette böyle insanlarla tanışmışsınızdır. Bir gün konuyla ilgili tam bir koleksiyon yayınlayacağım, ancak bugün çok özel bir çözümden bahsedeceğiz - Max Mega Menu eklentisi. Bunu seçtim çünkü zaten işimde test etmiştim, çoğu zaman listelerde yer alıyor, ayrıca en akıllı ve sürekli gelişen ücretsiz (Lite) sürümlerden birine sahip.

Max Mega Menu'yü WordPress'e yükledikten hemen sonra, standart navigasyonunuz, çeşitli widget türleri, kullanışlı bir düzenleyici ve bir dizi eklenti ekleme yeteneği ile daha güçlü ve işlevsel bir mekanizmaya dönüştürülecektir. ek ayarlar. Eklentiyi buradan indirin veya WP admin aracılığıyla arayın.

Şu anda gerekli minimum sistem sürümü 3.8, en son sürüm ise 4.8.3'tür. 100 bine yakın indirme var. Son 2 ayda 89 farklı hatadan neredeyse 70'inin düzeltilmiş olmasını seviyorum, bu da geliştiricilerin iyi bir faaliyet gösterdiğini gösteriyor.

Max Mega Menu'nün ana işlevleri ve özellikleri

• Her biri için kendi parametrelerinizi seçebileceğiniz çeşitli yerleştirme konumları desteklenir;
• Sürükle ve Bırak yoluyla gezinme öğeleriyle kolay çalışma.
• Ek.
• Kullanışlı bir tema düzenleyicisi var.
• Herhangi bir widget ekleme: resimler, metinler, listeler vb.
• Tetikleme koşulu: fareyle üzerine gelindiğinde tıklayın.
• Alt menü görüntüleme efektleri: kalkış, görünüm/solma vb.
• Metni/bağlantıları gizlemek veya kapatmak gibi çeşitli ek seçenekler mobil versiyon. Son nokta ayrı bir .
• Menü öğeleri için hizalama.

Tüm bunların ne kadar havalı ve kullanışlı olduğunu anlamak için aşağıdaki videoyu izlemenizi tavsiye ederim:

Ayrıca geliştiriciler, çözümlerini oluştururken çok doğru ve doğru bir yaklaşımla övünebilirler. WordPress Max Mega Menu gerçekten yüksek kaliteli bir üründür, işte birkaç onay:

• tüm tasarım bir tane kullanılarak ayarlanır CSS dosyası"ünlü" önemli mülkün hiç kullanılmadığı;
• Retina desteği, uyarlanabilirlik, akıllı telefonlarda ve tabletlerde tetikleme (hemen hemen tüm mevcut masaüstü ve mobil tarayıcılarda test edilmiştir);
• temiz kod, gzip'le sıkıştırıldığında JS komut dosyaları 2Kb'den daha az yer kaplar;
• çeşitli filtreler/kancalar için destek;
• ayrıntılı belgeler + diğer birçok eklentinin aksine, forumu oldukça canlı tutun.

Max Mega Menu'yü kurma ve kullanma

Kurulumdan hemen sonra yönetici panelinde aynı isimde bir bölüm görünecektir. “Temel Ayarlar”da alt menülerin, mobil cihazların vb. davranışlarıyla ilgili çeşitli seçenekleri ayarlayabilirsiniz. “Temalar” çok daha ilginç görünüyor.

Burada farklı özelliklere sahip 6 sekme var:

• Temel - ok türünü, gölgeleri, çizgi yüksekliğini vb. seçin.
• Menü çubuğu - ana bloğun tasarımı: arka planlar, girintiler, yazı tipleri, vurgulu.
• Mega Menüler - stiller ve Mega ayarlar Menü.
• Açılır menüler diğerlerine benzer bir stil kümesidir.
• Mobil Menü - ekran boyutunu ve diğer mobil menü seçeneklerini tetikleyin.
• Özel tasarım - kendi CSS stillerinizi ekleyin.

Temel parametreler ayarlandıktan sonra WP admin'in “Görünüm” - “Menü” bölümüne gidin.

Çalışmak istediğiniz menüyü seçmeniz ve ardından ayarlarında "Etkin" kutusunu işaretlemeniz gerekir. WordPress'te Maksimum Mega Menüyü yalnızca menüde şablonda belirtilen bir görüntüleme alanı (üst bilgi, alt bilgi, kenar çubuğu vb.) olduğunda etkinleştirebilirsiniz. Etkiler ve tetikleyici olaylar için de parametreler vardır.

Modül düzenleyiciyi açmak için imleci hiyerarşi öğelerinden birinin üzerine getirin ve beliren “Mega Menü” düğmesine tıklayın. Yukarıdaki eklentinin video sunumunda görmüş olabileceğiniz ilgili aracı bir açılır pencere görüntüleyecektir.

Burada öncelikle sütun sayısını belirleyebilir ve ayrıca herhangi bir widget ekleyebilirsiniz. Ayrıca her elemanın boyutu değiştirilebilir. Widget'ları yalnızca ilk (ana) gezinme düzeyinde seçebilirsiniz. Diğer öğelerin karşısındaki "Mega Menü" düğmesine tıklarsanız, yalnızca simgeleri ve çeşitli özellikleri ayarlamak için:

Masaüstü/mobil cihazlarda metni/bağlantıyı gizlemek, hizalamak ve devre dışı bırakmak çok kullanışlı işlevler kümesidir. Her menü öğesinde benzer seçenekleri ayarlamak mümkündür. Değişikliklerinizi kaydetmeyi unutmayın.

Max Mega Menu Pro ve Sonuçlar

Genel olarak bu geliştirmenin depoya ek olarak ayrı bir web sitesi de vardır. Modülün tüm özelliklerinin açıklamaları, belgeleri ve küçük bir demosu sunulmaktadır ve ayrıca teknik destek ve indirmelere bir bağlantı da bulunmaktadır. Gelişmiş maliyet Maksimum sürümler Mega Menu Pro prensip olarak o kadar da pahalı değil - 1/5/99 siteler için sırasıyla 23 $ / 35 $ / 99 $ dolara mal olacak. Buna yıl boyunca güncellemeler ve destek dahildir. Eğer bir geliştiriciyseniz Pro Business Lisansı alıp eklentiyi 5 siteye kurarak çözümün toplam maliyetini = 7 dolar elde edeceksiniz!

Max Mega Menu Pro'ya neler dahildir:

• Ayarlarda Google Fonts entegrasyonu, FontAwesome ve özel simgeler.
• Dikey ve akordeon menüleri destekler.
• Gezinme + arama bloğunda genel logo.
• Bireysel öğelerin stilleri.
• WooCommerce ve EDD desteği.
• Özelleştirme imkanı.
• Mobil öğeler için arama, simgeler/logolar ve HTML.
• Otomatik güncelleme ve öncelikli destek.

Sıradan klasik siteler için olağan olan oldukça yeterlidir ücretsiz sürüm WordPress'te işlevsellik açısından çok iyi olan Max Mega Menu. Çeşitli ayarlar burada çok şey var. Ayrıca geliştiricilerin kendi yaratımlarını desteklemeleri, mevcut hataları nispeten hızlı bir şekilde düzeltmeleri ve kodun temizliğine/doğruluğuna dikkat etmeleri de hoşuma gitti. Tanışmak biraz zaman alacak ama buna değecek. Eklentinin nasıl çalıştığını anlamayı kolaylaştırmak için videoyu izleyin ve belgeleri okuyun.

WordPress'te hangi Mega Menü modüllerini kullanıyorsunuz ve neden? Bu çözümle çalıştınız mı, bu konuda neler ekleyebilirsiniz?

WordPress 3.0'ın özel menüler (özel menüler) için destek eklediği yaygın olarak bilinmektedir. Bana göre bu şey son derece kullanışlı ve kullanışlı. Aslında bu yazının çıkış noktası da burası.

Bunun rahatlığı, artık menüleri doğrudan yönetici panelinden oluşturup yapılandırabilmeniz, onay kutularına tıklayarak bağlantılar ekleyebilmeniz ve yalnızca sürükleyip bırakarak bağlantıların sırasını değiştirebilmenizdir. Menüye sayfalara, kategorilere ve bireysel gönderilere bağlantılar ekleyebilirsiniz. Çok seviyeli menüler oluşturabileceğiniz gibi, WordPress'in bilmediği kendi rastgele bağlantılarınızı da menüye ekleyebilirsiniz. Genel olarak tam hareket özgürlüğü.

Bununla birlikte, böyle bir "özgürlüğün" elde edilebilmesi için, diyelim ki, fareyi hafif bir hareketle şablondaki özel menünün görünümünü yapılandırmanız gerekir.

WordPress’in multisite özelliğini kullanıyorsanız bu tür menüleri kullanmak son derece kullanışlı olacaktır çünkü farklı siteler için farklı menüler ayarlayabilir, onlar için aynı şablonu kullanabilirsiniz.

Not: Menü, WordPress sınıflandırması (nav_menu) aracılığıyla çalışır ve ana gönderiler veritabanı tablosuna isteğe bağlı (harici) bağlantılar yazılır. Bu yaklaşım daha esnek ve dinamiktir ancak bu tür menülerin sürekli oluşturulmasını gerektirir.

Register_nav_menus(array("top" => "Üst menü", //Şablondaki menü konumunun adı "bottom" => "Alt menü" //Şablondaki diğer menü konumunun adı));

Artık "üst" ve "alt" tanımlayıcılarına karşılık gelen adlarla 2 menü kaydettik. Yönetici panelinde oluşturulan menünün wp_nav_menu() çıkış fonksiyonu aracılığıyla görüntüleneceği yeri belirtmek için temada tanımlayıcıların kullanılması gerekir. Admin panelde Görünüm -> Menü kısmına gittiğimizde kayıtlı lokasyonların isimlerini göreceğiz.

Menüler kayıt edildikten sonra yönetici paneline giderek menülerinizi oluşturun ( bu örnekte 2 menü):

Menünün adını ayarlayın (şablondaki menü, wp_nav_menu() işlevi kullanılarak belirtilen adla görüntülenebilir

Menü öğeleri oluşturma. Sol bloğu kullanıyoruz: sayfalara, kategorilere bağlantılar

1. Menünün nerede bulunacağını seçiyoruz, 2 menü kaydettiğimiz için 2 seçeneğimiz olacak: “Üst menü” ve “Alt menü”.

WordPress'teki özel menü desteği, her tema için ayrı ayrı etkinleştirilir; bu satır, function.php dosyasındaki add_theme_support("menus"); Ancak bir menü kaydediyorsak bu satıra gerek yoktur. Bu durumda destek otomatik olarak etkinleştirilecektir.

wp_nav_menu işlevini kullanarak özel menüleri görüntüleme

Menüler kaydedilir ve oluşturulur, geriye kalan tek şey bunları şablona eklemektir. Bu, aşağıdaki parametreleri alabilen wp_nav_menu() işlevi tarafından yapılır:

Wp_nav_menu(array("menu" => "", // (string) Görüntülenen menünün adı (menü oluşturulurken yönetici tarafından belirtilir, belirtilen konuma // göre önceliklidir theme_location - belirtilirse, theme_location parametresi) göz ardı edilir) "container" => " div", // (string) Menü kapsayıcısı ul sarmalayıcısı. Konteyner etiketini belirtir (varsayılan olarak div etiketinde) "container_class" => "", // (string) sınıfı. konteyner (div etiketi) "container_id" => "" , // konteynerin (div etiketi) kimliği (div etiketi) "menu_class" => "menu", // (string) menünün sınıfı (tag ul) "menu_id" => "", // (string) menünün kimliği ( tag ul) "echo" => true, // (boolean) İşleme için görüntüleme veya geri dönüş "fallback_cb" => "wp_page_menu", // (string) Menü yoksa (alınamadı) kullanılacak (geri dönüş) işlevi "before" => "", // (string) Text before her bağlantı "after" => "", // (string) Text after her bağlantı "link_before" => "", // (string) Bağlantının çapasından önceki metin (metin) "link_after" => "", // (string) Bağlantının çapasından sonraki metin (metin) "derinlik " => 0, / / ​​(integer) Yuvalama derinliği (0 - sınırsız, 2 - iki seviyeli menü) "walker" => "", // (object) Menüleri toplayan sınıf. Varsayılan: new Walker_Nav_Menu "theme_location" => "" // (string) Menünün şablondaki konumu. (register_nav_menus işlevinde menünün kaydedildiği anahtarı belirtir));

Bu örnekte, şablona yaklaşık olarak (ihtiyacınız olan parametrelere bağlı olarak) aşağıdaki 2 kodu eklemeniz gerekir:

#1. Menülerin konuma göre görüntülenmesi

Üst Menü. Bunu, üst menünün görüntüleneceği şablon başlığına (header.php) ekliyoruz:

"menu", "theme_location"=>"top", "after"=>" /")); ?>

Yönetici panelinde oluşturulan, "Üst Menü" konumuna benzer bir yapıya sahip bir menü görüntüleyecektir:

Alt menü. Bunu, alt menünün görüntüleneceği şablonun alt bilgisine (footer.php) ekliyoruz:

Yönetici panelinde oluşturulan menüyü "Alt Menü" konumuna iliştirilmiş olarak görüntüler. Yapı ilkiyle aynı olacaktır.

Lütfen ilk seçenekte parametrelerin bir dizi aracılığıyla aktarıldığını unutmayın. İkincisinde, bir çizgi aracılığıyla. Her iki seçenek de doğrudur. Bu, aşağıdakiler için yaygındır: WordPress'in özellikleri- parametreler bir dizi veya dize olarak iletilebilir (dize daha sonra bir diziye dönüştürülür).

#2 Menüyü ada göre görüntüle

Bir menüyü adına göre görüntülemek için "menü" argümanını kullanabilirsiniz. Ad, yönetici panelinde menü oluşturulurken belirtilen adla belirtilir. Örneğimizde (resme bakın) “Ana Menü”. Menü argümanı theme_location'dan daha yüksek önceliğe sahiptir; bu, ada göre görüntülersek theme_location parametresinin göz ardı edileceği anlamına gelir.

İsim yerine menü kimliğini belirtebilirsiniz. Yani menü adı değiştirilirse kod çalışmaya devam edecektir. Menü kimliği, menüyü düzenlerken URL'de görüntülenebilir:

Notlar

Div ambalajını kaldıralım

Muhtemelen menünün genellikle gereksiz bir div etiketiyle "sarıldığını" fark etmişsinizdir. wp_nav_menu() işlevinin argümanlarında boş bir "container"=>"" parametresi belirtilerek kaldırılabilir.

Varsayılan ayarları değiştirme

Eklenen menüler için sürekli olarak aynı parametrenin belirtilmesini önlemek amacıyla, bunlar işlevler.php dosyasında geçersiz kılınabilir. Bu, wp_nav_menu_args filtresi aracılığıyla yapılır:

Register_nav_menus(array("üst" => "Üst menü", "alt" => "Alt menü")); add_filter("wp_nav_menu_args", "my_wp_nav_menu_args"); function my_wp_nav_menu_args($args="")( $args["container"] = ""; return $args; )

Benzer şekilde, kendi varsayılan bağımsız değişkenlerinizi oluşturabilirsiniz: $args["argument"] = "value" .

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

WordPress'in ayrıca bir koşul işlevi vardır: has_nav_menu("top") - üst menü konumunun kaydedilip kaydedilmediğini kontrol eder. Menü belirtilmemişse, wp_nav_menu() işlevi wp_list_pages() gibi çalışacaktır, ancak argümanlardan kaldırmış olmamıza rağmen div "sarıcı" kalacaktır. Bu sorunu şu şekilde çözebilirsiniz:

If (has_nav_menu("top"))( wp_nav_menu(array("container" => "", "theme_location" => "top", "menu_class" => "menu")); ) else ( echo "

"; wp_list_pages(array("derinlik" => 1, "title_li" => "")); echo "