Ana İçeriğe Geç

Mobil WordPress için tepkili bir menü oluşturmak için nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 701.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

WordPress blogunuzda duyarlı bir mobil menü oluşturmak ister misiniz?

Günümüzde mobil kullanıcıların sayısı masaüstü kullanıcılarından fazladır. Duyarlı bir mobil menü eklemek, kullanıcıların web sitenizde gezinmesini kolaylaştırır.

Bu eğitici yazıda, WordPress'te nasıl kolayca duyarlı bir menü oluşturulacağını göstereceğiz.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

Duyarlı mobil wordpress menüsü nasıl oluşturulur

Burada size hem yeni başlayanlar için bir eklenti içeren yöntemi hem de ileri düzey kullanıcılar için kodlama yöntemini göstererek derinlemesine bir inceleme konusu olacak.

İlk yöntem: WordPress eklentisi ile mobil menü oluşturma

Bu yöntem yeni başlayanlar için daha kolaydır ve tavsiye edilir, çünkü herhangi bir özel kodlama becerisi gerektirmez.

Bu yöntemde bir menü oluşturacağız (bir hamburger simgesiyle) mobil ekranda kayan.

Duyarlı WordPress Menü eklentisi

Yapmanız gereken ilk şey, WordPress Responsive Menu eklentisi . Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza göz atın .

Eklentiyi etkinleştirdikten sonra, eklenti "" başlıklı yeni bir öğe ekleyecek " duyarlı Menüsü ". Üzerine tıklamak sizi WordPress eklenti ayarları sayfasına götürür.

WordPress duyarlı pano menü eklentisi

Öncelikle mobil menünün görünmesi gereken boyutu girmelisiniz. Varsayılan, çoğu web sitesi için çalışması gereken 800 pikseldir.

Bundan sonra mobil cihazda kullanmak istediğiniz menüyü seçmek zorundasınız.

Ekrandaki son seçenek, menünüz için bir CSS sınıfı sağlamanıza olanak tanır. Bu, eklentinin duyarlı olmayan menünüzü küçük ekranlarda gizlemesine izin verecektir.

«Üzerine tıklamayı unutma Güncelleştirme Seçenekleri Ayarlarınızı kaydetmek için.

Ayrıca sizi keşfetmenizi öneriyoruz Blogunuzda menüler oluşturmak için 10 WordPress eklentileri

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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

Site içerisinde harekete menü duyarlı-to-mobil

Eklenti « duyarlı Menüsü »Duyarlı menünüzün davranışını ve görünümünü değiştirmenize olanak tanıyan birçok başka seçenek sunar. Bu seçenekleri eklentinin ayarlar sayfasında keşfedebilir ve gerektiği gibi ayarlayabilirsiniz.

2 Yöntemi: El İle Mobil Bir Menü Ekleme

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

Bu yöntem, WordPress dosyalarınıza özel kod eklemenizi gerektirir.

Önceki derslerimizden birinde, size gösteriyoruz WordPress eklentisi nasıl oluşturulur.

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

(function () {nav var = document.getElementById ('site-navigasyon'), düğme, menü; eğer (! nav) {return;} button = nav.getElementsByTagName ('düğme') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Menü eksikse veya boşsa düğmeyi gizle (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu'))) {menu.className = 'nav-menu';} eğer (- 1! == button.className.indexOf ('toggled-on'))) {button.className = button.className.replace ('değiştirildi', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' açıldı '- menu.className + =' açıldı '-}};}) (jQuery);

Şimdi bu dosyayı "adıyla kaydetmelisiniz" navigation.js Masanın üstünde.

Ardından, bu dosyayı WordPress web sitenizdeki "/ wp-content / themes / temanız / temanız / js /" konumuna indirmek için bir FTP istemcisi açmanız gerekir.

"İfadesini değiştir your-tema Mevcut WordPress tema klasörünüzün adıyla. Tema dizininizde js klasörü yoksa, bir tane oluşturmanız gerekir.

JavaScript dosyasını yükledikten sonraki adım, WordPress web sitenizin JavaScript dosyalarını yükleyeceğinden emin olmaktır. Aşağıdaki kodu " functions.php WordPress temanızın.

Başka bir şey keşfedin Functions.php dosyası ile neler yapabilirsiniz?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', dizi (' jquery '), 20160909', doğru.);

Şimdi WordPress temamıza navigasyon menüsünü eklemek zorundayız. Genellikle navigasyon menüsü dosyaya eklenir " header.php WordPress temanızın.

Menü 'birincil', 'menu_class' => 'gezinme menüsü')); ?>

WordPress temanız tarafından tanımlanan menü konumunun " birincil ". Aksi takdirde, WordPress temanız tarafından tanımlanan konumu kullanın.

Ayrıca bizim keşfetmek Abonelik formları oluşturmak için 5 WordPress eklentisi

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 biraz CSS eklemektir.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

/ * Gezinme Menüsü * / .main-navigation {margin-top: 24px; kenar boşluğu: 1.714285714rem; metin hizalama: merkez; } .main-navigation li {margin-top: 24px; kenar boşluğu: 1.714285714rem; yazı tipi boyutu: 12px; yazı tipi boyutu: 0.857142857rem; satır yüksekliği: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: odak {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // Mobil cihazlarda kullanılacak CSS @ media ekranı ve (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; ekran: satır içi blok önemli; metin hizalama: sol; genişlik:% 100; } .main-navigasyon ul {margin: 0; metin girintisi: 0; } .main-navigation li a, .main-navigation li {display: inline-block; metin dekorasyonu: yok; } .main-navigation li a {border-bottom: 0; renk: # 6a6a6a; satır yüksekliği: 3.692307692; metin dönüşümü: büyük harf; beyaz boşluk: nowrap; } .main-navigation li a: hover, .main-navigation li a: odak {renk: # 000; } .main-navigation li {margin: 0 40px 0 0; kenar boşluğu: 0 2.857142857rem 0 0; konum: göreceli; } .main-navigasyon li ul {margin: 0; dolgu: 0; konum: mutlak; en iyi 100%; z-endeksi: 1; yükseklik: 1px; genişlik: 1px; taşma: gizli; klip: rect (1px, 1px, 1px, 1px); } .main-navigasyon li ul {top: 0; sol:% 100; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; klip: devralır; taşma: devralır; yükseklik: devralır; genişlik: devralır; } .main-navigation li a {arka plan: #efefef; border-bottom: 1px solid #ededed; Ekran bloğu; yazı tipi boyutu: 11px; yazı tipi boyutu: 0.785714286rem; satır yüksekliği: 2.181818182; dolgu: 8px 10px; dolgu: 0.571428571rem 0.714285714rem; genişlik: 180px; genişlik: 12.85714286rem; beyaz boşluk: normal; }. main-navigation li a: hover,. main-navigation li a: odak {arka plan: # e3e3e3; renk: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; yazı tipi ağırlığı: kalın; } .menu-toggle {display: yok; }}

Duyarlı menünüzün değişip değişmediğini görmek için artık web sitenizi ziyaret edebilir ve tarayıcı ekranınızı yeniden boyutlandırabilirsiniz.

Sallanan menü-wordpress-öğretici

Ayrıca bazı premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. UberMenu

UberMenu, son derece özelleştirilebilir, duyarlı ve megamen kullanıcılar için erişilebilir bir WordPress eklentisidir. Özel bir konfigürasyona ihtiyaç duymadan kurulumdan sonra işlevseldir.

Ubermenu wordpress mega menü eklentisi

Kullanımı kolay bir eklentidir, ancak oldukça özelleştirilebilir ve yaratıcı mega menü düzenleri oluşturmak için yeterince güçlüdür.

Ayrıca bakınız Bir blogda fiyat ızgaraları oluşturmak için 9 WordPress eklentisi

Diğerleri arasında bulacaksınız: 3 menü şablonu, tamamen duyarlı düzen, mobil cihazlarla uyumluluk (iPhone, iPad, Android), dokunma desteği, vb.

Indir | gösteri | Web hosting

2. LMM

LMM olarak da adlandırılan Liquida Mega Menu, kullanıcılar ve geliştiriciler için tasarlanmış bir WordPress eklentisidir. Herhangi bir programlama becerisi olmadan sınırsız sayıda mega menü oluşturmanıza ve özelleştirmenize olanak tanıyan, WP panosuyla entegre basit ve sezgisel bir arayüze sahiptir.

Önyükleme tabanlı Lmm wordpress duyarlı mega menü

Düzenli veya ileri düzey kullanıcılar için düzinelerce özellikle birlikte gelir. İşlevsellik olarak, diğerlerinin yanı sıra şunları sunar: otomatik ve manuel entegrasyon, multisite için destek, çocuk temalarına dikkat etmek, menüler için tamamen özelleştirilebilir stil, özelleştirilebilir menü konumları, yapışkan menü vb.

Indir | gösteri | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu, bilgilerinizi öne çıkaran ve kolayca vurgulayan bir görünüm vermek için web sitenize bir tuval menüsü eklemenizi sağlayan premium bir WordPress eklentisidir. Menülerini oluşturmak için varsayılan WordPress menü işlevini kullanır.

8degree wordpress için menü menü eklentisi duyarlı menü sinek duyarlı

Simgeler, menü sloganları, sözde gruplama başlığı ve uzun bir açıklama gibi varsayılan menü öğelerine ek öğeler ekleyebileceksiniz.

Ayrıca Oku: Kenar çubuklarını ve yapışkan başlıkları optimize etmek için 10 WordPress eklentisi

Ayrıca uzun tanımınızı kullanıcı dostu bir şekilde kavramanıza yardımcı olacak bir WYSIWYG editörü ile birlikte gelir.Bu editör ile kısa kodları da kullanabilirsiniz.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Indir | gösteri | Web hosting

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

Sonuç

İşte bu! Bu eğitim için bu kadar, umarım mobil kullanıcılar için bir menü oluşturmanıza izin verir. çekinmeyin bahşişi sosyal ağlarınızda arkadaşlarınızla paylaşın.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Ancak bu arada, bize Yorumlar ve özel bölümdeki öneriler.

...

Bu makale yorumları 2 içeriyor

  1. merhaba

    Bilgileriniz için teşekkürler

    Görünüşe göre "menünüz için bir CSS sınıfı" bulamıyorum. css stil sayfasını buldum ama neyi kopyalayıp yapıştıracağımı bilmiyorum

    yardımınız için şimdiden teşekkür ederim

    iyi hafta sonu

    michel

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
6 hisseleri
hisse4
cıvıltı
Enregistrer2