WordPress Gönderilerinize Bir İlerleme Çubuğu Nasıl Eklenir (Kolay Yol)

Uzun biçimli içerik SEO için ve okuyucularınıza değer sağlamak için harikadır, ancak küçük bir sorun var: insanlar neye bulaştıklarını bilmek isterler.

Biri 3.000 kelimelik bir öğreticiye indiğinde, taahhüdünü baştan anlamak ister. İlerleme çubukları, okuyuculara içeriğinizde tam olarak nerede olduklarını göstererek bunu güzel bir şekilde çözer.

Kursun ne kadarını kullanıcıların tamamladığını göstermek için WPBeginner video üyeliği sitemizde bunları kullanıyoruz. Bu sayede öğrenciler öğrenme ilerlemelerini kolayca takip edebilir ve eğitimlerini tamamlamak için motive kalabilirler.

En iyi yanı? WordPress sitenize ilerleme çubukları eklemek için herhangi bir kodlama becerisine veya pahalı eklentilere ihtiyacınız yok. Bu kılavuzda, bunları adım adım nasıl oluşturacağınızı tam olarak göstereceğiz.

WordPress Gönderilerine İlerleme Çubuğu Ne Zaman Eklenir

WordPress blog yazılarınıza bir ilerleme çubuğu eklemenin, yazılarınızı daha etkili hale getirebileceği çeşitli senaryolar vardır.

Örneğin, ilerleme çubukları proje tamamlama durumunu göstermek için mükemmeldir.

Uzun vadeli projeleri belgeleyen bir blog çalıştırıyorsanız, ilerleme çubukları eklemek okuyuculara ne kadar ilerlediğiniz hakkında hızlı bir görsel güncelleme sağlayabilir.

Video üyelik web sitemizde de ilerleme çubukları kullandık.

Bu, kullanıcılarımızın kursu ne kadar tamamladıklarını görmelerine yardımcı olmak içindir.

WordPress sitenizdeki bağış kampanyaları da ilerleme çubuklarından büyük ölçüde faydalanabilir. Hedefinize ne kadar yaklaştığınızın anında görsel bir temsilini sunarlar, bu da daha fazla bağışı teşvik edebilir.

Eğitim içeriği için ilerleme çubukları, öğrenme dönüm noktalarını veya farklı konuların karmaşıklığını gösterebilir. Bu, okuyucuların blog yazılarınızda ele aldığınız çeşitli konuların zorluk seviyesini görmelerine yardımcı olabilir.

Web siteniz fitness veya sağlık konularına odaklanıyorsa, ilerleme çubukları egzersiz yoğunluğu seviyelerini, beceri çubuğunu, besin bilgilerini veya sağlık hedeflerine doğru ilerlemeyi göstermek için kullanılabilir.

Bunun dışında, istatistikler veya anket sonuçları hakkındaki gönderilere bir ilerleme çubuğu eklemek, verileri daha sindirilebilir ve ilgi çekici hale getirebilir. Yüzdeleri listelemek yerine, renkli ilerleme çubuklarıyla verileri görsel olarak temsil edebilirsiniz.

Bunu göz önünde bulundurarak, WordPress web sitenize bir ilerleme çubuğu eklemenin 2 kolay yolunu bulduk. Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Yöntem 1: Sayfa Oluşturucu ile İlerleme Çubuğu Ekleme (Daha Özelleştirilebilir)
• Yöntem 2: Ücretsiz Bir İlerleme Çubuğu Eklentisi Kullanın (Hızlı ve Kolay)
• Frequently Asked Questions: Adding Progress Bars in WordPress

Yöntem 1: Sayfa Oluşturucu ile İlerleme Çubuğu Ekleme (Daha Özelleştirilebilir)

WordPress sitenize bir ilerleme çubuğu eklemenin etkili bir yolu, yerleşik bir ilerleme çubuğu özelliğine sahip bir sayfa oluşturucu kullanmaktır. Bu yaklaşım, ilerleme çubuğunuzun genel tema tasarımınızla sorunsuz bir şekilde entegre olmasını sağlar.

Bu yöntem için, birçok farklı tema şablonu ve kullanıcı dostu bir sürükle-bırak arayüzü sunan güçlü bir sayfa oluşturucu olan Thrive Architect kullanacağız. WordPress web sitesi tasarımını kolayca özelleştirmek isteyen hem yeni başlayanlar hem de deneyimli kullanıcılar için mükemmel bir seçimdir.

Ancak, bu yöntemin temanızı değiştirmenizi içerdiğini unutmayın. Mevcut temanızdan memnunsanız ve geçiş yapmak istemiyorsanız, bunun yerine ikinci yöntemimizi tercih edebilirsiniz.

Ayrıca, Thrive Architect'in ücretsiz sürümü yoktur. Bununla birlikte, ilk satın alımınızda %50'ye varan indirimden yararlanmak için Thrive Themes kupon kodumuzu kullanabilirsiniz.

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

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

Başlamak için Thrive Architect'i kurmanız gerekecek. Thrive Themes hesabınıza giriş yaparak ve Thrive Product Manager eklentisini indirerek başlayın.

Bundan sonra, Thrive Product Manager eklentisini indirip kurun. Adım adım talimatlar için WordPress eklentisi nasıl kurulur hakkındaki başlangıç kılavuzumuza göz atabilirsiniz.

Bu aşamada, WordPress yönetici alanınızda Ürün Yöneticisi 'ne tıklayın.

Bunu yaptıktan sonra, WordPress sitenizi Thrive Themes hesabınıza bağlamak için 'Hesabıma giriş yap' düğmesine tıklayabilirsiniz.

Artık hesabınızdaki mevcut tüm Thrive Themes ürünlerinin bir listesini görmelisiniz.

Sadece ‘Thrive Architect ‘seçin ve ‘Ürün Yükle’ kutucuğunu işaretleyin.

Bundan sonra, 'Thrive Theme Builder' bölümüne aşağı kaydırıp 'Tema Yükle' kutusunu işaretleyelim. Bunu yapmamız gerekiyor çünkü Thrive Architect, Thrive Tema ile en iyi şekilde çalışır.

Ardından, 'Seçili ürünleri yükle' düğmesine tıklayın.

Thrive Ürün Yöneticisinin Thrive Architect ve Thrive Theme Builder eklentilerini kurduğunu şimdi görmelisiniz.

Bittiğinde, sadece 'Tema Oluşturucu Kontrol Paneline Git'e tıklayın.

Bu noktada, yalnızca bir WordPress teması seçebilirsiniz.

Ayrıca, 'Seç' düğmesine tıklamadan önce temanın nasıl göründüğünü görmek için 'Önizleme' düğmesine tıklayabilirsiniz.

Temanız ayarlandıktan sonra, Tema Oluşturucu Sihirbazı'na ulaşmalısınız.

Bu başlangıç sihirbazı, kendi logonuzu yüklemenize, temanıza eklemek için marka renklerinizi seçmenize ve temanızın farklı yapılarını ve şablonlarını ayarlamanıza yardımcı olacaktır.

Bir sonraki adıma geçebilmek için sadece başlangıcı tamamlayın.

Adım 2: WordPress Yazılarınıza İlerleme Çubuğu Ekleme

Şimdi WordPress yazılarınıza bir ilerleme çubuğu ekleyelim. Başlamak için, yeni veya mevcut bir yazı için blok düzenleyiciyi açın.

Ardından, yeni gönderinizin başlığını oraya yazın. Sonrasında, ‘Thrive Architect'i Başlat’ düğmesine tıklayın.

Artık blog yazınızın içeriğini oluşturmak için Thrive Architect'i kullanabilirsiniz. Blok düzenleyiciye benzer şekilde çalışır.

Yani, sadece '+' düğmesine tıklayabilir ve istediğiniz herhangi bir öğeyi 'Metin eklemek veya sağ panelden öğeyi sürükleyip bırakmak için tıklayın' yazan bölüme sürükleyip bırakabilirsiniz.

İşte editörü kullanarak bir Metin bloğu eklememize bir örnek:

İlerleme çubuğu ekleme süreci hemen hemen aynıdır. Yine ‘+’ düğmesine tıklayın ve ‘İlerleme Çubuğu’ bloğunu bulun.

Bundan sonra, sadece yazınıza ekleyin.

Ardından, bir ilerleme çubuğu tasarımı seçmenizi isteyen bir açılır pencere görünecektir.

Seçenekler arasından onlarca var ve gerekirse daha sonra her zaman değiştirebilirsiniz.

Seçiminizi yaptıktan sonra ana düzenleyici arayüzüne döneceksiniz.

Adım 3: İlerleme Çubuğunu Özelleştirin

Bu aşamada, ilerleme çubuğu için özelleştirme seçenekleriyle sol panelde bir kenar çubuğu görmelisiniz.

Yapılandırılacak birçok ayar var ve ilerleme çubuğunu nasıl değiştireceğimizi göstermek için ana olanları ele alacağız.

Ana Seçenekler menüsünde, ilerleme çubuğu tasarımını basit bir tasarımdan Düğümlü bir tasarıma değiştirebilirsiniz. Düğümler, ilerlemede nerede olduğunuzu gösteren simgelerdir. Örnek olması açısından bu tasarım türünü seçtik.

İlerleme çubuğu etiketlerinin nereye yerleştirileceğini, çubuk yüksekliğini ve ilerleme çubuğunun mevcut seviyesini de değiştirebilirsiniz.

Paneli aşağı kaydırarak Düğüm etiketlerini değiştirme seçeneklerini bulacaksınız.

Bunları değiştirmek için etiketin yanındaki kurşun kalem 'Düzenle' simgesine tıklayın.

Şimdi yeni etiketinizin metnini girin.

Tamamlandığında, ‘Kaydet’ simgesine tıklayın.

Thrive'ın harika yanı, ilerleme çubuğunun diğer tüm bölümlerini istediğiniz gibi tasarlayabilmeniz için özelleştirmenize olanak tanımasıdır.

Bu özelleştirme seçeneklerini uygulamada görmek için, ilerleme çubuğundaki öğelerden birinin üzerine gelebilir ve üzerine tıklayabilirsiniz.

Burada, ilerleme çubuğunun tamamlanmamış ilerlemeyi gösteren kısmını seçtik.

Şimdi, sol kenar çubuğunda yeni bir seçenek kümesi göründü.

En üstteki 'Şu Anda Stil Veriliyor' açılır menüsüne tıklayarak, ilerleme etiketleri, simgeler, düğümler ve daha fazlası gibi çubuğun belirli bölümlerini değiştirebilirsiniz.

Neleri özelleştirebileceğinizi görmek için her bölümü keşfettiğinizden emin olun.

Bazı örneklere bakalım. Arka plan çubuğundaki şeker şeridi animasyonunu devre dışı bırakmak için, Şu anda stil verilen menüsünde 'Gruplandırılmış çizgiler arka planı'nı seçin.

Ardından, 'Şerit animasyonu' düğmesini kapatın.

İlerleme düğümlerinin içindeki simgeleri değiştirmek istiyorsanız, 'Şu Anda Stil Veriliyor' açılır menüsünde 'İlerleme simgeleri'ne geçin.

Bundan sonra, üstteki ‘Durum’ menüsünde ‘Normal’i seçin.

Artık ilerleme çubuğu simgelerini değiştirmek için yapılmış bazı ayarlar görmelisiniz.

Burada, 'İkonu değiştir'e tıklayın.

Thrive Architect'in çeşitli sektörler için kütüphanesinde birçok simge bulunur. Bununla birlikte, seçtiğiniz simgenin bir ilerleme çubuğu için uygun olduğundan emin olun.

Seçiminizi yaptıktan sonra, ‘Seç’e tıklamanız yeterlidir.

Simge stilini değiştirmek için 'Stili değiştir' düğmesine tıklamanız yeterlidir.

Buradan, seçebileceğiniz bazı hazır simge tasarımları göreceksiniz.

İlerleme etiketinin görünümünü değiştirmek için, Şu Anda stil verilen açılır menüsünde ‘İlerleme etiketi’ seçeneğine geçin.

Burada, etiketin rengini, vurguyu, biçimlendirmeyi ve benzeri şeyleri özelleştirmek için bazı seçenekler göreceksiniz.

İlerleme çubuğunun görünümünden memnun kaldığınızda, değişikliklerinizi kaydetmek için 'İşi kaydet'e tıklayın.

Her şeyin harika görünmesini sağlamak için blog gönderinizi mobil, masaüstü ve tablet üzerinde önizleyin.

Bizim demo sitemizde bizimki böyle görünüyor:

Alternatif: Dairesel İlerleme Çubuğu Ekle

Thrive Architect'in blok koleksiyonunda dolum sayacı adında farklı bir ilerleme çubuğu türü de bulunur. Dolum Sayacı bloğu, istatistikleri göstermek için harika olan dairesel bir ilerleme çubuğuna benzer.

Eklemek için sağ kenar çubuğundaki '+' düğmesine tıklayın ve 'Fill Counter' öğesini bulun. Ardından, herhangi bir yere sürükleyip bırakın.

Ekledikten sonra, dolum sayacını özelleştirmek için bazı seçenekler göreceksiniz.

Temel olarak, dolgu sayacının boyutunu, dolgu yüzdesini, renklerini ve yüzdelik değerin görsel olarak sunulan değere karşılık gelip gelmeyeceğini değiştirebilirsiniz.

Dolum sayacının içindeki sayıya tıklayarak görünümünü de değiştirebilirsiniz.

Renklerini, yazı tipi türünü, farklı cihazlardaki görünürlüğünü ve daha fazlasını değiştirmekten çekinmeyin.

Yüzde işaretinin altındaki metni değiştirmek isterseniz, metnin kendisine tıklamanız yeterlidir.

Bundan sonra, dolum sayacı için bir açıklama yazabilirsiniz.

İşiniz bittiğinde çalışmanızı kaydetmeyi unutmayın.

Alternatif: Thrive Architect'i sevmiyor musunuz? SeedProd sayfa oluşturucusu ayrıca temanıza veya özel sayfalara ekleyebileceğiniz bir ilerleme çubuğu bloğuna sahiptir.

SeedProd'i nasıl kullanacağınız hakkında daha fazla bilgi için, özel bir WordPress teması oluşturma kılavuzumuza göz atın.

Yöntem 2: Ücretsiz Bir İlerleme Çubuğu Eklentisi Kullanın (Hızlı ve Kolay)

Sayfa oluşturucu kullanmak istemiyorsanız ve yalnızca basit ve ücretsiz bir WordPress ilerleme çubuğu eklentisine ihtiyacınız varsa bu yöntem en iyisidir.

Bunun için, WordPress düzenleyicinize tonlarca ek Gutenberg bloğu ekleyen ücretsiz Ultimate Blocks eklentisini kullanacağız.

Bu eklentinin harika yanı, ilerleme çubuğu bloğunun ücretsiz olmasıdır. Bununla birlikte, daha fazla Gutenberg bloğu ve özelleştirme seçeneği elde etmek için eklentinin pro sürümüne yükseltebilirsiniz.

Eklenti hakkında daha fazla bilgiyi Ultimate Blocks incelememizde öğrenebilirsiniz.

İlk olarak, WordPress eklentisini kurun ve etkinleştirin. İşiniz bittiğinde, yeni bir gönderi oluşturmak veya mevcut bir gönderiyi düzenlemek için blok düzenleyiciyi açabilirsiniz.

Şimdi, sayfada herhangi bir yere '+' düğmesine tıklayın ve 'İlerleme Çubuğu' bloğunu seçin.

Artık yazınıza başarıyla bir ilerleme çubuğu bloğu eklediniz. Bu WordPress tasarım öğesini ihtiyaçlarınıza göre daha fazla özelleştirelim.

Sağdaki blok ayarları kenar çubuğuna bakarsanız, bazı özelleştirme seçenekleri göreceksiniz. ‘Genel’ sekmesinde, ilerleme çubuğunun yüzdesini üstten, içten veya çubuğun altına taşıyabilirsiniz.

Ayrıca 'Şerit' tasarımını devre dışı bırakabilir veya etkinleştirebilir ve mevcut ilerleme değerini değiştirebilirsiniz.

Ardından, Sayı Ayarlarını özelleştirebilirsiniz.

Burada, örneklerimiz için faydalı bulmadığımız için sayı yüzdesini göstermemeyi seçtik.

Ancak göstermeyi seçerseniz, sayı önekini (eksi işareti gibi, sayının önüne gelen bir sembol) ve sayı son ekini (para birimi işareti gibi, sayının arkasına gelen bir sembol) değiştirebilirsiniz.

Sırada Duyarlı Kontrol var.

İlerleme çubukları gönderinizde biraz yer kaplayabileceğinden, gönderi tablet veya mobil cihazlar gibi daha küçük bir ekrandan görüntülendiğinde onu gizlemek isteyebilirsiniz.

İlerleme çubuğunu daha etkileşimli hale getirmek ister misiniz? Bir giriş animasyonu eklemeyi düşünün. Bu özelliği etkinleştirdiğinizde, görüntüleyen kişi aşağı kaydırdıkça ilerleme çubuğu animasyonlu bir efektle görünecektir.

Bir animasyon stili de seçebilir ve ilerleme çubuğunun doğru anda görünmesi için gecikme süresini ayarlayabilirsiniz.

İlerleme çubuğunun tasarımını özelleştirebileceğiniz 'Stil' sekmesine geçelim.

En üstte, tasarımı çizgiden daireye veya yarım daire ilerleme çubuğuna değiştirebilirsiniz. Ayrıca çubuğun tasarımına bir köşe yarıçapı ekleyebilirsiniz, böylece dikdörtgen ve keskin yerine daha dairesel görünür.

Burada, çizgi ilerleme çubuğunda kalmaya karar verdik.

Ancak dairesel ve yarım dairesel ilerleme çubukları şuna benzer:

Aşağı kaydırarak, ilerleme çubuğunun kalınlığını daha belirgin hale getirecek şekilde değiştirebilirsiniz.

İlerleme çubuğunun rengini, arka plan çubuğunu ve ilerleme çubuğunun etiketini web sitenizin tasarımına uyacak şekilde değiştirmek isteyebilirsiniz.

Değiştirebileceğiniz bir diğer öğe, ilerleme çubuğunun dolgu ve kenar boşluğudur.

Her iki ayar da temelde ilerleme çubuğu ile etrafındaki diğer bloklar arasındaki boşluğu kontrol eder.

İlerleme çubuğunun üstteki veya alttaki diğer bloklara çok yakın olmasını istemiyorsanız her ikisi için de değeri artırabilirsiniz.

Ardından, okuyucuların görselden daha fazla bağlam alması için ilerleme çubuğuna bir etiket veya açıklama eklemek isteyebilirsiniz.

İlerleme çubuğunun üzerine, sadece bir metin yazın. Blok araç çubuğundaki ayarları kullanarak metnin hizalamasını ve stilini de değiştirmek isteyebilirsiniz.

İlerleme çubuğunun görünümünden memnun kaldığınızda, blok düzenleyicide ‘Yayınla’ veya ‘Güncelle’ye tıklamanız yeterlidir.

İlerleme çubuğunun tüm cihazlarda doğru göründüğünden emin olmak için yazıyı mobil, masaüstü ve tablet cihazlarda görüntülemek isteyebilirsiniz.

İşte bu kadar! WordPress yazılarınıza başarıyla bir ilerleme çubuğu eklediniz.

İşte demo web sitemizdeki ilerleme çubuğumuzun görünümü:

Sıkça Sorulan Sorular: WordPress'te İlerleme Çubukları Ekleme

Okuyucularımızın ilerleme çubukları hakkında sıkça sorduğu bazı sorular şunlardır:

1. Okuma ilerleme çubuğunu ne zaman statik ilerleme çubuğuna karşı kullanmalıyım?

Okuyucuları uzun gönderilere dahil etmek istediğinizde bir okuma ilerleme çubuğu kullanmanızı öneririz. Kaydırdıkça dolar, makalenin ne kadarını okuduklarını gösterir.

Bu, açılış oranlarını azaltmak istediğiniz öğreticiler, kılavuzlar veya blog gönderileri için iyi çalışır.

Sabit bir ilerleme çubuğu, bağış toplama ilerlemesi, proje tamamlama veya beceri seviyeleri gibi sabit bir hedefi izlemek için daha iyidir. Bu çubuklar kullanıcı kaydırdıkça hareket etmez, bunun yerine “%60 tamamlandı” veya “300$ / 500$ toplandı” gibi belirli bir yüzde veya değer gösterir.

Okuma sırasında etkileşimi artırmak amacındaysanız, kaydırma tabanlı bir çubuk kullanın. İlerlemeyi veya başarıları göstermek istiyorsanız, statik bir tane seçin.

2. İlerleme çubukları kullanırken dikkat edilmesi gereken en iyi uygulamalar nelerdir?

İlerleme çubuğunuzu daha etkili hale getirmek için birkaç ipucu:

• Basit Tutun – İnce, zarif bir çubuk en iyi sonucu verir ve içeriğinizden dikkat dağıtmaz.
• Markanızla eşleştirin – Sitenizin stiline uyacak şekilde rengi ve boyutu özelleştirin.
• Doğru yeri seçin – Çoğu okuyucu bunu ekranın üst kısmında bekler.
• Mobil cihazlarda test edin – Bazı çubuklar küçük ekranlarda hantal görünebilir. Gerekirse devre dışı bırakın.
• İsteğe bağlı: Okuma süresi ekleyin – Gönderinin ne kadar süreceği konusunda beklentileri belirlemeye yardımcı olur.

Temiz ve iyi yerleştirilmiş bir ilerleme çubuğu, yavaşlatmadan kullanıcı deneyimini iyileştirebilir.

3. Bir ilerleme çubuğu eklemek sitemi yavaşlatır mı?

Çoğu modern ilerleme çubuğu eklentisi hafiftir ve sitenizin hızını fark edilir şekilde etkilemez.

Ancak, kötü kodlanmış veya şişirilmiş eklentiler performansı etkileyebilir, özellikle de mobil cihazlarda. Güvende kalmak için:

• İyi yorumlara sahip, güvenilir eklentiler kullanın.
• Yükledikten sonra site hızınızı test edin.
• Yükleme süresini etkiliyorsa mobil cihazlarda çubuğu devre dışı bırakın.

Eklenti seçiminize dikkat ettiğiniz sürece, bir ilerleme çubuğu eklemek SEO'ya zarar vermez ve hatta etkileşimi artırabilir.

WordPress Siteniz İçin Bonus Tasarım Öğeleri

WordPress web sitenize başka görsel öğeler eklemek ister misiniz? Aşağıdaki makalelere göz atın:

• WordPress Gönderilerine Damla Harf Nasıl Eklenir
• WordPress'e Geri Sayım Zamanlayıcı Widget'ı Nasıl Eklenir
• WordPress'e Kaydırılan Bir Haber Bandı Nasıl Eklenir
• WordPress'e Animasyonlu Arka Plan Ekleme
• WordPress'te Sayı Sayma Animasyonu Nasıl Gösterilir
• WordPress Sitenize Cadılar Bayramı Efektleri Getirmenin Yolları
• WordPress'e Dönen Referanslar Ekleme
• WordPress'e Simgelerle Öne Çıkan Kutular Nasıl Eklenir
• WordPress'te YouTube Videosunu Tam Ekran Arka Plan Olarak Ekleme

Bu öğreticinin, WordPress yazılarınıza bir ilerleme çubuğu eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, en iyi WordPress tema oluşturucuları ve WordPress web sitesini nasıl düzenleyeceğiniz hakkındaki 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.