WordPress Gönderilerine Okuma İlerleme Çubuğu Nasıl Eklenir (3 Kolay Yol)

Çevrimiçi uzun bir makale okurken ne kadarının kaldığını bilmediğiniz o hissi bilirsiniz? Okuma ilerleme çubuklarının WordPress ziyaretçileriniz için çözdüğü sorun budur.

Bu basit görsel göstergeler, okuyuculara bir makalenin ne kadarını tamamladıklarını tam olarak gösterir, bu da onları okumaya devam etmeye ve sayfanızda kalmaya teşvik edebilir. Belirgin bir bitiş noktası olan herhangi bir şeyi tamamlama tatminini aynı şekilde kullanır.

Şimdi, biz WPBeginner'da ilerleme çubukları kullanmıyoruz çünkü öğreticilerimiz taranabilir şekilde tasarlanmıştır. Çoğu insan baştan sona okumak yerine ihtiyaç duydukları bölüme doğrudan atlar.

Ancak daha uzun blog gönderileri, ayrıntılı kılavuzlar veya detaylı makaleler yayınlıyorsanız, okuma ilerleme çubuğu insanları meşgul tutmaya gerçekten yardımcı olabilir.

Bu kılavuzda, WordPress sitenize bir tane eklemenin üç farklı yolunu göstereceğiz, ister basit bir eklenti çözümü ister daha özelleştirilmiş bir şey isteyin.

When to Add a Reading Progress Bar to Your WordPress Blog Posts

Daha uzun blog gönderileri için okuma ilerleme çubuğu eklemek, ziyaretçileri WordPress web sitenizde kalmaya teşvik etmek için değerli bir araç olabilir.

Ancak her site için gerekli değillerdir. Deneyimlerimize göre, okuma ilerleme çubuklarının bu özel durumlarda en iyi şekilde çalıştığını bulduk:

• Uzun Makaleler: Detaylı kılavuzlar veya hikayeler yayınlıyorsanız, bir ilerleme çubuğu kullanıcıları sona kadar kaydırmaya teşvik eder.
• Doğrusal İçerik: Taranmak yerine baştan sona okunması gereken içerikler için mükemmeldirler.
• Etkileşimli Tasarım: Bir okuma ölçer, bir miktar etkileşim katar. Kullanıcı deneyimini net bir varış noktası olan bir yolculuk gibi hissettirir.

Bunu akılda tutarak, WordPress yazılarınıza kolayca bir okuma ilerleme çubuğu eklemenin yollarını görelim. Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Method 1: Design a Custom Theme With Reading Progress Indicators
• Yöntem 2: Ücretsiz Bir Eklenti ile Okuma İlerleme Çubuğu Ekleme
• Yöntem 3: Kod ile Okuma İlerleme Çubuğu Ekleme
• WordPress Blog Okuyucularınızı Etkileşimde Tutmak İçin Bonus İpuçları

Yöntem 1: Okuma İlerleme Göstergeleriyle Özel Bir Tema Tasarlayın

WordPress gönderilerine bir okuma ilerleme çubuğu eklemenin bir yolu, ilerleme çubuğu özelliğine sahip bir tema oluşturucu kullanmaktır. Bu şekilde, ilerleme çubuğu tasarımı temanızın geri kalanıyla sorunsuz bir şekilde bütünleşecek ve göze daha hoş görünecektir.

Bu yöntemin temanızı değiştirmeyi içereceğini unutmayın, bu nedenle temanızdan zaten memnunsanız ve değiştirmek istemiyorsanız bunu önermiyoruz. Durum buysa, bunun yerine yöntem 2 (eklenti) veya yöntem 3 (kod) kullanmalısınız.

Bu yöntem için Thrive Theme Builder kullanacağız. Okuma ilerleme çubuğuna sahip olmanın yanı sıra, Thrive Theme Builder, bloglardan kurumsal web sitelerine kadar çeşitli amaçlar için onlarca tema şablonuna sahiptir.

En iyisi de, sürükle ve bırak oluşturucunun kullanımı kolaydır, bu da onu tamamen yeni başlayanlar için harika kılar.

Platform hakkında daha fazla bilgiyi Thrive Themes incelememizde bulabilirsiniz.

Thrive Themes'in bir dezavantajı, ücretsiz bir sürümünün olmamasıdır. Bununla birlikte, ilk satın alımınızda %50'ye varan indirimden yararlanmak için Thrive Themes kupon kodumuzu kullanabilirsiniz.

Adım 1: Thrive Theme Builder'ı Yükleyin

İlk adım Thrive Theme Builder'ı kurmaktır. Bu eklentiye Thrive Themes web sitesindeki hesabınıza giriş yaparak erişebilirsiniz.

Ardından, Thrive Product Manager eklentisini indirip kurun. Daha fazla bilgi için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza göz atın: WordPress eklentisi nasıl kurulur.

Eklenti etkinleştirildikten sonra, WordPress yönetici alanınızda Ürün Yöneticisi 'ne tıklayın.

Ardından, WordPress web sitenizi Thrive Themes hesabınıza bağlamak için ‘Hesabıma giriş yap’ düğmesine tıklayın.

Bundan sonra, hesabınızdaki tüm mevcut Thrive Themes ürünlerinin bir listesini görmelisiniz.

Burada, ‘Thrive Architect‘ seçeneğini seçin ve ‘Ürün Yükle’ kutusunu işaretleyin.

Bu sayfa oluşturucu eklentisi, tema oluşturucu ile birlikte çalışır, bu yüzden onu etkinleştirmemiz gerekiyor.

Ardından, aşağı kaydırarak ‘Thrive Theme Builder’ bölümüne gidin ve ‘Tema Yükle’ kutucuğunu işaretleyin.

Şimdi, 'Seçili ürünleri yükle'ye tıklayın.

Bir sonraki sayfada, Thrive Ürün Yöneticisi'nin Thrive Tema Oluşturucu'yu kurup etkinleştirdiğini göreceksiniz.

İşlem bittiğinde, 'Tema Oluşturucu Kontrol Paneline Git' seçeneğine tıklayın.

Şimdi, bir WordPress teması seçin.

Hangisini seçeceğinizden emin değilseniz, temanın ilk önce nasıl göründüğünü görmek için 'Önizleme' düğmesine tıklayın. Ardından, kararınızı verdikten sonra 'Seç'e tıklayın.

Şimdi Tema Oluşturucu Sihirbazına ulaşmalısınız.

Bu kurulum sihirbazı, kendi logonuzu yükleme, temanıza eklemek için marka renkleri seçme ve temanızın farklı yapılarını ve şablonlarını ayarlama konusunda size rehberlik edece.

Bir sonraki adıma geçmeden önce kurulum sihirbazını tamamlayın.

Adım 2: Tek Gönderi Şablonunuza Okuma İlerleme Çubuğu Ekleme

Temanız ayarlandıktan sonra, şimdi tema şablonunuza bir okuma ilerleme çubuğu ekleyelim. Yalnızca WordPress gönderilerinde okuma ölçer çubuğunu görüntülemek istediğimiz için, yalnızca tek gönderi şablonunu düzenlememiz gerekecek.

Bunu yapmak için Thrive Theme Builder'daki ‘Şablonlar’ sekmesine geçin. Ardından ‘Varsayılan Gönderi’ şablonunu bulun ve ‘Düzenle’ye tıklayın.

Şu anda tema oluşturucunun içinde olmalısınız. Şablonu düzenlemek için sol bir kenar çubuğu, şablonun kendisinin bir önizlemesi ve daha fazla blok eklemek veya şablonun stilini değiştirmek için sağ tarafta küçük bir araç çubuğu bulunmalıdır.

Okuma çubuğunu eklemek için sol kenar çubuğunu aşağı kaydırın ve ‘Okuma ilerleme göstergesi’ ayarını bulun. Etkinleştirmek için geçiş düğmesine tıklamanız yeterlidir.

İlerleme çubuğunu ekledikten sonra, onu düzenlemeniz için bazı ek ayarlar olmalıdır.

İlk olarak, ilerleme çubuğunu başlığın altına veya görünüm alanının üstüne (başlığın hemen üstüne) eklemeyi seçebilirsiniz. İlk seçeneği tercih ederseniz, başlığın yapışkan olarak ayarlandığından emin olmanız gerekir, bunu daha sonra nasıl yapacağınızı göstereceğiz.

Ardından, ilerleme çubuğunun rengini değiştirebilirsiniz. Bunu yapmak için renk seçiciye tıklamanız yeterlidir.

Şimdi, tema renklerinden birini seçebilir veya temanızın önceden tanımlanmış renk şeması olan birini seçebilirsiniz. Veya, temanızın bir parçası olmayan tamamen farklı bir renk seçmek için ‘Tema renginden bağlantıyı kaldır’ı tıklayabilirsiniz.

'Tema renginden bağlantıyı kaldır' seçeneğini seçerseniz, rengin opaklığını da ayarlayabilirsiniz.

Bu şekilde, ilerleme çubuğunun arka planına karşı ne kadar opak göründüğünü ayarlayabilirsiniz. Bununla birlikte, ilerleme çubuğunun rengini kullanıcıların okumasını engellemeyecek kadar canlı yapmamak en iyisidir.

Renkten memnun kaldığınızda, 'Uygula'ya tıklamanız yeterlidir.

Son olarak, ilerleme çubuğunun yüksekliğini ayarlayabilirsiniz.

Tema oluşturucu, çubuğu 10 piksele kadar yeniden boyutlandırmanıza olanak tanır. Bu, ilerleme çubuğunun çok büyük görünmemesini sağlar. Bunu göz önünde bulundurarak, ilerleme çubuğunun net bir şekilde görünmesi için 5 ile 10 arasında bir boyut seçmenizi öneririz.

Çubuğun görünümünden memnun kaldığınızda, değişikliklerinizi kaydetmek için ‘Çalışmayı Kaydet’e tıklayın.

Adım 3: Üst Bilginizi Sabitleyin (İsteğe Bağlı)

Okuma ilerleme çubuğunuzu başlığın altında göstermeyi seçerseniz, bu adımı izlemeniz gerekecektir. Aksi takdirde, bu adımı atlayabilirsiniz.

Öncelikle sol kenar çubuğunu yukarı kaydırın ve 'Üstbilgi'ye tıklayın.

Her kategori için özel başlık, altbilgi veya kenar çubuğu eklemeye yönelik farklı bir ayar kümesi başlığı özelleştirmek için şimdi kenar çubuğunda görünmelidir.

İleri gidin ve Başlık Bölümü'ne doğru aşağı kaydırın ve ‘Düzenle’ye tıklayın.

Şimdi Kaydırma Davranışı sekmesini açın.

Ardından, ‘Yapışkan’ seçeneğini seçmeniz gerekir. Temanıza bağlı olarak, ilerleme çubuğunun görünmesi için ekranın üstünden uzaklığı 1 piksele değiştirmeniz de gerekebilir.

You can leave the rest of the settings as they are and click ‘Done’ at the bottom.

Adım 4: Okuma Süresi Göstergesi Ekleme (İsteğe Bağlı)

Thrive Theme Builder ile yapabileceğiniz bir diğer şey de, bir gönderiyi baştan sona okumak için tahmini okuma süresini göstermektir. Bu, kullanıcıların bir makaleyi okumanın ne kadar süreceğini görmelerine yardımcı olur ve mevcut zamanlarına uygun içeriği seçmelerini sağlar.

İlk olarak, gönderi meta verilerinizi gösteren blok'a tıklayın.

Bu, tek gönderi şablonunuzun, blog yazısının yazarını, kategorilerini, etiketlerini ve benzeri bilgileri görüntüleyen kısmıdır.

Ardından, araç çubuğundaki ‘Dinamik metin‘ simgesine tıklayın.

Burada, ilk açılır menüde 'İçerik' ve ikincisinde 'Kalan okuma süresi (dakika olarak)' seçmelisiniz.

Bundan sonra, 'Ekle'ye tıklayın.

Artık gönderi meta bölümünde '0 dakika kaldı' yazan yeni bir metin görmelisiniz. Bu metni istediğiniz gibi ayarlayabilirsiniz.

Bizim durumumuzda, ‘kalan’ kelimesini kaldırmaya karar verdik.

İşiniz bittiğinde, ‘Çalışmayı Kaydet’e tıklamayı unutmayın.

Adım 5: Okuma İlerleme Göstergelerinizi Önizleyin

Artık ilerleme çubuğu ayarlarınızı yapılandırdığınıza göre, çubuğun çalışırken görünmesi için blog yazınızı ziyaret edebilirsiniz.

Sitenizde çubuğu canlı olarak görmekten ziyade bir önizleme yapmak istiyorsanız, alttaki ‘Önizleme’ düğmesine tıklayabilirsiniz. Thrive Theme Builder, web sitenizi masaüstü, tablet ve mobil cihazlarda önizlemenizi sağlar.

Gerekli olduğu kadar çok değişiklik yapmaktan çekinmeyin.

Okuma ilerleme çubuğumuz şöyle görünüyor:

Yöntem 2: Ücretsiz Bir Eklenti ile Okuma İlerleme Çubuğu Ekleme

WordPress gönderilerinize ücretsiz olarak basit bir okuma ilerleme çubuğu eklemek istiyorsanız, Catch Scroll Progress Bar eklentisini kullanabilirsiniz.

Bu okuma ilerleme çubuğu eklentisi, sayfalarınızda ve gönderilerinizde otomatik olarak bir okuma ölçer gösterecektir ve bunu tercihlerinize göre kolayca özelleştirebilirsiniz.

Öncelikle eklentiyi WordPress yönetici alanınıza kurun. Daha fazla bilgi için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuzu okuyun: WordPress eklentisi nasıl kurulur.

İşlem tamamlandıktan sonra, WordPress kontrol panelinizde Catch Scroll Progress Bar'a gidin. Şimdi kurulumu yapılacak bazı ilerleme çubuğu ayarları göreceksiniz.

Bu eklenti ile ilerleme çubuğunun konumunu üstten alta değiştirebilirsiniz. Bununla birlikte, normal üst konumu tercih ediyorsanız olduğu gibi bırakabilirsiniz.

Özelleştirebileceğiniz bir diğer şey arka plan rengi ve ön plan rengidir.

Arka plan rengi, kaydırmadan önceki boş çubuğun rengidir. Bu arada, ön plan rengi, okuyucu sayfayı aşağı kaydırdıkça ilerlemeyi göstermek için çubuğu doldurur.

Sonra, arka plan ve ön plan renklerinin şeffaflığını kontrol eden opaklıktır. Aralık 0 ile 1 arasındadır, 1 opak ve 0 şeffaf veya görünmezdir.

Beğendiğiniz opaklık seviyesini bulana kadar sayılarla oynamaktan çekinmeyin.

Ardından, ilerleme çubuğunun yüksekliğini ve kenar yarıçapını ayarlayabilirsiniz.

Yükseklik için, en iyi sayının 1 ile 8 arasında olduğunu, ancak bundan fazla olmadığını bulduk. Aksi takdirde, ilerleme çubuğu çok büyük görünebilir.

Kenarlık yarıçapı, ilerleme çubuğunuzun köşelerinin ne kadar yuvarlak görüneceğini kontrol eder. Eğer bu görünümden hoşlanmazsanız, ‘0’ girebilirsiniz.

Şimdi, bu eklenti aynı zamanda ilerleme çubuğunun hangi şablonlarda görüntüleneceğine karar vermenize olanak tanır: ana sayfanızda, blog sayfanızda, arşivlerde ve kategorilerde ve/veya tek gönderilerde veya sayfalarda.

Genellikle, yalnızca WordPress blog yazılarınıza bir okuma ilerleme çubuğu eklemeniz gerekir. Bu durumda, şablon koşul ayarlarında yalnızca 'Tek sayfa/gönderi'yi seçtik.

İlerleme çubuğunun yalnızca blog gönderilerinde görünmesini istediğimiz için, 'İlerleme çubuğunun uygulanacağı Gönderi türünü seçin' seçeneğindeki 'Gönderiler' seçeneğini de kontrol ettik.

Bununla birlikte, web sitenize en uygun koşulları kontrol etmekten çekinmeyin.

İlerleme çubuğu ayarlarınızdan memnun kaldığınızda, ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

Şimdi, blog yazınızı mobilde veya masaüstünde önizlerseniz, bir ilerleme çubuğu görmelisiniz.

Yöntem 3: Kod ile Okuma İlerleme Çubuğu Ekleme

WordPress sitenize bir okuma ilerleme çubuğu eklemek için özel kod da kullanabilirsiniz.

Genellikle, öğreticiler kodunuzu doğrudan temanızın functions.php dosyasına eklemenizi isteyecektir. Ancak, bunu yapmanızı önermiyoruz çünkü en ufak bir hata sitenizi bozabilir.

Bunun yerine, WPCode eklentisini kullanmanızı öneririz. Herhangi bir çekirdek WordPress dosyasını düzenlemeye gerek kalmadan, özel kodu WordPress'e eklemenin en kolay ve en güvenli yoludur.

WPCode'u kapsamlı bir şekilde test ettik ve güvenilir ve yeni başlayanlar için uygun bir çözüm olduğunu bulduk.

Sitenize sadece birkaç tıklamayla ekleyebileceğiniz, kullanıma hazır kod parçacıklarından oluşan yerleşik bir kitaplığa sahiptir; okuma ilerleme çubuğu için de bir tane içerir. Özellikleri ve neden önerdiğimiz hakkında daha fazla bilgi edinmek için tam WPCode incelememize göz atabilirsiniz.

Başlamak için ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız olursa, WordPress eklentisinin nasıl kurulacağına ilişkin eğitimimize bakın.

Eklenti etkinleştirildikten sonra, WordPress kontrol panelinden Kod Parçacıkları » Kitaplık'a gidin.

Oradan, kitaplıkta 'Scroll Progress Bar'ı arayın, üzerine gelin ve 'Snippet kullan' düğmesine tıklayın.

WPCode daha sonra kodu sizin için otomatik olarak ekleyecektir.

Eklenti ayrıca arka planda sizin için doğru 'Otomatik Ekle' yöntemini otomatik olarak seçecektir.

Bundan sonra yapmanız gereken tek şey anahtarı Pasif'ten Aktif'e getirmektir.

Ardından, 'Güncelle' düğmesine tıklayın.

Şimdi web sitenizde bir blog yazısı görüntüleyebilirsiniz.

Basit bir ilerleme çubuğu şimdi şöyle görünmelidir:

WordPress Blog Okuyucularınızı Etkileşimde Tutmak İçin Bonus İpuçları

Gelişigüzel ziyaretçileri sadık okuyuculara dönüştürmek ister misiniz? Sizi ele aldık!

Check out these expert WordPress tutorials packed with tips to keep your audience hooked:

• İçeriğinizi görsel olarak ilgi çekici hale getirmek için her WordPress gönderisini farklı şekilde biçimlendirin.
• Metninizi bölmek ve okuyucuları içeriğinizde yönlendirmek için özel şekil ayırıcıları oluşturun.
• Kişiliğinizi ve blogunuza biraz eğlence katmak için emojiler ekleyin.
• Geri dönen ziyaretçiler için yeni gönderileri vurgulayın ve daha fazlası için geri gelmelerini sağlayın.
• WordPress yazılarınızdaki metinleri vurgulayın ve okuyucularınız için önemli noktaları vurgulayın.
• Araştırmanızı sergilemek için blog yazılarınıza basit ve zarif dipnotlar ekleyin.
• WordPress sitenizde dönen referansları göstererek ziyaretçilerinizi etkileyin.
• WordPress sitenize bir yazı tipi boyutu değiştirici ekleyerek erişilebilirliğini sağlayın.

Bu makalenin WordPress'te okuma ilerleme çubukları eklemenize yardımcı olduğunu umuyoruz. Ayrıca bir WordPress sitesini nasıl düzenleyeceğinize dair tam rehberimize ve web sitesi tasarım grafikleri için en iyi Canva alternatiflerine 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.