110-wolfactive-949x475
01/04/2020

Hướng dẫn tạo theme WP – Phần 2: Cấu trúc WP

Ở trong phần 1 mình có hướng dẫn các bạn cài đặt môi trường và khởi tạo theme của WordPress. Thì ở phần 2 này mình sẽ đề cấp và hướng dẫn các bạn thiết lập file và folder trong 1 theme WordPress để các bạn dễ dàng quản lí và phát triển thêm

1. Setup file và folder trong theme WordPress

    1.1 Setup file

Ở phần 1 các bạn đã tạo ra 3 file để khởi tạo theme là index.php, style.css, và screenshot.png. File style.css có chức năng khai báo tên Theme và tác giả của theme, các bạn có thể hiểu là mọi thông tin liên quan về theme sẽ được trình bày trong file style.css. File index.php có nhiệm vụ render giao diện của theme đến với client nếu như không có các file bổ trợ khác. Các bạn tạo thêm file page.phpsingle.php,category.php,.. File page.php có nhiệm vụ render giao diện các trang của WordPress, file single.php có nhiệm vụ render giao diện của các bài post chi tiết, file category.php dể render giao diện của các chuyên mục. Đối với single và category các bạn muốn tạo một giao diện riêng cho từng dạng category thì các bạn sẽ code giao diện trên file category-{name-slug}.php, Và các bạn muốn làm giao diện riêng cho từng loại bài viết thì các bạn code giao diện trên trang single-{name-slug}.php. Và các bạn muốn làm giao diện riêng biệt cho từng trang thì các bạn có thể tạo một custom page mình sẽ hướng dẫn ở các phần kế tiếp.

wordpress-phan-2-setup

    1.2 Setup folder

Wp-phan-2-folder
WordPress-files-foleder

Ở phần folder mình sẽ setup như sau gồm assets, includes, sections,…Trong folder assets thì sẽ có folder css, js, lib, images đây là thư mục chứ các file tương tự như tên folder là css, js, images,… Trong folder includes sẽ chứa những file thư viện cũng như nhưng function includes trong file functions.php. Còn folder sections sẽ chưa những element các bạn sử dụng nhiều lần trong hệ thống page  Như vậy chúng ta có một cấu trúc folder như sau:

Hoặc các bạn có thể cấu trúc theo mô hình MVC để tiện quản lý file.

2. Tạo header và footer

    2.1 Tạo header

Để tạo header cho toàn bộ hệ thống web, các bạn tạo file header.php và viết giao diện để hệ thống render giao diện của header. Ở file này các bạn có thể code menu để hệ thống render menu cho toàn bộ các trang.

WordPress-phan-2-header-files

    2.2 Tạo footer

Để tạo footercho toàn bộ hệ thống web, các bạn tạo file header.php và viết giao diện để hệ thống render giao diện của footer.

WordPress-phan-2-footer-files
Vui lòng chọn size trước khi đặt hàng (*)