WordPress Web Sitenize Ekmek Kırıntıları Nasıl Eklenir?

Yayınlanan: 2018-12-19

“Ekmek kırıntıları” terimi, (Hansel ve Gretel'in bize öğrettiği gibi) kişinin bir web sitesinin “ana sayfasına” (veya ana sayfasına) geri adımlarını izlemesine yardımcı olması amaçlanan etkili bir web sitesi gezinme aracını ifade eder. Ana sayfaya kadar giden bir satır içi bağlantılar (veya etiketler) sağlayarak, kullanıcıların mevcut sayfanın tüm site yapısına nasıl uyduğunu görmelerini sağlar.

ekmek kırıntıları wordpress

Ekmek kırıntıları ile Home Depot Ürün Sayfası

Ekmek kırıntıları aslında WordPress Web Siteniz için düşündüğünüzden daha önemlidir. Yalnızca kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda sitenize arama sıralamalarında bir artış sağlayabilirler. Google, bir web sitesindeki bu yapısal öğeyi sever ve ziyaretçiler, sayfalarınızdan birine organik olarak rastladıklarında (hemen çıkma oranınızı düşürürken) önemli gezinme yardımına sahip olurlar.

Web sitenize böyle entegre bir yerelleştirme sistemi eklemenin zor olacağını düşünürdünüz, ancak aslında bir eklenti kullanmak oldukça basittir. Aslında, Yoast SEO eklentisini kullanıyorsanız, avantajlı bir başlangıç ​​yapmış olursunuz, çünkü Yoast'ta ekmek kırıntıları işlevi zaten yerleşiktir! Ve Yoast aracılığıyla ekmek kırıntıları eklemek kesinlikle orada tercih edilen yöntemlerden biridir. Yoast SEO'nun yanı sıra, Breadcrumb NavXT eklentisi, son derece özelleştirilebilir ve ayrıca kendi Divi Temamızla iyi çalışan başka bir harika seçenektir.

Youtube Kanalımıza Abone Olun

Yoast Kullanarak WordPress Web Sitenize Ekmek Kırıntıları Nasıl Eklenir?

Yoast SEO kullanarak WordPress Web Sitenize ekmek kırıntıları eklemek için üç basit adımı tamamlamanız gerekir:

  • Yoast SEO Eklentisini Kurun ve Etkinleştirin
  • WordPress Temanıza Breadcrumbs kod parçacığını ekleme
  • Eklenti ayarlarında Breadcrumb'ları Yoast Breadcrumbs'ı etkinleştirin/yapılandırın

Yoast SEO Eklentisini Kurun ve Etkinleştirin

Yoast SEO eklentisini yüklemek için WordPress Kontrol Panelinize gidin ve Eklentiler > Yeni Ekle'ye gidin. Ardından “yoast” için WordPress deposunu arayın. Yoast SEO eklentisini gördüğünüzde yüklemek için tıklayın ve eklentiyi etkinleştirin.

ekmek kırıntıları wordpress

Breadcrumbs Kod Parçacığı'nı WordPress Alt Temanıza ekleyin

Ardından, WordPress tema dosyalarınıza kısa bir kod parçası eklememiz gerekiyor. Bu nedenle, henüz yapmadıysanız, bir alt tema oluşturmak iyi bir fikirdir. Bu örnek için, varsayılan bir TwentyNineteen WordPress Temasına ekmek kırıntıları kod parçacığını nasıl ekleyeceğinizi göstereceğim. Kodu herhangi bir tema dosyasına/şablona ekleyebilirsiniz, ancak çoğunlukla, onu single.php dosyanıza (tüm gönderilerde görünmesi için), page.php dosyasına (tüm sayfalarda görünmesi için) eklemek isteyeceksiniz. ) veya header.php dosyanıza (site genelinde göstermek için).

Bu örnek için, alt temamın header.php dosyasına ekmek kırıntıları kodunu ekleyeceğim. Ana temadan header.php dosyasını kopyaladığınızda, dosyayı istediğiniz bir kod düzenleyicide düzenlemek için açın.

Ardından header.php dosyasının en altına, Breadcrumbs işlevini etkinleştirmek için Yoast tarafından sağlanan aşağıdaki php snippet'ini ekleyin:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

ekmek kırıntıları wordpress

Bu, içerik haritalarını, içerik haritaları için ortak bir yerleşim olan tüm sayfaların başlığının altında görüntüler.

Eklenti ayarlarında Yoast Ekmek Kırıntılarını Etkinleştirin ve Yapılandırın

Kod parçacığını WordPress Child temanıza eklendikten sonra, yapmanız gereken tek şey Yoast SEO eklentisi ayarlarında Breadcrumbs'ı etkinleştirmek. Bunu yapmak için WordPress Panonuza gidin ve SEO > Arama Görünümü'ne gidin ve ardından Ekmek Kırıntıları sekmesine tıklayın. Ekmek kırıntıları ayarları altında, "etkin" seçeneğini değiştirerek kırıntıları etkinleştirdiğinizden emin olun. Ardından, kırıntı ayarlarını ihtiyaçlarınıza göre yapılandırabilirsiniz. Gönderiniz için içerik haritalarında gösterilecek bir sınıflandırma da seçebilirsiniz. Bu örnek için, gönderilerimi kırıntılardaki kategorileri gösterecek şekilde ayarlayacağım.

ekmek kırıntıları wordpress

Şimdi devam edelim ve TwentyNineteen temasında oluşturduğum gönderilerden birinde kırıntıların nasıl göründüğüne bakalım.

Ekmek kırıntılarını etkinleştirmeden önce gönderinin nasıl göründüğü aşağıda açıklanmıştır.

ekmek kırıntıları wordpress

Ekmek kırıntılarını etkinleştirdikten sonra gönderinin nasıl göründüğü aşağıda açıklanmıştır. Bu özel gönderi örneğinde, içerik haritaları ayarlarında seçtiğim içerik haritalarının kategori sınıflandırmasını size göstermek için bir kategori (“WordPress”) ve bir üst kategori (“Web Tasarımı”) vardır.

ekmek kırıntıları wordpress

Bazı harici CSS kullanarak kırıntılarınızın stilini ayarlamanız gerekebilir. Bunu yapmak için, php kodunda bulunan CSS kimliğini "ekmek kırıntılarını" kullanabilirsiniz. Alt Temanızın style.css dosyasını açın (veya Ek CSS altındaki Tema Özelleştirici'ye ekleyebilirsiniz) ve aşağıdakileri ekleyin:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

TwentyNineteen teması için, aşağıdaki özel CSS'yi ekleyerek başlık metnimin kenar boşluğunu eşleştirmek isteyebilirim:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

ekmek kırıntıları wordpress

Ekmek kırıntılarınızın belirli konumu üzerinde daha fazla kontrol istiyorsanız, aşağıdaki kısa kodu tek tek gönderiler veya sayfalar için de kullanabilirsiniz.

[wpseo_breadcrumb]

Breadcrumb NavXT Kullanarak WordPress Web Sitenize Breadcrumbs Ekleme

Herhangi bir nedenle Yoast SEO'yu kurmak istemiyorsanız veya başka bir basit seçenek arıyorsanız, Breadcrumb NavXT eklentisi mükemmel bir seçimdir.

Eklentiyi yüklemek için WordPress Kontrol Panelinize gidin ve Eklentiler > Yeni Ekle'ye gidin. Ardından WordPress deposunda “breadcrumb navxt” için arama yapın. Eklentiyi gördüğünüzde, yüklemek ve etkinleştirmek için tıklayın.

ekmek kırıntıları wordpress

İçerik haritalarını web sitenizde görüntülenecek şekilde çağırmak için, widget'lar sayfasında sağlanan yerleşik Breadcrumb NavXT widget'ını kullanabilirsiniz. Bu, widget'ı temanız tarafından sağlanan çeşitli widget alanlarına sürüklemenize olanak tanır. Bunu yapmak için WordPress Kontrol Panelinize gidin ve Görünüm > Pencere Öğeleri'ne gidin. Ardından, widget'ı widget alanına veya seçiminize sürükleyin ve widget ayarlarını güncelleyin.

ekmek kırıntıları wordpress

Bu örnekte, kenar çubuğumun üstündeki içerik haritalarını görüntülemek için Divi temasını kullanıyorum. İşte bir gönderide nasıl göründüğü.

ekmek kırıntıları wordpress

Yoast Breadcrumb örneğine benzer şekilde, alt temanıza gerekli kodu ekleyerek sitenize breadcrumb yolu da çağırabilirsiniz. İşte sağladıkları ve schema.org breadcrumblist uyumlu olan kod:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Bu örnek için Divi temasını kullandığım için, kodu Divi Child temamın Single.php dosyasına makale etiketinin hemen üstüne ekleyeceğim. Bu, tüm gönderilerimin en üstünde kırıntıları gösterecek.

ekmek kırıntıları wordpress

Kodu ekledikten sonra bir gönderinin nasıl göründüğü aşağıdadır.

ekmek kırıntıları wordpress

Eklenti ayarlarını kullanarak Breadcrumb'ları yapılandırma

Breadcrumb NavXT eklentisi, kırıntılarınızı yapılandırmak için bazı güçlü seçeneklere sahiptir. Farklı sınıflandırmalar ve çok daha fazlası için kırıntılarınızın tüm şablonunu özelleştirebilirsiniz. Ayarlar > Breadcrumb NavXT'ye giderek WordPress Kontrol Panelinizden bu ayarlara erişebilirsiniz.

ekmek kırıntıları wordpress

Ekmek kırıntılarını şekillendirme

Kırıntılara stil vermek istiyorsanız, kodda yer alan “breadcrumbs” adlı sınıfı hedefleyebilirsiniz.

Aşağıdaki CSS'yi alt temanızın style.css dosyasına veya tema özelleştirici ek CSS'sine eklemeniz yeterlidir:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Divi temasıyla içerik haritası widget'ını kullanmak istiyorsanız, Divi Builder'daki içerik haritasına stil eklemek için Divi'nin kenar çubuğu modülünü de kullanabilirsiniz.

Son düşünceler

Ekmek kırıntıları, hem kullanılabilirlik hem de SEO için bir web sitesinin önemli bir parçasıdır. Bu yüzden WordPress sitenize ekmek kırıntıları eklemeyi düşünüyorsanız, bu yazıda bahsedilen eklentilerin (Yoast SEO ve Breadcrumb NavXT) sağladığı yöntemlerle başlamanızı öneririm. Zaten emrinizde olduğundan, SEO eklentilerinden zaten yararlanıyorsanız, Yoast kırıntılarını kullanmak en mantıklısıdır. Bununla birlikte, Breadcrumb NavXT de son derece özelleştirilebilir bir seçenektir. Elbette, tema dosyalarınıza erişmeniz gerekebilir, ancak sonuçta süreç basit. Bir şey olursa, umarım bu, kendi WordPress sitenizde kırıntıları almanın acısını hafifletmeye yardımcı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!