WordPress Sitenize Mega Menü Nasıl Eklenir (Adım Adım)

Mega menüler, çok çeşitli bağlantıları ve içerik kategorilerini yapılandırılmış, gezinmesi kolay bir düzende görüntülemenizi sağlar.

Bu, sitenizin gezinmesini daha sezgisel ve erişilebilir hale getirerek ziyaretçilerin göz atma deneyimini büyük ölçüde iyileştirebilir.

WPBeginner'da, sayfanın en üstünde en önemli bağlantılarımızı görüntülemek için bir mega menü kullanıyoruz. Kullanıcılar tıkladığında, ek önemli bağlantıları ortaya çıkaran bir açılır menü açılır. Bu kurulum, sayfanın dağınık görünmesine neden olmadan geniş bir seçenek yelpazesi sunarak temiz ve düzenli bir gezinme menüsü oluşturmamızı sağladı.

Bu makalede, WordPress web sitenize adım adım kolayca bir mega menü eklemeyi göstereceğiz.

WordPress Sitenize Neden Mega Menü Eklemelisiniz?

WordPress, açılır menüler, üstbilgi menüleri ve daha fazlası dahil olmak üzere her türlü menüyü oluşturmak için kullanabileceğiniz bir sürükle ve bırak oluşturucu ile birlikte gelir. Hatta WordPress temalarında özel gezinme menüleri oluşturmanıza olanak tanıyan eklentiler bile vardır.

Ancak, sitenizde çok fazla içerik varsa, bunun yerine bir mega menü oluşturmanız gerekebilir. Bu, standart WordPress menü yapısına çok sütunlu açılır menüler eklemenize olanak tanır.

Ziyaretçilerin aradıklarını hızlı bir şekilde bulabilmeleri için mega menüleri içeriğinizi farklı başlıklar ve alt başlıklar altında düzenlemek için kullanabilirsiniz. Örneğin, çevrimiçi bir pazar yeri oluşturursanız, tüm ürün kategorilerinizi ve alt kategorilerinizi bir mega menüde düzenleyebilirsiniz.

Mega menüler ayrıca ziyaretçilerinize videolar, metin, arama ve en son gönderiler gibi zengin içerikler gösterebilir.

Mega menülerin taranmasını kolaylaştıran görseller de ekleyebilirsiniz.

Bununla birlikte, WordPress web sitenize nasıl kolayca bir mega menü ekleyebileceğinizi görelim.

WordPress Siteniz İçin Mega Menü Nasıl Oluşturulur

WordPress sitenize bir mega menü eklemenin en kolay yolu Max Mega Menu eklentisini kullanmaktır. Bu eklenti, videolar, resim galerileri, arama ve daha fazlası dahil olmak üzere mega menülerinize zengin içerik eklemenize olanak tanır.

Bu şekilde daha ilgi çekici ve yardımcı menüler oluşturabilirsiniz.

Farklı renkler ekleyerek, yazı tipi boyutunu değiştirerek ve farklı simgeler kullanarak menü stilini de değiştirebilirsiniz.

Öncelikle eklentiyi kurmanız ve etkinleştirmeniz gerekecek. Yardıma ihtiyacınız olursa, lütfen bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.

WordPress Sitenizde Mega Menüleri Etkinleştirin

Etkinleştirdikten sonra, bir mega menü ekleyebileceğiniz tüm farklı alanları görmek için WordPress kontrol panelinden Mega Menü » Menü Konumları sayfasına gidin.

WordPress temanıza bağlı olarak farklı seçenekler görebilirsiniz.

Başlamak için, kullanmak istediğiniz her konumda mega menüleri etkinleştirmeniz gerekir.

Bunu yapmak için, bir konumu genişletmek üzere tıklamanız ve ardından ‘Etkin’ kutusunu işaretlemeniz yeterlidir.

Bundan sonra, mega menüyü açacak 'Olay'ı değiştirebilirsiniz.

Varsayılan ayar 'İmleç Niyeti'dir, bu da ziyaretçinin menüyü tetiklemesi için mega menünün üzerine birkaç saniye fareyle gelmesi gerektiği anlamına gelir. Bu çoğu WordPress web sitesi için iyi çalışır, ancak 'Efekt' açılır menüsünü açıp bunun yerine 'İmleç' veya 'Tıkla' seçeneğini de seçebilirsiniz.

'Tıkla'yı seçerseniz, ziyaretçinin mega menüyü keşfetmek için tıklaması gerekecektir. Bu, ziyaretçilerin menüyü yanlışlıkla tetikleyebileceğinden endişe ediyorsanız faydalı olabilir, bu da sinir bozucu olabilir.

Bu arada, ‘Fareyle Üzerine Gelme’ (Hover), ziyaretçi faresini üzerine getirdiği anda mega menünüzü açacaktır. Bu, ziyaretçileri sitenizin farklı alanlarını keşfetmeye teşvik edebilir, bu nedenle açılış sayfaları veya web sitenizin ana sayfasında ‘Fareyle Üzerine Gelme’yi kullanmak isteyebilirsiniz.

Bu kararı verdikten sonra, menünün nasıl açılacağını ‘Efekt’ ayarlarını kullanarak değiştirebilirsiniz.

Max Mega Menu'nun solma ve yukarı kaydırma gibi deneyebileceğiniz farklı animasyonları vardır. Animasyonun hızını da değiştirebilirsiniz. Farklı animasyonları deneyerek, ziyaretçinin dikkatini çekecek bir mega menü oluşturabilirsiniz.

Herhangi bir animasyon kullanmak istemiyorsanız, ilk açılır menüyü açıp 'Yok' seçeneğini seçmeniz yeterlidir.

Varsayılan olarak Mega Menü, akıllı telefonlar ve tabletler tipik olarak daha az işlem gücüne sahip olduğundan, mobil cihazlarda animasyon kullanmaz. Ancak, mobil ziyaretçiler için benzersiz bir animasyon oluşturmak istiyorsanız, 'Efekt (Mobil)' alanındaki ayarları kullanabilirsiniz.

Mobil cihazlarda mega menülerinizi test etmek istiyorsanız, masaüstünden WordPress sitelerinin mobil sürümünü görüntüleme kılavuzumuza göz atın.

'Olay' açılır menüsünden 'Tıkla'yı seçtiyseniz, ardından 'Gelişmiş' sekmesini seçtiğinizden emin olun.

Burada, ziyaretçi mega menünüze tıkladığında ne olacağını tanımlamak için ‘Tıklama Olayı Davranışı’nı kullanabilirsiniz. Örneğin, ikinci tıklama menüyü kapatabilir veya yeni bir bağlantı açabilir.

Göz atabileceğiniz daha fazla ayar var, ancak bu çoğu WordPress blogu ve web sitesi için yeterli olmalıdır.

Eklentinin yapılandırmasından memnun kaldığınızda, ‘Değişiklikleri Kaydet’e tıklayın.

Daha fazla konum için mega menüleri etkinleştirmek üzere yukarıda açıklanan aynı işlemi izlemeniz yeterlidir.

Mega Menülerin Web Sitenizde Nasıl Göründüğünü Özelleştirin

Bir sonraki adım, mega menülerin web sitenizde nasıl görüneceğini yapılandırmaktır.

Bunu, ekranın solundaki 'Menü Temaları' sekmesini seçerek yapabilirsiniz.

Bu ekranda, ok simgelerinin yönünü değiştirebilir, farklı bir satır yüksekliği kullanabilir, bir gölge ekleyebilir ve daha fazlasını yapabilirsiniz.

Ayarlarınızdan memnun kaldığınızda, ‘Değişiklikleri Kaydet’e tıklamayı unutmayın.

Bu değişiklikleri istediğiniz zaman kaldırmak isterseniz, ‘Reset Widget Styling’ kutusunu işaretleyin ve ardından ‘Save Changes.’ tıklayın.

Ardından, menü varsayılan, daraltılmış durumdayken ziyaretçilerin gördüğü çubuk olan menü çubuğunu özelleştirebilirsiniz.

Bu değişiklikleri yapmak için 'Menü Çubuğu' sekmesine tıklayın ve ardından arka plan rengini, dolguyu, kenarlık yarıçapını ve daha fazlasını değiştirmek için ayarları kullanın. arka plan rengini değiştirmek için.

Hatta 'Menü Arka Planı' bölümünde iki farklı renk seçerek bir renk gradyanı oluşturabilirsiniz.

Aşağı kaydırırsanız, üst düzey menünün görünümünü değiştirebilirsiniz.

Bu, mega menü daraltılmış durumdayken görünen öğelerin ilk satırıdır.

Bu kadar önemli olduklarından, üst düzey menü öğelerinin öne çıkmasını isteyebilirsiniz.

For example, in the following image, we’re using a different background color.

'İmleç Durumu' bölümünde, şu anda seçili olan üst düzey menü öğesini vurgulayabilirsiniz.

Örneğin, aşağıdaki görselde bir alt çizgi efekti kullanıyoruz.

Bu, ziyaretçinin menüde nerede olduğunu görmesine yardımcı olabilir, bu da onu özellikle büyük mega menülere sahip olması gereken siteler için kullanışlı hale getirir.

Bir fareyle üzerine gelme durumu eklerseniz, ekranın altına kaydırın ve 'Geçerli Öğe Vurgula' kutusunu işaretleyin.

Bundan sonra, alt menünün nasıl görüneceğini değiştirebilirsiniz.

Aşağıdaki resimde görebileceğiniz gibi, üst düzey bir üst öğenin altında görünen menü budur.

Alt menüyü özelleştirmek için ‘Mega Menus’ sekmesine tıklayın.

Artık alt menünün arka plan rengini değiştirmek, kavisli köşeler oluşturmak için yarıçapı artırmak, dolgu eklemek ve daha fazlasını yapmak için bu ayarları kullanabilirsiniz.

Mega menülerinize widget kullanarak içerik eklersiniz. Örneğin, bir Galeri widget'ı ekleyip en popüler WooCommerce ürünlerinizi görüntüleyebilir veya mega menünün içine bir etiket bulutu yerleştirebilirsiniz. Bu widget'lar ek bilgi sağlayabilir veya ziyaretçileri belirli menü öğelerine tıklamaya teşvik edebilir.

Bu widget'ların nasıl görüneceğini, ‘Widget’lar’ bölümüne giderek özelleştirebilirsiniz. Örneğin, widget başlığının rengini değiştirebilir, yazı tipi boyutunu artırabilir, dolgu ekleyebilir ve hizalamayı ayarlayabilirsiniz.

Bu ekranda, ikinci düzey menü öğelerinin ve üçüncü düzey menü öğelerinin web sitenizde, blogunuzda veya çevrimiçi pazar yerinizde nasıl görüneceğini de özelleştirebilirsiniz. Bunlar, üst düzey menü öğelerinin alt öğeleridir.

Menülerinizi oluştururken, iç içe bir mega menü oluşturmak için dört veya daha fazla seviye eklemek mümkündür. Bunu yaparsanız, WordPress sonraki tüm seviyeler için üçüncü seviye stilini kullanacaktır.

Bunu aşağıdaki resimde görebilirsiniz. İkinci seviye kırmızı metne sahip ve üçüncü ve dördüncü seviyeler aynı mavi metni kullanıyor.

Menünün kurulumundan memnun kaldığınızda, ‘Değişiklikleri Kaydet’e tıklamayı unutmayın.

WordPress Sitenize Mega Menü Nasıl Eklenir

Mega menüyü özelleştirmeyi bitirdikten sonra, web sitenize ekleme zamanı.

Simply head over to the Appearance » Menus page from the admin sidebar.

Mevcut bir menüyü mega menüye dönüştürmek istiyorsanız, ‘Düzenlenecek bir menü seçin’ açılır menüsünü açın ve listeden seçin. Seçtiğiniz menünün mega menü özelliğini etkinleştirdiğiniz bir konuma atanmış olması gerektiğini unutmayın.

Sıfırdan başlamak istiyorsanız, ‘Yeni bir menü oluştur’ seçeneğine tıklayın ve ardından yeni mega menünüz için bir başlık yazın.

Ardından kullanmak istediğiniz konumu seçebilir ve 'Menü Oluştur'a tıklayabilirsiniz. Tekrar belirtmek gerekirse, bu, mega menüleri etkinleştirdiğiniz bir konum olmalıdır.

Add Content to Your WordPress Menu

Ardından, mega menüye eklemek istediğiniz tüm sayfaları, gönderileri, WooCommerce ürünlerini ve diğer tüm içerikleri ekleyin.

Adım adım talimatlar için lütfen WordPress'te gezinme menüsü ekleme konusundaki başlangıç kılavuzumuza nasıl gezinme menüsü ekleyeceğiniz konusuna bakın.

Ardından, mega menüde kullanmak istediğiniz üst öğeler ve alt menüler halinde öğelerinizi düzenlemeniz gerekecek. Bir alt menü oluşturmak için, bir öğeyi üst öğenin altına sürükleyin ve ardından bırakmadan önce hafifçe sağa sürükleyin.

Birden çok seviye oluşturmak için, öğeleri sağa doğru sürüklemeye devam edin, böylece birbirlerinin altında girintili görünürler. Bu, WordPress'te açılır menü oluşturmaya benzer.

Mega Menü Özelliğini Etkinleştirin

İşiniz bittiğinde, ‘Max Mega Menu Settings’i genişletmek için tıklayın ve ‘Enable.’ yanındaki kutuyu işaretleyin.

Bu kutuda, varsayılan mega menü ayarlarını da geçersiz kılabilirsiniz. Bu, WordPress web sitenizin farklı alanları için benzersiz mega menüler oluşturmanıza olanak tanır, bu nedenle devam edin ve istediğiniz değişiklikleri yapın.

Ardından, ‘Kaydet’e tıklayın.

Mega Menü Düzenini Oluşturun

Şimdi, farenizi ilk üst düzey öğenin üzerine getirin ve yeni bir 'Mega Menü' düğmesi göreceksiniz. Devam edin ve düğmeye tıklayın.

Şimdi bu üst düzey öğenin tüm ayarlarını göreceksiniz.

Varsayılan olarak Max Mega Menu, alt menülerin kenardan 'uçtuğu' açılır stilini kullanacaktır. Bunun yerine bir mega menü oluşturmak için 'Alt menü görüntü modu' açılır menüsünü açın ve 'Standart Düzen' veya 'Izgara Düzeni'nden birini seçin.

Standart düzen, tüm alt menüleri sütunlar halinde gösterir.

Bu arada, ızgara düzeni alt menü öğelerini sütunlara ve satırlara ayırmanıza olanak tanır.

Bu, çevrimiçi mağazanızdaki tüm dijital ürünler gibi çok sayıda içeriği göstermek istediğinizde veya aklınızda çok özel bir düzen varsa idealdir.

After selecting the standard or grid layout, you’ll see all the submenus assigned to this parent.

Şimdi, bu öğelerin mega menüde nasıl düzenleneceğini değiştirebilirsiniz.

Standart düzeni kullanıyorsanız, sağ üst köşedeki açılır menüyü kullanarak sütun sayısını değiştirebilirsiniz.

Bir ızgara düzeni kullanıyorsanız, ‘+Sütun’ ve ‘+Satır’ düğmelerini kullanarak sütun ve satır ekleyebilirsiniz.

Düzenden memnun kaldığınızda, alt menü öğelerini sürükle ve bırak kullanarak farklı sütunlara ve satırlara yerleştirebilirsiniz.

Bundan sonra, her öğenin sütunda ne kadar yer kaplayacağını değiştirme zamanı. Max Mega Menu, mevcut boyutu toplam kullanılabilir genişliğin bir kesri olarak gösterir.

Örneğin, aşağıdaki resimde her iki sütun da mevcut alanın yarısını kaplıyor.

Bir öğenin boyutunu değiştirmek için, kesri büyütmek veya küçültmek için ok düğmelerine tıklamanız yeterlidir.

Mobil Uyumlu Mega Menü Oluşturma (Yalnızca Izgara Düzeni)

Varsayılan olarak, Max Mega Menu masaüstü ve mobil cihazlarda aynı içeriği gösterecektir. Bu, ızgara düzenlerinde bir sorun olabilir, çünkü akıllı telefonlar ve tabletler tipik olarak daha küçük ekranlara sahiptir ve yatay kaydırma zor olabilir.

Izgara düzenini kullanıyorsanız, mobil cihazlar için farklı mega menüler oluşturabilirsiniz. Örneğin, kullanıcıların yatay olarak kaydırmaması için daha az sütun kullanabilirsiniz. Bu şekilde, mobil uyumlu bir WordPress menüsü oluşturabilirsiniz.

Tüm sütunları veya satırları, küçük bir cep telefonuna benzeyen 'Mobil cihazda gizle' simgesini kullanarak gizleyebilirsiniz.

Masaüstü ve mobil cihazlarda farklı içerikleri gizlemek ve göstermek için simgeyi açıp kapatmanız yeterlidir.

Mega Menu Widget'ları ile Zengin İçerik Ekleyin

Bu yapıldıktan sonra, mega menüye widget eklemeye başlayabilirsiniz. Bu, alt menüde son yorumlar, videolar, galeriler ve daha fazlası gibi ek içerikler göstermenize olanak tanır.

Örneğin, çevrimiçi mağazanızdaki bir satış etkinliğini tanıtmak veya en son ürünlerinizi öne çıkarmak için görseller kullanabilirsiniz.

Bir widget eklemek için, ‘Bir widget seçin….’ açılır menüsüne tıklamanız yeterlidir.

Artık listeden bir widget seçebilirsiniz.

WordPress, widget'ı otomatik olarak bir sütuna veya satıra ekleyecektir, ancak sürükle ve bırak kullanarak yeni bir konuma taşıyabilirsiniz.

Widget'ı yapılandırmak için küçük anahtar simgesine tıklayın.

Bu, widget'a içerik ekleyebileceğiniz ve ayarlarını değiştirebileceğiniz bir açılır pencere açar.

Oluşturduğunuz widget türüne bağlı olarak farklı seçenekler göreceksiniz. Örneğin, mega menüye bir sesli müzik çalar widget'ı eklerseniz, bir ses parçası yükleyebileceğiniz ayarları göreceksiniz.

Tüm widget'ların, widget'ın üstünde görünecek metin ekleyebileceğiniz bir 'Başlık' alanı vardır.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için ‘Kaydet’e tıklayın ve ardından ‘Kapat’ı seçin. Mega menüye daha fazla widget eklemek için yukarıda açıklanan aynı işlemi izlemeniz yeterlidir.

Varsayılan Mega Menü Ayarlarını Gözden Geçirin

Ardından, 'Ayarlar' sekmesine tıklamanız yeterlidir.

Burada, alt menüdeki farklı içerikleri gizlemek veya göstermek için onay kutularını kullanabilirsiniz.

Alt menüyü mobil cihazlarda ve masaüstlerinde gizleyebilir veya gösterebilir, ayrıca alt menünün üst düzey üst öğenin soluna veya sağına açılacak şekilde hizalamayı değiştirebilirsiniz.

Varsayılan ayarlarda herhangi bir değişiklik yaparsanız, ‘Değişiklikleri Kaydet’e tıklamayı unutmayın.

WordPress Mega Menüsüne Resim Simgeleri Ekleme

Resim simgeleri, ziyaretçilerin menü öğesinin ne hakkında olduğunu, gezinme etiketini okumalarına bile gerek kalmadan anlamalarına yardımcı olur. Bu, özellikle ziyaretçinin her gezinme etiketini okumak yerine içeriği hızlıca taramayı tercih edebileceği büyük menülerde kullanışlıdır.

En önemli içeriği öne çıkarmak için simgeler kullanabilirsiniz. Örneğin, 'Ödeme' menüsüne bir sepet simgesi ekleyerek ziyaretçileri satın alma işlemini tamamlamaya teşvik edebilirsiniz.

Gezinme menünüze resim simgeleri eklemek için ‘Icon’ sekmesine tıklayın.

Artık yerleşik kitaplıktan herhangi bir sekme simgesi seçebilir veya kendi görüntünüzü kullanabilirsiniz. Max Mega Menu Pro'ya yükseltirseniz, diğer simge yazı tiplerine, Genericons ve FontAwesome'a da erişebilirsiniz.

WordPress Sitenizde Mega Menüyü Yapılandırmayı Bitirin

Tüm bu ayarları tamamladıktan sonra, ana Görünüm » Menüler sayfasına dönmek için açılır pencereyi kapatabilirsiniz.

Şimdi bu işlemi her üst düzey üst öğe için tekrarlayabilirsiniz.

Mega menünün kurulumundan memnun kaldığınızda, canlı hale getirmek için Menüyü Kaydet düğmesine tıklayın.

Şimdi, mega menünün çalıştığını görmek için web sitenizin ön yüzünü ziyaret edin.

Bu makalenin WordPress sitenize bir mega menü eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca adım adım kılavuzumuza WordPress başlık menünüze bir düğme ekleme ve eğitimimize WordPress'te yapışkan kayan bir gezinme menüsü oluşturma da göz atabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.