Artikel ini akan memberikan prosedur untuk menambahkan bilah kemajuan di WordPress menggunakan garis besar berikut:
- Apa itu Bilah Kemajuan di WP?
- Bagaimana Cara Menambahkan Bilah Kemajuan ke Situs WordPress Menggunakan Kode?
- Bagaimana Cara Menambahkan Bilah Kemajuan ke Situs WordPress Menggunakan Plugin?
Apa itu Bilah Kemajuan di WordPress?
Bilah kemajuan menunjukkan kemajuan sesuatu dalam persentase menggunakan bilah horizontal. Ini adalah representasi grafis dari beberapa data yang dapat memberikan informasi kepada pengguna hanya dengan sekali pandang. Menggunakan bilah kemajuan di postingan WordPress Anda untuk mewakili data atau statistik dapat membantu meningkatkan daya tarik situs web dan keterlibatan pengguna.
Bagaimana Cara Menambahkan Bilah Kemajuan ke Situs WordPress Menggunakan Kode?
Untuk menambahkan bilah kemajuan ke WordPress tanpa plugin, pengguna harus menggunakan HTML dan CSS khusus dalam sebuah postingan. Untuk melakukannya, ikuti langkah-langkah yang disediakan di bawah ini:
Langkah 1: Masuk ke Dasbor
Buka browser dan buka “ http://localhost/<Website-Name>/wp-login.php ' tautan. Berikan kredensial admin dan tekan tombol “ Gabung ' tombol:
Langkah 2: Buat Postingan Baru
Pergi ke ' Postingan > Tambah Baru ” dari menu samping dasbor admin:
Langkah 3: Tambahkan Kode HTML Khusus
Pada postingan tersebut, berikan judul dan konten tambahan. Kemudian, klik pada “ + ikon ”, dan cari “ HTML khusus ' memblokir:
Di blok HTML yang ditambahkan, tempelkan kode yang disediakan di bawah ini. Mengubah ' lebar ' di dalam '
< menjangkau gaya = 'lebar: 80%' < / menjangkau >
< div kelas = 'teks perkembangan' > 80% < / div >
< / div >
Setelah itu, tekan tombol “ Menerbitkan tombol ” untuk mengunggah postingan ke situs web:
Langkah 4: Tambahkan CSS Khusus
Setelah postingan dipublikasikan, klik tombol “ Lihat Postingan ' tombol:
Di pratinjau, klik tombol “ Sesuaikan tombol ” untuk menambahkan gaya pada bilah kemajuan:
Menu editor akan muncul di sisi kiri layar. Di sini, gulir ke bawah dan klik “ CSS tambahan ' bagian:
Rekatkan kode CSS berikut ke dalam kotak untuk menata bilah kemajuan:
.bilah kemajuan-kustom {latar belakang- warna : #1a1a1a;
tinggi : 30 piksel;
bantalan: 5 piksel;
lebar : 500 piksel;
margin: 5 piksel 0 ;
radius batas: 5px;
bayangan kotak: 0 1px 5px #000 sisipan, 0 1 piksel 0 # 444 ;
}
.bilah kemajuan-kustom menjangkau {
latar belakang- warna : #0000FF;
tampilan: blok sebaris;
mengapung: kiri;
tinggi : 100 %;
radius batas: 3px;
bayangan kotak: 0 1 piksel 0 rgba ( 255 , 255 , 255 , .5 ) sisipan;
transisi: lebar 0,4 detik kemudahan masuk-keluar;
}
.perkembangan- teks {
teks- meluruskan : Kanan;
warna : putih;
margin: 0 piksel;
}
Langkah 5: Publikasikan Postingan
Terakhir, klik tombol “ Menerbitkan ” posting untuk menyimpan perubahan ini:
Setelah memuat ulang halaman, pengguna dapat melihat bahwa bilah kemajuan dapat dilihat di postingan:
Bagaimana Cara Menambahkan Bilah Kemajuan ke Situs WordPress Menggunakan Plugin?
Demonstrasi ini akan menggunakan plugin “Ultimate Blocks” untuk menambahkan bilah kemajuan ke situs WordPress. Untuk melakukan hal yang sama, ikuti langkah-langkah yang disediakan di bawah ini.
Langkah 1: Tambahkan Plugin Baru
Setelah pengguna masuk ke dasbor, buka “ Plugin > Tambah Baru ” opsi dari bilah menu samping:
Langkah 2: Instal Plugin Ultimate Blocks
Cari Blok Utama dan tekan tombol “ Memasuki ” kunci. Kemudian, klik tanda di bawah ini “ Instal sekarang ' tombol:
Langkah 3: Aktifkan Blok Utama
Setelah plugin diinstal, klik tombol “ Mengaktifkan tombol ” untuk menggunakan bilah kemajuan di WordPress:
Langkah 4: Buat Postingan Baru
Untuk menambahkan bilah kemajuan ke postingan WordPress, buka “ Postingan > Tambah Baru ” pilihan dari menu samping:
Langkah 5: Tambahkan Blok Progress Bar
Berikan judul dan konten pada postingan. Selanjutnya, tekan tombol “ + ikon ” untuk menambahkan blok baru. Di menu, cari “ Bilah kemajuan ” dan pilih blok:
Langkah 6: Tetapkan Persentase Batang
Untuk mengatur persentase bilah kemajuan, gunakan penggeser biru atau masukkan persentase di kotak sorotan di bawah:
Langkah 7: Publikasikan Postingan
Setelah postingan selesai, klik tombol “ Menerbitkan ” tombol untuk mengunggah postingan ke situs web:
Langkah 8: Lihat Postingan
Setelah memublikasikan postingan, klik tombol “Lihat Postingan” untuk melihat pratinjau postingan di situs web:
Dapat dilihat pada output di bawah ini bahwa bilah kemajuan ditambahkan ke postingan:
Itu semua tentang menambahkan bilah kemajuan di WordPress.
Kesimpulan
Untuk menambahkan bilah kemajuan ke situs WordPress, buka “ Plugin > Tambah Baru ” pilihan dari menu samping. Cari dan instal “ Blok Utama ” plugin. Setelah instalasi, aktifkan. Lalu, buka “ Postingan > Tambah Baru ” dan berikan judul dan isi postingan. Selanjutnya, klik pada “ + ikon ” dan cari “ Bilah kemajuan ' memblokir. Atur persentase kemajuan menggunakan penggeser atau dengan memasukkan nomor. Artikel ini telah mengilustrasikan prosedur untuk menambahkan bilah kemajuan di WordPress dengan dan tanpa plugin.