Mobil Uyumlu Bir WordPress Menüsü Nasıl Oluşturulur

Yayınlanan: 2016-11-04

Okurlarımız için özel WordPress barındırma önerisi,Mobil-Hazır yanıt veren bir WordPress menüsü nasıl üretilir. Mobil uyumlu bir WordPress menüsü oluşturmak ister misiniz? Mobil kullanıcılar, daha önce çok sayıda web sitesi için masaüstü kullanıcılarını aşırı derecede şaşırtmıştı. Mobil uyumlu bir menü eklemek, kullanıcıların web sitenizi yönetmesini kolaylaştırır. Bu yazıda uzmanlarımız, mobil uyumlu bir WordPress menüsünü nasıl kolayca oluşturabileceğinizi açıklayacak.

Mobil uyumlu WordPress menüsü oluşturun

Bu derinlemesine bir eğitimdir. Hem yeni başlayanlar için eklenti yöntemini (kodlama yok) hem de daha ileri düzey kullanıcılarımız için kodlama yöntemini göstereceğiz.

Bu öğreticinin sonunda, kayar mobil menü, açılır mobil menü ve geçişli mobil menü oluşturmayı öğreneceksiniz.

Hazır? Başlayalım.

Teknik 1: Bir Eklenti yardımıyla WordPress'e Duyarlı Bir Menü Ekleyin

Bu teknik acemiler için daha kolay ve daha iyidir çünkü istemci kodlaması gerektirmez. Bu teknikte cep telefonunuzun ekranında kaydırılabilen bir hamburger menüsü yapacağız.

Duyarlı menü eklentisi demosu

Öncelikle Responsive Menu eklentisi ile kurulum ve aktivasyon işlemini yapmanız gerekmektedir. Daha fazla ayrıntı okumak istiyorsanız, WordPress eklentisi yüklemeyle ilgili talimatlarımıza bakın.

Etkinleştirmeden sonra eklenti, WordPress yönetici çubuğunuza 'Duyarlı Menü' etiketli yeni bir menü öğesi ekleyecektir. Üzerine tıklamak sizi eklentinin ayarlar sayfasına götürecektir.

Duyarlı menü ayarları

Öncelikle ekran genişliğini tanıtmanız gerekiyor bu anda eklenti responsive menü göstermeye başlayacak. Ayrılmış değer, çoğunluk web siteleri için çalışması gereken 800 pikseldir.

Bundan sonra, duyarlı menünüz için kullanmak istediğiniz menüyü seçmelisiniz. Hala bir menü oluşturmadıysanız, yoklama yaparak oluşturabilirsiniz Görünüm » Menü. Belirli talimatlar için WordPress'te gezinme menüsünün nasıl ekleneceğine ilişkin talimatlarımıza bakın.

Ekrandaki son seçenek, mevcut yanıt vermeyen menünüz için bir CSS sınıfı sağlamaktır. Bu, eklentinin yanıt vermeyen menünüzü daha küçük ekranlarda gizlemesine olanak tanır.

Ayarlarınızı kaydetmek için 'Güncelleme Seçenekleri' düğmesine tıklamayı unutmayın.

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

Duyarlı menü eklentisi demosu

Duyarlı menü eklentisi, duyarlı menünüzün davranışını ve görünümünü değiştirmenize olanak tanıyan birçok başka seçenekle birlikte gelir. Bu seçenekleri eklentinin ayarlar sayfasında keşfedebilir ve gerektiği gibi ayarlayabilirsiniz.

Yöntem 2: Bir Eklenti Kullanarak Açılır Menü Seçme Menüsü Ekleme

Duyarlı bir menü eklemek için diğer bir yöntem, bir açılır menü seçmektir. Bu teknik herhangi bir kod deneyimi gerektirmez, bu nedenle acemiler için en iyi yöntemdir.

Duyarlı menünün seçimi

Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Görünüm » Duyarlı seçime katılmanız gerekir.

Menü ayarlarını seçin

'Tema konumlarını etkinleştir' bölümüne kaydırmanız gerekir. Varsayılan olarak, eklenti tüm konu konumlarında etkinleştirilmiştir. Belirli tema konumları için seçerek dönüştürerek değiştirebilirsiniz.

Değişikliklerinizi kaydetmek için Tüm kurulumu kaydetme tuşuna tıklamanız gerektiğini unutmayın.

Şu anda web sitenize katılabilir ve işteki duyarlı seçim menüsüne bakmak için tarayıcı ekranını yeniden boyutlandırabilirsiniz.

Teknik 3: Anahtar eylemiyle mobil giden duyarlı menü oluşturma

Bir menüyü mobil ekranlarda göstermek için en genel olarak kullanılan tekniklerden biri, geçiş eyleminin yardımıdır.

Bu teknik, WordPress veri kümenize özel anahtar eklemenizi ister. Bunu daha önce üretmediyseniz, WordPress'te internetten snippet'leri yapıştırma konusundaki talimatlarımıza bakın.

Öncelikle not defteri gibi bir metin düzenleyici açmanız ve bu kodu yapıştırmanız gerekir.

Bu oyuncağın ardından, menümüzün cep telefonlarında görüntülendiğinde geçiş yapmak için doğru CSS sınıflarını kullanması için CSS eklemesi gerekir.

Teknik 4: WordPress'te Bir Kaydırmalı Mobil Menü Ekleyin

Diğer bir yaygın yöntem ise (Teknik1'de görebileceğiniz gibi) bir kaydırmalı panel menüsü kullanarak bir mobil menü eklemektir.

Teknik 4, WordPress tema dosyalarınıza kod eklemenizi gerektirir ve bu, Teknik 1 ile aynı sonuçları elde etmenin farklı bir yoludur.

Her şeyden önce, örneğin Not Defteri gibi bir düz metin düzenleyici açmanız ve özel kodu boş bir metin dosyasına eklemeniz gerekir.

example.com'u alan adının kişisel adıyla ve temanızı gerçek tema dizininizle değiştirmeniz gerektiğini unutmayın. Bu dosyayı masaüstünüze slidepanel.js olarak kaydedin.

Bundan sonra, menünün simgesi olarak kullanacağınız bir resme ihtiyacınız olacak.

Bir hamburger simgesi genellikle menü simgesi olarak kullanılır. Çeşitli internet sitelerinde buna benzer tonlarca resim göreceksiniz. Google Material Icons kitaplığındaki menü simgesini kullanacağız.

Şimdi kullanmak istediğiniz bir resim gördünüz, onu menu.png olarak kaydedin.

Bundan sonra, bir FTP müşterisi açmanız ve slidepanel.js dosyasını /wp-content/your-theme/js/ klasörüne yüklemeniz gerekir.

Tema kataloğunuzda JS klasörü yoksa, baştan oluşturmanız ve ardından dosyanızı yüklemeniz gerekir.

Bu işlemden sonra menu.png dosyasını /wp-content/themes/your-theme/images/ klasörüne yüklemelisiniz.

Dosyalar yüklendikten sonra, temanızın şu anda eklediğiniz JavaScript dosyasını desteklediğine ikna olmamız gerekiyor. Buna JavaScript dosyasını kuyruğa alarak ulaşacağız.

Bu kodu temanızın functions.php dosyasına ekleyin.

Temanızın gezinme menüsünün hala orada olduğuna dikkat edin. Slidepanel menüsünü tetiklemek için ihtiyaç duyduğumuz HTML'yi biraz önce sardık.

Son adım, daha büyük ekranlarda menü resmi simgesini gizlemek için CSS eklemektir. Ayrıca menü simgesinin konumunu da ayarlamanız gerekecektir.

WordPress temanıza bağlı olarak, çakışmaları önlemek için CSS'yi ayarlamanız gerekebilir.