Divi'de Tahmini Okuma Süresi ve Kelime Sayısı Nasıl Görüntülenir (ReadTime.js ile)
Yayınlanan: 2020-10-27Bazı insanlar (ben dahil) bir blog yazısının uzunluğuna veya daha da önemlisi okumanın ne kadar zaman alacağına biraz kafa yormayı takdir ediyor. Bunu yapmanın harika bir yolu, blog gönderilerinizin en üstünde tahmini bir okuma süresi ve/veya kelime sayısı göstermektir. Medium.com gibi popüler bloglarda bu özelliği görürsünüz. Müdahaleci olması veya kullanıcının içerikle ilgilenmesini engellemesi gerekmez. Ancak, web'de içerik yutmak için çok zaman harcayanlar için güzel bir UX artışı sağlayabilir.
Bu eğitimde, Divi blog gönderilerinize tahmini bir okuma süresi ve kelime sayısı eklemenin hızlı ve kolay bir yolunu göstereceğiz. Kullanacağımız readTime.js kitaplığı basit, hafif ve Divi sitenize uygulanması kolaydır. Ayrıca, okuma süresinin ve kelime sayımı yerleşiminin stili ve yerleşimi üzerinde daha fazla kontrole sahip olabilirsiniz. Bütün bunlar başka bir eklentiye güvenmek zorunda kalmadan!
Divi Tema Oluşturucu'yu kullanarak bir blog yazısı şablonuna tahmini okuma süresini ve kelime sayısını ekleyeceğiz. Bu nedenle, şablona eklendiğinde, okuma süresi ve kelime sayısı sitenizdeki tüm gönderilerinizde güzel bir şekilde görüntülenecektir.
Başlayalım.
Gizlice Bakış
Divi'deki bir gönderi şablonuna ekleyeceğimiz okuma süresine ve kelime sayısına hızlı bir bakış.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Şablon Nasıl Yüklenir
Divi Theme Builder'a gidin
Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.
Web Sitesi Şablonu Yükle
Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.
İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.
Divi Tema Oluşturucu Değişikliklerini Kaydet
Dosyayı yükledikten sonra, Tüm Gönderiler'e atanmış yeni bir vücut alanına sahip yeni bir şablon göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.
Bu şeyi sıfırdan inşa etmeyi öğrenebilmemiz için öğreticiye geçelim, olur mu?
Divi'de Tahmini Okuma Süresi ve Kelime Sayısı Nasıl Görüntülenir
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Divi Tema Oluşturucu'ya gidin
- Sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.
- Taşınabilirlik açılır penceresinde İçe Aktar sekmesini seçin.
- Divi Business Consultant Gönderi Şablon Dosyasını Seçin/İçe Aktarın (buradan indirin).
- İçe Aktar Düğmesine tıklayın
Bundan sonra, düzenlemeye hazır bir gönderi şablonunuz olacak.
Yazı Şablonuna Metin/HTML Ekleme
Gönderi şablonunu düzenlemek için özel gövde alanındaki düzenle simgesini tıklayın.
Yazı düzeni düzenleyicisinde, düzenin üst bölümündeki yazı meta verilerini içeren satırın altına yeni bir tek sütunlu satır ekleyin.
Tamamlandığında, yeni satıra bir metin modülü ekleyin.
Metin modülü ayarlarında, aşağıdaki HTML'yi gövdenin içine yapıştırın (metin sekmesini kullanarak):
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>
Hatırlanması gereken en önemli şey, "eta" sınıfına sahip span etiketinin sonunda gönderi içeriğinin tahmini okuma süresini göstermesidir. Ve "word-count" sınıfına sahip span etiketi, gönderi içeriğinin kelime sayısını gösterecektir.
Okuma Süresi Metnini Şekillendirme
Tasarım sekmesi altında, metin stillerini aşağıdaki gibi güncelleyin:
- Metin Yazı Tipi: Poppins
- Metin Yazı Tipi Ağırlığı: Kalın
- Metin Yazı Tipi Stili: TT
- Metin Metin Rengi: #ffffff
- Metin Metin Boyutu: 14px (masaüstü), 12px (telefon)
- Metin Harf Aralığı: 2px
- Metin Hizalama: orta
Satırı Şekillendirmek
Metin ayarları tamamlandıktan sonra, satırın ayarlarını açın ve aşağıdakileri güncelleyin:
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: %100
Gelişmiş Sekmesinde konumu güncelleyin:
- Pozisyon: Mutlak
- Konum: sol alt
Kodu Ekleme
Tahmini okuma süresini ve kelime sayısını oluşturmak için gerekli kodu eklemek için önce metin modülünün altına bir kod modülü ekleyin.
Yazı içeriği alanımızı, okuma zamanı hedef sınıfı eta'yı ve kelime sayımı hedef sınıfı kelime sayımını hedeflemek için bazı özel kodlarla readtime.js kitaplığını kullanacağız.
Kodu komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki kodu kod bloğuna yapıştırın:
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );
Kod Hakkında
Hedef sınıf et_pb_post_content , Divi'de yazı içeriğini tutan yazı içerik alanını belirlemek için kullanılan şeydir, böylece kod saymak ve okuma süresini tahmin etmek için ihtiyaç duyduğu metni bilir. Örneğin, gövdeyi hedef olarak kullandıysanız, kod yalnızca makalenin içeriğini değil, tüm sayfadaki tüm içeriği/metni hesaplayacaktır.
readTimeTarget , metin modülünde span etiketine eklediğimiz sınıfa karşılık gelen eta sınıfına atanır. Ve wordCountTarget , text modülündeki diğer span etiketine eklediğimiz word-count sınıfına atanır.
Ayrıca, olması gerektiğini düşündüğünüzü temsil etmek için dakika başına kelime değerini (şu anda 275) güncellemekten çekinmeyin. Bu elbette görüntülenen okuma süresini etkileyecektir. Araştırdığım kadarıyla, ortalama bir yetişkin dakikada yaklaşık 300 kelime okur. Ayrıca dil değerini de her zaman güncelleyebilirsiniz. Örneğin, metnin Fransızca görüntülenmesini istiyorsanız, 'fr' yerine 'en'i değiştirebilirsiniz). Daha fazla bilgi için github'daki belgelere göz atabilirsiniz.
Şablon düzenini ve Tema Oluşturucuyu kaydedin.
Ardından Divi > Tema Seçenekleri > Entegrasyonlar'a gidin.
Ardından, komut dosyası etiketleriyle kitaplığı başlık alanına ekleyin:
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"
Böyle görünmeli…
Son sonuç
Artık tek yapmanız gereken sitenizdeki canlı bir blog gönderisini ziyaret ederek gönderi içeriğinin en üstünde tahmini okuma süresini ve kelime sayısını görmek.
Son düşünceler
Divi blog gönderilerinize bir gönderi tahmini okuma süresi ve kelime sayısı eklemek şaşırtıcı derecede kolaydır. Ayrıca, öğenin gönderi şablonunuzda nerede görüntülenmesini istediğinizi seçebilir ve yerleşik Divi tasarım ayarlarını kullanarak stil verebilirsiniz. Umarım, bu işe yarar!
Yorumlarda sizden haber bekliyorum.
Şerefe!