Bu makale, aşağıdaki taslağı kullanarak WordPress'e ilerleme çubuğu ekleme prosedürünü sağlayacaktır:
- WP'de İlerleme Çubuğu nedir?
- WordPress Web Sitelerine Kod Kullanarak İlerleme Çubukları Nasıl Eklenir?
- Eklentileri Kullanarak WordPress Web Sitelerine İlerleme Çubukları Nasıl Eklenir?
WordPress'te İlerleme Çubuğu nedir?
İlerleme çubuğu, yatay bir çubuk kullanarak bir şeyin ilerlemesini yüzde olarak gösterir. Kullanıcıya tek bakışta bilgi sağlayabilecek bazı verilerin grafiksel gösterimidir. Verileri veya istatistikleri temsil etmek için WordPress gönderilerinizde ilerleme çubuklarını kullanmak, web sitesinin çekiciliğini ve kullanıcıların katılımını artırmaya yardımcı olabilir.
WordPress Web Sitelerine Kod Kullanarak İlerleme Çubukları Nasıl Eklenir?
Eklenti olmadan WordPress'e ilerleme çubuğu eklemek için kullanıcının bir gönderide özel HTML ve CSS'yi kullanması gerekir. Bunu yapmak için aşağıda verilen adımları izleyin:
Adım 1: Kontrol Panelinde Oturum Açın
Tarayıcıyı açın ve “ http://localhost/<Website-Name>/wp-login.php ' bağlantı. Yönetici kimlik bilgilerini sağlayın ve “ Giriş yapmak ' düğme:
2. Adım: Yeni Bir Gönderi Oluşturun
“ Gönderiler > Yeni Ekle ” yönetici kontrol panelinin yan menüsünden:
3. Adım: Özel HTML Kodu Ekleme
Gönderide başlığı ve ek içeriği sağlayın. Daha sonra “ + ” simgesini seçin ve “ Özel HTML ' engellemek:
Eklenen HTML bloğuna aşağıda verilen kodu yapıştırın. Değiştir ' Genişlik ' içinde '
< açıklık stil = 'genişlik: %80' >< / açıklık >
< div sınıf = 'ilerleme metni' > %80 < / div >
< / div >
Bundan sonra “ Yayınla Gönderiyi web sitesine yüklemek için ” butonu:
4. Adım: Özel CSS ekleyin
Gönderi yayınlandıktan sonra “ Gönderiyi gör ' düğme:
Önizlemede “ Özelleştirmek İlerleme çubuğuna stil eklemek için ” düğmesi:
Ekranın sol tarafında bir editör menüsü görünecektir. Burada aşağı kaydırın ve “ Ek CSS ' bölüm:
İlerleme çubuğunun stilini belirlemek için aşağıdaki CSS kodunu kutuya yapıştırın:
.özel-ilerleme-çubuğu {arka plan- renk : #1a1a1a;
yükseklik : 30 piksel;
dolgu: 5 piksel;
Genişlik : 500 piksel;
kenar boşluğu: 5 piksel 0 ;
kenarlık yarıçapı: 5 piksel;
kutu gölgesi: 0 1px 5px #000 ek, 0 1 piksel 0 # 444 ;
}
.özel-ilerleme-çubuğu açıklık {
arka plan- renk : #0000FF;
ekran: satır içi blok;
şamandıra: sol;
yükseklik : 100 %;
kenarlık yarıçapı: 3px;
kutu gölgesi: 0 1 piksel 0 RGBA ( 255 , 255 , 255 , 0,5 ) ek;
geçiş: Genişlik 0,4'lük giriş-çıkış kolaylığı;
}
.ilerleme- metin {
metin- hizalamak : Sağ;
renk : beyaz;
kenar boşluğu: 0 piksel;
}
5. Adım: Gönderiyi Yayınlayın
Son olarak “ Yayınla Bu değişiklikleri kaydetmek için gönderin:
Sayfayı yeniden yükledikten sonra kullanıcı, gönderide ilerleme çubuğunun görülebildiğini görebilir:
Eklentileri Kullanarak WordPress Web Sitelerine İlerleme Çubukları Nasıl Eklenir?
Bu gösterimde, bir WordPress web sitesine ilerleme çubuğu eklemek için “Ultimate Blocks” eklentisi kullanılacaktır. Aynısını yapmak için aşağıda verilen adımları izleyin.
1. Adım: Yeni Bir Eklenti Ekleyin
Kullanıcı kontrol paneline giriş yaptıktan sonra “ Eklentiler > Yeni Ekle Yan menü çubuğundaki ” seçeneği:
Adım 2: Ultimate Blocks Eklentisini Kurun
Ultimate Block'ları arayın ve “ Girmek ' anahtar. Daha sonra aşağıdaki işaretli yere tıklayın Şimdi kur ' düğme:
3. Adım: Ultimate Blocks'u etkinleştirin
Eklenti yüklendikten sonra “ Etkinleştir WordPress'teki ilerleme çubuğunu kullanmak için ” düğmesi:
4. Adım: Yeni Bir Gönderi Oluşturun
Bir WordPress gönderisine ilerleme çubuğu eklemek için “ Gönderiler > Yeni Ekle Yan menüden ” seçeneği:
Adım 5: İlerleme Çubuğu Bloğunu Ekleyin
Gönderiye bir başlık ve içerik girin. Daha sonra “ tuşuna basın + Yeni bir blok eklemek için ” simgesine dokunun. Menüde '' ifadesini arayın. İlerleme çubuğu ”ve bloğu seçin:
Adım 6: Çubuğun Yüzdesini Ayarlayın
İlerleme çubuğu için bir yüzde ayarlamak üzere mavi kaydırıcıyı kullanın veya yüzdeyi aşağıdaki vurgulama kutusuna girin:
7. Adım: Gönderiyi Yayınlayın
Gönderi tamamlandıktan sonra “ Yayınla Gönderiyi web sitesine yüklemek için ” butonu:
Adım 8: Gönderiyi Görüntüleyin
Gönderiyi yayınladıktan sonra, gönderinin web sitesindeki önizlemesini görmek için “Gönderiyi Görüntüle” düğmesine tıklayın:
Aşağıdaki çıktıda gönderiye ilerleme çubuğunun eklendiği görülebilir:
Bunların hepsi WordPress'e bir ilerleme çubuğu eklemekle ilgilidir.
Çözüm
Bir WordPress web sitesine ilerleme çubuğu eklemek için “ Eklentiler > Yeni Ekle Yan menüden ” seçeneğini seçin. ''yi arayın ve yükleyin. Nihai Bloklar ' Eklenti. Kurulumdan sonra etkinleştirin. Sonra şuraya git ' Gönderiler > Yeni Ekle ”ve gönderinin başlığını ve içeriğini sağlayın. Daha sonra “ + ” simgesini seçin ve “ İlerleme çubuğu ' engellemek. Kaydırıcıyı kullanarak veya sayıyı girerek ilerleme yüzdesini ayarlayın. Bu makale, WordPress'te eklentili ve eklentisiz bir ilerleme çubuğu ekleme prosedürünü göstermektedir.