Lập trình theme WordPress – Phần 2 – Khởi tạo theme WordPress đầu tiên

Trong loạt bài viết sắp tới, mình sẽ giới thiệu cho các bạn về cấu trúc, cách lập trình một theme wordpress dựa trên free front-end framework Bootstrap 4.

Giới thiệu

Sơ lược vấn đề

Để các bạn không kì vọng quá nhiều, mình sẽ giải thích rõ hơn. Hiện tại, việc phát triển 1 website dựa trên WordPress khá đơn giản, các theme thông dụng như Avada, Betheme, The7…  Các theme này thường có bộ UI builder riêng của họ, giúp việc phát triển giao diện trở nên rất dễ dàng, thông thường chỉ cần kéo – thả (drag and drop). Việc phát triển 1 website bằng cách viết theme từ con số 0 trở nên rất tốn kém về công sức và thời gian (bạn sẽ phải lo về cả giao diện lẫn chức năng của theme). Do đó, hướng phát triển này sẽ giành cho các team chuyên nghiệp (có thành viên chuyên frontend hoặc các bạn fullstack) phát triển các dự án hơn mức phổ thông đòi hỏi giao diện đặc biệt (không có sẵn trong các trình builder), hiệu năng cao…vv

Khó khăn vậy! tại sao chúng ta cần tìm hiểu về nó?

  • Để hiểu hơn về WordPress. Khi bạn hiểu hơn về cấu trúc, luồng xử lý của WordPress, bạn có thể dễ dàng phát triển, tùy chỉnh, debug và làm nhiều thứ khác, để trang web của bạn trở nên tốt hơn, nhanh hơn.
  • Trở nên chuyên nghiệp hơn. Như phía trên mình có giới thiệu, hướng phát triển này sẽ giành cho các team chuyên nghiệp và dự án lớn hơn mức phổ thông, việc hiểu và làm được giúp bạn dễ dàng tiếp cận với những team và dự án như vậy.

Không mất thêm thời gian của các bạn nữa, hãy bắt đầu khởi tạo theme đầu tiên của bạn. Lưu ý: để dễ nắm bắt bài viết này, nếu bạn chưa đọc qua bài những khái niệm cơ bản thì hãy bỏ ra 5 phút đọc sơ qua nó.

Khởi tạo theme đầu tiên

Bước 1: Tạo folder chứa theme

Ở bước này, mình sẽ tạo folder 7hostvn nằm trong thư mục wp-content/themes/

Bước 2: Khởi tạo các file cần thiết.

  • File index.php
  • File style.css
  • File screenshot.png
  • File functions.php

Lúc này, trong thư mục theme của chúng ta đã có đủ 4 file cơ bản. Ở phần admin, các bạn vào mục giao diện, theme của chúng ta đã hợp lệ và được hiển thị ở đây.

Lúc này, chúng ta đã có thể active nó như một theme bình thường và tất nhiên, ở ngoài giao diện sẽ chỉ là 1 trang trắng thôi, vì chúng ta đâu đã viết dòng code nào 🙂

Tiếp theo, bạn có thể hover vào ảnh đại diện của theme, click vào button “thông tin về giao diện” chúng ta cũng sẽ thấy tấm hình screenshot và tên folder chứa theme, ngoài ra cũng chưa có bất kỳ thông tin nào hết.

Bước 3: Khai báo thông tin về theme.

WordPress sẽ sử dụng phần comment phía trên cùng của file style.css để hiện thị thông tin của theme ở mục quản lý giao diện. Dưới đây là ví dụ cơ bản của phần khai báo thông tin, các bạn có thể dựa vào nó để tùy chỉnh thông tin theo ý của mình.

Dựa vào mẫu trên, mình chỉnh sửa thông tin trong theme của mình thành

Và khi kiểm tra lại “thông tin về giao diện” lúc này đã hiển thị các thông tin cơ bản.

Các thông tin này có thể giúp người dùng dễ hình dung được cấu trúc, chức năng của theme ngoài ra còn có thể dùng để quảng bá hình ảnh của team, công ty hay cá nhân tác giả, các bạn nên tận dụng tốt phần mô tả này.

Bước 4: Bật chế độ debug, active theme và bắt đầu công việc phát triển.

Để bật debug mode, các bạn có thể tìm file wp-config.php ở folder chứa mã nguồn WordPress. Kéo xuống phía dưới và tìm dòng lệnh định nghĩa hằng WP_DEBUG, đổi giá trị false thành true (và hãy nhớ đổi true thành false trước khi triển khai trang web của bạn trong môi trường thực tế).

Tiếp theo, chúng ta trở lại admin, mục quản trị giao diện và active theme của chúng ta lên. Bây giờ, ngoài giao diện người dùng sẽ chỉ là 1 trang trắng, không có nội dung gì cả (Nếu có thông báo gì đó, nghĩa là bạn đang có lỗi ở đâu đó, vì debug mode đang bật nên hệ thống sẽ xuất thông báo lỗi).

Bước 5: Viết code cho file index.php

Như trong bài viết trước, chúng ta đã biết file index.php có thể xem là 1 template mặc định, khi các template chức năng bị thiếu WordPress sẽ sử dụng index.php là template hiển thị nội dung. Để chắc chắn mọi thứ đã hoạt động. Chúng ta sẽ thêm 1 đoạn mã nho nhỏ vào file index.php nhé.

Trong đoạn mã trên, mình sử dụng 1 đoạn template HTML cơ bản và sử dụng template tag bloginfo để lấy thông tin tiêu đề trang web. Đây là kết quả mình nhận được.

Trong bài viết kế tiếp, mình sẽ giới thiệu về file functions.php thêm các file tài nguyên tĩnh (javascript, css) vào theme. Tạo header, footer và viết nội dung cho trong chủ.