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.

Mobil cihazlarda bir WordPress menüsünü gizleme

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.

İlk olarak, ziyaret etmeniz gerekir Görünüm » Menüler sayfasına gidin ve mobil cihazlarda görüntülemek istediğiniz yeni bir gezinme menüsü oluşturun.

Mobil cihazlarda kullanılmak üzere yeni bir menü oluşturun

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ü öğeleri ekleme

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, yüklemeniz ve etkinleştirmeniz gerekir. WP Mobil Menü Eklenti. 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, ziyaret etmeniz gerekir Mobil Menü Seçenekleri Eklenti ayarlarını yapılandırmak için sayfa. Buradan, açma/kapama düğmesini çevirerek mobil menünüzü sağda mı yoksa solda mı görüntülemek istediğinizi seçmeniz gerekir.

Mobil menüyü ve yönünü seçin

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.

Bu da ilginizi çekebilir  WordPress Açılış Sayfanız için Özel Alan Takma Adı Nasıl Eklenir

WordPress'te tema mobil menüsünü gizle

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, şuraya gidin: Görünüm » Menüler sayfa. 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ü).

Menü konumu

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.

Mobil menü değiştirildi

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 İnceleme aracını seçin.

İnceleme aracı

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ü menünüzü görüntülerken kaynak kodu

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.

Bu da ilginizi çekebilir  WordPress Blog Yazılarınızda Pinterest Görsellerini Nasıl Gizlersiniz?

Mobil menü tanımlayıcısı

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 de görebileceğiniz gibi, test temamız navbar-toggle-wrapper sınıf.

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

Tam menüyü gizlemek için özel CSS ekleme

Ö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.

İlk olarak, gitmeniz gerekir Görünüm » Menüler sayfasına gidin ve 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.

Ekran Seçenekleri

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 et ve ekle .hide-mobile Orada CSS sınıfı.

CSS sınıfı ekle

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 ekle .hide-desktop Bunun yerine CSS sınıfı.

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

Bu da ilginizi çekebilir  Kariyer ve İş Arasındaki Fark Nedir?

Şimdi bu menü öğelerini gizlemek için özel CSS ekleyeceğiz. basitçe şuraya gidin: Görünüm » Özelleştir Tema Özelleştiriciyi başlatmak için sayfa 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;
    }

}

Özel CSS'nizi ekleyin

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.

Masaüstü ve mobil ekranlarda farklı menüler

Bu makalenin, WordPress’te bir mobil menüyü nasıl kolayca gizleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Ayrıca WordPress’te özel sayfaların nasıl oluşturulacağı veya kod yazmadan sıfırdan özel bir temanın nasıl oluşturulacağı ile ilgili makalemize de bakmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen abone olun Youtube kanalı WordPress video eğitimleri için. Bizi de bulabilirsiniz heyecan ve Facebook.





Kaynak

Teşekkürler Bunu zaten beğendin
Yorum yok