Artikel ini akan menyediakan prosedur untuk menambah bar kemajuan dalam WordPress menggunakan garis besar berikut:
- Apakah Bar Kemajuan dalam WP?
- Bagaimana untuk Menambah Bar Kemajuan pada Laman Web WordPress Menggunakan Kod?
- Bagaimana untuk Menambah Bar Kemajuan pada Laman Web WordPress Menggunakan Pemalam?
Apakah Bar Kemajuan dalam WordPress?
Bar kemajuan menunjukkan kemajuan sesuatu dalam peratusan menggunakan bar mendatar. Ia adalah perwakilan grafik beberapa data yang boleh memberikan maklumat kepada pengguna hanya dengan sekali pandang. Menggunakan bar kemajuan dalam siaran WordPress anda untuk mewakili data atau statistik boleh membantu meningkatkan daya tarikan tapak web dan penglibatan pengguna.
Bagaimana untuk Menambah Bar Kemajuan pada Laman Web WordPress Menggunakan Kod?
Untuk menambah bar kemajuan pada WordPress tanpa pemalam, pengguna perlu menggunakan HTML dan CSS tersuai dalam siaran. Untuk melakukannya, ikuti langkah yang disediakan di bawah:
Langkah 1: Log Masuk ke Papan Pemuka
Buka penyemak imbas dan pergi ke ' http://localhost/<Website-Name>/wp-login.php ” pautan. Berikan kelayakan pentadbir dan tekan ' Log masuk butang ”:
Langkah 2: Buat Catatan Baharu
Pergi ke ' Catatan > Tambah Baharu ” daripada menu sisi papan pemuka pentadbir:
Langkah 3: Tambah Kod HTML Tersuai
Dalam siaran, berikan tajuk dan kandungan tambahan. Kemudian, klik pada “ + ikon ” dan cari “ HTML tersuai ” blok:
Dalam blok HTML yang ditambahkan, tampal kod yang disediakan di bawah. Tukar ' lebar ' di dalam ' teg ” untuk peratusan bar kemajuan yang dikehendaki. Begitu juga, tukar ' teks kemajuan ” sewajarnya:
< div kelas = 'bar kemajuan tersuai' >< rentang gaya = 'lebar: 80%' >< / rentang >
< div kelas = 'teks kemajuan' > 80% < / div >
< / div >
Selepas itu, tekan ' Menerbitkan butang untuk memuat naik siaran ke tapak web:
Langkah 4: Tambah CSS Tersuai
Setelah siaran diterbitkan, klik pada ' Lihat Siaran butang ”:
Dalam pratonton, klik pada ' Sesuaikan ” untuk menambah gaya bagi bar kemajuan:
Menu editor akan muncul di sebelah kiri skrin. Di sini, tatal ke bawah dan klik pada ' CSS tambahan bahagian ”:
Tampalkan kod CSS berikut dalam kotak untuk menggayakan bar kemajuan:
.bar kemajuan tersuai {latar belakang- warna : #1a1a1a;
ketinggian : 30px;
padding: 5px;
lebar : 500px;
jidar: 5px 0 ;
jejari sempadan: 5px;
bayang kotak: 0 1px 5px #000 inset, 0 1px 0 # 444 ;
}
.bar kemajuan tersuai rentang {
latar belakang- warna : #0000FF;
paparan: inline-block;
terapung: kiri;
ketinggian : 100 %;
jejari sempadan: 3px;
bayang kotak: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) sisipan;
peralihan: lebar .4s kemudahan masuk-keluar;
}
.perkembangan- teks {
teks- selaraskan : betul;
warna : putih;
jidar: 0px;
}
Langkah 5: Terbitkan Siaran
Akhir sekali, klik pada “ Menerbitkan ” pos untuk menyimpan perubahan ini:
Setelah memuat semula halaman, pengguna dapat melihat bahawa bar kemajuan boleh dilihat dalam siaran:
Bagaimana untuk Menambah Bar Kemajuan pada Laman Web WordPress Menggunakan Pemalam?
Demonstrasi ini akan menggunakan pemalam 'Ultimate Blocks' untuk menambah bar kemajuan pada tapak web WordPress. Untuk melakukan perkara yang sama, ikuti langkah yang disediakan di bawah.
Langkah 1: Tambah Pemalam Baharu
Setelah pengguna log masuk ke papan pemuka, pergi ke “ Pemalam > Tambah Baharu ” pilihan daripada bar menu sisi:
Langkah 2: Pasang Pemalam Ultimate Blocks
Cari Blok Utama dan tekan ' Masuk ” kunci. Kemudian, klik di bawah yang ditunjukkan ' Install sekarang butang ”:
Langkah 3: Aktifkan Ultimate Blocks
Setelah pemalam dipasang, klik pada “ Aktifkan butang untuk menggunakan bar kemajuan dalam WordPress:
Langkah 4: Buat Catatan Baharu
Untuk menambah bar kemajuan pada siaran WordPress, pergi ke “ Catatan > Tambah Baharu ” pilihan daripada menu sisi:
Langkah 5: Tambah Blok Bar Kemajuan
Berikan tajuk dan kandungan pada siaran. Seterusnya, tekan “ + ” ikon untuk menambah blok baharu. Dalam menu, cari ' Bar kemajuan ” dan pilih blok:
Langkah 6: Tetapkan Peratusan Untuk Bar
Untuk menetapkan peratusan untuk bar kemajuan, gunakan peluncur biru atau masukkan peratusan dalam kotak serlahan di bawah:
Langkah 7: Terbitkan Siaran
Selepas siaran selesai, klik pada ' Menerbitkan ” butang untuk memuat naik siaran ke tapak web:
Langkah 8: Lihat Siaran
Selepas menerbitkan siaran, klik pada butang 'Lihat Siaran' untuk melihat pratonton siaran di tapak web:
Ia boleh dilihat dalam output di bawah bahawa bar kemajuan ditambahkan pada siaran:
Itu semua tentang menambah bar kemajuan dalam WordPress.
Kesimpulan
Untuk menambah bar kemajuan pada tapak web WordPress, pergi ke “ Pemalam > Tambah Baharu ” pilihan daripada menu sisi. Cari dan pasang ' Blok Muktamad ' pasangkan. Selepas pemasangan, aktifkannya. Kemudian, pergi ke ' Catatan > Tambah Baharu ” dan berikan tajuk dan kandungan siaran. Seterusnya, klik pada “ + ikon ” dan cari “ Bar kemajuan ” blok. Tetapkan peratusan kemajuan menggunakan peluncur atau dengan memasukkan nombor. Artikel ini telah menggambarkan prosedur untuk menambah bar kemajuan dalam WordPress dengan dan tanpa pemalam.