Code đánh số thứ tự bài viết xem nhiều trong wordpress

Hôm nay chiase69 muốn hướng dẫn các bạn viết Code đánh số thứ tự bài viết xem nhiều trong wordpress. Đây là code giúp chức năng đánh số thứ tự ví dụ như bạn có một trang web ở sidebar bạn có thêm chức năng bài viết xem nhiều gồm 5 bài chẳng hạn, bây giờ bạn muốn đánh số thứ tự lên 5 bài đó từ 1 đến 5 như hình vẽ sau
Xem thêm: Các thủ thuật trong wordpress

• Rút gọn tiêu đề bài viết trong wordpress
• Hướng dẫn chống copy bài viết trong wordpress

Code đánh số thứ tự bài viết xem nhiều trong wordpress

Như hình vẽ ta thấy có 5 bài đếm từ trên xuống dưới theo thứ tự bài 1 là đếm 1 bài 2 là đánh dấu là 2 ...cho đến bài 5 đánh số là 5. Mỗi lần đánh số như thế sẽ tạo 1 màu riêng cho con số, vd trong hình vẽ thì số 1 màu đỏ, 2 màu da cam, 3 màu xanh lá cây, 4 màu xanh da trời, 5 màu xám.
Vậy làm sao để tạo được như thế ta phải làm các bước sau
Các bạn đầu tiên phải xem css ở bài viết xem nhiều bạn đặt tên gì đã Ví dụ như

< class="wpp-list">
<li>Bài 1
</li>
<li>Bài 2
</li>
<li>Bài 3
</li>
<li>Bài 4
</li>
<li>Bài5
</li>
</ul>

Ở trong css vd trên bạn chú ý đến wpp-list. Nếu ở css của bạn là chữ khác thì bạn thay wpp-list thành tên css của bạn nhé
Để tạo được hình như trên ta vào custom.css

.wpp-list {
counter-reset: my-badass-counter;
}
.wpp-list li:after {
background: #d6d6d6;
padding: 3px 5px;
border-radius: 15px;
color: white;
font-size: 80%;
content: counter(my-badass-counter);
counter-increment: my-badass-counter;
}
.wpp-list li:nth-child(1):after {
background: #CC181E !important;
}
.wpp-list li:nth-child(2):after {
background: #FFA800 !important;
}
.wpp-list li:nth-child(3):after {
background: #96C950 !important;
}
.wpp-list li:nth-child(4):after {
background: #3462A0 !important;
}

Thế là xong rồi đó lưu và xem thành quả thôi