WordPress'te duyarlı bir gezinme menüsü nasıl oluşturulur
Yayınlanan: 2021-07-22WordPress'te duyarlı bir gezinme menüsü oluşturmanın yolu açık uçludur. WordPress'in sunduğu esneklik sayesinde bunu yapmanın sayısız yolu vardır.
Bugün size yalın ve ortalama duyarlı bir gezinme menüsünün nasıl oluşturulacağını göstereceğim. Yalın çünkü tüm bunları 8 kilobaytın altında başaracağız ve bu inanılmaz derecede verimli bir gezinme menüsü olacağı anlamına geliyor. İki farklı menüye sahip olmanıza gerek kalmaması için sadece mevcut navigasyon menünüzü yansıtacağız. Bir taşla iki kuş vurarak hepsine hükmedecek bir menü oluşturacağız.
Başlamadan önce, bazı temel ön uç geliştirme bilgisine sahip olmanızı öneririz. (Biz sadece aşinalık istiyoruz, yeterlilik değil, bu yüzden 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, başlangıç seviyesinden orta seviyeye kadar eğitimdir.
Ayrıca aşağıdaki WordPress tema dosyalarına da erişmeniz gerekecek:
-
functions.php -
header.php -
footer.php -
Style.css
Herhangi bir değişiklik yapmadan önce, lütfen sitenizin bir yedeğini aldığınızdan veya değişiklikleri önce yerel bir ortamda test ettiğinizden emin olun. Her zaman orijinal dosyalarınıza geri dönmenin bir yolunu bulmak istersiniz.
Ekran dışı slayt panelleri oluşturmak için küçük bir jQuery eklentisi olan bigSlide.js'yi kullanacağız. Eklentinin web sitesinde, "ekran dışı slayt paneli navigasyonu oluşturmak için ufacık küçük (~1kb sıkıştırılmış) bir jQuery eklentisi" olarak tanımlanmaktadır. Bu, yalın ve ortalama duyarlı navigasyon hedefimiz ile uyumludur.
Hadi işe koyulalım.
1. bigSlide.js'nin en son sıkıştırılmış sürümünü indirin. Dosyayı temanızın /js klasörüne kopyalayın.
2. functions.php dosyasını tercih ettiğiniz kod düzenleyicide açın. wp_enqueue_script . wp_enqueue_script , WordPress'e komut dosyası eklemenin standart yolu olduğundan, muhtemelen birden çok örnek göreceksiniz.
3. wp_enqueue_script son örneğinden hemen sonra aşağıdaki parçacığı ekleyin ve kaydedin.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. header.php açın ve push sınıfını body etiketinden hemen sonra ilk div'e ekleyin. Bu bölüm genellikle şöyle görünür:
<body <?php body_class(); ?>><div class="hfeed site">.Bu yüzden ekledikten sonra şunları yapmalısınız:
<div class="hfeed site push">. 5. header.php içindeyken site-navigation için arama yapın. Bu, temanıza bağlı olarak bir sınıf veya kimlik olacaktır. Çoğu WordPress temasında şöyle görünmelidir:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Aşağıdaki parçacığı </nav> dan hemen önce ekleyin. Bununla bitirmelisiniz:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;Burada mobil menüyü tetiklemek için kullanılacak bir hamburger simgesi oluşturuyoruz.
7. footer.php dosyasını açın ve <?php wp_footer(); ?> <?php wp_footer(); ?> . Bu satırın hemen ardından aşağıdaki pasajı ekleyin:
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;Temel olarak, altbilgide gizli bir yinelenen gezinme menüsü oluşturuyoruz.
8. Son olarak, style.css açın ve son satırdan hemen sonra aşağıdaki kod parçasını 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 bir renk şeması kullandım, ancak renkleri ihtiyaçlarınıza göre değiştirmekten çekinmeyin.
Bu yaklaşım neredeyse tüm standart WordPress temalarında çalışacaktır. Ancak, farklı kullanım durumları ve başlık düzenleri nedeniyle birkaç ayarlama yapmanız gerekebilir.
Sonuçta, temeller aynı kalır. Bunun mantığı, 900 piksel veya daha düşük bir ekran boyutunda, varsayılan ana gezinmeyi gizleyip bunun yerine hamburger simgesini göstermenizdir.
Hamburger simgesine tıkladığınızda veya dokunduğunuzda, altbilgide çoğalttığımız menü, yan panel gibi bir uygulama olarak açılır.
Eğer takılırsanız, lütfen aşağıya bir yorum bırakın. Yardım etmekten çok mutlu olacağım. Mutlu kodlama!