Mobil Kullanıma Hazır Duyarlı WordPress Menüsü Oluşturma

Mobil uyumlu bir WordPress menüsü oluşturmak istiyor musunuz? Mobil kullanıcılar, birçok web sitesi için masaüstü kullanıcılarını zaten aştı. Mobil bir duyarlı menü eklemek, kullanıcıların web sitenizde gezinmesini kolaylaştırır. Bu makalede, mobil cihazlara hazır duyarlı bir WordPress menüsünün nasıl kolayca oluşturulacağını göstereceğiz.


Mobil uyumlu WordPress menüsü oluşturma

Bu derinlemesine bir öğreticidir. Hem yeni başlayanlar için eklenti yöntemini (kodlama yok) hem de daha gelişmiş kullanıcılarımız için kodlama yöntemini göstereceğiz.

Bu öğreticinin sonunda, içeri kaydırılabilir mobil menü, açılır mobil menü ve geçişli mobil menü oluşturmayı öğreneceksiniz..

Hazır? Başlayalım.

Video öğretici

WPBeginner’a abone olun

Videoyu beğenmediyseniz veya daha fazla talimat gerekiyorsa, okumaya devam edin.

Yöntem 1: bir eklenti kullanarak WordPress duyarlı bir menü ekleme

Bu yöntem, özel kodlama gerektirmediği için yeni başlayanlar için daha kolay ve önerilir.

Bu yöntemde, mobil ekranda kayan bir hamburger menüsü oluşturacağız.

Duyarlı menü eklentisi demosu

Yapmanız gereken ilk şey Duyarlı Menü eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirildiğinde, eklenti WordPress yönetici çubuğunuza ‘Duyarlı Menü’ etiketli yeni bir menü öğesi ekler. Üzerine tıkladığınızda eklentinin ayarlar sayfasına yönlendirilirsiniz.

Duyarlı menü ayarları

Öncelikle, eklentinin duyarlı menüyü göstermeye başladığı ekranın genişliğini girmeniz gerekir. Varsayılan değer, çoğu web sitesinde çalışması gereken 800 pikseldir.

Bundan sonra, duyarlı menünüz için kullanmak istediğiniz menüyü seçmeniz gerekir. Henüz bir menü oluşturmadıysanız, adresini ziyaret ederek bir menü oluşturabilirsiniz. Görünüm »Menüler. Ayrıntılı talimatlar için WordPress’te gezinme menüsünün nasıl ekleneceği ile ilgili kılavuzumuza bakın.

Ekrandaki son seçenek, geçerli yanıt vermeyen menünüz için bir CSS sınıfı sağlamaktır. Bu, eklentinin yanıt vermeyen menünüzü daha küçük ekranlarda gizlemesine olanak tanır.

Ayarlarınızı kaydetmek için ‘Güncelleme Seçenekleri’ düğmesini tıklamayı unutmayın.

Artık duyarlı menüyü çalışırken görmek için web sitenizi ziyaret edebilir ve tarayıcı ekranınızı yeniden boyutlandırabilirsiniz.

Duyarlı menü eklentisi demosu

Duyarlı menü eklentisi, duyarlı menünüzün davranışını ve görünümünü değiştirmenizi sağlayan diğer birçok seçenekle birlikte gelir. Bu seçenekleri eklentinin ayarlar sayfasında keşfedebilir ve gerektiğinde ayarlayabilirsiniz.

Yöntem 2: Eklenti Kullanarak Açılır Menü Seçme Menüsü Ekleme

Duyarlı bir menü eklemenin başka bir yolu, açılır menü seçmek. Bu yöntem herhangi bir kodlama becerisi gerektirmez, bu nedenle yeni başlayanlar için önerilir.

Duyarlı seçim menüsü

Yapmanız gereken ilk şey, Duyarlı Seçim Menüsü eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra ziyaret etmeniz gerekir Görünüm »Duyarlı Seçim eklenti ayarlarını yapılandırmak için.

Menü ayarlarını seçin

Theme Tema konumlarını etkinleştir ’bölümüne ilerlemeniz gerekir. Varsayılan olarak, eklenti tüm tema konumlarında etkinleştirilir. Belirli tema konumları için seçerek açarak bunu değiştirebilirsiniz..

Değişikliklerinizi kaydetmek için tüm ayarları kaydet düğmesini tıklamayı unutmayın.

Artık duyarlı seçim menüsünü çalışırken görmek için web sitenizi ziyaret edebilir ve tarayıcı ekranını yeniden boyutlandırabilirsiniz.

Yöntem 3: Geçiş Efekti ile Mobil Uyumlu Duyarlı Menü Oluşturma

Mobil ekranlarda bir menüyü görüntülemek için en yaygın kullanılan yöntemlerden biri, geçiş efektini kullanmaktır.

Bu yöntem, WordPress dosyalarınıza özel kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, WordPress’te web’den snippet yapıştırma hakkındaki kılavuzumuza göz atın.

Öncelikle not defteri gibi bir metin düzenleyici açmanız ve bu kodu yapıştırmanız gerekir.

(function () {
var nav = document.getElementById (‘site gezintisi’), düğme, menü;
if (! nav) {
dönüş;
}

button = nav.getElementsByTagName (‘düğme’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
if (! düğmesi) {
dönüş;
}

// Menü eksik veya boşsa gizle düğmesi.
if (! menü ||! menu.childNodes.length) {
button.style.display = ‘hiçbiri’;
dönüş;
}

button.onclick = function () {
if (-1 === menu.className.indexOf (‘gezinme menüsü’))) {
menu.className = ‘gezinme menüsü’;
}

if (-1! == button.className.indexOf (‘değiştirildi’)) {
button.className = button.className.replace (‘değiştirildi’, ”);
menu.className = menu.className.replace (‘değiştirildi’, ”);
} Başka {
button.className + = ‘değiştirildi’;
menu.className + = ‘değiştirildi’;
}
};
}) (jQuery);

Şimdi bu dosyayı masaüstünüzde navigation.js olarak kaydetmeniz gerekiyor.

Ardından, bu dosyayı WordPress sitenizdeki / wp-content / themes / your-theme-dir / js / klasörüne yüklemek için bir FTP istemcisi açmanız gerekir.

Tema dizininizi geçerli temanızın dizini ile değiştirin. Tema dizininizde js klasörü yoksa, oluşturmanız gerekir.

JavaScript dosyasını yükledikten sonra, bir sonraki adım WordPress sitenizin bu JavaScript’i yüklediğinden emin olmaktır. Temanızın function.php dosyasına aşağıdaki kodu eklemeniz gerekir.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, dizi (‘jquery’), ‘20160909’, doğru);

Şimdi gezinme menüsünü WordPress temamıza eklememiz gerekiyor. Genellikle navigasyon menüsü bir temanın header.php dosyasına eklenir.

Menü
<?php wp_nav_menu (dizi (‘theme_location’ => ‘birincil’, ‘menu_class’ => ‘nav-menu’)); ?>

Temanız tarafından tanımlanan tema konumunun birincil olarak adlandırıldığını varsayıyoruz. Değilse, WordPress temanız tarafından tanımlanan tema konumunu kullanın.

Son adım, menümüzün mobil cihazlarda görüntülendiğinde geçiş yapmak için doğru CSS sınıflarını kullanması için CSS eklemektir..

/ * Gezinme Menüsü * /
.ana yönlendirici {
kenar boşluğu: 24 piksel;
kenar boşluğu: 1.714285714rem;
metin hizalama: merkez;
}
.main-navigation li {
kenar boşluğu: 24 piksel;
kenar boşluğu: 1.714285714rem;
yazı tipi boyutu: 12 piksel;
yazı tipi boyutu: 0.857142857rem;
satır yüksekliği: 1.42857143;
}
.ana navigasyon a {
renk: # 5e5e5e;
}
.ana navigasyon a: üzerine gelin,
.main-navigation a: odak {
renk: # 21759b;
}
.ana navigasyon ul.nav-menüsü,
.ana navigasyon div.nav-menüsü > ul {
görüntü yok;
}

.main-navigation ul.nav-menu.toggled-on,
.menü geçişi {
ekran: satır içi blok;
}

// Mobil cihazlarda kullanılacak CSS

@media ekranı ve (dk. genişlik: 600 piksel) {

.ana navigasyon ul.nav-menüsü,
.ana navigasyon div.nav-menüsü > ul {
sınır-alt: 1px katı #ededed;
sınır üstü: 1 piksel katı #ededed;
display: inline-block! important;
metin hizalama: sola;
genişlik:% 100;
}
.ana navigasyon ul {
kenar boşluğu: 0;
metin girintisi: 0;
}
.ana navigasyon,
.main-navigation li {
ekran: satır içi blok;
metin dekorasyonu: yok;
}
.main-navigation li a {
kenar-alt: 0;
renk: # 6a6a6a;
satır yüksekliği: 3.692307692;
metin dönüşümü: büyük harf;
beyaz boşluk: nowrap;
}
.ana gezinti simgeleri,
.main-navigation li a: odak {
renk: # 000;
}
.main-navigation li {
kenar boşluğu: 0 40 piksel x 0;
kenar boşluğu: 0 2.857142857rem 0 0;
pozisyon: göreceli;
}
.main-navigation li ul {
kenar boşluğu: 0;
dolgu: 0;
pozisyon: mutlak;
en iyi 100%;
z-endeksi: 1;
yükseklik: 1 piksel;
genişlik: 1 piksel;
taşma: gizli;
klip: rekt (1 piksel, 1 piksel, 1 piksel, 1 piksel);
}
.main-navigation li ul ul {
üst: 0;
sol:% 100;
}
.ana navigasyon ul li: üzerine gelin > ul,
.main-navigation ul li: odak > ul,
.ana navigasyon. odak > ul {
sol kenarlık: 0;
klip: miras;
taşma: devralma;
yükseklik: miras;
genişlik: miras;
}
.main-navigation li ul li a {
arka plan: #efefef;
sınır-alt: 1px katı #ededed;
Ekran bloğu;
yazı tipi boyutu: 11 piksel;
yazı tipi boyutu: 0.785714286rem;
satır yüksekliği: 2.181818182;
dolgu: 8 piksel 10 piksel;
dolgu: 0.571428571rem 0.714285714rem;
genişlik: 180 piksel;
genişlik: 12.85714286rem;
beyaz boşluk: normal;
}
.gezinme ana gezinti,
.main-navigation li ul li a: odak {
arka plan: # e3e3e3;
renk: # 444;
}
.main-navigation .current-menu-item > bir,
.main-navigation .current-menu-acestor > bir,
.ana gezinme .current_page_item > bir,
.ana gezinme .current_page_ancestor > a {
renk: # 636363;
yazı tipi ağırlığı: kalın;
}
.menü geçişi {
görüntü yok;
}

}

Artık duyarlı geçiş menünüzü çalışırken görmek için web sitenizi ziyaret edebilir ve tarayıcı ekranınızı yeniden boyutlandırabilirsiniz.

Menü önizlemesini aç / kapat

Sorun giderme: WordPress temanıza bağlı olarak CSS’yi ayarlamanız gerekebilir. Temanızla CSS çakışmalarını bulmak için inceleme öğesi aracını kullanın.

Yöntem 4: WordPress’te İçeri Slayt Mobil Menüsü Ekleme

Mobil menü eklemek için yaygın olarak kullanılan bir diğer teknik, kaydırmalı panel menüsü kullanmaktır (Yöntem 1’de gösterildiği gibi).

Yöntem 4, WordPress tema dosyalarınıza kod eklemenizi gerektirir ve Yöntem 1 ile aynı sonuçları elde etmenin farklı bir yoludur..

İlk olarak, Not Defteri gibi düz bir metin düzenleyici açmanız ve boş bir metin dosyasına aşağıdaki kodu eklemeniz gerekir.

(işlev ($) {
$ ( ‘# Geçiş’). Toggle (
function () {
$ (‘# popout’). animate ({left: 0}, ‘yavaş’, işlev () {
$ ( ‘# Geçiş’). Html (‘kapat‘);
});
},
function () {
$ (‘# popout’). animasyon ({sol: -250}, ‘yavaş’, işlev () {
$ ( ‘# Geçiş’). Html (‘kapat‘);
});
}
);
}) (JQuery);

Example.com’u kendi alan adınızla ve temanızı gerçek tema dizininizle değiştirmeyi unutmayın. Bu dosyayı masaüstünüze slidepanel.js olarak kaydedin.

Şimdi menü simgesi olarak kullanılacak bir resme ihtiyacınız olacak. Bir hamburger simgesi en çok menü simgesi olarak kullanılır. Farklı web sitelerinden bu tür tonlarca resim bulacaksınız. Google Material Icons kütüphanesindeki menü simgesini kullanacağız.

Kullanmak istediğiniz bir görüntü bulduğunuzda, menu.png olarak kaydedin.

Ardından, bir FTP istemci istemcisi açmanız ve slidepanel.js dosyasını / wp-content / your-theme / js / klasörüne yüklemeniz gerekir.

Tema dizininizde JS klasörü yoksa, baştankara oluşturmanız ve ardından dosyanızı yüklemeniz gerekir.

Bundan sonra, menu.png dosyasını / wp-content / themes / temanız / images / klasörüne yüklemeniz gerekir.

Dosyalar yüklendikten sonra, temanızın az önce eklediğiniz JavaScript dosyasını yüklediğinden emin olmamız gerekir. Bunu JavaScript dosyasını sıralayarak başaracağız.

Bu kodu temanızın function.php dosyasına ekleyin.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, dizi (‘jquery’), ‘20160909’, doğru);

Şimdi gezinme menüsünü görüntülemek için temanın header.php dosyasına gerçek kodu eklememiz gerekiyor. Buna benzer bir kod aramalısınız:

<?php wp_nav_menu (dizi (‘theme_location’ => ‘birincil’, ‘menu_class’ => ‘nav-menu’)); ?>

Slayt paneli menünüzü daha küçük ekranlarda görüntülemek için mevcut gezinme menüsünü HTML koduyla sarmak istiyorsunuz.

Göstermek

<?php wp_nav_menu (dizi (‘theme_location’ => ‘birincil’, ‘menu_class’ => ‘nav-menu’)); ?>

Temanızın gezinme menüsünün hala orada olduğuna dikkat edin. Slidepanel menüsünü tetiklememiz gereken HTML’nin etrafına sardık.

Son adım, daha büyük ekranlarda menü görüntüsü simgesini gizlemek için CSS eklemektir. Ayrıca menü simgesinin konumunu da ayarlamanız gerekir..

Başlangıç ​​noktası olarak kullanabileceğiniz örnek bir CSS:

@media ekranı ve (dk. genişlik: 769 piksel) {
#toggle {
görüntü yok;
}

}

@media ekranı ve (maks. genişlik: 768 piksel) {
#popout {
pozisyon: sabit;
yükseklik: 100%;
genişlik: 250 piksel;
arka plan: rgb (25, 25, 25);
arka plan: rgba (25, 25, 25, .9);
Beyaz renk;
üst: 0px;
sol: -250 piksel;
taşma: otomatik;
}

#toggle {
Sağa çık;
pozisyon: sabit;
üst: 60 piksel;
sağ: 45 piksel;
genişlik: 28 piksel;
yükseklik: 24px;

}

.nav-menu li {
kenar-alt: 1 piksel katı # ee;
dolgu: 20 piksel;
en: 100%;
}

.nav-menu li: hover {
Arka plan: #CCC;
}

.nav-menu li a {
Renk: #fff;
text-decoration: none;
en: 100%;
}
}

WordPress temanıza bağlı olarak, çakışmaları önlemek için CSS’yi ayarlamanız gerekebilir.

Demo web sitemizde şöyle görünüyordu:

WordPress'te duyarlı slayt menüsü

Bu makalenin, mobil uyumlu bir WordPress menüsü oluşturmayı öğrenmenize yardımcı olmasını umuyoruz. WordPress’te tam ekran duyarlı bir menünün nasıl ekleneceği ile ilgili kılavuzumuzu da görmek isteyebilirsiniz.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map