Divi Blog Yazılarınız için Okuma İlerleme Çubuğu Nasıl Oluşturulur (eklenti olmadan)

Blog gönderi şablonunuza bir Okuma İlerleme Çubuğu (veya kaydırma göstergesi) eklemek, bir kullanıcının belirli bir makale için okuma ilerlemesini göstermenin akıllı bir yoludur. Buradaki fikir, gönderinin üst kısmında, kullanıcının gönderi içeriğindeki kaydırma konumuyla doğrudan ilişkili olan sabit bir ilerleme çubuğu görüntülemektir. Kullanıcı makaleye ulaştığında ilerleme çubuğu dolmaya başlar. Kullanıcı makalenin sonuna ulaştığında ilerleme çubuğu %100 doludur.

Bu eğitimde, Divi blog gönderileri için, kullanıcının tüm sayfayı değil, asıl gönderi içeriğini ne zaman başlattığını ve bitirdiğini (kaydırarak) bilecek kadar akıllı bir okuma ilerleme çubuğunun nasıl oluşturulacağını göstereceğiz. Bu, okuma ilerlemesinin daha doğru bir göstergesi olacaktır.

Bu okuma ilerleme çubuğunu Divi'nin varsayılan blog gönderisi şablonuna veya Divi Tema Oluşturucu'yu kullanarak özel bir gönderi şablonuna nasıl ekleyeceğinizi göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış. İlerleme çubuğunun gönderi şablonunun üst kısmında nasıl sabitlendiğine dikkat edin. İlerleme çubuğu, kullanıcı asıl gönderi/makale içeriğine ulaştığında dolmaya başlar ve kullanıcı gönderi içeriğini bitirdiğinde sona erer.

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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Bölüm düzenini Divi Tema Oluşturucunuza aktarmak için Divi Tema Oluşturucu'ya gidin.

Taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm şablonu Divi Tema Oluşturucu'da görünecektir.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Hazır Şablonları İçe Aktarma

Bu eğitim için altıncı tema oluşturucu paketimizden birkaç hazır şablon kullanacağız. Bize çalışan bir global başlık verecek olan varsayılan web sitesi şablonunu içe aktaracağız ve burada yazı bilgisi çubuğunu ekleyeceğiz. Ve sonuçlarımızı canlı bir gönderide test etmek için blog gönderisi şablonunu içe aktaracağız.

ÖNEMLİ: Canlı bir siteyi karıştırmamak için bu şablonları bir test sitesine aktarmak en iyisidir.

Varsayılan Web Sitesi Şablonunu İçe Aktarın

İlk olarak Divi için Dördüncü ÜCRETSİZ Tema Oluşturucu Paketini indirmeniz gerekecek. Ardından dosyayı açın.

WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından sağ üstteki taşınabilirlik simgesine tıklayın. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin. Ardından, indirilen klasörden varsayılan web sitesi şablonu JSON dosyasını seçin ve içe aktar düğmesini tıklayın. Bu, genel bir üstbilgi ve altbilgi içeren yeni bir varsayılan web sitesi şablonunu içe aktaracaktır.

Gönderi Şablonunu İçe Aktar

Gönderi şablonunu aynı indirilen klasörden içe aktarmak için bu işlemi tekrarlayın. Taşınabilirlik açılır penceresini açın, gönderi şablonu json dosyasını seçin ve içe aktar düğmesini tıklayın. Bu size sitenizdeki tüm gönderilere atanmış bir gönderi şablonu ve varsayılan üstbilgi bir altbilgi verecektir.

Gönderi Şablonu Başlığında Global'i Devre Dışı Bırak

Dinamik gönderi bilgi çubuğumuzu gönderi şablonunun başlığına ekleyeceğiz. Ancak, gönderi bilgisi çubuğunun yalnızca gönderi şablonunda olmasını istediğimizden, çubuğumuzun site genelindeki tüm üstbilgilere eklenmemesi için üstbilgide global'i devre dışı bırakmamız gerekir. Global başlıkta globali devre dışı bırakmak için global başlıktaki ayar menüsünü açın ve "Genel Devre Dışı Bırak"ı seçin.

Şimdi başlık, “Custom Header” etiketli gri olmalıdır. Hazır olduğunda, başlık düzeni şablonunu düzenlemek için düzenle simgesini tıklayın.

Okuma İlerleme Çubuğunu Tasarlama

Bölüm ve Satır Ekleme

Başlık düzeni düzenleyicisinin içinde, başlığı tutan geçerli bölümün altında yeni bir normal bölüm oluşturun.

Ardından bölüme bir sütun ekleyin.

Bölüm Ayarları

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Satır Ayarları

Bölüm ayarları eklendikten sonra, satır için ayarları açın ve aşağıdakileri güncelleyin:

• arka plan rengi: #2b2b2b

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Bölücü Modül ile Kaydırma Çubuğu Oluşturma

İlerleme çubuğu, boş kapsayıcıyı/sırayı işgal etmek için kademeli olarak genişleyecektir. Bunu oluşturmak için özel arka plan rengine sahip bir ayırıcı modül kullanacağız. Bölücüyü, ilerleme çubuğunun nasıl görünmesini istediğimize göre tasarladıktan sonra, sayfayı aşağı kaydırırken bölücünün genişliğini doğru zamanda artırmak için gerekli kodu ekleyeceğiz.

Bölücü Modülü Ekle

Sütunun içinde yeni bir ayırıcı modül oluşturun.

Ardından ayırıcının görünürlüğünü devre dışı bırakın. Bunun yerine ilerleme çubuğu rengi olarak hizmet etmesi için bir arka plan rengi ekleyeceğiz. Aşağıdakileri güncelleyin:

• Bölücüyü Göster: HAYIR
• Arka Plan Gradyanı Sol Renk: #ff4349
• Arka Plan Gradyanı Sağ Renk: #fe7f47
• Gradyan Yönü: 90deg

Tasarım sekmesi altında ilerleme çubuğunun yüksekliğini güncelleyin:

• yükseklik: 20 piksel

Gelişmiş sekmesi altında, ayırıcıya aşağıdaki gibi özel bir CSS kimliği verin:

• CSS kimliği: kaydırma çubuğu

Daha sonra jQuery ile işlevsellik için kaydırma çubuğunu hedeflemek için buna ihtiyacımız olacak.

İlerleme Çubuğu Yüzde Sayacı Etiketi Ekle

İlerleme çubuğu yüzde sayacı etiketini eklemek için bölücü modülünün altına bir metin modülü ekleyin.

Ardından, gövde içeriğine aşağıdaki HTML'yi ekleyin:

<p>Reading Progress: <span></span></p>

span etiketleri burada önemlidir çünkü span etiketlerini yüzde sayacıyla doldurmak için jQuery kullanacağız.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Heebo
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 13px
• Metin Harf Aralığı: 3px
• Metin Satırı Yüksekliği: 1em

Ardından sol dolguyu biraz güncelleyin:

• dolgu: 10 piksel sol

Gelişmiş sekmesi altında, metin modülüne sütunun/satırın ortasında mutlak bir konum verin. Bu, belgede herhangi bir gerçek yer kaplamamasını ve çubuğun içinde dikey olarak ortalanmış halde kalmasını sağlayacaktır.

• Pozisyon: Mutlak
• Konum: Sol Merkez

Metin modülünden ayrılmadan önce, jQuery kodumuzla hedefleyebilmemiz için bir CSS Sınıfı ekleyin.

• CSS Sınıfı: et-ilerleme etiketi

jQuery Kodunu Ekleme

İlerleme çubuğuna ihtiyaç duyduğu büyülü işlevselliği vermek için gerekli jQuery kodunu eklememiz gerekiyor.

Bunu yapmak için metin modülünün altına yeni bir kod modülü ekleyin.

Ardından aşağıdaki kodu yapıştırın:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

Ve son adım için bölümümüze sabit bir pozisyon vermemiz gerekiyor. Bunu en sona sakladık çünkü bu, başlık içeriğini içeren yukarıdaki bölümlerin arkasındaki bölümü gizleyecektir.

İlerleme çubuğunu içeren bölüm için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Pozisyon: Sabit
• Z İndeksi: 998

Ardından, başlık içeriğini içeren üst bölümün ayarlarını açın ve Z İndeksini aşağıdaki gibi güncelleyin:

• Z İndeksi: 999

Şimdi ilerleme çubuğu, başlangıçta başlığın üst kısmının arkasına gizlenecektir. Ardından, kullanıcı gönderiyi aşağı kaydırdığında, sayfanın üst kısmında düzeltildiğini göreceksiniz.

Değişiklikleri kaydetmeyi unutmayın.

Gövde Alanı Şablonundaki İçerik Sonrası Modülüne seçicinin (CSS Sınıfı) eklenmesi.

Şu anda kod, gönderinin ana gönderi içeriği olarak “et-post-content” sınıfına sahip bir öğeyi tanımak için yazılmıştır.

Gönderinin gövdesi için özel bir şablon kullandığımızdan, kodumuzun kullanıcı gönderiyi aşağı kaydırırken okuma ilerlemesini yeterince hesaplayabilmesi için bu CSS Sınıfını şablonun Gönderi İçeriği Modülüne uygulamamız gerekiyor.

Bunu yapmak için, tema oluşturucuda gönderi şablonunun gövde alanı şablonunu açın.

İçerik Sonrası Modül Ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: içerik sonrası et

Ardından değişiklikleri kaydedin.

Bittiğinde, değişiklikleri düzene ve tema oluşturucuya kaydedin.

Son sonuç

Sonucu çalışırken görmek için web sitenizde canlı bir gönderi açın. Gönderinin yeterli içeriğe sahip olduğundan emin olun, böylece sayfayı aşağı kaydırmak için yer kalır.

Divi'nin varsayılan Gönderi Şablonunda Okuma İlerleme Çubuğunu kullanma (özel bir şablon değil)

Gönderi için özel bir gövde şablonu kullanmıyorsanız ve Divi'deki varsayılan blog gönderisi şablonuna okuma ilerleme çubuğunu eklemek istiyorsanız, tek yapmanız gereken koddaki tek bir CSS Sınıfını güncellemektir.

İlk olarak, gönderi şablonunun özel gövde alanının silindiğinden emin olun.

Ardından özel başlık şablonu düzenini açın ve bu kod satırını değiştirerek kod modülünü güncelleyin…

 var $postContent = $('.et-post-content');

Bununla…

 var $postContent = $('.entry-content');

“Giriş içeriği” sınıfı, blog gönderisinin içeriğini içeren varsayılan gönderi şablonundaki div'i hedefleyecektir (makalenin gerçek uzunluğunu çarpıtacak başlık, öne çıkan resim, yukarıdaki meta veriler ve aşağıdaki yorumlar hariç).

Sonuç

Varsayılan gönderi şablonunu kullanan bir gönderinin sonucu burada.

Son düşünceler

Bu okuma ilerleme çubuğu, tüm sayfa/belge boyunca kaydırmanın ilerlemesini gösteren tipik kaydırma göstergenizden çok daha akıllıdır. Bu çubuk, yalnızca kullanıcının okuyacağı asıl gönderi içeriğini hedefler ve okuma ilerlemesinin doğru bir tasvirini verir. Bu, uzun kopya ve yorumlara sahip olan bloglar için harika. Bu öğrencilere devam etmeleri için ekstra motivasyon sağlamak için çevrimiçi kurslar için de harika çalışırdım!

Yorumlarda sizden haber bekliyorum.

Şerefe!