WordPress'te Mobil Menü Nasıl Gizlenir (Başlangıç ​​Kılavuzu)

WordPress'te bir mobil menüyü gizlemek ister misiniz?

Çoğu WordPress teması, gezinme menülerinizi otomatik olarak bir mobil menüye dönüştüren yerleşik stillerle birlikte gelir. Ancak aynı menüyü mobilde kullanmak istemeyebilirsiniz veya farklı bir menü stili kullanmak isteyebilirsiniz.

Bu yazıda, eklenti veya kod yöntemi kullanarak WordPress'te bir mobil menüyü nasıl kolayca gizleyeceğinizi göstereceğiz.

Yöntem 1. Bir Eklenti Kullanarak WordPress'te Mobil Menüyü Gizleyin

Bu yöntem daha kolaydır ve yeni başlayanlar için önerilir. WordPress temanız tarafından sağlanan mevcut mobil menünüzü gizlemek için bir eklenti kullanacağız ve ardından mobil cihazlarda farklı bir menü kullanacağız veya hiç menü kullanmayacağız.

Öncelikle Görünüm » Menüler sayfasını ziyaret etmeniz ve mobil cihazlarda görüntülemek istediğiniz yeni bir gezinme menüsü oluşturmanız gerekir.

Bir sonraki ekranda, yeni menünüz için daha sonra tanımlamanıza yardımcı olacak bir ad sağlamanız gerekir. Biz buna 'Mobil Menü' diyeceğiz. Ardından sol sütundan menünüze eklemek istediğiniz öğeleri seçebilirsiniz.

Menünüze öğe eklemeyi bitirdikten sonra menünüzü kaydetmek için Menüyü Kaydet düğmesine tıklamayı unutmayın.

Yeni bir gezinme menüsü oluşturma konusunda yardıma ihtiyacınız varsa, WordPress'te bir gezinme menüsü oluşturmaya yönelik başlangıç ​​kılavuzumuzu izleyin.

Ardından, WP Mobil Menü eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyon üzerine, eklenti ayarlarını yapılandırmak için Mobil Menü Seçenekleri sayfasını ziyaret etmeniz gerekir. Buradan, geçiş düğmesini Açık konuma getirerek mobil menünüzü sağda mı yoksa solda mı görüntülemek istediğinizi seçmeniz gerekir.

Açılır menüden daha önce oluşturduğunuz mobil menüyü seçin.

Ardından, 'Orijinal Tema Menüsünü Gizle' bölümüne kaydırmanız gerekir. Eklentiye, WordPress temanız tarafından oluşturulan bir mobil menüyü gizlemesini söyleyebileceğiniz yer burasıdır.

Varsayılan olarak eklenti, en popüler WordPress temaları tarafından kullanılan yaygın olarak kullanılan öğe tanımlayıcılarını kullanır. Çoğu kullanıcının burada bir şey yapması gerekmez.

Ancak, eklenti temanızın menüsünü gizleyemezse, buraya geri dönebilir ve 'Öğe Bul' düğmesini tıklayarak temanızın gezinme menüsünü gösterebilirsiniz.

Ayarlarınızı kaydetmek için Değişiklikleri Kaydet düğmesine tıklamayı unutmayın.

Eklentiyi kurduğumuza göre, WordPress sitesine mobil menümüzü eklenti tarafından eklenen yeni menü konumuna göstermesini söylemeliyiz.

Basitçe Görünüm » Menüler sayfasına gidin. Açılır menüde daha önce oluşturduğunuz mobil menünün seçili olduğundan emin olun. Menü öğenizin altında, eklenti ayarlarında seçtiğiniz konumu seçin (örn. Sol Mobil Menü veya Sağ Mobil Menü).

Artık yeni menünüzü çalışırken görmek için web sitenizi ziyaret edebilirsiniz. Eklenti artık temanızın mobil menüsünü gizleyecek ve bunun yerine özel bir menü görüntüleyecektir.

WP Mobil Menü eklentisi, ayarlarda menü çubuğunun rengini değiştirmenize, opaklığı değiştirmenize, simgeler eklemenize ve daha fazlasını yapmanıza olanak tanır. Bu ayarlarla oynamaktan çekinmeyin.

Yöntem 2. Mobil Menüyü CSS Kodunu Kullanarak Gizle

Bu yöntem biraz ileri düzeydedir ve bazı özel CSS'lerin kullanılmasını gerektirir.

Bu yöntem için iki farklı yaklaşım kullanmayı seçebilirsiniz. CSS kullanarak tam bir mobil menüyü gizleyebilirsiniz veya mobil cihazlarda tek tek menü öğelerini gizleyebilirsiniz.

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

İlk olarak, özel CSS kullanarak değiştirmeniz gereken öğeyi bulmanız gerekir. Bunu yapmak için web sitenize gidin ve fareyi gezinme menünüzün üzerine getirin. Bundan sonra, sağ tıklayın ve Inspect tool'u seçin.

Tarayıcı ekranınız ikiye bölünecek ve web sayfanızın kaynak kodunu göreceksiniz. Artık bu gezinme menüsü, masaüstü ekranında göründüğü için hedeflemeniz gereken menü değil.

Masaüstü gezinme menüsü mobil menü ile değiştirilene kadar tarayıcı ekranınızı köşeden daha küçük bir boyuta sürükleyerek yeniden düzenlemeniz gerekir.

WordPress gezinme menünüz tarafından kullanılan tanımlayıcıyı ve CSS sınıfını bulmanız gerekir. Bunu, menü alanı vurgulanana kadar farenizi kaynak kodun üzerinde hareket ettirerek yapabilirsiniz.

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, test navbar-toggle-wrapper sınıfını kullanıyor.

Bundan sonra, tema özelleştiriciyi başlatmak için WordPress yönetici alanındaki Görünüm » Özelleştir sayfasına gitmeniz gerekir. Burada, 'Ek CSS' sekmesine geçmeniz ve sol panelin sağ alt köşesindeki mobil simgesine tıklamanız gerekiyor.

Özelleştirici artık sitenizin mobil cihazlarda nasıl görüneceğinin bir önizlemesini gösterecek. Artık aşağıdaki CSS kodunu girebilir ve mobil menünüzün önizleme panelinde kaybolduğunu görebilirsiniz.

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

.navbar-toggle-wrapper'ı WordPress temanız tarafından kullanılan tanımlayıcıyla değiştirmeyi unutmayın.

Bundan sonra, değişikliklerinizi kaydetmek için üst kısımdaki 'Yayınla' düğmesine tıklayın.

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üntülemek istemediğiniz öğeleri seçerek göstermenize veya gizlemenize olanak tanır.

Bu yöntemin avantajı, mobil ve masaüstü için aynı gezinme menüsünü kullanabilmeniz ve görünmesini istemediğiniz öğeleri basitçe gizleyebilirsiniz.

Öncelikle Görünüm » Menüler sayfasına gitmeniz ve ekranın sağ üst köşesindeki Ekran Seçenekleri butonuna tıklamanız gerekmektedir. Buradan, 'CSS Sınıfları' seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

Daha sonra. mobil cihazlarda gizlemek istediğiniz menü öğesini aşağı kaydırmanız ve genişletmek için tıklamanız gerekir. Menü öğesi ayarlarında artık bir CSS sınıfı ekleme seçeneğini göreceksiniz. Devam edin ve oraya .hide-mobile CSS sınıfını ekleyin.

Mobilde göstermek istemediğiniz tüm menü öğeleri için işlemi tekrarlayın.

Benzer şekilde, masaüstü bilgisayarlarda gizlemek istediğiniz menü öğelerine de tıklayabilirsiniz. Bu sefer bunun yerine .hide-desktop CSS sınıfını ekleyin.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için Menüyü Kaydet düğmesine tıklamayı unutmayın.

Şimdi bu menü öğelerini gizlemek için özel CSS ekleyeceğiz. Tema Özelleştiriciyi başlatmak için Görünüm » Özelleştir sayfasına gidin ve Ek CSS sekmesine tıklayın.

Aşağıdaki CSS kodunu CSS kutusuna eklemeniz gerekiyor.

@media (min-width: 980px){

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

}

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

}

Değişikliklerinizi kaydetmek için Yayınla düğmesine tıklamayı unutmayın.

Artık web sitenizi ziyaret edebilirsiniz ve masaüstünde gizlemek istediğiniz öğelerin artık menüde görünmediğini fark edeceksiniz. Tarayıcı ekranınızı daha küçük bir boyuta ayarlayın ve aynısını mobil menü için de fark edeceksiniz.

Bu makalenin, WordPress'te bir mobil menüyü nasıl kolayca gizleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, WordPress'te nasıl özel sayfalar oluşturulacağını veya kod yazmadan sıfırdan nasıl özel bir tema oluşturulacağını anlatan makalemize de göz atmak isteyebilirsiniz.

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