• Hakkımızda
  • Reklam
  • Gizlilik
  • İletişim
Perşembe, Şubat 9, 2023
  • Login
Wploji
  • Ana Sayfa
  • Genel
  • WordPress
  • Eklentiler
  • SEO
  • Hosting
  • Temalar
  • Hosting Öneri
No Result
View All Result
  • Ana Sayfa
  • Genel
  • WordPress
  • Eklentiler
  • SEO
  • Hosting
  • Temalar
  • Hosting Öneri
No Result
View All Result
Wploji
No Result
View All Result
Home Wordpress

WordPress Web Sitesinde Mobil Menüyü Gizleme

WPLOJI EDITOR by WPLOJI EDITOR
Mart 11, 2021
in Wordpress
0
WordPress Web Sitesinde Mobil Menüyü Gizleme
0
SHARES
182
VIEWS
Share on FacebookShare on Twitter

İçindekiler ✓

  • 1.WordPress’te Eklenti Kullanarak Mobil Menüyü Gizleme
  • 2. CSS Kodunu Kullanarak Mobil Menüyü Gizleyin

WordPress temalarının çoğu, gezinme menülerinizi otomatik bir şekilde mobil menüye dönüştürebilen yerleşik stillere sahiptir. Fakat aynı menüyü mobil cihazlarda kullanmak istemeyebilirsiniz ya da farklı bir menü stili kullanmayı isteyebilirsiniz.

Bu yazımızda, bir eklenti ya da kod yöntemi kullanarak WordPress web sitesinde mobil menüyü gizleme konusundan bahsedeceğiz.

WordPress Web Sitesinde Mobil Menüyü Gizleme

1.WordPress’te Eklenti Kullanarak Mobil Menüyü Gizleme

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

İlk olarak Görünüm kısmından Menüler sayfasını ziyaret ederek mobil cihazlarda görüntülemek istediğiniz yeni bir gezinme menüsü oluşturmanız gerekiyor.

Daha sonra tanımlamanıza yardımcı olması için yeni menünüze bir ad oluşturmanız gerekiyor. Biz burada ‘Mobil Menü’ diyeceğiz. Ardından sol sütunu kullanarak menünüze eklemek istediğiniz öğeleri seçebilirsiniz.

Menünüze öğe ekleme işlemini bitirdiğiniz zaman menünüzü kaydetmek için Menüyü Kaydet butonuna tıklamayı unutmayınız.

Ardından, WP Mobile Menu eklentisini kurmanız ardından etkinleştirmeniz gerekiyor.

Etkinleştirme işleminden sonra, eklenti ayarlarını yapılandırmak için Mobil Menü Seçenekleri sayfasını ziyaret etmeniz gerekiyor. Buradan, açma / kapama butonunu Açık konuma getirerek mobil menünüzü sağ tarafta mı yoksa sol tarafta mı görüntülemek istediğinizi  belirlemeniz gerekiyor.

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

Daha sonra, ‘Orijinal Tema Menüsünü Gizle’ bölümüne getirmeniz gerekiyor. Eklentiye WordPress temanız tarafından oluşturulan 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ı kullanacaktır. Çoğu kullanıcının burada hiçbir şey yapması gerekmez.

Eklenti temanızın menüsünü gizleyemezse eğer buraya geri dönerek basit bir şekilde temanızın gezinme menüsüne işaret etmek için ‘Öğe Bul’ butonuna tıklayabilirsiniz.

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

Artık eklentiyi kurduğumuza göre, WordPress sitesine mobil menümüzü eklenti tarafından eklenen yeni menü konumunda göstermesini söylememiz gerekiyor.

Basit bir şekilde Görünüm kategorisinde Menüler kısmına gidin. Daha önce oluşturmuş olduğumuz mobil menünün açılır menüde seçilmiş olduğundan emin olun. Menü öğenizin alt kısmından eklenti ayarlarında seçtiğiniz konumu seçin (örn. Sol Mobil Menü veya Sağ Mobil Menü).

Şimdi yeni menünüzü çalışırken görebilmek için web sitenizi ziyaret ediniz. Eklenti, temanızın mobil menüsünü gizleyerek  özel bir menü görüntüleyecektir.

WP Mobile Menu eklentisi, menü çubuğunun rengini değiştirmenize, opaklığı değiştirmenize, simgeler eklemenize ve ayarlar kısmından daha birçok şeyi değiştirmenize olanak tanır.

2. CSS Kodunu Kullanarak Mobil Menüyü Gizleyin

Bu yöntem biraz ileri düzey kullanıcılara uygundur. Bazı özel CSS’lerin kullanılmasını gerektirir.

Bu yöntem için iki farklı yaklaşım tercih edebilirsiniz. CSS ile mobil menüyü gizleyebilir ya da mobil cihazlarda teker teker menü öğelerini gizleyebilirsiniz.

CSS kullanarak mobil cihazlarda eksiksiz bir menüyü gizleme

İlk olarak, özel CSS kullanarak değiştirmeniz gereken öğeyi bulmanız gerekiyor. Bu işlemi gerçekleştirmek için, web sitenize gidip mousenizi gezinme menünüzün üzerine getirin. Daha sonra, sağ tıklayarak İnceleme aracını seçin .

Tarayıcı ekranınız ikiye bölünmesini sağlayacak ardından web sayfanızın kaynak kodu karşınıza çıkacak.

Masaüstü gezinme menüsü mobil menü ile değiştirilene kadar tarayıcı ekranınızı köşesinden boyutunu küçültüp sürükleyerek tekrar düzenlemeniz gerekiyor.

WordPress gezinme menünüzün  kullandığı tanımlayıcıyı ve CSS sınıfını bulmanız gerekiyor. Menü alanı vurgulanana kadar farenizi kaynak kodunda hareket ettirerek bunu yapabilirsiniz.

Yukarıda yer alan ekran görüntüsünde gördüğünüz gibi, test temamız navbar-toggle-wrappersınıfı kullanıyor .

Ardından tema özelleştiriciyi başlatmak için WordPress yönetici alanında yer alan Görünüm kategorisinden Özelleştir sayfasına gitmeniz gerekiyor. Burada, ‘Ek CSS’ sekmesine geçerek sol panelin sağ alt köşesinde bulunan mobil simgeye tıklamanız gerekiyor.

Özelleştirici şimdi web sitenizin mobil cihazlarda nasıl göründüğünün bir önizlemesini gösterecek. Daha sonra aşağıda yer alan CSS kodunu girerek mobil menünüzün önizleme panelinde kaybolduğunu göreceksiniz.

1
2
3
.navbar-toggle-wrapper {
display:none;
}

.Navbar-toggle-wrapper’ı WordPress temanızın kullandığı tanımlayıcıyla değiştirmeyi unutmayın.

Daha sonra, değişikliklerinizi kaydetmek için üst kısımda yer alan ‘Yayınla’ butonuna tıklayın.

CSS kullanarak mobil menüdeki belirli menü öğelerini gizleme

Bu yöntem, gezinme menüsü oluşturarak mobil ya da masaüstü cihazlarda görünmesini istemediğiniz öğeleri seçerek gizlemenize olanak tanır.

Bu yöntemin iyi yönü, mobil ve masaüstü için aynı gezinme menüsünü kullanabilmeyi ve görünmesini istemediğiniz öğeleri gizleyebilmeyi sağlamasıdır.

İlk olarak Görünüm kategorisinden Menüler sayfasına gidiniz ardından ekranın sağ üst köşesinde yer alan Ekran Seçenekleri butonuna tıklamanız gerekiyor. Buradan, ‘CSS Sınıfları’ seçeneğinin yanında yer alan kutuyu işaretlemeniz gerekiyor.

Ardından mobil cihazlarda gizlemek istediğiniz bir menü öğesine gelip genişletmek için tıklamanız gerekiyor. Menü öğesi ayarlarında CSS sınıfı ekleme seçeneği karşınıza çıkacaktır. Devam edip .hide-mobileoraya CSS sınıfı ekleyin.

Mobil cihazda gösterilmesini istemediğiniz bütün menü öğeleri için aynı işlemi tekrarlayın.

Aynı şekilde, masaüstü bilgisayarlarda görünmesini istemediğiniz menü öğelerine de tıklayabilirsiniz. Fakat bu sefer .hide-desktop yerine CSS sınıfını ekleyin.

İşlemi gerçekleştirdiğiniz zaman, değişikliklerinizi kaydetmek için Menüyü Kaydet butonuna tıklamayı unutmayın.

Şimdi ise bu menü öğelerini gizlemek için özel CSS eklememiz gerekiyor. Tema Özelleştiriciyi başlatmak için Görünüm kategorisinden Özelleştir sayfasına giderek Ek CSS sekmesine tıklayın.

CSS kutusuna aşağıda yer alan CSS kodunu eklemeniz gerekiyor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media (min-width: 980px){
    .hide-desktop{
    display: none !important;
    }
}
    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }
}

Özel CSS'nizi ekleyin

Yapmış olduğunuz değişikliklerinizi kaydetmek için Yayınla butonuna tıklamayı unutmayın.

Şimdi web sitenizi ziyaret ederek masaüstünde gizlemek istediğiniz öğelerin artık menüde olmadığını göreceksiniz. Tarayıcı ekranınızı küçük bir boyuta getirerek ve aynı şeyi mobil menü için de göreceksiniz.

Bu yazımızın, WordPress’te bir mobil menüyü nasıl kolayca gizleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz.

Dilerseniz daha önce yazmış olduğumuz Küçük İşletmelerin Kullanabileceği 5 Muhasebe Yazılımı yazımızı okuyabilirsiniz.

Previous Post

Küçük İşletmelerin Kullanabileceği 5 Muhasebe Yazılımı

Next Post

En İyi 9 WordPress e-Ticaret Teması

WPLOJI EDITOR

WPLOJI EDITOR

Sizlere Wordpress ile ilgili rehberlik etmek için buradayız.

Next Post
En İyi 9 WordPress e-Ticaret Teması

En İyi 9 WordPress e-Ticaret Teması

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

  • Trending
  • Comments
  • Latest
web sitenizde kritik bir hata oluştu

Web Sitenizde Kritik Bir Hata Oluştu Hatası Çözümü

Kasım 22, 2021
En İyi Hosting Firmaları 2020

En iyi Hosting Firmaları Araştırması – 7 Farklı Firma – İndirim Kodları – Yorumlar

Kasım 23, 2022
WordPress Geçersiz AdSense Tıklamaları Çözümü

WordPress Geçersiz AdSense Tıklamaları Çözümü

Mart 2, 2021
WordPress Web Sitesinde Mobil Menüyü Gizleme

WordPress Web Sitesinde Mobil Menüyü Gizleme

Mart 11, 2021
En İyi Hosting Firmaları 2020

En iyi Hosting Firmaları Araştırması – 7 Farklı Firma – İndirim Kodları – Yorumlar

3
wploji-wordpress-whatsapp-butonu-ekleme-nasil-yapilir

WordPress WhatsApp Butonu Ekleme Nasıl Yapılır?

2
NewsPaper tema incelemesi

WordPress NewsPaper tema incelemesi

2
WordPress Sesli Metin Nasıl Eklenir ?

WordPress Sesli Metin Nasıl Eklenir ?

1
wploji-php-nedir-php-ile-neler-yapilabilir

PHP Nedir? Kullanım Alanları Neler?

Şubat 8, 2023
wploji-web-hosting-nedir-ne-ise-yarar-hosting-avantajlari

Hosting Nedir? Hosting Firması Tavsiyesi

Şubat 8, 2023
wploji-alt-alan-adi-nedir-subdomain-avantajlari-alt-alan-adi-olusturma

Alt Alan Adı Nedir? Subdomain Örnekleri

Şubat 8, 2023
wploji-javascript-nedir-ne-ise-yarar-js-programlama

JavaScript Nedir? Kullanım Alanları ve Avantajları

Şubat 8, 2023

Son Yazılar

wploji-php-nedir-php-ile-neler-yapilabilir

PHP Nedir? Kullanım Alanları Neler?

Şubat 8, 2023
wploji-web-hosting-nedir-ne-ise-yarar-hosting-avantajlari

Hosting Nedir? Hosting Firması Tavsiyesi

Şubat 8, 2023
wploji-alt-alan-adi-nedir-subdomain-avantajlari-alt-alan-adi-olusturma

Alt Alan Adı Nedir? Subdomain Örnekleri

Şubat 8, 2023
wploji-javascript-nedir-ne-ise-yarar-js-programlama

JavaScript Nedir? Kullanım Alanları ve Avantajları

Şubat 8, 2023
Wploji

Wploji sizlere Wordpress rehberi olarak Wordpress Tema ve Eklentilerini sunarak Wordpress alanında uzmanlaşmanızı sağlar.

Bizi Takip Edin

Kategoriler

  • Eklentiler
  • Genel
  • Hosting
  • SEO
  • Temalar
  • Wordpress

Son Yazılar

wploji-php-nedir-php-ile-neler-yapilabilir

PHP Nedir? Kullanım Alanları Neler?

Şubat 8, 2023
wploji-web-hosting-nedir-ne-ise-yarar-hosting-avantajlari

Hosting Nedir? Hosting Firması Tavsiyesi

Şubat 8, 2023
  • Hakkımızda
  • Reklam
  • Gizlilik
  • İletişim

© 2021 WPLoji - Tüm hakları saklıdır. İçerikler kopyalanamaz.
WPLoji Hosting gücünü Hostixo'nun Limitsiz Hosting sunucularından almaktadır. Bulut Sunucu Sanal Sunucu En iyi hosting firması Konu Anlatımı

No Result
View All Result
  • WordPress
  • Hosting
  • Eklentiler
  • Genel
  • SEO

© 2021 WPLoji - Tüm hakları saklıdır. İçerikler kopyalanamaz.
WPLoji Hosting gücünü Hostixo'nun Limitsiz Hosting sunucularından almaktadır. Bulut Sunucu Sanal Sunucu En iyi hosting firması Konu Anlatımı

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In