Lập Trình Theme WordPress – Phần 1 – Các Khái Niệm Cơ Bản

WordPress là một phần mềm mã nguồn mở được viết bằng ngôn ngữ PHP với mục đích ban đầu là hỗ trợ tạo các trang blog cá nhân. Hơn 15 năm phát triển, WordPress đã xây dựng được cộng đồng tương đối lớn, trở thành mã nguồn có số lượng trang web lớn nhất thế giới. Với số lượng theme, plugin và widget khổng lồ bạn có thể tùy biến trang web của mình sử dụng cho bất kì mục đích gì. Để có thể sử dụng WordPress một cách tối ưu nhất, chúng ta cần hiểu rõ cấu trúc của 1 theme WordPress, để làm được điều đó, chúng ta hãy cùng tìm hiểu và lập trình thử 1 theme WordPress của riêng mình.

Thư mục chứa mã nguồn theme

Các theme của WordPress khi được cài đặt sẽ được lưu trữ tại folder wp-content/themes. Các file mã nguồn (templates) của theme sẽ được đặt chung trong một folder.

Ví dụ: Mình muốn tạo 1 theme tên 7Host Việt Nam, việc đầu tiên mình sẽ tạo 1 folder 7hostvn bên trong thư mục wp-content/themes. Tất cả các file của theme 7Host Việt Nam sẽ được đặt tại wp-content/themes/7hostvn/

Cấu trúc một theme cơ bản

Một theme sẽ được cấu tạo từ các template files. Đây là những file PHP chứa mã nguồn HTML, PHP và các template tags.

Bên cạnh template files còn có các template partials, đây là các file chứa 1 phần của giao diện. Ví dụ: header, footer, sidebar…vv

Một theme WordPress thông thường sẽ có các template files sau:

  • index.php (*)
  • style.css (*)
  • rtl.css
  • comments.php
  • front-page.php
  • home.php
  • header.php
  • singular.php
  • single.php
  • single-{post-type}.php
  • archive-{post-type}.php
  • page.php
  • page-{slug}.php
  • category.php
  • tag.php
  • taxonomy.php
  • author.php
  • date.php
  • archive.php
  • search.php
  • attachment.php
  • image.php
  • 404.php

(*) Các file bắt buộc phải có trong theme. Nếu thiếu những file này, hệ thống sẽ nhận diện theme bị lỗi và không cho phép active theme đó.

Ngoài ra, thông thường các theme sẽ chứa thêm 1 file ảnh có tên screenshot.png (kích thước khuyến nghị là 1200×900), ảnh này sẽ dùng để hiển thị trong giao diện admin phần quản lý giao diện giúp nhận diện theme dễ dàng hơn.

Và để hiểu rõ hơn, về template files, các bạn có thể tham khảo kiến trúc của template ở hình bên dưới.

Mình sẽ đưa ra 1 ví dụ nhỏ, để các bạn dễ hình dung về phương thức hoạt động của kiến trúc template của WordPress.

Mình có 1 trang blog (tất nhiên xây dựng bằng mã nguồn WordPress) hoạt động tại tên miền: https://example.com và trang web này có 1 danh mục bài viết là WordPress có slug là wordpress và id của danh mục bằng 7. Khi người dùng truy cập vào danh mục WordPress tại đường dẫn https://example.com/category/wordpress lúc này WordPress sẽ tìm kiếm template file phù hợp, để tạo ra giao diện phản hồi cho người dùng. Các bước của tìm kiếm có thể mô tả như sau:

  • Bước 1: hệ thống sẽ tìm kiếm template file có tên ‘category-wordpress.php‘ (category-$slug.php). Nếu file này tồn tại hệ thống sẽ render giao diện và phản hồi cho người dùng, ngược lại nếu file không tồn tại, hệ thống sẽ tiếp tục bước kế tiếp.
  • Bước 2: hệ thống sẽ tìm liếm template file có tên ‘category-7.php‘ (category-$id.php). Nếu file này tồn tại hệ thống sẽ render giao diện và phản hồi cho người dùng, ngược lại nếu file không tồn tại, hệ thống sẽ tiếp tục bước kế tiếp.
  • Bước 3: hệ thống sẽ tìm liếm template file có tên ‘category.php‘. Nếu file này tồn tại hệ thống sẽ render giao diện và phản hồi cho người dùng, ngược lại nếu file không tồn tại, hệ thống sẽ tiếp tục bước kế tiếp.
  • Bước 4: hệ thống sẽ tìm liếm template file có tên ‘archive.php‘. Nếu file này tồn tại hệ thống sẽ render giao diện và phản hồi cho người dùng, ngược lại nếu file không tồn tại, hệ thống sẽ tiếp tục bước kế tiếp.
  • Bước 5: hệ thống sẽ tìm liếm template file có tên ‘index.php‘. Nếu file này tồn tại hệ thống sẽ render giao diện và phản hồi cho người dùng, ngược lại nếu file không tồn tại, hệ thống sẽ tiếp tục bước kế tiếp.

Tổ chức thư mục cho theme

Ở phía trên mình đã giới thiệu một số template files cơ bản, tuy nhiên 1 theme hoàn chỉnh với nhiều chức năng còn bao gồm rất nhiều file khác nữa. Ví dụ: các file tài nguyên như hình ảnh, css, javascript, các file PHP định nghĩa các class, helpers…vv Do đó, để quản lý tốt cấu trúc theme, chúng ta được khuyến nghị sử dụng cấu trúc sau khi xây dựng 1 theme

Template tags

WordPress xây dựng sẵn một số hàm tiện ích hỗ trợ lập trình viên có thể lấy được thông tin của trang blog bên trong template files. Các hàm tiện ích này gọi chung là template tags. Các hàm này có thể dễ dàng tra cứu tại https://codex.wordpress.org/

Vì số lượng template tags của WordPress rất nhiều, trong giới hạn bài viết này, mình chỉ giới thiệu một vài hàm phổ biến và chia chúng theo các nhóm chức năng

Liên kết template files / template partials

Chức năng

  • wp_head() – Hook mặc định của WordPress để hiển thị các thành phần trong thẻ.
  • wp_footer() – Hook mặc định của WordPress để sử dụng ở footer.
  • bloginfo() & get_bloginfo() – Hiển thị thông tin của website.
  • wp_nav_menu() – Hiển thị một Menu Location.

Category, Page & Post

  • the_permalink() – Hiển thị permalink của post hiện tại trong truy vấn.
  • the_title() – Hiển thị tiêu đề post hiện tại trong truy vấn.
  • the_content() – Hiển thị toàn bộ nội dung của post hiện tại trong truy vấn.
  • the_excerpt() – Hiển thị excerpt hoặc một phần đầu nội dung của post hiện tại trong truy vấn.
  • the_ID() – Hiển thị ID của post hiện tại trong truy vấn.
  • the_tags() – Hiển thị các tag có trong post hiện tại trong truy vấn.
  • the_date() – Hiển thị ngày đăng post hiện tại trong truy vấn.
  • the_category() – Hiển thị các category của post hiện tại trong truy vấn.
  • post_class() – Hiển thị các class HTML đặc trưng của post hiện tại trong truy vấn.
  • has_post_thumnail() – Kiểm tra xem post hiện tại trong truy vấn có thiết lập thumbnail (Featured Image) hay không.
  • the_post_thumbnail() – Hiển thị ảnh thumbnail của post hiện tại trong truy vấn.
  • category_description() – Hiển thị mô tả của category.
  • tag_description() – Hiển thị mô tả của tag.
  • wp_dropdown_categories() – Hiển thị danh sách category với dạng dropdown.
  • single_cat_title() – Hiển thị tên category trong truy vấn.
  • single_tag_title() – Hiển thị tên tag trong truy vấn.
  • wp_tag_cloud() – Hiển thị mây thẻ.