Cấu trúc theme trong WordPress

Single Blog Title

This is a single blog caption
Học thiết kế đồ họa in ấn tại Lê Trọng Tấn

Cấu trúc theme trong WordPress

Học WordPress | Kiến thức WordPress cơ bản

Hiểu được cấu trúc của một theme không chỉ giúp ta dễ dàng chỉnh sửa một theme nào đó dù cho bạn tự làm một theme, sử dụng framework theme hay sử dụng starter theme. Cấu trúc của một theme thường khá đơn giản chỉ bao gồm 3 phần:

HTML: Cái khung của theme.

CSS: Lớp ngoài của theme.

PHP: Linh hồn của theme.

Điều đó có nghĩa là muốn làm việc được với theme, bạn cần biết về HTML, CSS, PHP. Ngoài ra còn có thêm Javascript và jQuery nữa nhưng cũng không quan trọng lắm.

Hoạt động Theme:

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 – Phần đầu của theme.

index.php – Phần thân của theme.

footer.php – phần cuối 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 có thể 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 về WordPress do chưa quen.

Kết nối giữa các File trong Theme

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();

                ……………………………………………….

        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, thật sự một Theme cần tối thiểu 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ọn, các bạn cần chú ý đọc nhé. Trong phần này,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 để dễ hiểu hơn.

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.

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.

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.

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’)

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.

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.

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).

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,….

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ả,…

Bài viết có liên quan

Cài đặt theme giao diên cho wordpress

Việt Tâm Đức chúc các bạn hoàn thành tốt chương trình học wordpress của mình

You may also like
Học lập trình web DruPal tại khu vực Nam Thăng Long
lớp học Illustrator
10 lời khuyên cho người mới học lập trình PHP – học thiết kế web ở đâu hà nội
khoá học thiết kế đồ hoạ tại Hà Nội
Hướng dẫn cài đặt Website WordPress trên Hosting
Khóa học php cơ bản và nâng cao
chat với thầy Dương