[Theme Development] Phần 9: Cấu trúc theme WordPress

Vậy là phần quan trọng nhất trong khâu tự làm theme WordPress đã tới sau khi chúng ta đã trải qua các công đoạn cơ bản như viết mã HTML và CSS cho giao diện. Thực chất, việc làm một theme WordPress không khó nhưng cái khó nhất ban đầu là chúng ta sẽ bắt đầu như thế nào và quy trình lập trình theme WordPress ra sao.

Để có thể hiểu được và làm được, việc đầu tiên mà chúng ta cần quan tâm đến là hiểu được cấu trúc cơ bản của một theme WordPress. Thực tế, mỗi theme WordPress có thể có cấu trúc phức tạp hoặc đơn giản nhưng ít nhất là nó cũng sẽ có một số file bắt buộc nên trong bài này chúng ta cũng sẽ chỉ tập trung vào các file bắt buộc.

1. Cấu trúc cơ bản của một theme WordPress

Bạn hãy vào WordPress.org tải một theme bất kỳ về mở ra xem thì sẽ dễ dàng nhận ra nó thường có 1 số file bắt buộc sau:

Trong hình trên, mình đã ghi thiếu một file cực kỳ quan trọng đó là file style.css. File này mở ra thì thường ta sẽ thấy có những thông tin bắt buộc như sau:

Những thông tin trên nó sẽ hiển thị trong phần Appearance -> Themes. Nếu bạn muốn thử, hãy tạo 1 folder tên bất kỳ và tạo một file style.css rồi viết nội dung y chang đoạn bên trên. Bạn sẽ thấy trong phần theme của website bạn hiển thị theme ra rồi. Nhưng khi kích hoạt lên thì trang sẽ không có nội dung gì cả vì chúng ta chưa có gì hết. Đó là ý nghĩa của file style.css.

Ngoài ra, còn có một file khá quan trọng nữa là file screenshot.png. Mục đích của file này là sẽ hiển thị một hình ảnh thumbnail của theme trong phần chọn theme của website. File này phải được lưu dưới file type là PNG và phải có tên là thumbnail. Đó là quy tắc của WordPress.

2. Giao diện của WordPress sẽ bị cắt nhỏ ra từng file

Trước khi hiểu ý nghĩa của các file PHP thì mình nghĩ cần nhắc lại cho mọi người biết rằng cơ chế hoạt động của mỗi file là nó sẽ tự ráp lại với nhau để tạo thành một giao diện hoàn chỉnh. Ví dụ như ở phần trước ta đã làm một giao diện HTML cho theme thì tất cả mọi thứ ngoài trang chủ ta đều nhét vào file index.html.

Nhưng khi chuyển qua theme WordPress với kiểu file là PHP, chúng ta sẽ cắt nội dung bên trong đó thành nhiều file khác nhau (thường là 3). Ví dụ như file header.php sẽ bao gồm các thẻ từ html cho đến body, file footer.php sẽ từ #footer xuống cuối file.

Bạn có thể mở một theme nào đó ra và xem thử sẽ hiểu rõ hơn.

3. Ý nghĩa các file PHP trong cấu trúc theme

Chỉ có 2 file bắt buộc style.css và screenshot.png là không phải PHP. Còn lại tất cả các file đều là PHP hết vì WordPress được viết bằng ngôn ngữ PHP mà. Bây giờ chúng ta sẽ cùng phân tích đặc điểm của từng file.

header.php

File này được hiểu như nó có nhiệm vụ khai báo tất cả các thành phần ở đầu trang. Bao gồm thành phần không thấy được (thẻ head) và phần thấy được (thành phần hiển thị logo, menu,…).

index.php

File chứa code phần nội dung của trang chủ không bao gồm phần header và footer vì 2 phần đó đã có file riêng. Hơn nữa, nếu bạn muốn cho một code nào tự động làm trang chủ thì có thể đặt tên file đó là home.php hoặc frontpage.php.

footer.php

File này có thể hiểu đơn giản là nó sẽ chứa các đoạn code in nội dung phần chân trang và bao gồm các thẻ đóng của html và body.

archive.php

File này sẽ hiển thị nội dung của các bài viết khi được phân loại bằng tag, category hoặc bất kỳ taxonomy khác. Nếu bạn muốn các bài viết liệt kê theo kiểu giống nhau thì có thể chỉ cần tạo file này là được. Nhưng nếu bạn muốn cho hiển thị danh sách bài viết trong tag hiển thị khác với bài viết trong category thì có thể tạo ra thêm 2 file tag.php và category.php. Lúc này khi bạn vào xem danh sách bài trong một category thì nó sẽ gọi file category.php ra và tương tự như thế với tag.

Ngoài ra nếu bạn muốn làm giao diện khác nhau ở mỗi category thì có thể tạo thêm file category-{ID}.php và đặt ID tương ứng với ID category. Bạn có thể làm tương tự với tag. Tips này dành cho những ai muốn làm giao diện hiển thị bài ở các category khác nhau. 

404.php

Đơn giản là sẽ in nội dung của trang 404 ra. Bạn không nhất thiết phải sử dụng hàm của WordPress trong này, cứ viết cái gì vào mà bạn thích. 

comments.php

File hiển thị comment form và nội dung comment.

page.php

Hiển thị nội dung khi xem Page. Bạn cũng vẫn có thể làm nhiều kiểu page khác nhau bằng Custom Page Template hoặc đặt tên file pà page-{ID}.php.

single.php

Hiển thị nội dung của Post, hay còn gọi là bài viết. Thường thì code file này cũng giống file page.php.

search.php

Hiển thị danh sách các bài viết trong trang kết quả tìm kiếm. Code cũng có phần giống với file archive.php

functions.php

Là một file khá quan trọng để bạn custom theme bằng filter và action hoặc tất cả những cái khác mà bạn có thể viết bằng PHP. Mặc định chúng ta không cần viết gì vào đây nhưng trong quá trình làm theme sẽ chắc chắn viết linh ta linh tinh vào.

Nói chung, thì khi bạn viết code vào file này thì nó sẽ tự động thực thi trong theme, bất cứ cái gì. Và nếu bạn cần include một file PHP khác vào thì bạn cũng include vào file này.

Bài chi tiết: Hiểu cấu trúc theme WordPress

Lời kết

Đó là tất cả những gì mình cần bạn biết qua để trước khi bắt đầu viết những đoạn code bằng PHP để làm một giao diện WordPress. Cấu trúc theme trong WordPress khá linh hoạt mà nếu bạn hiểu rõ nó thì có thể rất có ích trong việc tuỳ biến hay tự làm một theme rất chuyên nghiệp.

Nếu bạn muốn, bạn có thể tham khảo qua giải thích cấu trúc theme WordPress tại đây để hiểu rõ hơn.

Category: lập trình wordpress, WordPress