WordPress Yazılarınıza İlerleme Çubuğu Ekleme

Hiç WordPress sitenize bir ilerleme çubuğu eklemek istediniz mi? Bunu bir bağış toplama kampanyasındaki ilerlemeyi, üzerinde çalıştığınız belirli bir projenin kilometre taşlarını vb. göstermek için kullanabilirsiniz. Geçenlerde okuyucularımızdan biri bir WordPress gönderisine nasıl ilerleme çubuğu ekleyebileceklerini sordu. Bu makalede, WordPress yazılarınıza, sayfalarınıza ve widget’larınıza nasıl ilerleme çubuğu ekleyeceğinizi göstereceğiz.

Video Eğitimi

Videoyu beğenmediyseniz veya daha fazla talimata ihtiyacınız varsa, okumaya devam edin.

Yapmanız gereken ilk şey Progress Bar eklentisini yüklemek ve etkinleştirmek. Kutudan çıktığı gibi çalışır ve yapılandırmanız gereken herhangi bir ayar yoktur.

İlerleme çubuğunu görüntülemek istediğiniz bir gönderiyi veya sayfayı düzenleyin ve kısa kodu bu biçimde ekleyin:

[wppb progress=50]

Bu, varsayılan mavi rengi kullanarak %50 ilerlemeyi göstermek için animasyonlu bir ilerleme çubuğu gösterecektir.

Çok kolay değil mi?

Ayrıca renkleri değiştirmek, ilerleme çubuğuna metin eklemek, yüzde yerine para birimi göstermek ve daha fazlası için kısa kodu özelleştirebilirsiniz. Şimdi bu özelleştirme seçeneklerinden bazılarına bir göz atalım.

İlerleme Çubuğuna Metin Ekleme

Yukarıdaki örnekte, ilerleme çubuğumuzun aslında ne hakkında olduğundan bahsetmediğini görebilirsiniz. Kısa koddaki metin özelliğini kullanarak ilerleme çubuğuna bazı yararlı metinler ekleyerek bunu değiştirebilirsiniz.

[wppb progress=75 text="Progress so far"]

Bu, metninizi ilerleme çubuğunun üstünde gösterecek ve aşağıdaki gibi görünecektir:

İlerleme Çubuğunda Yüzde Yerine Para Birimi Gösterme

Varsayılan olarak, ilerleme çubuğu tamamlanma yüzdesini gösterir, ancak bir bağış toplama kampanyası için kullanıyorsanız bunu bir para birimiyle değiştirebilirsiniz.

Para birimini görüntülemek ve hem hedef tutarı hem de o ana kadar toplanan tutarı belirtmek için kısa kodu şu şekilde kullanabilirsiniz.

[wppb progress="$250/1000" text="$250/$1000 Raised"]

Web sitenizde bu şekilde görünecektir:

Metni ilerleme çubuğunun dışında göstermek istiyorsanız, kısa kodu şu şekilde değiştirebilirsiniz:

[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"]

İlerleme Çubuğu Renklerini ve Görünümünü Değiştirme

Progress Bar eklentisi, kullanabileceğiniz birkaç renk ve görünüm seçeneğiyle birlikte gelir. Yerleşik renk seçenekleri mavi, kırmızı, sarı, turuncu ve yeşildir. Ancak siz istediğiniz herhangi bir rengi kullanabilirsiniz. Düz veya animasyonlu bir ilerleme çubuğu ekleyebilirsiniz.

Her bir seçeneği kullanmak için kısa kodu nasıl kullanacağınız aşağıda açıklanmıştır:

Turuncu ilerleme çubuğu
[wppb progress=50 option=orange]

Kırmızı animasyonlu şeker şeritli ilerleme çubuğu
[wppb progress=50 option="animated-candystripe red"]

Yeşil renkli şeker şeritli ilerleme çubuğu
[wppb progress=50 option="candystripe green"]

Şeker şeritli varsayılan mavi ilerleme çubuğu
[wppb progress=50 option=candystripe]

Mor renkli düz bir ilerleme çubuğu
[wppb progress=50 option=flat color=purple]

Kahverengi düz şeker şeritli ilerleme çubuğu
[wppb progress=50 option="flat candystripe" color=brown]

Bu ilerleme çubukları sitenizde bu şekilde görünecektir:

WordPress Kenar Çubuğu Widget’larına İlerleme Çubuğu Ekleme

Öncelikle WordPress’te metin widget’ları için kısa kodları etkinleştirmeniz gerekecektir. Bunu, temanızın functions.php dosyasına veya siteye özel bir eklentiye aşağıdaki kod satırını ekleyerek yapabilirsiniz.

add_filter('widget_text','do_shortcode');

Artık Görünüm ” Widget ‘lar sayfasını ziyaret edebilir ve kenar çubuğunuza bir metin widget’ı ekleyebilirsiniz. İlerleme çubuğu kısa kodunu metin widget’ında tıpkı bir gönderide veya sayfada kullandığınız gibi kullanın. İşte demo sitemizde kullandığımız bir kod:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

<a href="example.com">Donate here</a>

Test sitemizde bu şekilde görünüyordu:

Umarız bu makale WordPress yazılarınıza veya sayfalarınıza güzel bir ilerleme çubuğu eklemenize yardımcı olmuştur. WordPress’te PayPal Bağış Düğmesi Ekleme hakkındaki rehberimizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.