Ở bài trước thì Connor cũng đã giới thiệu sơ lược về khái niệm wordpress là gì và chắc rằng các bạn cũng biết cách cài đặt WordPress luôn rồi. Vậy trong bài này chúng ta cùng nhau mổ xẻ cấu trúc themes mặc định mà WordPress đã cung cấp sẵn ngay sau khi chúng ta cài đặt WordPress đó là theme twentyfifteen.
Tại sao Connor lại muốn các bạn tìm hiểu cấu trúc theme? Đây là một công đoạn hết sức quan trọng vì điều đầu tiên trong việc lập trình Theme WordPress là phải nắm rõ được bố cục của một theme WordPress như thế nào? Các folders và các files được sắp xếp ra sao? Đó là lý do mình muốn các bạn phải nắm rõ bố cục một theme và theme mà mình lựa chọn để 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ó.
Nội dung chính
1. Cấu trúc theme 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 đã chiêm ngưỡng 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 Connor 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 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 style.css:
File đầu tiên là file style.css. Khi bạn mở file này lên thì sẽ thấy nó có một phần nội dung như sau:
|
1
2
3
4
5
6
7
8
9
10
|
Theme Name: Twenty FifteenTheme URI: https://wordpress.org/themes/twentyfifteen/Author: the WordPress teamAuthor URI: https://wordpress.org/Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes , regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.Version: 1.3License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, -language-support, sticky-post, threaded-comments, translation-readyText Domain: sizes,center-stagertltwentyfifteen |
Đâ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 style.css đặ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 screenshot.png:
File screenshot.png 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 functions.php:
File functions.php 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 functions.php hoặc ở một file khác rồi include nó vào file functions.php.
Các file khác:
Các files còn lại được mô tả như sau:
- index.php: Là trang chủ
- header.php : 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. Bạn cũng có thể tham khảo thêm bài viết các file cần thiết trong theme WordPress để hiểu rõ hơn.
2. Lời kết
Lý do vì sao hôm này Connor quyết định mổ xẻ cấu trúc theme twentfifteen cùng với các bạn thì bởi 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ì Theme sắp tới mà Connor 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.
