Ở phần “Tìm hiểu cấu trúc giao diện WordPress“, chúng ta đã biết nếu muốn sửa giao diện thì phải sửa file nào. Ở phần này, chúng ta sẽ xem xét kĩ hơn cấu trúc của file index.php-bộ mặt của trang chủ.

Nhắc lại, nếu nhìn vào index.php, chúng ta sẽ thấy cấu trúc:

• Ban đầu, nó sẽ gọi header thông qua hàm <?php get_header(); ?>
• Tiếp đó là vòng lặp while để hiển thị các bài
• Gọi sidebar bằng hàm <?php get_sidebar(); ?>
• Cuối cùng là footer bằng hàm <?php get_footer(); ?>

Quan trọng nhất là vòng lặp để liệt kê các thông tin của các bài trên trang chủ. Hình vẽ dưới đây cho thấy thông tin nào của bài do hàm nào đảm nhiệm. Các theme khác nhau ở chỗ các hàm được sắp xếp trước sau thế nào mà thôi. Biết được điều này, chúng ta hoàn toàn có thể sửa được bố trí của giao diện. Các hàm được đặt trong các thẻ div, h2, small,… là để định dạng font chữ. Các thẻ có id, class (ví dụ: post, date, entry,..) được định nghĩa trong style.css nên để thay đổi font chữ, kích thước thì ta thay đổi file style.css này.

Một ví dụ về vòng lặp

Bên trái màu mè là giải thích các hàm. Bên phải là một ví dụ đơn giản về Việt hóa và cách bố trí. Bạn hoàn toàn có thể xáo trộn vị trí các hàm (cùng với thẻ bao quanh nó) ở bất kì đâu trong vòng lặp tùy theo sở thích của mình.

Riêng với single.php, nó còn có thêm phần liệt kê nội dung comments nhưng thông tin của bài cũng vẫn như trên, ta có thể tùy biến. Các file khác như archive.php, page.php, search.php cũng đều như vậy.

Chúc các bạn thành công!

Bài liên quan:

1. Tìm hiểu cấu trúc giao diện WordPress   Đối tượng: d� nh cho những người không biết...