Các file cần thiết trong theme Wordpress

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

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:

<!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:

phan-vung-cac-file-trong-wordpress.png

Dựa vào cấu trúc file bây giờ ta sẽ chia nhỏ ra như sau:

File header.php

<!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

        <div id="footer">
            NỘI DUNG FOOTER
        </div>
    </body>
</html>

File sidebar-left.php

<div id="sidebar-left">
    NỘI DUNG SIDEBAR LEFT
</div>

File sidebar-right.php

<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

<?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

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

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.