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

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

WordPress blogunuzda duyarlı bir 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 WordPress'e kaç eklenti yüklenecek. 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ı bir menü oluşturun


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

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

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

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.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

WordPress temanız tarafından tanımlanan menü konumunun " birincil ". Aksi takdirde, WordPress temanız tarafından tanımlanan konumu 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 biraz CSS eklemektir.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    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;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #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;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

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.

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ç

Yani ! 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.

...

6 hisseleri
hisse4
cıvıltı
Enregistrer2