Trong bài này chúng ta sẽ tìm hiểu cấu trúc folder của một theme trong Wordpress được xây dựng như thế nào, chức năng của từng file, từng folder hoạt động ra sao. Bài này tương đối đơn giản và phù hợp với những bạn mới tìm hiểu Wordpress, mình cũng là một trong số đó nên nếu bạn đang muốn học Wordpress thì hãy cùng mình xây dựng nên serie này nhé.
Nội dung chính
1. Các files cần thiết theme Wordpress
Wordpress là một CMS được xây dựng các chức năng sẵn và nhiệm vụ của coder là dựa trên cấu trúc đó xây dựng thành những ứng dụng khác nhau, nhưng chung quy lại thì các ứng dụng đó hoạt động chung một hệ thống CSDL của Wordpress. Tại sao phải như vậy? Lý do đơn giản nếu như bạn cố tình thay đổi hệ thống database thì khi bạn cần nâng cấp lên Version mới thì coi như code của bạn vứt xọt rác, hoặc là bạn phải dev lại. Một lý do nữa là nếu bạn cố tình phá source của nó thì việc được cộng đồng hỗ trợ là điều không thể và đó sẽ là bất lơi đối với bạn.
Sau đây là danh sách các files cần thiết của một theme Wordpress mà mình tìm hiểu trên trang chủ codex của nó.
/myshop/ /style.css - file CSS chính của theme, bạn sẽ khai báo tên theme tại file này /functions.php - file này chứa những đoạn code custom của theme, nó sẽ được chạy đầu tiên /index.php - đây là file hiên thị chính của trang web, nếu các trang như archive.php, category.php không tôn tại thì nó sẽ lấy file này /comments.php - trang hiển thị comments /front-page.php - trang front page /home.php - trang hiển thị bài viết mới nhất (trang chủ), thông thường dùng is_home() để kiểm tra file là này /single.php - trang chi tiết bài viết /single-{post-type}.php - trang chi tiết theo thể loại tự định nghĩa riêng /page.php - trang chi tiết page /category.php - trang danh sách bài viết theo category /tag.php - trang danh sách bài viết theo tag /taxonomy.php - trang danh sách bài viết theo taxonomy /author.php - trang danh sách bài viết của tác giả /date.php - trang danh sách bài viết theo ngày đăng /archive.php - trang danh sách post theo group (category, author, ...). Nếu tồn tại các file category.php ... thì nó sẽ bỏ trang này /search.php - trang kết quả tìm kiếm /attachment.php - trang media /image.php - trang chi tiết hình ảnh up lên, nếu không có file này thì mặc định nó gọi đến file attachment.php /404.php - trang lỗi 404
Trong đó folder myshop là tên theme của bạn, các files còn lại chính là những files cần phải có trong theme wordpress. Cũng có một số file bạn không tạo thì wordpress cũng không bắt lỗi nhưng nếu người dùng truy vấn vào file đó mà không có thì sẽ in ra lỗi 404.
2. Phân chia cấu trúc header, footer, sidebar
Như bạn biết một trang web thông thường chúng ta sẽ chia ra thành các phần nhỏ như header, footer, sidebar-left, sidebar-right, ... Việc chia nhỏ này giúp chúng ta code nhanh gọn hơn, các file chính chỉ việc gọi vào là xong, đây cũng là những file cần thiết trong theme wordpress. Sau đây là danh sách các file thường được phân chia nhỏ ra trong wordpress.
/myshop/
/header.php
/footer.php
/sidebar.php
/sidebar-left.php
/sidebar-right.php
/searchform.php
Ý nghĩa của từng file thể hiện rõ ở tên file rồi nhỉ. Bây giờ ta tìm hiểu cách import nó vào file chính.
Thông thường để import một file php vào php thì chúng ta sử dụng lệnh require hoặc include, nhưng ở đây chúng ta đang làm việc với Wordpress nên nó cung cấp một số hàm xử lý vụ này. Cụ thể như sau:
-
header.php: dùng lệnh
get_header(). -
footer.php: dùng lệnh
get_footer(). -
sidebar.php: dùng lệnh
get_sidebar(). -
searchform.php: dùng lệnh
get_search_form().
Riêng đối với sidebar-left.php và sidebar-right.php là các tên do người dùng tự đặt với tiền tố là sidebar_, còn chữ phía sau (left, right) là do người dùng tự định nghĩa. Ví dụ giờ mình cần định nghĩa một file sidebar nằm ở giữa thì mình tự đặt tên nó là sidebar-middle.php. Để load nó thì ta dùng hàm get_sidebar($name) và tham số $name chính là tên hậu tố của file (left, right, middle).
3. Ví dụ chia nhỏ các file trong theme 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 index.php 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:
/myshop/
/index.php - main template
/single.php - trang detail
/header.php
/footer.php
/sidebar-left.php
/sidebar-right.php
Giả sử ta có template với cấu trúc như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="header"> NỘI DUNG HEADER </div> <div id="container"> <div id="sidebar-left"> NỘI DUNG SIDEBAR LEFT </div> <div id="content"> NỘI DUNG CONTENT CHÍNH </div> <div id="sidebar-right"> NỘI DUNG SIDEBAR RIGHT </div> </div> <div id="footer"> NỘI DUNG FOOTER </div> </body></html> |
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 file bây giờ ta sẽ chia nhỏ ra như sau:
File header.php
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="header"> NỘI DUNG HEADER </div> |
File footer.php
|
1
2
3
4
5
|
<div id="footer"> NỘI DUNG FOOTER </div> </body></html> |
File sidebar-left.php
|
1
2
3
|
<div id="sidebar-left"> NỘI DUNG SIDEBAR LEFT</div> |
File sidebar-right.php
|
1
2
3
|
<div id="sidebar-right"> NỘI DUNG SIDEBAR RIGHT</div> |
Bây giờ tới hai file chính là index.php và single.php. 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 index.php
|
1
2
3
4
5
6
7
8
9
|
<?php get_header(); ?> <div id="container"> <?php get_sidebar('left'); ?> <div id="content"> TRANG INDEX </div> <?php get_sidebar('right'); ?> </div><?php get_footer(); ?> |
File single.php
|
1
2
3
4
5
6
7
8
9
|
<?php get_header(); ?> <div id="container"> <?php get_sidebar('left'); ?> <div id="content"> TRANG SINGLE </div> <?php get_sidebar('right'); ?> </div><?php get_footer(); ?> |
Lời kết
Trong bài này chúng ta chỉ tìm hiểu cấu trúc các file cần thiết trong Wordpress và ý nghĩa của từng file riêng, chúng ta chỉ tìm hiểu ở mức tổng quát chứ không đi sâu vào làm theme nhé các bạn, và đây chỉ là cấu trúc demo thôi chứ khi các bạn làm theme sẽ có thêm nhiều file tự định nghĩa lấy nữa. Tuy bài đơn giản nhưng rất hữu ích với những bạn mới tìm hiểu wordpress và đi sâu vào lập trình wordpress nâng cao.
