Eklentiler olmadan özel bir WordPress menüsüne nasıl bir simge eklenir
Site gezinme menüsüne simgeler ekleyin Ziyaretçilere içerik hakkında bazı görsel talimatlar verir ve ayrıca sitenize iyi bir tasarım tasarımı ekleyin. Bu yazıda, herhangi bir eklenti kullanmadan veya herhangi bir resim yüklemeden bunu nasıl yapabileceğinizi göstereceğim. Bunun yerine, WordPress yöneticisi aracılığıyla gezinme menünüzde bazı ayarlamalar yapacak ve daha sonra tema dosyanıza bazı kodlar ekleyeceksiniz. Bittiğinde, Navigasyon menüsünde her öğenin yanında birkaç basit simgeniz olacak ve en iyi yanı, sitenizi yavaşlatabilecek herhangi bir resim veya dosya yüklemenize gerek olmamasıdır. Bitirdikten sonra aşağıdaki gezinme menüsünü görüntüle:
Eklenti üzerinden ekleyebileceğiniz harika yazı tipi Ikon Kütüphanesi’ni kullanacağız, ancak bunu yapmanıza gerek yok çünkü temanızın dosya işlevinden kolayca arayabilirsiniz. Menü simgeleri ekleyin-bu genel resim, bu yazıyı takip ederseniz atacağınız adımlardır:Yapılacak yirmi beş temadan bir çocuk teması oluşturun (kendi temanız üzerinde çalışıyorsanız bu adımı geçebilirsiniz).
İnanılmaz yazı tipi kitaplığını temanızın dosya işlevinden etkinleştirin.
CSS sınıfını WordPress Yöneticisi aracılığıyla gezinme menünüzdeki öğeye ekleyin.
Doğru düzeni ve yazı tiplerini almak için tema stili sayfanıza bazı stiller ekleyin.
Başlayalım.
Üzerinde çalıştığınız temaya sahip değilseniz, yirmi beş çocuk teması yapın, bunu yapmalısınız. Bunu yapmanın en kolay yolu, temadan bir çocuk teması oluşturmaktır, yani orijinal temaya hiçbir şey yapmadan kendi değişikliklerinizi ekleyebilirsiniz. Yirmi on beş olan varsayılan temadan bir çocuk teması yapacağım. Çocuğun temasında yeniyseniz, nasıl yapılacağını açıklayan tam kılavuzumuza bakın. Olağanüstü Yazı Tiplerini Etkinleştirme Bir sonraki adım, temanızdaki harika yazı tipi kitaplığını etkinleştirmektir. Bunu yapmadan önce Font’a bakalım Awesome: Font Awesome, simge yazı tipi kullanılarak yapılan bir simge kitaplığıdır. Bu, sitenize bir simge eklerken geçmişte yapabileceğiniz gibi bir arka plan görüntüsü kullanmadığınız anlamına gelir. CSS sınıfını kullanmak yerine, simge sınıfı ile herhangi bir şeye sahte öğeler eklemek. Bu sahte öğe, bir simge stiline sahip öğeden önce özel bir karakter ekler. Aldığınız şey, CSS sınıfını eklediğiniz öğelerden hemen önce verilen bir simgedir. Müthiş yazı tipinin CSS kullandığı hakkında daha fazla bilgi edinmek istiyorsanız, web sitesindeki örnek sayfasına bakın. Ayrıca, bu eğitim üzerinde çalışırken, bunların üstesinden gelmenin en kolay yolu olabilecek ikonları görüntülemek için sınıfları nasıl kullanacağınızı öğreneceksiniz. Öyleyse, temamızdaki harika yazı tipini etkinleştirerek başlayalım. Tema klasörünüzde, function.php adlı yeni bir dosya oluşturun. Temanızın zaten bir işlev dosyası varsa, açın. Bu kodu işlev dosyanıza ekleyin:
76E9AB6F27C66DE24D3B0C132521E214’ün özünü içerir
Bakalım ne yapıyor:
Bu, wmpudev_enqueue_icon_stylesheet () adlı bir işlev oluşturur. Bu işlevde, sitenizin dışında barındırılan stil sayfası yazı tipini kaydetmek için wp_register_style () kullanır. Bu bağlantıyı harika yazı tipi sitesini başlatan sayfada bulabilirsiniz.
Daha sonra wp_enqueue_style () için wp_enqueue_style () kullanın yeni kayıtlı stil.
Son olarak, bu, işlevi WPEPPRPress’e bu işlevi ne zaman gerçekleştireceğini söyleyen WP_ENQUEUE_SCRIPTS’in Action Hook’a bağlar.
Harika yazı tipini başlatma sayfasında, stil sayfanızı web sayfanızın bölümünden (WordPress temasının header.php dosyasında olacak. Bu en iyisi değil. Stylessheet’i WordPress’e kaydetmek için: Yukarıdaki yol yapmanız gereken yoldur.
Şimdi işlevinizi kaydedin.php dosyası. Menü öğesine CSS ekleyin Şimdi harika yazı tipini kaydettik, menü öğelerimize simgeler eklemek için sağlanan CSS sınıfını kullanabiliriz. WordPress yöneticisinde, Navigasyon menünüzü düzenleyebilmeniz için görünüm> menüleri açın. Bir gezinme menüsü yapmadıysanız, şimdi yapın ve menü ekranındaki kutuyu temanızdaki ‘Ana Gezinme’ yuvasında olacak şekilde kontrol ettiğinizden emin olun. WordPress, menünüzdeki her öğeye CSS sınıfı eklemenize olanak tanır, ancak bu alanı varsayılan olarak göremezsiniz: Önce etkinleştirmeniz gerekir:
Ekranın üst kısmında Ekran Seçeneği sekmesini tıklatın.
‘CSS sınıfının’ yanındaki kutunun kontrol edildiğinden emin olun.
Ekran seçeneği sekmesini kapatın.
Artık menü öğelerinizin her birine sınıf ekleyebilirsiniz. ‘Ana Sayfa’ menü öğesiyle başlayın. Menü öğesinin yanında, menü öğesi ile ilgili daha fazla seçenek görmek için oku tıklayın. ‘CSS sınıfı’ alanında aşağıdakileri yazın: B53EA6BC20705CCEFEF008078360A9A0’ın özünü sevmek
Bu, menü öğenize üç sınıf ekler:
FA, harika yazı tipi simgesine sahip tüm öğeler için kullanılır
FA-LG, simgenin boyutunu büyük olarak düzenler
FA-Home, görüntülemek istediğiniz bazı simgelerle ilgilidir.
Menünüz için yönetici arayüzü şu şekilde görünecektir:
Şimdi menü öğelerinizin her biri için de aynısını yapın. Müthiş yazı tipi simgesi sayfasında daha fazla simge ve sınıf bulacaksınız.
Aşağıdaki sınıfı kullanıyorum:
Ana Sayfa: FA-LG FA-HOME (Yukarıdaki gibi: Ana Sayfa İkonu) Haberler: FA-LG FA-Newspaper-O (gazete simgesi)
Galeri: FA FA-LG FA-CAMERA-RETRO (Kamera simgesi)
Hakkında: FA FA-LG FA-Info-Circle (Bilgi simgesi)
İletişim: FA-LG FA-YANLIŞ-O (Zarf simgesi)
İstediğiniz herhangi bir simgeyi kullanabilirsiniz. ‘CSS Sınıfı’ alanındaki her Gezinme Menü öğesine FA-LG ve sonra Sınıf eklediğinizden emin olun. Şimdi Menü Kaydet düğmesini tıklayarak menünüzü kaydedin.
Menü öğesini düzenleme Şimdi ön taraftaki site menünüzü görün. Bu benim:
Bu biraz karışıklık! Menemdeki yazı tipi değişti, simge solda istediğim zaman metnin üzerindedir ve menü öğem diğerinin üstünde olması gerektiğinin yanında. Kendi temanızla çalışıyorsanız, menünüzün daha iyi (veya daha kötüsü!) Olduğunu ve bazı farklı ayarlamalar yapmanız gerekebilir. Sitemdeki sorunu çözmek için stil sayfama bazı stiller ekleyeceğim. Yukarıda bir menü öğesi yaparak başlayalım. Tema stil sayfanızı açın ve aşağıdakileri ekleyin:
DE419105FD2929459D87EEE5E97274C58’in özünü içerir
Bu, her menü öğesinin, bunları içeren öğelerin% 100 genişliğini almasını sağlayacaktır. Not: Kendi temanızla çalışıyorsanız, temanızın nasıl kodlandığına bağlı olarak menünüz için farklı sınıfları veya kimlikleri hedeflemeniz gerekebilir. Hedeflenecek sınıfı tanımlamak için tarayıcınızda Web Müfettişini kullanın. Şimdi ekranı yenilediğinizde, menü biraz daha iyi görünüyor:
Stil sayfanıza aşağıdakileri ekleyerek bunu düzeltin:
Çekirdek 1E446D1349F71CF607B199E5F3A10FCE içerir
Müthiş yazı tipi tarafından sınıf için ayarladığınız her öğeye eklenmeden önce sahte öğeyi kullanır :: Bu durumda, sözde elemanın içeriğini sola doğru yüzeriz, yani simgenin menü metninin solunda görüneceği anlamına gelir. Şimdi stil sayfanızı kaydedin ve ekranınızı yenileyin. Simge doğru yerde olacak: Simge şimdi doğru yerde ama toparlayarak yapabilirler. Kenar boşluklarına ve genişliğe birkaç stil daha ekleyelim. Stil sayfanıza yeni eklediğiniz sözde öğenin bildirimini şöyle görünecek şekilde düzenleyin: Çekirdek 5C4F7D9BABC0F49FB40BAC9B3C683596
Bu, metinle hizalamak için öğelerin üzerine marj ekler ve ayrıca öğeler ve metin arasında boşluklar olacak, ancak metin hizalanır. Şimdi menünüz şöyle görünecek:
Daha iyi. Şimdi son adım menü metninin yazı tipini ayarlamaktır. Metin ve simgeler için kullanılan yazı tiplerini değiştiren her menü öğesine harika yazı tipi sınıfını ekleyin, bu yüzden tekrar değiştirmemiz gerekir. Menüdeki her liste öğesindeki bağlantıya bir stil ekleyeceğim, çünkü simgeyi etkilemeyecek ve yirmi on iki temadan yazı tiplerini kullanacağım. Stil sayfanızda şunu ekleyin:
Çekirdek 4C68F69EC4D210D5A7B15F6896B278C1 içerir Bu, FA ve FA-LG sınıfları verilen herhangi bir menü öğesindeki bağlantıyı hedefler ve yazı tiplerini ve yazı tiplerini ayarlar. Son stil sayfanızdan oluşacak olan budur:
Yükleme Çekirdeği 40637E3F028BC21F5F6886306CE9699
Şimdi menü olması gerektiği gibi görünüyor: Şimdi navigasyon menüm bitti!Sitenize bir simge eklemenin özeti, bir veya iki yıl önce çok farklı bir süreçtir.Şimdi, resim yüklemek ve sayfadaki öğelerin arka planına yerleştirmek için bir stil kullanmak yerine, yazı tipi tabanlı simgelerin kütüphanesini kullanarak bir simge ekleyebilirsiniz.Bu yazıda, menü öğenize bir simge eklemek için harika yazı tipi kitaplığını nasıl kullanacağınızı öğrendiniz ve ardından düzgün görünmesi için ayarlayın.Bu tekniği, Sitenizdeki Listeler, Bilgi ve Düğmeler gibi diğer öğelerle, harika yazı tipi kitaplığı tarafından sağlanan CSS sınıfını kullanarak kullanabilirsiniz. Menünüzde simgeyi kullanıyor musunuz?Bize aşağıdaki yorumlarda anlatın.
Etiket:
kodlamak
Menü
