WordPress'te Mobil Menü Nasıl Gizlenir (Yeni Başlayanlar İçin Kılavuz)

Mobil navigasyon, WordPress sitenizin kullanıcı deneyimini iyileştirebilir veya bozabilir. WPBeginner olarak, varsayılan mobil menü ayarlarının her zaman kullanıcılarımızın web sitelerinde başarmak istedikleriyle tam olarak uyuşmadığını keşfettik.

WordPress temaları, masaüstü menülerini mobil uyumlu sürümlere dönüştürmede iyi bir iş çıkarsa da, bu otomatik dönüştürme her zaman en iyi çözüm değildir.

Kullanıcılarımız, ister basitlik, ister özel promosyonlar veya geliştirilmiş dönüşüm oranları için olsun, mobil ziyaretçileri için farklı gezinme seçenekleri görüntülemeye sıklıkla ihtiyaç duyarlar.

Bu makalede, WordPress'te varsayılan mobil menüyü nasıl kolayca gizleyeceğinizi göstereceğiz, böylece bunun yerine özel bir menü gösterebilirsiniz.

Bu öğreticide iki farklı yöntemi ele alacağız ve kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Yöntem 1: Bir Eklenti Kullanarak WordPress'te Mobil Menüyü Gizleme
• Yöntem 2: CSS Kodu Kullanarak Mobil Menüyü Gizleme

Yöntem 1: Bir Eklenti Kullanarak WordPress'te Mobil Menüyü Gizleme

WordPress temanız tarafından sağlanan mobil menüyü gizlemenin en kolay yolu, WP Mobil Menü eklentisini kullanmaktır.

Bu eklenti, benzersiz bir menü oluşturmanıza ve ardından mobil kullanıcılara göstermenize olanak tanır. Ayrıca birçok temanın varsayılan olarak sağladığı mobil menüyü gizleyebilirsiniz.

Mobil Menünüzü Oluşturun

Öncelikle, mobil cihazlarda göstermek istediğiniz gezinme menüsünü oluşturmanız gerekir. Başlamak için WordPress kontrol panelinizdeki Görünüm » Menüler sayfasına gidin.

Bir sonraki ekranda, menü için bir ad yazmanız gerekir. Menüyü daha sonra tanımlamanıza yardımcı olacak bir şey kullanmak iyi bir fikirdir, örneğin ‘Mobil Menü’ gibi.

Bundan sonra, mobil menüye eklemek istediğiniz tüm gönderileri ve sayfaları seçebilirsiniz.

Daha ayrıntılı talimatlar için, WordPress'te bir navigasyon menüsü oluşturma hakkındaki rehberimize bakın.

Menünün düzeninden memnun kaldığınızda, değişikliklerinizi kaydetmek için ‘Menüyü Kaydet’ düğmesine tıklamayı unutmayın.

Eklenti Ayarlarını Yapılandırın

Bu işlem tamamlandıktan sonra, WP Mobile Menu eklentisini yükleme ve etkinleştirme zamanı. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Mobil Menü Seçenekleri'ne gidin.

Burada, sayfanın altına kaydırmanız ve 'Sol/Sağ Menüyü Etkinleştir' geçişlerini kullanarak mobil menüyü ekranın sol veya sağ tarafında göstermeyi seçmeniz gerekir.

Ardından, ‘Tek bir menü seçin’ açılır menüsünü açın ve daha önce oluşturduğunuz mobil menüyü seçin.

Bundan sonra, 'Değişiklikleri Kaydet'e tıklamanız yeterlidir.

WordPress gezinme menünüzü stilize etmenin birçok yolu vardır. Örneğin, 'Yazı Tipi Seçenekleri'ni seçebilir ve ardından yazı tipi boyutunu, kalınlığını, aralığını ve daha fazlasını değiştirebilirsiniz.

Ayrıca 'Üst Bilgi Stili'ni seçebilir ve mobil üst bilginin nasıl göründüğünü ve davrandığını değiştirebilirsiniz.

Örneğin, bir gölge ekleyebilir, başlık yüksekliğini değiştirebilir, yapışkan bir gezinme menüsü oluşturabilir ve daha fazlasını yapabilirsiniz.

Bu ayarların çoğu basittir, bu yüzden onlara göz atabilir ve ne tür farklı efektler oluşturabileceğinizi görebilirsiniz. Örneğin, bir görüntü simgesi ekleyebilir veya WordPress menülerinize CSS ekleyebilirsiniz.

Mobil menünün kurulumundan memnun kaldığınızda, 'Değişiklikleri Kaydet'e tıklamanız yeterlidir.

WordPress'e Mobil Menünüzü Ekleyin

Eklentiyi kurduğunuza göre, bir sonraki adım WordPress'e mobil menüyü nerede göstereceğini Görünüm » Menüler'e giderek bildirmektir.

Henüz seçili değilse, ‘Düzenlenecek bir menü seçin’ açılır menüsünü açın ve daha önce oluşturduğunuz mobil menüyü seçin.

Ardından, ‘Menü Ayarları’ altında, menüyü nerede göstermek istediğinize bağlı olarak ‘Sol Mobil Menü’ veya ‘Sağ Mobil Menü’ seçeneğini belirlemelisiniz.

Bundan sonra, 'Menüyü Kaydet'e tıklamanız yeterlidir.

Şimdi, mobil cihazınızda web sitenizi ziyaret edin veya masaüstünden WordPress sitenizin mobil sürümünü görüntüleyin. Özel mobil menüyü görmelisiniz.

Sorun Giderme: Varsayılan Mobil Menüyü Gizleme

Eklenti, varsayılan olarak en popüler WordPress temaları tarafından kullanılan menü öğelerini otomatik olarak gizler. Bu, temanızın varsayılan mobil menüsünün sizin herhangi bir şey yapmanıza gerek kalmadan gizlenmesi gerektiği anlamına gelir.

Ancak, varsayılan mobil menü hala görünüyorsa, WordPress kontrol panelinde Mobil Menü Seçenekleri » Genel Seçenekler » Görünürlük Seçenekleri bölümüne gitmeniz gerekecektir.

Burada, ‘Öğeyi Bul’ düğmesine tıklayın.

Bu, web sitenizin mobil sürümünü açar.

Bu açılır pencerede, WordPress temanız tarafından sağlanan menü gibi mobil cihazlarda gizlemek istediğiniz içeriği seçmek için tıklayın.

Bu, içeriğin CSS sınıfını 'Öğeleri Gizle' alanına ekler.

Bu işlem bittikten sonra ‘Değişiklikleri Kaydet’e tıklayın. Artık temanın menüsü mobil cihazlarda görünmemelidir.

Yöntem 2: CSS Kodu Kullanarak Mobil Menüyü Gizleme

Bu yöntem biraz gelişmiştir ve web sitenize özel kod eklemenizi gerektirir.

Bu yöntem için iki farklı yaklaşımdan birini seçebilirsiniz. CSS kullanarak tüm varsayılan mobil menüyü gizleyebilir veya mobil cihazlarda tek tek menü öğelerini gizleyebilirsiniz.

1. CSS kullanarak mobil cihazlarda tam bir menüyü gizleme

Bir seçenek, WordPress temanızdaki varsayılan mobil menüyü tamamen kaldırmaktır. Mobil cihazlarda breadcrumb gezinme bağlantıları veya etkileşimli görüntüler gibi farklı bir gezinme yöntemi kullanmak istiyorsanız bu iyi bir seçenektir.

Öncelikle, değiştirmeniz gereken öğeyi bulmanız gerekir. Bunu yapmak için WordPress web sitenize gidin ve fareyi gezinme menüsünün üzerine getirin.

Bundan sonra, sağ tıklayın ve tarayıcınızın Denetleme aracını seçin.

Tarayıcı ekranınız şimdi ikiye bölünecek ve gezinme menüsünün kodunu içeren sayfanın kodunu göreceksiniz.

Ancak, bu gezinme menüsünü değiştirmek istemiyoruz çünkü masaüstü ekranında görebiliyoruz.

Neyse ki, mobil menüye erişmenin kolay bir yolu var.

WordPress'in masaüstü gezinme menüsünü mobil menü ile değiştirmesi için tarayıcı penceresinin köşesinden sürükleyerek küçültmeniz yeterlidir.

Şimdi, mobil gezinme menüsü tarafından kullanılan tanımlayıcıyı ve CSS sınıfını bulmanız gerekiyor. Tarayıcınız menü alanını vurgulayana kadar fareyi kaynak kodunun üzerinde hareket ettirin. Bu bölüm, kullanmanız gereken sınıfı ve tanımlayıcıyı içerir.

Bu bilgileri edindikten sonra, kodu kullanarak menüyü mobil cihazlarda gizleyebilirsiniz.

Genellikle, WordPress kılavuzları size özel kodu sitenizin functions.php dosyasına eklemenizi ister. Ancak bu, kullanıcı dostu değildir ve kodda küçük bir hata bile her türlü yaygın WordPress hatasına neden olabilir. Özel kod web sitenizi tamamen bozabilir.

Bunun yerine, özel kodu WPCode kullanarak eklemek daha güvenlidir.

Bu ücretsiz eklenti, sitenizi riske atmadan WordPress'e özel CSS, PHP, HTML ve daha fazlasını eklemeyi kolaylaştırır. Eklentinin kodunu WPCode'un düzenleyicisine yapıştırabilir, ardından kodu tek bir tıklamayla etkinleştirebilir ve devre dışı bırakabilirsiniz.

Başlamak için WPCode'u yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla bilgi için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Ardından, WordPress kontrol panelinde Kod Parçacıkları » Parçacık Ekle bölümüne gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır kod parçacıklarını göreceksiniz. Bu, yorumları tamamen devre dışı bırakmanıza, WordPress'in normalde desteklemediği dosya türlerini yüklemenize, ek sayfa eklemeyi devre dışı bırakmanıza ve çok daha fazlasını yapmanıza olanak tanıyan bir kod parçacığı içerir.

Sitenize özel CSS eklemek için, 'Özel Kodunuzu Ekleyin' üzerine gelin ve ardından '+ Özel Parçacık Ekle' düğmesine tıklayın.

Ardından, ekranda görünen seçenekler listesinden kod türü olarak 'CSS Snippet'i seçin.

Bu sizi Özel Kod Parçacığı Oluşturma sayfasına götürecektir.

Başlamak için kod parçacığına bir başlık girin. Bu, parçacığı WordPress kontrol panelinizde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, aşağıdaki kodu kod düzenleyiciye yapıştırabilir veya yazabilirsiniz:

.navbar-toggle-wrapper {
display:none;
}

Tarayıcınızın İncele aracını kullanarak bulduğunuz tanımlayıcı ile .navbar-toggle-wrapper yerine koymayı unutmayın.

Kod parçasını yayınlamaya hazır olduğunuzda, ekranın üst kısmına kaydırın ve 'Etkin Değil' geçişini tıklayarak 'Etkin' olarak değiştirmesini sağlayın.

Son olarak, kod parçacığını canlı hale getirmek için ‘Kod Parçacığını Kaydet’e tıklayın.

Artık temanızın mobil menüsü akıllı telefonlarda ve tabletlerde gizlenecektir.

2. CSS kullanarak mobil menüde belirli menü öğelerini gizleme

Bu yöntem, bir gezinme menüsü oluşturmanıza ve ardından mobil veya masaüstü cihazlarda görünmesini istemediğiniz öğeleri seçici olarak göstermenize veya gizlemenize olanak tanır.

Bu şekilde, mobil ve masaüstü ziyaretçiler için aynı gezinme menüsünü kullanabilirsiniz. İlk olarak, Görünüm » Menüler'e gidin.

Bunu yaptıktan sonra, ekranın sağ üst köşesindeki ‘Ekran Seçenekleri’ düğmesine tıklayın.

Buradan, ‘CSS Sınıfları’ seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

Bundan sonra, mobilde gizlemek istediğiniz bir menü öğesine kaydırın ve genişletmek için tıklayın.

Menü öğesi ayarlarında, bir CSS sınıfı ekleme seçeneğini göreceksiniz. Buraya, sadece devam edin ve bir .hide-mobile CSS sınıfı ekleyin.

Mobil cihazlarda gizlemek istediğiniz tüm menü öğeleri için işlemi tekrarlayın.

Benzer şekilde, masaüstü bilgisayarlarda gizlemek istediğiniz herhangi bir menü öğesine tıklayabilirsiniz. Ancak bu sefer, bunun yerine .hide-desktop CSS sınıfını ekleyin.

Bitirdiğinizde, değişikliklerinizi kaydetmek için ‘Menüyü Kaydet’ düğmesine tıklamayı unutmayın.

Bu işlem tamamlandıktan sonra, bu menü öğelerini özel CSS kullanarak gizlemeye hazırsınız. Yukarıda açıklanan aynı işlemi izleyerek basitçe yeni bir özel kod parçacığı oluşturun.

Şimdi, aşağıdaki CSS'yi WPCode kod düzenleyicisine ekleyebilirsiniz:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Bundan sonra, kod parçacığını yayınlamanız yeterlidir.

Şimdi, WordPress blogunuzu ziyaret ederseniz, masaüstünde gizlemek istediğiniz menü öğelerinin artık görünmediğini göreceksiniz. Menünün mobilde nasıl göründüğünü test etmek için, WordPress mobil menüye geçene kadar tarayıcı ekranını küçültmeniz yeterlidir.

Bu makalenin, WordPress'te mobil bir menüyü nasıl kolayca gizleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca en iyi sürükle ve bırak WordPress sayfa oluşturucuları hakkındaki uzman seçimlerimizi ve menülere koşullu mantık ekleme rehberimizi de görmek isteyebilirsiniz.

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.