WordPress’te Hücresel Menü Nasıl Gizlenir (Yeni Başlayan Kılavuz)

WordPress’te hücresel bir menüyü gizlemek ister misiniz? Çoğu WordPress teması, gezinme menünüzü otomatik olarak hücresel bir menüye değiştiren varsayılan bir stil ile birlikte gelir. Ancak, cep telefonunuzda aynı menüyü kullanmak istemeyebilirsiniz veya belki de farklı bir menü stili kullanmak istemeyebilirsiniz. Bu makalede, eklenti veya kod yöntemini kullanarak WordPress’te hücresel menüleri gizlemenin kolay bir yolunu göstereceğiz.

Yöntem 1. Eklentileri kullanarak WordPress’teki Hücresel Menüyü Gizle Bu yöntem daha kolaydır ve yeni başlayanlar için önerilir. WordPress temanız tarafından sağlanan mevcut hücresel menünüzü gizlemek için bir eklenti kullanacağız ve ardından farklı bir menü kullanacağız veya mobil cihazlarda hiç menü yok.
İlk olarak, görünüm 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ı olan bir ad vermeniz gerekir. Buna ‘hücresel menü’ diyeceğiz. Bundan sonra, menünüze eklemek istediğiniz öğeyi sol sütundan seçebilirsiniz.

Menünüze öğe eklemeyi bitirdikten sonra, menünüzü kaydetmek için menüden kaydet düğmesini tıklamayı unutmayın. Yeni bir gezinme menüsü oluşturmak için yardıma ihtiyacınız varsa, WordPress’te bir navigasyon menüsü oluşturmak için yeni başlayan kılavuzumuzu izleyin.
Ardından, WP mobil menü eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Hücresel Menü seçeneği sayfasını ziyaret etmeniz gerekir. Buradan, mobil menünüzü anahtarı Active’e çevirerek sağda veya solda görüntülemek isteyip istemediğinizi seçmeniz gerekir. Açılır menüden daha önce oluşturduğunuz hücresel menüyü seçin. Ardından, ‘Orijinal Tema Menüsünü Gizle’ e kaydırmanız gerekir. Burası, eklentiye WordPress temanız tarafından oluşturulan hücresel menüyü gizlemesini söyleyebilirsiniz.

Varsayılan olarak, eklenti, en popüler WordPress temaları tarafından kullanılan yaygın olarak kullanılan öğelerin tanımlanmasını kullanacaktır. Çoğu kullanıcının burada hiçbir şey yapmasına gerek yoktur. Ancak, eklenti tema menünüzü gizlemezse, buraya dönebilir ve tema gezinme menünüze yönlendirmek için ‘öğeyi bul’ düğmesini tıklayabilirsiniz. Ayarlarınızı kaydetmek için Değiştir düğmesini tıklamayı unutmayın. Artık bir eklenti hazırladığımıza göre, WordPress sitesine hücresel menümüzü eklenti tarafından eklenen yeni menü konumuna görüntülemesini söylemeliyiz.

Yeter, görünüm sayfasını aç »menüler. Oluşturduğunuz mobil menünün daha önce açılır menüde seçildiğinden emin olun. Menü öğenizin altında, eklenti ayarlarında seçtiğiniz konumu seçin (örn. Sol hücresel menü veya sağ hücresel menü).
Artık yeni menünüzü eylemde görmek için web sitenizi ziyaret edebilirsiniz. Eklenti şimdi tema hücresel menünüzü gizleyecek ve bunun yerine özel bir menü görüntüleyecek. Eklenti WP mobil menüsü, menü çubuğunun rengini değiştirmenizi, opaklığı değiştirmenizi, simgeleri eklemenizi ve diğerlerini ayarlarda yapmanıza olanak tanır. Bu düzenlemelerle oynamaktan çekinmeyin.

Yöntem 2. CSS kodunu kullanarak hücresel menüyü gizleyin Bu yöntem biraz gelişmiş ve kullanım için bazı özel CSS gerektirir. Bu yöntem için iki farklı yaklaşım kullanmayı seçebilirsiniz. CSS kullanarak eksiksiz bir hücresel menüyü gizlemeniz veya mobil cihazlarda ayrı ayrı menü öğelerini gizleyebilirsiniz. 1. İlk CSS’yi kullanarak mobil cihazda eksiksiz bir menü gizleme, özel bir CSS kullanarak değiştirmeniz gereken öğeleri bilmeniz gerekir. Bunu yapmak için web sitenizi açın ve fareyi gezinme menünüze yönlendirin. Bundan sonra, inceleme aracını sağ tıklayın ve seçin.

Tarayıcı ekranınız ikiye ayrılacak ve web sayfası kaynak kodunuzu göreceksiniz. Şimdi bu gezinme menüsü, hedeflemeniz gereken şey değil çünkü masaüstü ekranında görünüyor.
Masaüstü Gezinme menüsü hücresel bir menü ile değiştirilene kadar tarayıcı ekranınızı açıdan daha küçük bir boyuta sürükleyerek sıfırlamanız gerekir.

WordPress Navigasyon menünüz tarafından kullanılan tanımlama ve CSS sınıfını bilmeniz gerekir. Bunu, menü alanı vurgulanana kadar fareyi kaynak koduna taşıyarak yapabilirsiniz. Yukarıdaki ekran görüntülerinde görebileceğiniz gibi, test temalarımız Navbar-Toggle-Wrapper sınıfını kullanır.

Bundan sonra, tema ayarını başlatmak için görünümüne gitmelisiniz »WordPress yönetici alanındaki sayfaları özelleştirin. Burada, ‘Ek CSS’ sekmesine geçmeniz ve sol panelin sağ alt köşesindeki hücresel simgeyi tıklamanız gerekir. Şimdiye kadar sitenizin mobil cihazda görüntülenmesini gösterecektir. Artık aşağıdaki CSS kodunu girebilir ve mobil menünüzün önizleme panelinde kaybolduğunu görebilirsiniz .. Navbar-toggle-wrapper {

Görüntü yok;
}

WordPress temanız tarafından kullanılan bir kimlik ile değiştirmeyi unutmayın. Bundan sonra, değişikliklerinizi kaydetmek için üstteki ‘Yayın’ düğmesini tıklayın.
2. CSS kullanarak hücresel menüdeki belirli menü öğelerini gizlemek Bu yöntem, bir navigasyon menüsü oluşturmanıza ve ardından mobil cihazlarda veya masaüstlerinde görüntülemek istemediğiniz öğeleri seçici olarak görüntülemenize veya gizlemenize olanak tanır. Bu yöntemin avantajı, hücresel ve masaüstü için aynı gezinme menüsünü kullanabilmeniz ve görmek istemediğiniz öğeleri gizleyebilmenizdir. İlk olarak, görünüm »sayfa menüsüne gitmeli ve ekranın sağ üst kısmındaki ekran seçeneği düğmesini tıklamanız gerekir. Buradan, ‘CSS’ seçeneğinin yanındaki kutuyu kontrol etmeniz gerekir.
Daha sonra. Mobil cihazda gizlemek istediğiniz menü öğesine kaydırmanız ve genişletmek için tıklamanız gerekir. Menü öğesini ayarlarken, şimdi CSS sınıfını ekleme seçeneğini göreceksiniz. Lütfen ve CSS. Hide-Mobile sınıfını oraya ekleyin.
Cep telefonunuzda görüntülemek istemediğiniz tüm menü öğeleri için işlemi tekrarlayın. Aynı şekilde, masaüstü bilgisayarda gizlemek istediğiniz menü öğesini de tıklayabilirsiniz. Bu kez, bunun yerine CSS. Hide-Desktop sınıfını ekleyin. İşiniz bittikten sonra, değişikliklerinizi kaydetmek için menü kaydet düğmesine tıklamayı unutmayın. Şimdi bu menü öğesini gizlemek için özel bir CSS ekleyeceğiz. Sadece görünüm sayfasını açın »Ayarlama temalarını başlatmak için ayarlayın ve Ek CSS sekmesine tıklayın. CSS’ye aşağıdaki CSS kodunu eklemeniz gerekir.@Media (min-width: 980px) {
.Hide-Desktop {

Ekran: Yok! Önemli;

}
}
@Media (Max-Width: 980px) {
.HIDE-MOBILE {
Ekran: Yok! Önemli;
}
}
Değişikliklerinizi kaydetmek için yayın düğmesini tıklamayı unutmayın. Artık web sitenizi ziyaret edebilirsiniz ve masaüstünde saklamak istediğiniz öğelerin artık menüde görünmediğini göreceksiniz. Tarayıcı ekranınızı daha küçük bir boyuta ayarlayın ve aynı şeyi hücresel menü için de göreceksiniz.
Bu makalenin WordPress’te hücresel menülerin nasıl kolayca gizleneceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress’te özel bir sayfanın nasıl oluşturulacağı veya kod yazmadan sıfırdan nasıl özel bir temanın oluşturulacağına dair makalemizi de görmek 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.