WordPress Üst Bilgi Menünüze Düğme Ekleme

Ana navigasyon menüsüne bir düğme eklemek, sitenizin harekete geçirici mesajının öne çıkmasını sağlayarak en önemli sayfalarınıza daha fazla trafik yönlendirmenizi sağlar. Ayrıca aynı düğmeyi her sayfaya ve gönderiye eklemenin kolay bir yoludur.

İş ortağı markalarımızdan biri olan WPForms'un, WordPress üstbilgisine doğrudan “WPForms Al” düğmesi eklediğini gördük. Bu basit ekleme, dönüşümleri artırmaya ve satışları yükseltmeye yardımcı oldu.

Düğmeyi oldukça görünür bir yere yerleştirerek, WPForms ziyaretçilerin harekete geçmesini kolaylaştırdı, bu da daha iyi etkileşim ve daha fazla potansiyel müşteriyle sonuçlandı.

Bu makalede, WordPress başlık menünüze kolayca bir düğme eklemeyi göstereceğiz.

WordPress Üst Menüsüne Neden Düğme Eklenir?

WordPress navigasyon menüleri genellikle düz metin bağlantılarıdır, her şey aynı görünür ve hiçbir şey gerçekten öne çıkmaz.

Ancak, bazı bağlantılar diğerlerinden daha önemlidir. Örneğin, çevrimiçi bir sipariş formu veya WordPress üyelik sitenizin kayıt sayfasına bir bağlantı eklemek isteyebilirsiniz.

Varsayılan olarak, bu önemli bağlantılar üst menünün geri kalanıyla aynı görünür.

Bu bağlantıları düğmelere dönüştürerek daha dikkat çekici hale getirebilirsiniz. Bu, daha fazla tıklama ve dönüşüm elde etmenizi sağlayabilir.

Varsayılan olarak, WordPress gönderilerine ve sayfalarına düğmeler ekleyebilirsiniz Düğmeler bloğunu kullanarak, ancak bunları gezinme menülerine ekleyemezsiniz.

Bununla birlikte, WordPress üstbilgi menünüze nasıl bir düğme ekleyebileceğinize bakalım.

WordPress Üstbilgi Menünüze Düğme Ekleme

Başlamak için, düğmeye dönüştürmek istediğiniz bağlantıyı eklemeniz gerekir.

WordPress kontrol panelinizdeki Görünüm » Menüler sayfasına gidin ve bağlantıyı navigasyon menünüze ekleyin. Ayrıntılı talimatlar için lütfen WordPress'te navigasyon menüsü ekleme konusundaki kılavuzumuza bakın: WordPress'te navigasyon menüsü ekleme.

Bundan sonra, ekranın üst kısmındaki Ekran Seçenekleri düğmesine tıklamanız gerekir.

Bu, birçok yeni seçeneğin bulunduğu bir panel ortaya çıkaracaktır. ‘CSS Sınıfları’ yanındaki kutuyu işaretlemeniz yeterlidir.

Şimdi, düğmeye dönüştürmek istediğiniz menü öğesini genişletmek için tıklayın.

Bir sınıf adı yazabileceğiniz yeni bir CSS sınıf seçeneği fark edeceksiniz. CSS sınıfına istediğiniz adı verebilirsiniz, ancak bu kılavuzda menu-button kullanacağız.

Bir ad girdikten sonra, değişikliklerinizi saklamak için ‘Menüyü Kaydet’ düğmesine tıklayın.

Artık menü öğesine özel bir CSS sınıfı eklediniz. Bunu özel CSS kodu kullanarak nasıl görüneceğini değiştirebilirsiniz. Bu kodu yerleşik WordPress özelleştiricisi aracılığıyla veya bir kod parçacığı eklentisi kullanarak ekleyebilirsiniz.

WPCode Kullanarak WordPress Üst Bilgi Menünüze Bir Düğme Ekleyin (Önerilir)

WordPress'e özel kod eklemenin en iyi yolu WPCode kullanmaktır. Özel CSS, PHP, HTML ve daha fazlasını eklemenizi sağlayan en iyi kod parçacığı eklentisidir.

Tema dosyalarını doğrudan düzenlemediğiniz için, en yaygın WordPress hatalarının çoğundan kaçınabilirsiniz. Ayrıca temanızı güncelleyebilir veya özel kodunuzu kaybetmeden tamamen farklı bir temaya geçiş yapabilirsiniz.

Düğmeyi istediğiniz zaman kaldırmak isterseniz, tek bir tıklamayla kapatabilirsiniz.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla bilgi için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Eklenti etkinleştirildikten sonra, WordPress kontrol panelinden Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır WPCode kod parçacıklarını göreceksiniz. Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress'in normalde desteklemediği dosya türlerini yüklemenize, ek sayfa sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir kod parçacığı bulunur.

Şimdi, fareyi 'Özel Kodunuzu Ekleyin (Yeni Snippet)' seçeneğinin üzerine getirin ve göründüğünde '+ Özel Snippet Ekle' düğmesine tıklayın.

Ardından, ekranda beliren seçenekler listesinden kod türü olarak 'CSS Snippet'i seçmeniz gerekir.

Bir sonraki ekranda, kod parçacığına bir başlık yazmanız gerekir.

Adı sadece referansınız içindir, bu yüzden istediğiniz herhangi bir şeyi kullanabilirsiniz.

Bu işlem tamamlandığında, 'Kod Önizleme' kutusuna bir CSS kod parçacığı yapıştırmaya hazırsınız:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Yukarıdaki kod parçasını eklerken, menu-button yerine kendi CSS sınıfınızın adını eklediğinizden emin olun.

Yukarıdaki kod parçacığı, aşağıdaki resimde görebileceğiniz gibi, gölge efektli turuncu bir düğme oluşturur.

Oluşturabileceğiniz farklı efektleri görmek için CSS kod parçacığıyla oynamaktan çekinmeyin. Örneğin, arka plan rengini, bağlantı metni rengini değiştirebilir, bir kenarlık ekleyebilir ve daha fazlasını yapabilirsiniz.

Farklı bir renk kullanmak isterseniz, o rengin onaltılık kodunu bilmeniz gerekir. Hangi kodları kullanacağınızdan emin değilseniz, Color Hex gibi bir kaynak kullanabilirsiniz.

Koddan memnun kaldığınızda, ‘Etkin Değil’ geçişini ‘Etkin’ olarak değiştirmek için tıklayın ve ardından ‘Kod Parçasını Kaydet’ düğmesine tıklayın.

Şimdi, WordPress web sitenizi ziyaret ederseniz, yeni üstbilgi menüsü düğmesinin çalıştığını göreceksiniz.

Özel Ayarlar (Customizer) Kullanarak WordPress Üst Menünüze Düğme Ekleyin

Bir eklenti kullanmak istemiyorsanız, yerleşik özelleştiriciyi kullanarak kod ekleyebilirsiniz.

Yalnızca Görünüm » Özelleştir'e gidin; sağ tarafta sitenizin bir önizlemesini ve sol sütunda bir dizi tema ayarını göreceksiniz.

Başlamak için ‘Ek CSS’ seçeneğine tıklayın.

Artık özel CSS kodu ekleyebileceğiniz bir kutu göreceksiniz.

Yukarıdaki kod parçasını başlangıç noktası olarak kullanabilirsiniz.

Düğmenin görünümünden memnun kaldığınızda, değişikliklerinizi canlı hale getirmek için ‘Yayınla’ya tıklayın.

Video Eğitim

Görsel öğrenen biriyseniz, WordPress başlık menünüze bir düğme ekleme konusundaki video eğitimimize göz atın:

Bonus: WordPress Üstbilgisine Tıklanabilir Telefon Düğmesi Ekleme

Eğer küçük bir işletme siteniz varsa, navigasyon menünüze tıklanabilir bir arama düğmesi eklemek isteyebilirsiniz. Bu, ziyaretçilerin sizinle iletişim kurmasını kolaylaştıracak ve sitenizi daha SEO dostu hale getirerek arama motoru sıralamalarınızı artırabilir.

Bu düğmeyi eklemek için WordPress kontrol panelinden Görünüm » Menüler sayfasına gidin ve sağdaki ‘Özel Bağlantılar’ sekmesini genişletin.

Buraya VOIP telefon numaranızı URL'ye ekleyin ve ona bir etiket ekleyin. Ardından 'Menüye Ekle' düğmesine tıklayın.

Tıklanabilir arama düğmesi gezinme bağlantı listenize eklendikten sonra, ayarlarınızı kaydetmek için ‘Menüyü Kaydet’ düğmesine tıklamayı unutmayın.

Ayrıntılı talimatlar için, WordPress'te tıklanabilir telefon numarası ekleme hakkındaki eğitimimize bakmak isteyebilirsiniz.

Umarım bu makale, WordPress üst menünüze nasıl düğme ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress'te yapışkan kayar gezinme menüsü oluşturma rehberimize ve WordPress'te menülere koşullu mantık ekleme eğitimimize de 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.