Hiểu cấu trúc theme WordPress

Khi bạn đã am hiểu các vấn đề WordPress cơ bản rồi thì chắc chắn ai cũng muốn mình có thể nhanh chóng hiểu được các khái niệm WordPress nâng cao. Nhưng muốn hiểu được WordPress nâng cao, có một vấn đề cực kỳ quan trọng mà bạn cần nên nắm vững về nó, đó chính là hiểu được cấu trúc của một theme WordPress bao gồm những gì. Và như tiêu đề, bài này sẽ giúp bạn nắm vững cái này. Hiểu được cấu trúc của một theme không chỉ giúp bạn dễ dàng chỉnh sửa một theme nào đó theo ý mình mà nó còn là vấn đề quan trọng dù bạn tự làm một theme, sử dụng framework theme hay sử dụng starter theme.

Nội dung bài viết

Theme WordPress bao gồm những gì?

Chung quy ra thì một theme WordPress sẽ bao gồm:

HTML: Cái khung của theme.
CSS: Lớp da của theme.
PHP: Linh hồn của theme.

Mình nói vậy các bạn hiểu chứ? Điều đó có nghĩa là muốn làm việc được với theme, bạn cần biết tối thiểu 3 cái ở trên. Ngoài ra còn có thêm Javascript và jQuery nữa nhưng cũng không quan trọng lắm.

Theme hoạt động thế nào?

Trong theme có rất nhiều file, mỗi file đều mang vai trò riêng của nó do WordPress định sẵn (ví dụ như file single.php để hiển thị nội dung một post). Khi thực thi, các file này sẽ được nối lại với nhau tạo nên một giao diện phù hợp với truy vấn người dùng. Giả sử như bạn ra trang chủ, thì sẽ có 3 file được nối lại là:

header.php – Cái đầu của theme.
index.php – Cái thân của theme.
footer.php – Hạ bộ của theme.

Trong đó, file header và footer luôn luôn được gọi ở tất cả mọi trang. Bạn hãy tưởng tượng cấu trúc của một theme giống nhau sau.

<html> <head> <title>Tiêu đề website</title> </head> <body> <!--Các phần trên file header.php--> <p>Nội dung của website.</p> <!--Phần này là index.php index.php--> <!--Các phần ở dưới là file footer.php--> </body> </html>

Bạn thấy đó, các thẻ HTML trong theme sẽ được cắt ra trong mỗi file và đây chính là khó khăn cho một số bạn mới tìm hiểu do chưa quen, nhưng từ từ sẽ quen thôi.

Vậy làm sao nó nối được với nhau?

Trong WordPress, những file đặc biệt như header.php, footer.php, sidebar.php sẽ được nối bằng một hàm riêng biệt. Hãy xem ví dụ dưới đây mình mô phỏng nội dung của một file single.php thường gặp.

<?php
        get_header(); // hàm này gọi file header.php
        ?>

        <div class="content" >
        /* Bắt đầu vòng lặp */
        <?php

        if ( have_posts() ) : while ( have_posts ) : the_post();

                bla...bla....bla

        endwhile;
        endif;
        ?>
        /* Kết thúc vòng lặp */
        </div>

        <div class="sidebar">
                <?php get_sidebar(); ?>// hàm này nối file sidebar.php vào
        </div>

        <div class="footer">
                <?php get_footer(); ?>  // hàm này nối file footer.php
        </div>
?>

Có thể bạn đã nhận ra rằng:

Hàm get_header() để nối file header.php vào vị trí nó cần nối.
Hàm get_sidebar() để nối file sidebar.php vào vị trí cần nối.
Hàm get_footer() để nối file footer.php vào vị trí cần nối.

Bạn nên nhớ rằng chỉ có 3 file này là có hàm nối riêng biệt thôi, các file còn lại nó sẽ tự thực thi khi truy vấn hoặc dùng hàm nối khác mình sẽ nói ở cuối bài.

Một theme cần có tối thiểu các file nào?

Cấu trúc theme WordPress rất linh hoạt, một file có thể mang nhiều ý nghĩa nên đôi khi bạn thấy một số theme có quá nhiều file mà một số lại rất ít, vậy thật sự nó cần tối thiểu bao nhiêu file là đủ? Con số ở đây là 11, bao gồm:

header.php
index.php
single.php
page.php
sidebar.php
footer.php
archive.php
404.php
search.php
functions.php
style.css

Ý nghĩa của các file trong theme

Đây là phần quan trọng mà mình muốn nhấn mạnh trong bài này, các bạn chú ý đọc nhé. Trong phần này, mình sẽ sử dụng các file mẫu của theme Bones vì cấu trúc dễ đọc, bạn cũng nên thực hành trên theme này.

header.php

File này thường là chứa các thẻ đầu tiên của một tập tin HTML, tức là bao gồm thẻ DOCTYPE, html, head và thẻ mở body. Một vài trường hợp, có thể nó sẽ kết thúc bằng một thẻ div container để xác định chiều rộng của theme. Sở dĩ đôi lúc họ cần kết thúc file header.php là vì họ chắc chắn rằng các thẻ đó luôn bắt buộc xuất hiện ở mọi trang, nên chỉ cần hàm get_header() là được mà không cần viết thêm. Mẫu file header.php

index.php

Khi vào trang chủ website thì file này sẽ thực thi đầu tiên, thường là nó sẽ chứa một vòng lặp để hiển thị danh sách các bài mới nhất. Nếu các file khác như single.php, archive.php, search.php không tồn tại thì WordPress sẽ lấy file này ra để xử lý các truy vấn. Mẫu file index.php Bắt buộc xem: Khái niệm vòng lặp (loop) và Query trong WordPress

single.php

File này sẽ hiển thị nội dung của website khi ta nhấp vào xem một post hoặc một custom post type. Thường nó sẽ bao gồm vòng lặp, hàm gọi sidebar và dĩ nhiên là bắt buộc có hàm gọi header và footer. Mẫu file single.php

page.php

Chức năng file này cũng giống như file single.php nhưng sẽ hiển thị nội dung của một Page hoặc một custom post type khi tham số ‘hierarchical’ => true. Mẫu file page.php

sidebar.php

File này sẽ chứa code hiển thị sidebar. File này thường là người ta chỉ đặt một sidebar duy nhất nhưng nếu bạn muốn làm nhiều sidebar thì có thể đặt tên kiểu sidebar-one.php, sidebar-two.php và thêm tham số vào hàm get_sidebar như get_sidebar(‘one’). File sidebar.php mẫu

footer.php

Đơn giản là sẽ chứa các nội dung hiển thị ở cuối trang, thường là các thẻ đóng của HTML hoặc các code gọi sidebar. File footer.php mẫu

archive.php

File này sẽ hiển thị danh sách các bài viết khi bạn vào category, tag hoặc một custom taxonomy nào đó. Ngoài ra, bạn vẫn có thể tạo thêm file category.php để hiển thị riêng cho category và tag.php để hiển thị riêng cho tag, nhưng tốt nhất là bạn nên có ít nhất 1 file archive.php này. File archive.php mẫu

404.php

Đơn giản là thông báo lỗi 404 của website. File 404.php mẫu

search.php

Khi bạn tìm kiếm nó sẽ trả ra các kết quả và file này sẽ hiển thị các kết quả đó, thường là một loop (vòng lặp). File search.php mẫu

functions.php

Đây cũng là một file khá quan trọng mặc dù trong vài theme nó chỉ có vài dòng nhưng trong thời gian sử dụng bạn sẽ ngày càng viết nhiều cái hơn vào file này. File này có tác dụng thực thi một đoạn mã PHP nào đó mà nó sẽ trực tiếp ảnh hưởng lên theme. Ví dụ như bạn thực hành Hook và Filter thì cũng làm trong file này, tạo custom post type cũng làm trong file này, tạo widget cũng làm trong file này,…. Mẫu file functions.php

style.css

Đây là file quan trọng nhất của theme, không có file này thì theme bạn không thể kích hoạt được. Đại loại nó là file xác định thông tin của theme và chứa các CSS trong theme, bạn có thể không viết CSS ở file này mà import một file CSS khác vào nhưng bạn vẫn phải có file này để xác định các thông tin của theme như tên theme, tác giả,… Mẫu file style.css Bonus: nofollow”>Hình ảnh quan hệ giữa các file trong theme.

Làm quen với hàm get_template_part

Có rất nhiều theme hiện nay khi mở lên bạn toàn thấy hàm get_template_part(). Hàm này có công dụng là nối file nào đó vào vị trí nó được đặt. Ví dụ mình muốn nối file content.php vào vị trí cần nối thì sẽ viết như sau:

1	`<?php get_template_part(` `'content'` `); ?>`

Lưu ý là bạn chỉ cần ghi tên file, nó sẽ tự nhận đó là file .php. Thêm nữa, nếu bạn có file content-single.php thì sẽ viết như sau:

1	`<?php get_template_part(` `'content',` `'single'` `); ?>`

Trong đó, tham số thứ nhất là slug trong tên file và tham số cuối cùng là tên chỉ định. Mẫu file sử dụng hàm get_template_part()

Thế còn cấu trúc nào khác không?

Dĩ nhiên là còn, nhưng đó là cấu trúc riêng của từng Framework Theme. Ví dụ khi bạn mở code của Genesis Framework và Thesis Framework sẽ thấy nó “không được bình thường”. Do vậy, bất lợi của việc dùng framework là bạn cần thời gian để nắm rõ cấu trúc của nó, và nó cũng có rất nhiều hạn chế cho những ai quen với việc tinh chỉnh thẳng trong cấu trúc mà không phải dùng bất cứ cách thức nào khác.

Lời kết

Tất cả nội dung bên trên là những gì mình muốn cho các bạn biết về cấu trúc của một theme WordPress nó như thế nào. Vì nó quan trọng nên mình có thể đã viết hơi dài nhưng thật tốt nếu bạn có thể dành thời gian đọc hết, mình tin là bạn sẽ phải nói lời cảm ơn khi đọc xong bài này đấy. Nếu bạn muốn thực hành về việc hiểu cấu trúc theme, mình khuyến khích các bạn dùng hai starter theme khá thông dụng là Bone và Underscore Nguồn: Blog Thạch Phạm

2.7/5 - (6 bình chọn)

Tin tức - Thủ thuật

Hiểu cấu trúc theme WordPress

Theme WordPress bao gồm những gì?

Theme hoạt động thế nào?

Vậy làm sao nó nối được với nhau?

Một theme cần có tối thiểu các file nào?

Ý nghĩa của các file trong theme

header.php

index.php

single.php

page.php

sidebar.php

footer.php

archive.php

404.php

search.php

functions.php

style.css

Làm quen với hàm get_template_part

Thế còn cấu trúc nào khác không?

Lời kết

Tin tức nổi bật

Thiết kế web theo mẫu

Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020

10 bước xây dựng kế hoạch marketing online

Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt

Thiết kế website theo yêu cầu

Thiết kế trang web, lập trang web, dựng trang web bán hàng

E-commerce là gì? E-business là gì? So sánh E-commerce và E-business

Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau

Theme WordPress bao gồm những gì?

Theme hoạt động thế nào?

Vậy làm sao nó nối được với nhau?

Một theme cần có tối thiểu các file nào?

Ý nghĩa của các file trong theme

header.php

index.php

single.php

page.php

sidebar.php

footer.php

archive.php

404.php

search.php

functions.php

style.css

Làm quen với hàm get_template_part

Thế còn cấu trúc nào khác không?

Lời kết

Tin tức nổi bật

Thiết kế web theo mẫu

Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020

10 bước xây dựng kế hoạch marketing online

Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt

Thiết kế website theo yêu cầu

Thiết kế trang web, lập trang web, dựng trang web bán hàng

E-commerce là gì? E-business là gì? So sánh E-commerce và E-business

Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau

Đăng nhập