WordPress'e 'Tarife Atla' Düğmesi Nasıl Eklenir (2 Kolay Yol)

Yemek blog yazarları bize okuyucuları için en büyük farkı yaratan özellikler hakkında sık sık soruyorlar.

Yıllar boyunca birçok yemek blogunu gözlemledikten sonra, tarif atlama düğmesi eklemenin yapabileceğiniz en etkili iyileştirmelerden biri olduğunu bulduk.

Ziyaretçilerin aradıklarını hızlıca bulmalarına yardımcı olan küçük ama etkili bir değişikliktir. Ayrıca, herhangi bir WordPress sitesine kurulumu basittir.

Farklı çözümleri test ettik ve tutarlı bir şekilde iyi çalışan iki güvenilir yöntem bulduk. Her iki yöntem de yeni başlayanlar için uygundur ve tarif atlama düğmenizin yalnızca birkaç dakika içinde çalışmasını sağlayacaktır.

Yemek Blog Yazılarında Neden Tarif Atla Düğmesi Eklenir?

"Tarife Atlama" düğmesi, bir blog gönderisinin en üstüne yerleştirilen bir gezinme bağlantısıdır. Teknik olarak, tarayıcıyı anında tarif kartına aşağı kaydıran, giriş içeriğini atlayan bir HTML çapası olarak işlev görür.

Okuyucular genellikle malzemeleri bulmak için uzun hikayeler ve reklamlar arasında gezinmekten şikayet ederler. Uzun biçimli içerik para kazanmaya yardımcı olsa da, birçok ziyaretçi yemek yaparken veya alışveriş yaparken talimatlara anında erişmek ister.

Bu düğmeyi eklemek, her iki tür okuyucuya da hizmet etmenizi sağlar. Sadık hayranlarınız için kişisel hikaye anlatımınızı sürdürürken, hızlı yanıt isteyen kullanıcılar için hızlı bir kısayol sağlayabilirsiniz.

Bu, sitenizdeki genel kullanıcı deneyimini (UX) iyileştirir. Kullanıcılar ihtiyaç duydukları şeyi kolayca bulabildiklerinde, arama sonuçlarına geri dönme olasılıkları daha azdır.

Bu doğrultuda, yemek blogunuza bir Tariflere Atla düğmesi eklemenin 2 kolay yolunu göstereceğiz: bir WordPress tarif oluşturucu eklentisi ve özel kod kullanarak. Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: Tariflere Atlama Düğmesi Eklemek İçin WP Tasty Recipes Kullanın (Önerilen)

WordPress'te Tariflere Atlama Düğmesi eklemenin en kolay yolu WP Tasty Recipes kullanmaktır.

Bu tarif kartı ve oluşturucu eklentisi tarafımızca kapsamlı bir şekilde test edildi ve onu yemek blog yazarları arasında favori yapan birçok özellik keşfettik.

Tariflere Atlama Düğmesinin ötesinde, Tasty Recipes tariflerinizi yazdırılabilir hale getirmenize ve okuyucunun tercih ettiği ölçü birimine zahmetsizce dönüştürmenize olanak tanır.

Ek olarak, besin verilerini, pişirme süresini, porsiyon büyüklüğünü ve kullanıcı puanlarını düzgün ve düzenli bir şekilde görüntüleyebilirsiniz.

Eklentinin yetenekleri ve blogunuza nasıl fayda sağlayabileceği hakkında daha fazla bilgi edinmek isterseniz, kapsamlı WP Tasty incelememize göz atmayı unutmayın.

Bu tarif eklentisinin bir dezavantajı, ücretsiz bir sürümünün olmamasıdır, ancak çevrimiçi para kazanmak isteyen ciddi yemek blog yazarları için harika bir yatırımdır.

Şimdi, eklentiyi kullanmak için öncelikle ücretli bir plan satın almanız gerekir. İster WP Tasty All Access Bundle'ı, ister tek başına Tasty Recipes eklentisini tercih edebilirsiniz.

Satın alma işlemini tamamladıktan sonra eklentiyi indirebilir ve WordPress web sitenize kurabilirsiniz. Daha fazla bilgi için bir WordPress eklentisinin nasıl kurulacağına dair rehberimizi okuyabilirsiniz.

Bundan sonra, WordPress yöneticinizden WP Tasty » Kontrol Paneli'ne gidin ve 'Lisans Gir'e tıklayın.

Ardından, WP Tasty'nin satın alma işleminizden sonra size e-posta ile göndermesi gereken eklenti lisans anahtarınızı girin.

Ardından, açılır menüden 'Tüm Pluginler' veya 'Tasty Recipes' seçeneğini belirleyin. 'Lisansı Kaydet'e tıklayın.

Bu işlem tamamlandıktan sonra, WordPress kontrol panelinizden WP Tasty » Tasty Recipes sayfasına gidin ve 'Ayarlar' sekmesine geçin.

Varsayılan olarak, Tariflere Atlama ve Tarif Yazdır düğmelerinin seçenekleri işaretli olacaktır, bu yüzden onları olduğu gibi bırakabilirsiniz.

Düğmelerle ilgili değiştirebileceğiniz bir şey Hızlı Bağlantılar Stilidir.

WP Tasty, Tarife Atla seçeneğini düğmeler yerine normal bir metin bağlantısı olarak da gösterebilir. İsterseniz 'Bağlantılar'ı seçebilirsiniz.

Ancak elbette, tercihiniz buysa Düğmeler seçeneğini de seçebilirsiniz.

Düğmeler seçeneği de daha göz alıcı görünüyor ve okuyucuların onu fark etmesini kolaylaştırıyor.

Burada, malzeme listesi ve tarif ölçeklendirme için onay kutularını etkinleştirmek gibi daha pek çok ayar mevcut. Blogunuza en uygun seçenekleri işaretlediğinizden emin olun.

Tamamlandığında, sayfayı aşağı kaydırın ve ‘Değişiklikleri Kaydet’e tıklayın.

Artık WP Tasty'nin tarif kartını kullandığınızda, üstteki Tarif Atla ve Tarif Yazdır düğmeleri görünecektir.

Tarif kartını kullanmak için yeni bir tarif gönderisi oluşturabilir veya Gutenberg blok düzenleyicisini kullanarak mevcut bir gönderiyi düzenleyebilirsiniz. Ardından, WordPress'e bir tarif kartı bloğu ekleme hakkında daha fazla bilgi için WordPress'te tarif kartı bloğu ekleme konusundaki bu adım adım kılavuzu izleyebilirsiniz.

Atlama bağlantısını eklemek için Tasty Recipes kullanmanın bir faydası, sorunsuz kaydırma efektidir. Bu şekilde, okuyucular sayfada herhangi bir sarsıcı sıçrama olmadan doğrudan tarif talimatlarına gidebilirler.

Bu efekti elde etmek için özel kod kullanmak karmaşıktır çünkü genellikle JavaScript veya tema dosyalarını düzenlemeyi gerektirir. Bu nedenle, çoğu kullanıcı için eklenti yöntemini öneriyoruz.

Bununla birlikte, ücretsiz olarak Tarif Atla düğmesi eklemek istiyorsanız, bu sonraki yöntemi deneyebilirsiniz.

Yöntem 2: Tarife Atla Düğmesi Eklemek İçin Özel Kod Kullanın (Ücretsiz)

Tariflere Atlama düğmesini manuel olarak eklemek, tamamen yeni başlayanlar için göz korkutucu görünebilir, ancak endişelenmeyin, her adımı dikkatlice size anlatacağız.

WordPress'e ilk kez özel kod ekliyorsanız, WPCode gibi bir kod parçacığı eklentisi kullanmanızı öneririz.

Eklentiyi kapsamlı bir şekilde test ettik ve tema dosyalarını düzenlemeden kod parçacıkları eklemenin güvenli ve basit bir yolunu sunuyor. Bu, web sitenizin düzenini veya işlevselliğini yanlışlıkla bozma riskini en aza indirir.

WPCode'un başka neler yapabileceğini merak mı ediyorsunuz? Özelliklerini ayrıntılı olarak incelediğimiz ve neden WordPress kullanıcıları için harika bir araç olduğunu açıkladığımız takip etmesi kolay incelememize göz atın.

WPCode'u kullanmak için WordPress yönetici kontrol panelinizde eklentiyi kurun. Daha fazla ayrıntı için WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuzu okuyabilirsiniz.

Ardından, Kod Parçacıkları » + Parçacık Ekle'ye gidin. Burada, 'Özel Kodunuzu Ekleyin (Yeni Parçacık)' seçeneğini seçin ve 'Parçacığı kullan'a tıklayın.

WPCode'a ayrı ayrı eklemeniz gereken iki kod parçacığı vardır. Bunları tek tek inceleyelim:

Tariflere Atlama Düğmesini Otomatik Olarak Eklemek İçin Kod Ekleyin

İlk kod parçacığı, tarif bölümü içeren tüm blog yazılarına Otomatik Olarak Tarifi Atla düğmesini ekleyecektir. Bunun için kod parçacığınızı 'Otomatik Olarak Tarifi Atla Düğmesi Ekle' olarak adlandırabilirsiniz.

Ardından, Kod Türü açılır menüsünden 'PHP Snippet' seçeneğini seçin.

Kod Önizleme kutusuna gidin ve aşağıdaki kod satırlarını ekleyin:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Bu kodun nasıl çalıştığını inceleyelim.

Kodun ilk bölümü blog yazınızın içeriğini kontrol eder. Özellikle 'recipe' olarak ayarlanmış bir bağlantı kimliğine sahip bir başlık etiketini (H1'den H6'ya) arar.

add_jump_to_recipe_button adlı ikinci kısım, asıl düğmeyi gönderinize eklemekten sorumludur.

Kod 'recipe' bağlantı kimliğini bulursa, atlama düğmesi için HTML kodunu oluşturur. Ardından, bu kodu blog yazınızın içeriğinin hemen önüne ekler.

Bu şekilde, kod otomatik olarak tarif başlığını kontrol edebilir ve gerekirse düğmeyi ekleyebilir.

Bununla birlikte, blog yazınızın tarif bölümüne bir #recipe bağlantısı eklemeniz gerekecektir. Endişelenmeyin, bunu daha sonra nasıl yapacağınızı göstereceğiz.

Şimdi, 'Ekleme' bölümüne gidin ve 'Otomatik Ekle' yönteminin seçili olduğundan emin olun. Konum olarak, kodun yalnızca WordPress web sitenizin ön yüzünde çalışması için 'Yalnızca Ön Yüz' seçeneğini tercih edebilirsiniz.

Ardından, kodu 'Etkin' hale getirmek için sağ üst köşedeki düğmeyi açın ve 'Kod Parçasını Kaydet'e tıklayın.

Tariflere Atlama Düğmesini Biçimlendirmek İçin Kod Parçacığı Ekleyin

Şimdi çağrı düğmenizi biçimlendirmek için özel CSS kodu ekleyeceğiz. WPCode'da yeni bir özel kod parçacığı oluşturmak için adımları tekrarlayın ve ona 'Tarif Düğmesine Atlama Stilini Ayarla' gibi basit bir ad verin.

Kod Türü olarak 'CSS Parçacığı'nı seçin.

Şimdi, düğmemizi yeşil ve içindeki metni beyaz yapacak bir CSS kodu oluşturduk. Şöyle ki:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

Farklı renkler kullanmak isterseniz, yukarıdaki kodda bulunan hex kodlarını değiştirebilirsiniz.

Kodu ekledikten sonra, Ekleme bölümüne gidin ve Ekleme Yöntemi olarak 'Otomatik Ekle'yi seçin. Ardından, Konum olarak 'Site Geneli Üstbilgi'yi seçin.

Sonra yapmanız gereken tek şey kod parçacığını etkinleştirmek ve 'Kod Parçacığını Kaydet'e tıklamak.

Tarif Blog Yazılarınıza #recipe Bağlantısı Ekleyin

İki kod parçasını etkinleştirmiş olsanız bile, WordPress blog yazılarınızın tarif bölümüne bir #recipe çapası eklemediğiniz sürece atlama düğmesi görünmeyecektir. Şimdi yapacağımız da bu.

İlk olarak, yeni bir tarif blog yazısı oluşturun veya blok düzenleyicide mevcut birini açın.

Şimdi, örneğimizde, tarif bölümünü blog yazımızın bir parçası olarak belirtmek için bir başlık etiketi (H2) kullanıyoruz. Okuyucuların yazınızı okurken bulmalarını kolaylaştırmak için sizin de aynısını yapmanızı öneririz. Arama motorları da blog içeriğinizin düzenli bir yapıya sahip olmasını takdir eder.

Tarif bölümünüzün Başlık bloğuna tıklayın. Ardından, Blok ayarları kenar çubuğunda 'Gelişmiş' menüsünü açın. Sonra, HTML Bağlantı alanına 'recipe' yazın. Tüm küçük harfleri kullandığınızdan emin olun.

Bu, atlama düğmesi için bir bağlantı bağlantısı olarak hizmet verecektir.

Bu yapıldıktan sonra, 'Yayınla' veya 'Güncelle'ye tıklayın.

Web sitenizi mobilde veya masaüstünde önizlerseniz, gönderi başlığından sonra blog içeriğinizin üstünde bir Tarif Atla düğmesi görmelisiniz.

Yemek Blogunuzun Kullanıcı Deneyimini İyileştirmek İçin Bonus İpuçları

Tarif'e Git düğmesinin ötesinde, yemek blogunuzu daha kullanıcı dostu hale getirmek için kullanabileceğiniz başka tasarım öğeleri de vardır. İşte yüksek etkili birkaç iyileştirme:

WordPress Düğmeleri Hakkında Sıkça Sorulan Sorular

Okuyucularımızın WordPress'e düğme ekleme hakkında sıkça sorduğu bazı sorular şunlardır:

WordPress'te düğmelere nasıl bağlantı eklerim?

Bir bağlantı eklemek için WordPress düzenleyicisindeki Düğmeler bloğunu seçin. Düğmenin üzerinde görünen araç çubuğundaki bağlantı simgesine tıklayın, ardından hedef URL'nizi alana yapıştırın.

WordPress'te "Yukarı Git" düğmesini nasıl eklerim?

En kolay yöntem WPFront Scroll Top gibi bir eklenti yüklemektir. Etkinleştirildikten sonra, kullanıcı aşağı kaydırdığında görünen ve sayfanın üstüne hızlıca dönmelerini sağlayan bir düğme otomatik olarak ekler.

Başlamak için, WordPress'te jQuery kullanarak yukarı kaydırma efekti ekleme eğitimimize bakın: WordPress'te yukarı kaydırma efekti ekleme.

Bir WordPress bloguna takip düğmesi nasıl eklerim?

Blok düzenleyicide yerleşik Sosyal Simgeler bloğunu kullanarak takip düğmeleri ekleyebilirsiniz. Sadece "Sosyal Simgeler"i arayın, bloğu ekleyin ve hangi sosyal medya platformlarına bağlanmak istediğinizi seçmek için "artı" simgesine tıklayın.

Daha fazla bilgi için, WordPress'te yazarlar için Facebook takip düğmesi ekleme kılavuzumuza göz atın.

WordPress'e nasıl açılır pencere eklerim?

Açılır pencere eklemek için OptinMonster kullanmanızı öneririz. Bu araç, sürükle ve bırak oluşturucu kullanarak özel açılır pencereler tasarlamanıza ve bir kullanıcı sitenizden ayrılmak üzereyken tam olarak ne zaman görüneceklerini kontrol etmenize olanak tanır.

Umarım bu öğretici, WordPress'e nasıl Tarif Atla düğmesi ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca etkili bir WordPress web sitesi için temel tasarım öğeleri ve WordPress'te çevrimiçi yemek siparişi verme hakkında rehberimize de göz atmak isteyebilirsiniz.

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.