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 600.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?

Mobil kullanıcılar, günümüzde masaüstü kullanıcılarının sayısından fazla. Mobil için duyarlı bir menünün eklenmesi, 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.

Bu, size hem yeni başlayanlar için bir eklenti hem de ileri düzey kullanıcılar için kodlama yöntemini göstererek derinlemesine ilerleyecektir.

İ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 kayar.

gösteri menü barındıran

Yapmanız gereken ilk şey, yüklemek ve etkinleştirmek WordPress Duyarlı Menü eklentisi . Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına dair kılavuzumuzu inceleyin .

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

duyarlı menü, wordpress

Önce mobil menünün görüneceği boyutu girmelisiniz. Varsayılan değer, çoğu web sitesi için çalışması gereken 800 px'tir.

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 izin verir. Bu, eklentinin yanıt vermeyen menünüzü daha küçük ekranlara gizlemesini sağlar.

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

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]

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

Şimdi yanıt veren menüyü çalışırken görmek için 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 izin veren birçok seçenek sunar. Eklenti ayarları sayfasında bu seçenekleri keşfedebilir ve gerektiğinde ayarlayabilirsiniz.

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

Mobil ekranlarda bir menü görüntülemek için en yaygın kullanılan 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.

Önce Not Defteri gibi bir metin düzenleyici açmalı ve bu kodu yapıştırmalısınız.

(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 Geçerli WordPress temanızın klasörünün adı ile. Tema dizininizde bir js klasörü yoksa, bir tane oluşturmanız gerekir.

JavaScript dosyasını indirdikten sonra, bir sonraki adım WordPress web sitenizin JavaScript dosyalarını yüklediğinden emin olmaktır. Aşağıdaki kodu dosyaya eklemeniz gerekecek functions.php WordPress temanızın.

Başka bir şey keşfet 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.

<nav id = "site gezinme" sınıfı = "ana gezinme" rolü = "gezinme"> <düğme sınıfı = "menü değiştirme"> Menü </ düğmesi> <? php wp_nav_menu (dizi ('theme_location' => ' birincil ',' menu_class '=>' nav-menu ')); ?> </ nav>

WordPress temanız tarafından tanımlanan menü konumunun "" olarak adlandırıldığını varsayıyoruz. birincil ". Değilse, WordPress temanız tarafından tanımlanan konumu kullanın.

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

/ * Gezinme Menüsü * / .main-navigation {kenar boşluğu: 24px; kenar boşluğu: 1.714285714rem; metin hizalama: orta; } .main-navigation li {marjın üstü: 24px; kenar boşluğu: 1.714285714rem; yazı tipi boyutu: 12px; yazı tipi boyutu: 0.857142857rem; çizgi yüksekliği: 1.42857143; } .main-navigation a {color: #5e5e5e; } .main-navigation a: gezinip, .main-navigation a: focus {color: #21759b; } .main-navigasyon ul.nav menüsü, .main-navigasyon div.nav-menüsü> ul {ekran: yok; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {görüntüleme: satır içi blok; } // @ medya ekranında ve (min genişlik: 600px) mobil cihazlarda kullanılacak CSS {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {kenar-alt: 1px katı # ededed; kenarlık üstü: 1px katı #ededed; ekran: satır içi blok önemli; metin hizalama: sola; genişlik:% 100; } .main-navigation ul {marjı: 0; text-indent: 0; } .main-navigasyon li a, .main-navigasyon li {görüntüleme: satır içi blok; metin dekorasyon: yok; } .main-navigation li bir {border-base: 0; renk: #6a6a6a; çizgi yüksekliği: 3.692307692; metin dönüşümü: büyük harf; beyaz boşluk: nowrap; } .main-navigasyon ve a: hover, .main-navigasyon ve a: focus {color: #000; } .main-navigation li {marjı: 0 40px 0 0; marj: 0 2.857142857rem 0 0; pozisyon: göreceli; } .main-navigation li ul {margin: 0; dolgu maddesi: 0; pozisyon: mutlak; üst:% 100; z-endeksi: 1; yükseklik: 1px; genişlik: 1px; taşma: gizli; klip: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; solda:% 100; } .main-navigasyon ul: gezinme> ul, .main-gezinme ul li: focus> ul, .main-gezinti .focus> ul {kenar-sol: 0; klip: miras; taşma: miras; yükseklik: miras; genişlik: miras; } .main-navigation li ul li {arkaplan: #efefef; kenar-alt: 1px katı #ededed; ekran: blok; yazı tipi boyutu: 11px; yazı tipi boyutu: 0.785714286rem; çizgi yüksekliği: 2.181818182; dolgu maddesi: 8px 10px; dolgu maddesi: 0.571428571rem 0.714285714rem; genişlik: 180px; genişlik: 12.85714286rem; boşluk: normal; } .main- navigasyon li li li: vurgulu, .main-navigasyon li li li: focus {background: #e3e3e3; renk: #444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ataları> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {renk: #636363; yazı tipi ağırlığı: kalın; } .menu-toggle {ekran: yok; }}

Artık, web sitenizi ziyaret edebilir ve duyarlı menünüzün ters yüzüp dönmediğini görmek için tarayıcı ekranınızı yeniden boyutlandırabilirsiniz.

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]

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 kullanıcılar için erişilebilir bir megamenu oluşturulmasına adanmış bir WordPress eklentisidir. Herhangi bir özel konfigürasyon olmadan kurulumdan sonra işlevseldir.

Kullanımı kolay bir eklentidir, ancak özelleştirilebilir ve yaratıcı mega menü konfigürasyonları yaratacak kadar güçlüdür.

Diğerlerinin yanı sıra: 3 menü şablonları, tam uyumlu düzen, mobil cihazlarla uyumluluk (iPhone, iPad, Android), dokunma desteği, vb ...

Indir | gösteri | Web hosting

2. LMM

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

Normal veya ileri düzey kullanıcılar için düzinelerce özellik ile birlikte gelir. Özellikleri olarak, diğerlerinin yanı sıra sunar: otomatik ve manuel entegrasyon, çoklu alan desteği, çocuk temaları için destek, 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 vurgulayan ve basit bir şekilde gösteren 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ü fonksiyonunu kullanır.

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

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. [Ücretsiz]

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. Tereddüt etmeyin ipucunu sosyal ağlarda arkadaşlarınla ​​paylaş.

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.

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

...

Bu makale yorumları 2 içeriyor
  1. merhaba

    Bilgileriniz için teşekkürler

    "Menünüz için bir CSS sınıfı" bulamıyorum. Css stil sayfasını buldum ama ne kopyalayıp yapıştıracağımı bilmiyorum

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

    iyi hafta sonu

    michel

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. 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üş
5 hisseleri
hisse4
cıvıltı
Enregistrer1