Lập Trình Theme WordPress – Phần 3 – Xây Dựng Cấu Trúc Theme

Trong bài viết trước, chúng ta đã khởi tạo theme WordPress thành công, có đầy đủ thông tin về theme và tác giả … Theme đã có thể kích hoạt (active) thành công. Tuy nhiên, ở giao diện phía người dùng hoàn toàn chưa có gì, hôm nay chúng ta sẽ làm cho nó sinh động hơn 1 chút.

File functions.php

File functions.php là một file rất đặc biệt trong theme WordPress, file này không bắt buộc phải có nhưng lại là một file rất rất quan trọng. File functions.php được hệ thống load cả ở phía frontend và admin. Do đó, người ta thường sử dụng file này để viết thêm các chức năng cho theme WordPress. Một số ví dụ về ứng dụng của file functions.php như:

  • Định nghĩa các hàm (function), lớp (class) chức năng
  • Khai báo các chức năng của theme (định nghĩa các vị trí menu, sidebar…vv)
  • Định nghĩa các hook.
  • Sử dụng các action hooks, filter hooks để thay đổi nội dung hiển thị, logic của trang web.
  • … và rất rất nhiều công việc khác

Các file tài nguyên tĩnh

Chắc chắn, bạn không thể xây dựng giao diện người dùng mà không sử dụng đến JavaScript và CSS phải không. Vậy, bước đầu tiên chúng ta sẽ tìm hiểu cách để thêm chúng vào giao diện của chúng ta nào.

Đầu tiên, các bạn có thể nghĩ tới đường dẫn tuyệt đối. Mình có thể nhúng trực tiếp “http://localhost:8000/wp-content/themes/7hostvn/style.css” vào giao diện của mình. Nhưng cách nào tuyệt đối không nên sử dụng vì chỉ với 1 thay đổi nhỏ như cài thêm chứng chỉ SSL hoặc đưa lên môi trường sản phẩm, tên miền sẽ không còn là localhost và port sẽ không còn là 8000 nữa, thì đường dẫn đến các file tài nguyên này sẽ sai hoàn toàn. Các bạn sẽ rất mất công trong việc sửa lại chúng.

Để thuận tiện hơn, WordPress cung cấp cho chúng ta một số công cụ để thực hiện việc này dễ dàng hơn. Để thực hiện, chúng ta cần một vài thao tác sau:

Bước 1: Chuẩn bị các thư viện cần thiết

Như đã giới thiệu, trong loạt bài này mình sẽ xây dựng 1 trang blog về ẩm thực dựa trên front-end framework Bootstrap 4. Do đó, việc đầu tiên mình cần làm là tải về framework này tại trang Download – Bootstrap. Bootstrap sẽ phụ thuộc vào 2 thư viện JavaScript đó là jQuery and Popper.js tuy nhiên jQuery đã được tích hợp sẵn trong WordPress nên chúng ta không cần tải nó nữa. Về Popper.js các bạn có thể tải nó về ở trang chủ hoặc lưu file popper.min.js (ctrl/cmd + s) về máy của các bạn.

Bước 2: Tạo thư mục

Như trong bài viết đầu tiên của loạt bài lập trình theme WordPress mình đã giới thiệu về cấu trúc thư mục của một theme. Ở đây, mình có thêm 1 folder vendor, folder này sẽ chứa các thư viện từ các nhà cung cấp khác, chúng ta chỉ sử dụng mà không can thiệp gì vào mã nguồn của các thư viện này.

Bước 3: Action hooks

Khái niệm hook (action hook và filter hook) là những khái niệm rất hay trong WordPress. Tuy nhiên, chúng tương đối phức tạp và để giải thích chi tiết hơn, mình sẽ có một bài viết riêng giành cho nó.

Ở thời gian này, bạn có thể tạm hiểu vấn đề đơn giản như sau: WordPress cung cấp cho chúng ta 2 function là wp_head() và wp_footer() 2 functions này hoạt động như 2 mỏ neo. wp_head() sẽ được neo ở trước thẻ đóng của thẻ head (phía trước </head). wp_footer() sẽ được neo ở trước thẻ đóng của thẻ body (phía trước ). Một số function khác sẽ được móc vào các điểm neo này để thực thi logic hoặc in ra nội dung cần thiết.

Bước 4: Khai báo các file cần nhúng vào giao diện

Ở bước này, chúng ta sẽ quay lại với file functions.php. Thêm vào nó đoạn mã nguồn sau:

Bước 5: Sử dụng một số class cơ bản của bootstrap

Ta sẽ cập nhập thêm 1 số code vào file index.php

Kiểm tra devtools của Chrome thấy mọi file đã được load thành công. F5 lại trang web

Phía trên đã xuất hiện Admin bar (do mình đã đăng nhập phía Admin). Phần nội dung có margin (do class container) và màu chữ đã đổi (text-primary). Như vậy, các file JavaScript, CSS của WordPress và của theme dã được nhúng thành công.

Các thành phần của themes (Partials)

Tuân theo nguyên tắc DRY (Don’t repeat yourself) và để dễ quản lý hơn, người ta thường tách những đoạn code hoặc 1 phần của giao diện thường lặp lại nhiều lần ở các trang khác nhau (ví dụ phần footer thường sẽ giống nhau ở tất cả các trang) thành các file template độc lập.

Trong bài hôm nay, chúng ta chỉ làm một thao tác đơn giản thôi, đó là tách phần header và footer ra thành 2 template file riêng, để có thể tái sử dụng chúng trong các trang danh mục (category), bài viết (post)…vv

Bước 1: Tạo template files.

Ở thư mục gốc, các bạn tạo thêm 2 file header.php và footer.php

Bước 2: Điền nội dung

Do theme của chúng ta còn sơ khai nên công việc này rất đơn giản. Mình sẽ copy những phần luôn xuất hiện ở phần đầu (header) của mỗi trang vào file header.php và những phần luôn nằm ở chân (footer) của trang web vào file footer.php. Bây giờ mình có

Nội dung file header.php

Nội dung file footer.php

Bước 3: Nhúng các file thành phần (partial template) vào giao diện

Bây giờ, ở file index.php mình sẽ nhúng các phần của giao diện (phần đầu-header, phần chân-footer) vào.

2 phương thức get_header() và get_footer() cho phép chúng ta nhúng các phần của giao diện tương ứng. Bạn có thể sử dụng kết hợp với conditional tags để tùy biến các template được load.

Bước 4: Kiểm tra

Sau khi điều chỉnh lại mã nguồn của 3 file trên, mình F5 lại trình duyệt, mọi thứ vẫn giữ nguyên như cũ, như vậy là không có lỗi. Chúng ta đã tách được các thành phần của giao diện ra template riêng và nhúng chúng vào giao diện thành công.

Tổng kết

Trong bài viết này, chúng ta nhúng được các file tài nguyên tĩnh vào giao diện của mình, tổ chức được theme thành các phần riêng biệt có thể tái sử dụng được. Ở bài viết kế tiếp, chúng ta sẽ bắt đầu viết mã nguồn cho phần header hiển thị các thành phần như logo, menu, banner quảng cáo…vv Và mã nguồn cho phần footer hiển thị thông tin copyright, đăng ký 1 sidebar ở footer để có thể thêm widget hiển thị một số thông tin.