WordPress Gezinme Menülerine Resim Simgeleri Nasıl Eklenir

Yıllar boyunca binlerce okuyucunun hem kullanıcı deneyimini hem de görsel çekiciliğini iyileştirmek için WordPress sitelerini özelleştirmelerine yardımcı olduk. Web tasarımı konusundaki pratik deneyimimizden, WordPress gezinme menülerine görsel simgeleri eklemenin sitenizin kullanılabilirliğini önemli ölçüde artırabileceğini öğrendik.

Bunun nedeni, resim simgelerinin ziyaretçilerinize sezgisel görsel ipuçları sağlayabilmesi ve sitenizde gezinmelerini kolaylaştırmasıdır. Bu şekilde, web sitenizin arayüzü daha etkileşimli ve ilgi çekici hale gelir, bu da hemen çıkma oranını azaltmaya yardımcı olur.

Bu makalede, WordPress'te gezinme menülerine resim simgelerini kolayca nasıl ekleyeceğinizi göstereceğiz. 

WordPress'te Gezinme Menüleriyle Neden Resim Simgeleri Eklenir?

Genellikle, WordPress gezinme menüleri düz metin bağlantılarıdır. Bu bağlantılar çoğu web sitesi için iyi çalışır, ancak her zaman ilginç veya ilgi çekici görünmeyebilir. 

Gezinti menüsüne resim simgeleri ekleyerek, ziyaretçileri menüye dikkat etmeye ve sitenizi daha fazla keşfetmeye teşvik edebilirsiniz.

Menünüzde birçok farklı seçenek varsa, resim simgeleri ziyaretçilerin içeriği taramasını ve aradıklarını bulmasını kolaylaştırabilir. Bu, WordPress'te sayfa görüntülemelerini artırmanın ve hemen çıkma oranını azaltmanın kolay bir yolu olabilir. 

En önemli menü öğesini, örneğin çevrimiçi pazar yerinizdeki Ödeme bağlantısını vurgulamak için bir resim simgesi bile kullanabilirsiniz. 

Menüde bir eylem çağrısı vurgulayarak, genellikle daha fazla kayıt, satış, üye ve diğer dönüşümler elde edebilirsiniz.

Bununla birlikte, WordPress gezinme menünüze resim simgeleri ekleyebileceğinizi görelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

• Yöntem 1: Eklenti Kullanarak Gezinme Menülerine Resim Simgeleri Ekleme (Hızlı ve Kolay)
• Yöntem 2: WordPress Menülerine Kod Kullanarak Simgeler Ekleme (Daha Özelleştirilebilir)
• Bonus: WordPress Menülerine Sosyal Medya Simgeleri Ekleme

Yöntem 1: Eklenti Kullanarak Gezinme Menülerine Resim Simgeleri Ekleme (Hızlı ve Kolay)

WordPress menülerinize simge eklemenin en kolay yolu Menu Image kullanmaktır. Bu eklenti, yalnızca birkaç tıklamayla ekleyebileceğiniz dashIcon simgeleriyle birlikte gelir.

Web sitenizde Font Awesome'ı kurduysanız, Menu Image'ı kullanarak bu simgeleri gezinme menünüze kolayca ekleyebilirsiniz. Font Awesome'ı nasıl kuracağınız hakkında daha fazla bilgi için, WordPress temanıza simge yazı tiplerini kolayca ekleme kılavuzumuza bakın.

Başka bir seçenek de WordPress medya kütüphanesinden resim veya simge kullanmaktır.

Yapmanız gereken ilk şey, Menu Image eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirme üzerine, WordPress kontrol panelindeki Menü Resmi'ne tıklayın. Bu ekranda, güvenlik ve özellik bildirimleri almak isteyip istemediğinizi seçebilir veya ‘Atla’ düğmesine tıklayabilirsiniz.

Bu sizi eklentinin ayarlarını yapılandırabileceğiniz bir ekrana götürecektir. Başlangıç olarak, resim simgeleri için kullanabileceğiniz tüm farklı boyutları göreceksiniz.

Font Awesome veya dashicons'tan simgeler kullanmayı planlıyorsanız, Menü Resmi bunları otomatik olarak yeniden boyutlandıracaktır. Ancak, medya kütüphanesinden resim kullanıyorsanız, boyutu manuel olarak seçmeniz gerekecektir.

Eklenti, küçük resimler, resimler ve büyükler gibi varsayılan WordPress resim boyutlarını destekler. Ayrıca varsayılan olarak 24x24, 36x36 ve 48x48 piksel olarak ayarlanmış üç benzersiz boyut ekler.

Bu ayarlar çoğu web sitesi için iyi çalışmalıdır, ancak 1., 2. veya 3. Menü Resim boyutuna farklı sayılar yazarak simgeleri daha büyük veya daha küçük yapabilirsiniz.

Menünüze simgeler eklerken, varsayılan olarak 'açılışta resim' alanı göreceksiniz. Bu, ziyaretçi o menü öğesinin üzerine geldiğinde farklı bir simge göstermenize olanak tanır.

Yalnızca kendi resimlerinizi kullandığınızda bu ayarın mevcut olduğunu unutmayın. DashIcons veya Font Awesome simgeleri kullanmayı planlıyorsanız, 'fareyle üzerine gelindiğinde resim' özelliği hakkında endişelenmenize gerek yok.

Farklı bir simge göstermek, ziyaretçilerin gezinme menüsünde nerede olduklarını görmelerine yardımcı olabilir. Menünüzde çok sayıda farklı öğe varsa bu özellikle kullanışlıdır. Örneğin, şu anda seçili olan öğeyi vurgulamak için farklı renkler veya simge boyutları kullanabilirsiniz.

Farklı üzerine gelme efektleri oluşturmak istiyorsanız, 'Üzerine gelindiğinde resim alanını etkinleştir' seçeneğini işaretlediğinizden emin olun.

Bu işlem tamamlandıktan sonra ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’e tıklayın.

Gezinme menüsüne simgeler eklemek için Görünüm » Menüler sayfasına gidin. Varsayılan olarak WordPress sitenizin birincil menüsünü gösterecektir.

Farklı bir menüyü düzenlemek istiyorsanız, 'Düzenlenecek bir menü seçin' açılır menüsünü açın ve listeden bir menü seçin. Ardından 'Seç'e tıklayın.

Şimdi, bir simge eklemek istediğiniz ilk menü öğesinin üzerine gelin. 'Menü Resmi' göründüğünde, tıklayın.

Artık kendi görüntünüzü kullanıp kullanmayacağınıza veya Font Awesome simgesi gibi hazır bir simge seçip seçmeyeceğinize karar verebilirsiniz.

Hazır bir simge kullanmak için 'Simgeler'in yanındaki radyo düğmesine tıklayın.

Ardından herhangi bir dashicon veya Font Awesome simgesi seçmek için tıklayabilirsiniz.

Kendi görselinizi kullanmak istiyorsanız, ‘Görsel’ seçeneğinin yanındaki radyo düğmesini seçin ve ‘Görseli Ayarla’ bağlantısına tıklayın.

Artık WordPress medya kitaplığından bir resim seçebilir veya bilgisayarınızdan yeni bir dosya yükleyebilirsiniz.

Eklentinin ayarlarında ‘Görsel üzerine gelince etkinleştir’ alanını işaretlediyseniz, ‘Görseli üzerine gelince ayarla’ seçeneğine de tıklamanız gerekecektir.

Şimdi, kullanıcının bu menü öğesinin üzerine geldiğinde gösterilecek bir resim seçin.

Bazen bu ayarı yoksaymak ve ne olursa olsun aynı simgeyi göstermek isteyebilirsiniz. Bunu yapmak için 'Fareyle üzerine gelindiğinde resim ayarla'ya tıklayın ve ardından tam olarak aynı simgeyi seçin.

Bir resim seçmezseniz, ziyaretçi üzerine geldiğinde simge tamamen kaybolacaktır.

Ardından, Resim Boyutu açılır menüsünü açın ve listeden bir boyut seçin.

Tüm simgeler için aynı boyutu kullanmak, menünün daha düzenli görünmesini sağlar. Ancak, bazen en önemli öğe için daha büyük bir simge kullanmak iyi bir fikirdir.

Örneğin, WooCommerce gibi bir eklenti kullanarak bir çevrimiçi mağaza oluşturduysanız, 'Ödeme' için daha büyük bir simge kullanabilirsiniz, böylece öne çıkar.

Simgeden memnun kaldığınızda, menü öğesinin etiketine bakma zamanı gelmiş demektir. Varsayılan olarak eklenti, simgeden sonra başlık etiketini gösterir.

Bunu değiştirmek için 'Başlık konumu' bölümündeki radyo düğmelerinden herhangi birini seçin.

Başka bir seçenek de gezinme etiketini tamamen kaldırmak ve yalnızca simgeden oluşan bir menü oluşturmaktır. Menünüzde çok sayıda öğe varsa, bu onu daha az karmaşık gösterebilir.

Ancak, yalnızca her simgenin ne anlama geldiği açıksa etiketleri gizlemelisiniz. Belirsizse, ziyaretçiler WordPress bloglarında veya web sitelerinde gezinmekte zorlanacaklardır.

Etiketi gizlemeye devam etmek için, ‘Yok’ yanındaki radyo düğmesini seçin.

Menü öğesinin nasıl ayarlandığından memnun kaldığınızda, ‘Değişiklikleri Kaydet’e tıklayın.

Diğer menü öğelerine bir simge eklemek için yukarıda açıklanan işlemin aynısını izlemeniz yeterlidir.

Bitirdiğinizde, 'Menüyü Kaydet' düğmesine tıklamayı unutmayın. Şimdi WordPress web sitenizi ziyaret ederseniz, güncellenmiş gezinme menüsünü canlı olarak göreceksiniz.

Yöntem 2: WordPress Menülerine Kod Kullanarak Simgeler Ekleme (Daha Özelleştirilebilir)

CSS kullanarak gezinme menülerinize resim simgeleri de ekleyebilirsiniz.

Bu şekilde, simgelerin menülerinizde tam olarak nerede görüneceğini kontrol edebilirsiniz. Herhangi bir görüntüyü simge olarak da kullanabilirsiniz, bu nedenle kendi markanızı eklemek için harika bir yoldur.

Başlamadan önce, simge olarak kullanmak istediğiniz tüm resim dosyalarını yükleyin. Bunlar stok fotoğraflar, çevrimiçi bulduğunuz telifsiz resimler veya Canva gibi bir uygulama kullanılarak oluşturulmuş özel grafikler olabilir.

Her görüntüyü WordPress medya kütüphanesine ekledikten sonra, URL'sini kopyalayıp Not Defteri gibi bir metin düzenleyiciye yapıştırdığınızdan emin olun. Bu bağlantıların tümüne bir sonraki adımda ihtiyacınız olacak.

Bir görselin URL'sini bulmak için, onu WordPress medya kütüphanesinde seçin ve ardından ‘Dosya URL’si’ alanına bakın.

Daha ayrıntılı talimatlar için lütfen WordPress'e yüklediğiniz görsellerin URL'sini alma kılavuzumuza bakın: WordPress'e yüklediğiniz görsellerin URL'sini alma.

Ardından, WordPress kontrol panelinden Görünüm » Menüler sayfasını ziyaret etmeniz gerekir.

Ardından, ‘Düzenlenecek bir menü seçin’ açılır menüsünü açın ve resim simgelerini eklemek istediğiniz menüyü seçin.

Ardından, 'Seç'e tıklayın.

Ardından, 'Ekran Seçenekleri'ne tıklayarak özel CSS sınıflarını etkinleştirmeniz gerekir.

Görünen panelde, 'CSS Sınıfları' yanındaki kutuyu işaretleyin.

Bu işlem tamamlandıktan sonra, gezinme menüsündeki herhangi bir öğeye özel CSS sınıfları ekleyebilirsiniz. Her menü öğesini WordPress medya kütüphanesindeki bir resimle bu şekilde bağlayacaksınız.

Bu sınıfları istediğiniz gibi adlandırabilirsiniz, ancak menü öğesini tanımlamanıza yardımcı olacak bir şey kullanmak iyi bir fikirdir.

Başlamak için, resim simgesi eklemek istediğiniz ilk öğeye tıklamanız yeterlidir. 'CSS Sınıfları (isteğe bağlı)' alanına kullanmak istediğiniz sınıf adını yazın.

Bu özel CSS sınıflarını bir sonraki adımda kullanacaksınız, bu yüzden onları Not Defterinize veya benzer bir uygulamaya not alın.

Menü öğelerinizin tümüne ayrı bir sınıf eklemek için aynı işlemi izleyin. Ardından, ayarlarınızı kaydetmek için ‘Menüyü Kaydet’e tıklayın.

Artık CSS kullanarak WordPress gezinme menülerinize resim simgeleri eklemeye hazırsınız.

Genellikle, WordPress eğitimleri kod parçacıklarını WordPress tema dosyalarınıza eklemenizi söyler. Ancak, bunu yapmak yaygın WordPress hatalarına neden olabilir ve yeni başlayanlar için pek uygun değildir.

Bu yüzden WPCode'u öneriyoruz.

1 milyondan fazla web sitesi tarafından kullanılan ve temanızın functions.php dosyasını düzenlemeden özel kod eklemenize olanak tanıyan en iyi WordPress kod parçacığı eklentisidir.

Yapmanız gereken ilk şey, ücretsiz WPCode eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, Kod Parçaları » Parça Ekle bölümüne gidin.

Bu sizi, hazır kod parçacıkları içeren WPCode kütüphanesini görebileceğiniz 'Kod Parçacığı Ekle' sayfasına götürecektir. Bunlar arasında, XML-RPC'yi devre dışı bırakarak, WordPress'in varsayılan olarak desteklemediği dosya türlerini yükleyerek ve daha fazlasını yaparak WordPress güvenliğinizi geliştirmenize olanak tanıyan kod parçacıkları bulunur.

Fareyi ‘Özel Kodunuzu Ekleyin’ üzerine getirin ve göründüğünde ‘snippet kullan’a tıklayın.

Başlamak için özel kod parçacığına bir başlık yazın. Bu, parçacığı WordPress kontrol panelinde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Bu yapıldıktan sonra, ‘Kod Türü’ açılır menüsünü açın ve ‘CSS Parçacığı’nı seçin.

Kod düzenleyicisinde, göstermek istediğiniz her simge için bazı kodlar eklemeniz gerekecektir.

Size yardımcı olmak için aşağıda örnek bir kod parçacığı oluşturduk. '.carticon' ifadesini önceki adımda oluşturduğunuz özel CSS sınıfıyla değiştirebilirsiniz. Ayrıca URL'yi WordPress medya kütüphanenizdeki resme giden bir bağlantıyla değiştirmeniz gerekecektir:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Yukarıdaki kod parçasını oluşturduğunuz her bir menü öğesi için ayarlamanız gerekecektir.

Kodunuzdan memnun kaldığınızda, ‘Ekleme’ bölümüne gidin. WPCode, kodu her gönderiden sonra, yalnızca ön uçta veya yalnızca yönetici gibi farklı konumlara ekleyebilir.

Özel CSS kodunu tüm WordPress blogunuzda veya web sitenizde kullanmak için, henüz seçili değilse ‘Otomatik Ekle’ seçeneğine tıklayın.

Ardından, 'Konum' açılır menüsünü açın ve 'Site Geneli Üstbilgi'yi seçin.

Ardından, ekranın üst kısmına kaydırıp 'Etkin Değil' geçişine tıklayarak 'Etkin' hale getirmeye hazırsınız.

Son olarak, özel CSS'yi canlı hale getirmek için 'Kod Parçasını Kaydet'e tıklayın.

Şimdi, web sitenizi ziyaret ettiğinizde, gezinme menünüzdeki tüm resim simgelerini göreceksiniz.

WordPress temanıza bağlı olarak, resim simgelerinin tam olarak doğru yere gösterilmesi için CSS'yi ayarlamanız gerekebilir. Bu durumda, WordPress kontrol panelinde Kod Parçacıkları » Kod Parçacıkları'na gidin.

Ardından, kod parçacığının üzerine gelin ve göründüğünde 'Düzenle' bağlantısına tıklayın.

Bu, değişiklik yapmaya hazır kod düzenleyicisini açar.

Bonus: WordPress Menülerine Sosyal Medya Simgeleri Ekleme

Menü simgelerinin yanı sıra, WordPress gezinme menünüze sosyal medya simgeleri de ekleyebilirsiniz. Bunu yapmak, sitenizde çok fazla yer kaplamadan sosyal medya profillerinizi görsel olarak çekici bir şekilde tanıtmanıza yardımcı olacaktır.

Bunu yapmak için Menu Image eklentisini kullanabilirsiniz. Etkinleştirdikten sonra, WordPress kontrol panelinden Görünüm » Menüler sayfasına gidin ve sol sütundaki ‘Özel Bağlantılar’ sekmesini genişletin.

Ardından, sosyal medya kimliğinizin URL'sini ekleyin ve platformun adını yazın. Sonra, 'Menüye Ekle' düğmesine tıklayın.

Sosyal medya profili bir menü öğesi olarak eklendikten sonra, ekranın sağ tarafında görüntülenecektir.

Burada, öğeler sekmesini tekrar genişletmeli ve ‘Menu Image’ düğmesine tıklamalısınız.

Bu, medya kitaplığınızdan bir sosyal medya simgesi yüklemek için 'Görsel Ayarla' bağlantısına tıklayabileceğiniz ekranda yeni bir istem açacaktır.

Hazır bir simge eklemek istiyorsanız, 'Simgesi' seçeneğini seçebilir ve FontAwesome'dan sosyal medya simgenizi ekleyebilirsiniz.

Son olarak, ayarlarınızı kaydetmek için 'Değişiklikleri Kaydet' düğmesine tıklayın.

Artık gezinme menünüze başarıyla bir sosyal medya simgesi eklediniz. Daha fazla bilgi için, WordPress menülerine sosyal medya simgeleri ekleme hakkındaki öğreticimize bakın.

Umarım bu makale, WordPress gezinme menünüze resim simgeleri eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca WordPress'te menülere koşullu mantık ekleme ve yapışkan kayar gezinme menüsü oluşturma hakkındaki kılavuzlarımıza da göz atabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.