Bài viết này sẽ cung cấp quy trình thêm thanh tiến trình trong WordPress bằng cách sử dụng phác thảo sau:
- Thanh tiến trình trong WP là gì?
- Làm cách nào để thêm thanh tiến trình vào trang web WordPress bằng mã?
- Làm cách nào để thêm thanh tiến trình vào trang web WordPress bằng plugin?
Thanh tiến trình trong WordPress là gì?
Thanh tiến trình hiển thị tiến trình của một thứ gì đó theo tỷ lệ phần trăm bằng thanh ngang. Nó là sự biểu diễn đồ họa của một số dữ liệu có thể cung cấp thông tin cho người dùng chỉ bằng một cái nhìn thoáng qua. Sử dụng thanh tiến trình trong các bài đăng WordPress của bạn để thể hiện dữ liệu hoặc số liệu thống kê có thể giúp cải thiện sự hấp dẫn của trang web và mức độ tương tác của người dùng.
Làm cách nào để thêm thanh tiến trình vào trang web WordPress bằng mã?
Để thêm thanh tiến trình vào WordPress mà không cần plugin, người dùng sẽ phải sử dụng HTML và CSS tùy chỉnh trong bài đăng. Để làm điều đó, hãy làm theo các bước được cung cấp dưới đây:
Bước 1: Đăng nhập vào Bảng điều khiển
Mở trình duyệt và truy cập vào “ http://localhost/<Website-Name>/wp-login.php liên kết. Cung cấp thông tin đăng nhập của quản trị viên và nhấn vào Đăng nhập ' cái nút:
Bước 2: Tạo một bài viết mới
Đi đến ' Bài viết > Thêm mới ” từ menu bên của bảng điều khiển quản trị viên:
Bước 3: Thêm mã HTML tùy chỉnh
Trong bài viết, hãy cung cấp tiêu đề và nội dung bổ sung. Sau đó, nhấp vào “ + ” biểu tượng và tìm kiếm “ HTML tùy chỉnh ' khối:
Trong khối HTML đã thêm, hãy dán mã được cung cấp bên dưới. Thay đổi ' chiều rộng ” bên trong “
< nhịp phong cách = 'chiều rộng: 80%' >< / nhịp >
< div lớp học = 'tiến trình-văn bản' > 80% < / div >
< / div >
Sau đó, nhấn vào “ Công bố Nút ” để tải bài viết lên website:
Bước 4: Thêm CSS tùy chỉnh
Sau khi bài đăng được xuất bản, hãy nhấp vào nút “ Xem bài viết ' cái nút:
Trong phần xem trước, nhấp vào “ Tùy chỉnh Nút ” để thêm kiểu dáng cho thanh tiến trình:
Một menu soạn thảo sẽ xuất hiện ở phía bên trái của màn hình. Tại đây, cuộn xuống và nhấp vào “ CSS bổ sung ' phần:
Dán mã CSS sau vào hộp để tạo kiểu cho thanh tiến trình:
.custom-progress-bar {lý lịch- màu sắc : #1a1a1a;
chiều cao : 30px;
phần đệm: 5px;
chiều rộng : 500px;
lề: 5px 0 ;
bán kính đường viền: 5px;
bóng hộp: 0 Hình nhỏ 1px 5px #000, 0 1px 0 # 444 ;
}
.custom-progress-bar nhịp {
lý lịch- màu sắc : #0000FF;
hiển thị: khối nội tuyến;
nổi: trái;
chiều cao : 100 %;
bán kính đường viền: 3px;
bóng hộp: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) chèn vào;
chuyển tiếp: chiều rộng .4s dễ dàng ra vào;
}
.progression- chữ {
chữ- căn chỉnh : Phải;
màu sắc : trắng;
lề: 0px;
}
Bước 5: Xuất bản bài viết
Cuối cùng, nhấp vào “ Công bố ” đăng để lưu những thay đổi này:
Khi tải lại trang, người dùng có thể thấy thanh tiến trình trong bài đăng:
Làm cách nào để thêm thanh tiến trình vào trang web WordPress bằng plugin?
Phần trình diễn này sẽ sử dụng plugin “Ultimate Blocks” để thêm thanh tiến trình vào trang web WordPress. Để làm tương tự, hãy làm theo các bước được cung cấp dưới đây.
Bước 1: Thêm plugin mới
Khi người dùng đã đăng nhập vào bảng điều khiển, hãy đi tới “ Plugin > Thêm mới ” tùy chọn từ thanh menu bên:
Bước 2: Cài đặt Plugin Ultimate Blocks
Tìm kiếm Khối tối thượng và nhấn vào “ Đi vào ' chìa khóa. Sau đó, nhấp vào mũi tên bên dưới “ Cài đặt ngay ' cái nút:
Bước 3: Kích hoạt Khối tối thượng
Sau khi plugin được cài đặt, hãy nhấp vào “ Kích hoạt Nút ” để sử dụng thanh tiến trình trong WordPress:
Bước 4: Tạo một bài viết mới
Để thêm thanh tiến trình vào bài đăng WordPress, hãy truy cập vào “ Bài viết > Thêm mới ” tùy chọn từ menu bên:
Bước 5: Thêm khối thanh tiến trình
Cung cấp tiêu đề và nội dung cho bài viết. Tiếp theo nhấn nút “ + ” biểu tượng để thêm một khối mới. Trong menu, tìm kiếm “ Thanh tiến trình ” và chọn khối:
Bước 6: Đặt phần trăm cho thanh
Để đặt tỷ lệ phần trăm cho thanh tiến trình, hãy sử dụng thanh trượt màu xanh lam hoặc nhập tỷ lệ phần trăm vào hộp đánh dấu bên dưới:
Bước 7: Xuất bản bài viết
Sau khi đăng bài xong bấm vào nút “ Công bố Nút ” để tải bài viết lên website:
Bước 8: Xem bài viết
Sau khi xuất bản bài đăng, hãy nhấp vào nút “Xem bài đăng” để xem bản xem trước của bài đăng trên trang web:
Có thể thấy ở đầu ra bên dưới rằng thanh tiến trình đã được thêm vào bài viết:
Đó là tất cả về việc thêm thanh tiến trình trong WordPress.
Phần kết luận
Để thêm thanh tiến trình vào trang web WordPress, hãy truy cập vào “ Plugin > Thêm mới ” tùy chọn từ menu bên. Tìm kiếm và cài đặt “ Khối tối thượng ' cắm vào. Sau khi cài đặt, kích hoạt nó. Sau đó đi đến ' Bài viết > Thêm mới ” và cung cấp tiêu đề cũng như nội dung của bài viết. Tiếp theo, nhấp vào “ + ” biểu tượng và tìm kiếm “ Thanh tiến trình ' khối. Đặt phần trăm tiến trình bằng thanh trượt hoặc bằng cách nhập số. Bài viết này đã minh họa quy trình thêm thanh tiến trình trong WordPress có và không có plugin.