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?

Yemek bloglarında gördüğümüz en yaygın şikayetlerden biri, okuyucuların gerçek tarife ulaşmadan önce uzun hikayeler ve reklamlar arasında gezinmek zorunda kalmasıdır.

Bu hikayeler SEO ve para kazanmaya yardımcı olurken ve birçok sadık okuyucu kişisel dokunuştan hoşlanırken, herkes her şeyi okuyacak zamana sahip değildir.

Düşünün: Biri markette malzemeleri kontrol ediyor olabilir veya mutfakta yemek yapmaya başlamaya hazır olabilir. Sadece tarif talimatlarına hızlı erişim istiyorlar.

İşte Tarif Atla düğmesinin kullanışlı olduğu yer burasıdır. Aceleci ziyaretçilere tarife hızlı bir şekilde atlama olanağı sunarken, blogunuzun hikaye anlatım stilini ve para kazanma stratejinizi korumanıza olanak tanır.

Bu şekilde, okuyucularınızın her iki türünü de mutlu etmiş olursunuz - içeriğinizin tadını çıkaranları ve sadece tarifi hızlıca görmek isteyenleri.

Bu düğmeyi eklemek sitenizdeki kullanıcı deneyimini iyileştirebilir ve ziyaretçileri daha uzun süre etkileşimde tutarak sayfa görüntülemelerinizi artırabilir ve hemen çıkma oranlarını düşürebilirsiniz, sayfa görüntülemelerinizi artırır ve hemen çıkma oranlarını düşürü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: Tarif Atla Düğmesi Eklemek İçin WP Tasty Kullanın (Önerilir)
• Yöntem 2: Tarife Atla Düğmesi Eklemek İçin Özel Kod Kullanın (Ücretsiz)
• Yemek Blogunuzun Kullanıcı Deneyimini İyileştirmek İçin Ek İpuçları

Yöntem 1: Tarif Atla Düğmesi Eklemek İçin WP Tasty Kullanın (Önerilir)

WordPress'e Tariflere Atla düğmesi eklemenin en kolay yolu WP Tasty 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.

Tarif Atla düğmesinin ötesinde, WP Tasty tariflerinizi yazdırılabilir hale getirmenize ve bunları 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.

WP Tasty'nin yetenekleri hakkında daha fazla bilgi edinmek ve blogunuza nasıl fayda sağlayabileceğini öğrenmek istiyorsanız, kapsamlı plugin 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.

WP Tasty'yi kullanmak için öncelikle ücretli bir plan satın almanız gerekir. WP Tasty All Access Bundle'ı veya tek başına WP Tasty 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.

Atla bağlantısını eklemek için WP Tasty kullanmanın bir faydası, yumuşak kaydırma efektidir. Bu şekilde okuyucular, sayfada herhangi bir sarsıcı atlama olmadan doğrudan tarif talimatlarına gidebilirler. Bu efekti elde etmek için özel kod kullanmak, özellikle yeni başlayanlar için biraz daha karmaşıktır.

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:

Tüm Tarif Gönderilerine Tariflere Atlama Düğmesini Otomatik Olarak Ekleme Kodu Ekleme

İlk kod parçacığı, tarif bölümü içeren tüm blog gönderilerine Otomatik Olarak Tarif Atla düğmesini ekleyecektir. Bunun için kod parçacığınıza ‘Otomatik Olarak Tarif Atla Düğmesi Ekle’ adını verebilirsiniz.

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ü olan has_recipe_anchor adlı fonksiyon, blog yazınızda 'recipe' olarak ayarlanmış bir bağlantıya sahip bir başlık etiketinin (H1'den H6'ya kadar) olup olmadığını kontrol eder. preg_match fonksiyonu, bu özel deseni metninizde arar.

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

Önceki adımdaki has_recipe_anchor fonksiyonu tarif demirbaşlı bir başlık bulduysa, 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.

Son kod satırı olan add_filter('the_content', 'add_jump_to_recipe_button');, temelde WordPress'e bir blog yazısının içeriğini aldığında add_jump_to_recipe_button fonksiyonunu çalıştırmasını söyler.

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.

Tarife Atla Düğmesini Stilize Etmek İçin Bir Kod 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 istiyorsanız, background-color (düğme rengi için), color (metin için) ve .jump-to-recipe-button:hover altındaki background-color (imleç düğmenin üzerine geldiğinde düğme rengi için) alanlarındaki 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 Alt Bilgisi'ni 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.

Devam edin ve 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 ve HTML Çapa alanına ‘recipe’ yazın.

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 Atla düğmesi dışında, yemek blogunuzdaki kullanıcı deneyimini geliştirmek için kullanabileceğiniz başka WordPress tasarım öğeleri de bulunmaktadır.

Örneğin, yazılarınızda metin vurgulamak, önemli bilgilere veya pişirme ipuçlarına dikkat çekmek için harika bir yol olabilir. Bu, belirli malzemeler, pişirme süreleri veya alternatif ikameler olabilir.

Dipnotlar başka kullanışlı bir araçtır. Ana talimatlarınızın akışını kesintiye uğratmadan belirli bir tarif adımını veya malzemesini ayrıntılandırmanıza olanak tanır.

Birçok kullanıcı tariflerinizi telefonlarından veya tabletlerinden inceleyecektir. Mobil uyumlu bir tasarım, içeriğinizin doğru biçimlendirilmesini ve çeşitli ekran boyutlarında kolay okunmasını sağlar.

Son olarak, breadcrumb navigasyon bağlantıları web sitesi navigasyonunu iyileştirebilir. Sayfanın üstündeki bu küçük bağlantılar, kullanıcılara web sitenizin hiyerarşisi içindeki mevcut konumlarını gösterir. Bu, önceki bölümlere geri dönmelerini veya ilgili tariflere göz atmalarını kolaylaştırı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.