WordPress’te duyarlı bir navigasyon menüsü oluşturmanın yolu açık uçludur. WordPress tarafından sunulan esneklik sayesinde bunu yapmanın sayısız yolu vardır.
Bugün, size yalın ve ortalama bir yanıt veren navigasyon menüsü oluşturmayı göstereceğim. Yalın çünkü tüm bunları 8 kilobayt altında başaracağız ve inanılmaz derecede verimli bir navigasyon menüsü olacağı için. Mevcut navigasyon menünüzü yansıtacağız, böylece iki farklı tane tutmak zorunda kalmayacaksınız. Bir taşla iki kuş vurarak, hepsini yönetmek için bir menü oluşturacağız.
Başlamadan önce, bazı temel ön uç geliştirme bilginize sahip olduğunuzu öneririz. (Sadece aşinalığa ihtiyacımız var, yeterliliğe değil, lütfen panik yapmayın.) Temel HTML, CSS, jQuery ve WordPress bilgisi ideal olacaktır. Bu, WordPress tema dosyalarının değiştirilmesini içerdiğinden, yeni başlayanlardan ara öğreticiye.
Ayrıca aşağıdaki WordPress tema dosyalarına erişmeniz gerekecek:
functions.phpheader.phpfooter.phpStyle.css
Herhangi bir değişiklik yapmadan önce, lütfen sitenizin yedeğini çalıştırdığınızdan veya değişiklikleri önce yerel bir ortamda sınadığınızdan emin olun. Her zaman özgün dosyalarınıza geri dönmenin bir yolunu bulmak istersiniz.
Ücretsiz yerel geliştirme uygulamamız Local, iş akışınızı basitleştirmenize ve sitenizle güvenli bir şekilde denemeler etmenize yardımcı olacaktır. Bugün deneyin!
Ekran dışı slayt panelleri oluşturmak için küçük bir jQuery eklentisi olan bigSlide.js kullanacağız. Eklentinin web sitesinde, “ekran dışı slayt paneli navigasyonu oluşturmak için minicik (~ 1kb sıkıştırılmış) jQuery eklentisi” olarak tanımlanır. Bu, yalın ve ortalama duyarlı navigasyon hedefimize uygun.
İşimize dönelim.
1. BigSlide.js en son sıkıştırılmış sürümünü indirin. Dosyanın üzerine temanızın /js klasör.
2. Açık functions.php kod düzenleyicinizde. Aramak wp_enqueue_script. Büyük olasılıkla birden çok örnek görürsünüz, örneğin wp_enqueue_script WordPress’e komut dosyası eklemenin standart yoludur.
3. Son örneğinden hemen sonra wp_enqueue_script, aşağıdaki snippet’i ekleyin ve kaydedin.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );
4. Açık header.phpve sınıfı ekleyin push vücut etiketinden hemen sonra ilk div’e. Bu bölüm genellikle şöyle görünür:
<body <?php body_class(); ?>><div id="page" class="hfeed site">.
Bu yüzden ekledikten sonra şunları yapmalısınız:
<div id="page" class="hfeed site push">.
5. Hala içerideyken header.php aramak site-navigation. Bu, temanıza bağlı olarak bir sınıf veya kimlik olacaktır. Çoğu WordPress temalarında, şöyle görünmelidir:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
6. Hemen önce aşağıdaki snippet’i ekleyin
. Sonunda şunu yapmalısın:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
<a href="https://getflywheel.com/#responsive-menu" class="menu-link">☰</a>
</nav>
Burada mobil menüyü tetiklemek için kullanılacak bir hamburger simgesi oluşturuyoruz.
7. Açık footer.php ve arama . Bu satırdan hemen sonra, aşağıdaki snippet’i ekleyin:
<div id="responsive-menu" class="panel mobile-menu"><?php wp_nav_menu( array('theme_location' => 'primary',) );?></div>
<script> jQuery('.menu-link').bigSlide({
menu: '.mobile-menu',
speed: 300,
side:"right",
easyClose:true});</script>
Temel olarak, altbilgide gizli bir yinelenen gezinme menüsü oluşturuyoruz.
8. Son olarak, açın style.css ve son satırdan hemen sonra, aşağıdaki kod snippet’ini ekleyin:
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}
.push{position:relative;}
.menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;}
.mobile-menu a{display:block;color:#fff;padding:10px 15px;}
.mobile-menu a:hover{background-color:#555;}
.mobile-menu li{border-bottom:1px #444 solid;}
@media only screen and (max-width:900px) {
#primary-menu{display:none;}
.mobile-menu #primary-menu{display:block;}
.menu-link{display:inline-block;}
}
Burada koyu renk şeması kullandım, ancak renkleri ihtiyaçlarınıza göre değiştirmeden çekinmeyin.
Bu yaklaşım hemen hemen tüm standart WordPress temalarında çalışacaktır. Ancak, farklı kullanım örnekleri ve başlık düzenleri nedeniyle, birkaç ayarlama yapmanız gerekebilir.
Sonuçta, temeller aynı kalır. Rasyonel olan, 900 piksel veya daha düşük bir ekran boyutunda, varsayılan ana gezintiyi gizleyeceğiniz ve bunun yerine hamburger simgesini göstereceğinizdir.
Hamburger simgesine tıkladığınızda veya dokunulduğunda, altbilgide çoğalttığimiz menü yan panel gibi bir uygulama olarak açılır.
Sıkışırsanız, lütfen aşağıda bir yorum bırakın. Yardım etmekten mutluluk duyarım. Mutlu kodlamalar!