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.

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.

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 ekranın ayarlar sayfasına götürecektir. WordPress Plugin.

Ö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.

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 » klasörünüzün adı ile WordPress tema akım. Tema dizininizde bir 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 »Sizin WordPress tema.

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 navigasyon menüsünü eklememiz gerekiyor. WordPress tema. Genellikle navigasyon menüsü “ 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>

WordPress temanız tarafından tanımlanan menü konumunun “olarak adlandırıldığını varsayıyoruz. 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.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

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

1. UberMenu

UberMenu bir WordPress Plugin son derece özelleştirilebilir, duyarlı ve kullanıcı tarafından erişilebilir bir megamenu oluşturmaya adanmıştır. Kurulumdan sonra herhangi bir özel konfigürasyona ihtiyaç duymadan işlevseldir.

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 Menü, WordPress Plugin kullanıcılar ve geliştiriciler için tasarlanmıştır. WP kontrol paneline entegre edilmiş basit ve sezgisel bir arayüze sahiptir ve herhangi bir programlama becerisine gerek kalmadan sınırsız sayıda mega menü oluşturmanıza ve özelleştirmenize olanak tanır.

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.

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.

• WordPress blog görüntüleri yeniden adlandırmak için nasıl
• WordPress üzerinde kayan bir menü nasıl oluşturulur
• Blogunuzda bir megamenu oluşturmak için 8 WordPress eklentileri
• Blogunuz için modern menüler oluşturmak için bazı ipuçları
• Blogunuzdaki kategorileri ve alt kategorileri yönetmek için 6 WordPress eklentileri

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.

...