WordPress – tạo odd/even class cho posts

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài WordPress – tạo odd/even class cho posts

Bạn muốn thêm class CSS kiểu odd/even đan xen, với phương pháp này sẽ cho phép thay đổi style cho bản kê bài viết/sản phẩm với mầu sắc khác nhau. WordPress mở API cho nhà phát triển để họ tùy chỉnh post class, sau khi đã thay thay tên class bạn đơn giản thêm CSS trong WordPress với một giao diện mới.

Thêm class odd/even cho bài viết Posts

Bài viết này mình sẽ chỉ cho bạn ra sao thêm odd/even class trong WordPress. Bạn cũng đều có thể tạo thêm bất kỳ class nào chỉ bằng cách thêm vài dòng code vào tệp functions.php, tuy vậy chúng ta chỉ thêm class vào Post. Bạn sẽ cần tùy chỉnh thêm style CSS, nó rất đơn giản.

Trước khi thực hiện, bạn nên thi hành sao lưu WordPress để đảm bảo rằng bản sao lưu sẽ sử dụng khi bạn gặp lỗi WordPress.

Để bắt đầu bạn đăng nhập cPanel, truy cập tượng trưng quản lý tệp, tìm và mở file functions.php của giao diện bạn đang sử dụng. File này nằm ở thư mục /home/your-user/public_html/wp-content/themes/youtheme/functions.php. Thêm đoạn code sau đây vào cuối tệp:

 function oddeven_post_class ( $classes ) { global $current_class; $classes[] = $current_class; $current_class = ($current_class == 'odd') ? 'even' : 'odd'; return $classes; } add_filter ( 'post_oddeven_post_odd';  

Nhớ thay đổi tên class của bạn & Lưu tệp lại.

CSS

Bước tiếp theo, chúng ta cần tùy chỉnh CSS một chút, nhiều themes WordPress có hỗ trợ tùy chỉnh thêm CSS, bạn cũng đều có thể chèn CSS trong tệp stylesheet style.css của giao diện hoặc có thể thi hành dễ dàng bằng phương pháp bấm vào Appearance > Customize & chọn menu Additional CSS.

Khi bạn thay đổi style trong WordPress, hãy luôn nhớ tông mầu giao diện website sao cho phù hợp. Nếu bạn cần dùng mã mầu HTML, cũng đều có thể lấy tại trang web htmlcolorcodes.com. Ở đây mình tạo 2 class với mầu nền khác nhau:

 .even { background:#8AFFB8; } .odd { background:#7CD1FE; }  

Trình customizer của WordPress cho phép bạn xem kết quả trực tiếp, bạn thỏa sức thiết kế web trước lưu bản chính thức.

Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng có thể theo dấu blog này trên Twitter và Facebook

Bài viết WordPress – tạo odd/even class cho posts được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang