Trong bài này chúng ta sẽ tìm hiểu cấu trúc theme WordPress, đây là bài đầu tiên và cũng là bài quan trọng nhất bởi nó sẽ giúp bạn hiểu rõ các thư mục và file trong một theme WordPress.
Cách tốt nhất để khám phá cấu trúc của nó là mổ xẻ đó là theme twentyfifteen, đây là một theme mặc định có sẵn trong hệ thống WordPress và tất nhiên là cấu trúc folder được sắp xếp và lập trình theo chuẩn của WordPress, vì vậy còn gì tuyệt vời hơn nếu chúng ta bắt đầu tìm hiểu từ nó.
Trước khi đi tìm hiểu cấu trúc theme WordPress thì ta hãy tìm hiểu khái niệm theme là gì đã nhé.
1. Theme WordPress là gì?
Theme trong WordPress có thể xem là một addon và được dùng để hiển thị thông tin dữ liệu của website sử dụng WordPress. Ta có thể hiểu nôm na rằng nó là phần frontend của một website đang sử dụng mã nguồn WordPress.
Vì là một addon nên bạn có thể cài đặt / gỡ bỏ nó một cách dễ dàng thông qua phần quản lý theme: Appearance -> Themes.
Mỗi theme sau khi cài đặt sẽ có hai trạng thái:
- Active là theme đang được sử dụng
- Inactive là theme chưa sử dụng
Mỗi theme sau khi active thì nó sẽ có những thông số cấu hình trong phần Customize, hoặc nó sẽ có một menu riêng biệt trong hệ thống menu của admin.
2. Cấu trúc theme WordPress twentyfifteen
Đây là một trong các theme mặc định được WordPress cung cấp với bố cục giao diện cực kì đơn giản, và đặc biệt hơn là ngay từ lần cài đặt WordPress đầu tiên thì hệ thống sẽ tự kích hoạt theme này cho website của các bạn.
Nếu bạn nào đã từng sử dụng qua WordPress thì chắc hẳn sẽ không quá lạ lẫm với theme này. Ở phiên bản hiện tại thì twentyfifteen đã được nâng cấp giao diện tương thích với table, smartphone, ipad và một số độ phân giải khác.
Sau khi các bạn đã xem xong giao diện của theme twentyfifteen thì giờ là tới lúc chúng ta tìm hiểu về cấu trúc folder của nó. Ở đây mình có chụp sẵn ảnh toàn bộ cấu trúc folder của theme này.
Nhìn vào giao diện thì có lẽ bạn nghĩ chỉ cần một vài file PHP là có thể tạo thành một website như vậy được. Nhưng sự thật không như bạn nghĩ, bạn sẽ phải cần tối thiểu là các files và folders như hình ảnh trên bởi vì mỗi một file bên trong cấu trúc này sẽ có một nhiệm vụ cố định nào đó và chúng không thể nhầm lẫn với nhau được.
Với cấu trúc theme WordPress này thì các bạn cần phải nắm rõ một số file quan trọng như sau.
* Lưu ý các file này cực kỳ quan trọng nhé, nếu thiếu một trong các file này thì theme của các bạn sẽ bị lỗi trắng trang ngay, hoặc sẽ vướng phải một số lỗi 404 không đáng có.
File Tanggiap.net
File đầu tiên là file Tanggiap.net. Khi bạn mở file này lên thì sẽ thấy nó có một phần nội dung như sau:
Đây ta gọi là phần khai báo thông tin cho theme. Nghĩa là trong một theme phải có file Tanggiap.net đặt ở ngoài cùng và bên trong bạn sẽ khai báo các thông tin:
- Theme name: Tên theme mà các bạn khai báo để cài đặt trong admin
- Theme Uri: Đường dẫn tới theme này
- Author: Tên tác giả của theme.
- Version: Phiên bản của theme
- Tags: Nếu theme này bạn có upload lên cộng đồng WordPress thì hãy điền phần từ khóa này vào, ví dự như là blue, black, khi ai có nhu cầu tìm kiếm themes, nếu họ điền vào một trong các từ khóa mà bạn đã khai báo, thì khả năng họ sẽ tìm kiếm ra themes của bạn.
- Text Domain: Đây là phần cấu hình textdomain để sử dụng đa ngôn ngữ (phần này mình sẽ hướng dẫn sau).
File Tanggiap.net
File Tanggiap.net dùng để hiển thị hình ảnh đại diện của theme trong khu vực cài đặt themes của admin, đây là hai file quan trọng và bắt buộc theme nào cũng phải có.
File Tanggiap.net
File Tanggiap.net là file chứa những đoạn code tạo nên các chức năng mới của theme hoặc customize một chức năng có sẵn nào đó. Ví dụ bạn cần tạo một widget hiển thị bài viết mới nhất thì bạn sẽ code nó trong file Tanggiap.net hoặc ở một file khác rồi include nó vào file Tanggiap.net.
Các file khác
Các files còn lại được mô tả như sau:
- index.php: Là trang chủ
- Tanggiap.net : Phần code cho header của layout
- footer.php: Phần code cho footer của layout
- sidebar.php: Phần code cho sidebar nằm ở bên trái hoặc bên phải.
- page.php: Trang danh sách các page
- single.php: Trang chi tiết bài viết
- comments.php: Trang hiển thị danh sách các phản hồi
- content.php: Hiển thị toàn bộ danh sách bài viết ở dạng thu gọn
- content-page.php: Trang chứa các bài viết của thể loại page
- search.php: Trang tìm kiếm
- content-search.php: Phần code chứa nội dung để hiển thị các dữ liệu được tìm kiếm.
- archive.php: Tran lưu trữ toàn bộ các bài viết theo năm tháng, ngày, tác giả
Hiện tại các bạn chỉ cần biết tổng quát về cấu trúc theme như thế là đủ rồi, ở các bài khác thì Connor sẽ giải thích và hướng dẫn chi tiết hơn về định nghĩa của từng file cũng như mỗi file sẽ sử dụng các hàm có sẵn nào trong WordPress.
4. Một ví dụ về cấu trúc theme trong WordPress
Bây giờ ta làm một ví dụ nhỏ nhỏ đó là tạo một template mẫu đơn giản, sau đó chia các file này thành các phần header, footer, sidebar-left, sidebar-right. Sau đó tại file Tanggiap.net sẽ gọi lần lượt vào.
Bạn xây dựng các files có cấu trúc folder như sau:
Giả sử ta có template với cấu trúc như sau:
Lúc này ta sẽ phân vùng các khối như hình dưới đây:
Dựa vào cấu trúc theme bây giờ ta sẽ chia nhỏ ra như sau:
File Tanggiap.net
File Tanggiap.net
File Tanggiap.net
File Tanggiap.net
Bây giờ tới hai file chính là Tanggiap.net và Tanggiap.net. Lưu ý với bạn rằng đây chỉ là demo nho nhỏ nên mình chỉ cắt cho hai file này thôi, các file còn lại tương tự nhé.
File Tanggiap.net
File Tanggiap.net
3. Lời kết
Lý do mình quyết định mổ xẻ cấu trúc theme WordPress twentfifteen, đó là vì để tự viết mới một theme thì việc đầu tiên chúng ta cần làm là phải biết được cấu trúc folder chứa theme sẽ bao gồm các folder và các file nào, từ đó cứ theo thứ tự cấu trúc đó mà chúng ta sẽ dễ dàng xây dựng theme hơn.
Các bạn cố gắng xem kỹ bài này và nắm rõ một số file quan trọng vì sắp tới mà mình hướng dẫn các bạn xây dựng từ a->z sẽ có cấu trúc tương tự giống vậy, và chỉ bổ sung thêm một số thành phần mở rộng mà thôi.