Lời nói đầu

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. Để 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 nhé. 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ó nhé.

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/

Screen Shot 2019-11-16 at 09.09.15

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

Screen Shot 2019-11-16 at 09.28.21

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.

Screen Shot 2019-11-16 at 09.30.24

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.

Screen Shot 2019-11-16 at 09.30.51

 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.

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

 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

Screen Shot 2019-11-16 at 09.49.51

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.

Screen Shot 2019-11-16 at 09.51.53

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 nhé.

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

Để 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ế nhé).

Screen Shot 2019-11-16 at 10.16.45

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ư bài trước mình đã giới thiệu, 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é.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php bloginfo('title'); ?></title>
</head>
<body>
    <h1>Theme WordPress Đầu Tiên</h1>
</body>
</html>

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.

Screen Shot 2019-11-16 at 10.33.27-1

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ủ.

Các bài viết liên quan: