WP Theme

Cấu trúc theme của wordpress

Chào cả nhà, hôm nay mình viết bài về cách tìm hiểu cấu trúc theme cho wordpress. Để hiểu rõ các thành phần, bố cục tạo nên một theme wordpress trước khi bạn tìm hiểu đến Lập trình theme wordpress.

Trước tiên, bạn phải hiểu một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các file như header.php, footer.php, sidebar.php,…nhưng có hai file bắt buộc cần có trong một theme đó là functions.php và style.css.

Cấu trúc template trong theme

Thì như bạn đã biết theme nó sẽ nằm ở mục wp-content / theme / [tên-theme] trong source của bạn. Trong thư mục thì có thể có nhiều theme, nếu như bạn muốn biết một theme chuẩn thì có thể tham khảo theme Twenty Fifteen.

Để 1 theme wordpress hoạt động tốt thì cần 2 file index.php và style.css. 

  • index.php là template gốc của theme, không chỉ là template để sử dụng cho trang chủ, mà nó còn là template gốc của website nếu như các template khác chưa được khai báo.
  • style.css như là trái tim của theme, file này có thể chứa css cho theme mà nó còn có công dụng là để khai báo các thông tin của theme như Tên theme, tác giả, version, đường dẫn,… nhằm để hiễn thị trong khu vực WordPress.

Nội dung trong file style.css

/*
Theme Name: TourTVC Theme
Theme URI: TVC
Author: Can TVC
Description: Our 2019 default theme is designed to show off the power of the block editor.
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tourtvc
Tags: custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

Cấu trúc đầy đủ của theme

  • header.php Phần đầu của trang web, nơi khai báo các mục như logo, menu. Các template khác thì chỉ cần gọi get_header() để dùng lại nó.
  • footer.php Phần cuối của trang web, chứa các thông tin của webiste đó. Các template khác thì chỉ cần gọi get_footer() để dùng lại nó.
  • sidebar.php Hiễn thị thông tin của sidebar, để hiễn thị ra ngoài thì dùng get_sidebar();
  • category.php Hiễn thị danh sách chuyên mục của 1 post, hay 1 post type nào đó.
  • category-tin-tuc.php Định dạng hiển thị trang category có slug là tin-tuc.
  • category-123.php Định dạng hiển thị trang category có id là 123
  • archive.php Hiển thị nội dung các phần lưu trữ trong website như (List bài viết theo ngày tháng, list bài viết theo tag).
  • single.php Hiễn thị chci tiết bài viết của theme.
  • page.php Hiễn thị thông tin của các page.
  • search.php Hiễn thị thông tin tìm kiếm của theme
  • screenshot.png Hình ảnh đại diện cho theme
  • style.css Hiễn thị thông tin của theme như Tên theme, tác giả, …
  • index.php Hiễn thị thông tin trang chủ của theme
  • comments.php Hiễn thị khu vực bình luận của theme.
  • functions.php Nơi khai báo các chức năng cho theme, viết mới hay update theme
  • Và có các mục liên quan như css, js, images….

Các theme có sử dụng custom post type, custom taxonomy thì cấu trúc sẽ như sau:

  • archive-{ slug }.php  Hiễn thị danh sách list các bài viết thuộc post type có slug là { slug }
  • single-{ slug }.php Hiễn thị chi tiết bài viết của post type đó.
  • taxonomy-{ slug }.php Hiễn thị nội dung trang taxonomy của post type đó.

cấu trúc theme cơ bản 

Tổng kết

Như vậy việc tạo 1 template chuẩn cho theme wordpress thật đơn giản đúng không các bạn. Sau khi nắm kĩ các phần trong cấu trúc theme rồi mới chuyển trang các phần thực hành cho từng file trong theme. Các bạn tham khảo seri lập trình theme wordpress để được học và làm theo mình nhé. Các bạn củng có thể tham khảo bài Những đoạn code hay dùng trong theme wordpress.

Chúc bạn một ngày vui vẽ.