Tìm hiểu cấu trúc theme WordPress: Các thành phần và chức năng cơ bản

WordPress là một hệ thống quản lý nội dung (CMS) phổ biến và mạnh mẽ, cho phép bạn tạo và quản lý một trang web một cách dễ dàng. Theme WordPress đóng vai trò quan trọng trong việc tạo ra giao diện và cấu trúc cho trang web của bạn.

Trên WordPress, mỗi theme có cấu trúc riêng, gồm các thành phần và chức năng khác nhau. Trong bài viết này, chúng ta sẽ tìm hiểu về cấu trúc theme WordPress và tạo một theme chuẩn để bắt đầu code.

1. Thư mục gốc (Root)

Thư mục gốc của theme WordPress chứa các tệp tin quan trọng, bao gồm:

style.css: Tệp tin style.css chứa thông tin meta về theme như tên, phiên bản, tác giả, mô tả và các thông tin khác.

/*
	* Theme Name: Eshopper Theme
	* Description: Theme WooCommerce wordpress create by Hiệp IT
	* Theme URI: https://nguyenxuanhiep.net
	* Version: 1.0
	* Author: Nguyễn Xuân Hiệp (Hiep IT)
	* Author URI: https://nguyenxuanhiep.net/eshopper
	* Tags: theme wordpress, woocommerce, responsive
	* Textdomain: eshopper
	* Language Folder: /languages
 */

index.php: Đây là tệp tin chính của theme và đại diện cho trang chủ của trang web.

functions.php: Tệp tin này chứa mã PHP cho các chức năng bổ sung và tùy chỉnh của theme.

Trên đây là 3 files quan trọng nhất của một theme WordPress, thêm một file ảnh đại diện đặt tên là screenshot.png kích cỡ 1200×900 nữa là có thể kích hoạt theme trong mục Giao diện (Appearance). Chúng ta có cấu trúc ban đầu như sau:

cấu trúc theme wordpress
Bạn có thể kích hoạt ngay theme này trong mục Giao diện, tuy nhiên website chưa có gì để hiển thị cả vì đây vẫn là một theme rỗng. Nó cần nhiều files nữa để cấu thành bộ theme đầy đủ.

2. Thư mục chứa tệp tin mẫu (Template Files)

Theme WordPress sử dụng các tệp tin mẫu để hiển thị nội dung trên trang web của bạn. Dưới đây là một số tệp tin mẫu quan trọng:

  • header.php: Tệp tin này chứa mã HTML, CSS và JavaScript liên quan đến phần tiêu đề của trang web.
  • footer.php: Tệp tin này chứa mã HTML, CSS và JavaScript liên quan đến phần chân trang của trang web.
  • sidebar.php: Tệp tin này chứa mã HTML, CSS và JavaScript liên quan đến thanh bên (sidebar) của trang web.
  • single.php: Tệp tin mẫu cho các bài đăng đơn lẻ trên trang web.
  • page.php: Tệp tin mẫu cho các trang tĩnh (không phải bài đăng) trên trang web.
  • archive.php: Tệp tin mẫu cho các trang lưu trữ như trang danh mục hoặc trang thẻ.
  • search.php: Tệp tin mẫu cho kết quả tìm kiếm trên trang web.
  • 404.php: Tệp tin mẫu cho trang lỗi “Không tìm thấy trang”.
cấu trúc theme wordpress
Cấu trúc theme WordPress sau khi đã thêm các files Template

3. Thư mục chứa tệp tin tài nguyên (Assets)

Đây là thư mục chứa các tệp tin tài nguyên như CSS, JavaScript và hình ảnh, được sử dụng để tạo giao diện cho theme. Thường thì, các tệp tin này được tổ chức trong các thư mục con như sau:

  • css/: Thư mục chứa các tệp tin CSS liên quan đến giao diện của theme.
  • js/: Thư mục chứa các tệp tin JavaScript liên quan đến giao diện của theme.
  • images/: Thư mục chứa hình ảnh và biểu đồ sử dụng trong theme.
  • fonts/: Thư mục chứa fonts chữ mặc định của theme.
cấu trúc theme wordpress
Cấu trúc theme WordPress hoàn thiện.

Kết luận

Hi vọng qua bài viết này, bạn đã có cái nhìn tổng quan về cấu trúc theme WordPress và hiểu cách tận dụng các thành phần cơ bản của chúng. Bằng việc nắm vững cấu trúc theme, bạn có thể tùy chỉnh và tạo ra giao diện đẹp mắt và đáp ứng yêu cầu của trang web của mình.

Đầy là phần 3 trong series Lập trình WordPress của mình, phần sau mình sẽ hướng dẫn bạn viết những dòng CSS đầu tiên cho theme WordPress.