Hello các bạn, sau bao nhiêu thời gian không viết bài, cuối cùng hôm nay mình đã trở lại với một chủ đề mới đó là sử dụng Laravel Blade template để phát triển theme WordPress. Thật ra là có một starter theme tên là Sage 9 sử dụng templage engine này để build theme cho WordPress, vậy Sage 9 là gì ? sử dụng như thế nào? chúng ta cùng tìm hiểu nhé.

Sage 9 là gì?

Sage 9 là một starter theme được phát triển bởi Root team, mình đã tiếp cận cách đây 1 năm và có một cơ số project đã làm và sử dụng starter theme này, còn mọi người hỏi starter theme là gì thì nó cũng giống như thằng Underscrore vậy đó.

Các bạn có thể tìm hiểu thêm thông tin bằng cách nhấn nút bên trên nhé. Tất tần tật cách cài đặt, dev và sử dụng của nó đều có trên website của Root.

Tại sao lại sử dụng Sage 9 mà không phải là một starter theme khác?

Thật ra bạn sử dụng một starter theme nào cũng được hết á, nhưng khoan đã trước khi chọn 1 starter theme khác hãy điểm qua thế mạnh của thằng Sage 9 đã nhé.

Sage 9 tách các phần trong theme thành nhiều phần rất rõ ràng đó là:

• Controller dùng để lấy dữ liệu và passing dữ liệu qua phần template
• Template sử dụng template Blade của Laravel để hiển thị dữ lệu.
• Có riêng 1 file đề làm filter riêng
• Sử dụng các CSS framework mới nhất kết hợp Webpack để build file CSS, JS một cách hoàn hảo, cực nhẹ nhàng, thậm chí bạn có thể định nghĩa JS chỉ chạy ở route ( trang nào ) luôn
• Trong quá trình dev Sage 9 còn show luôn cho chúng ta browsersync để khi chúng ta sửa SCSS, hoặc JS thì tự động câp nhật trên browser giúp chúng ta biết kết quả của đoạn code vừa rồi là gì.

Dựa vào những phần bên trên thì, Sage 9 giúp cho việc tách bạch giữa việc làm frontend, backend ( phần lấy dữ liệu ) thành 2 phần riêng biệt, rất dễ dàng cho việc làm team mà chỉ có bạn biết làm frontend, không biết nhiều về WordPress. Dễ dàng cho việc đang phát triển frontend cho Laravel sau đó chuyển sang làm frontend cho WordPress.

Giúp tối ưu tối đa việc load file JS, CSS, và Image bởi Sage 9 đã tối ưu hết cho chúng ta phần này rồi.

Ưu điểm của Sage 9

Theo quan điểm cá nhân của mình thì Sage 9 có những ưu điểm như sau:

Như mô tả ở trên việc tách bạch phần lấy dữ liệu và phần hiển thị thông tin dẫn đến việc dễ dàng trong việc quản lý task công việc, chia sẻ công việc, và kết hợp làm team với các thành viên trong nhóm, dễ maintain dự án.

Sử dụng composer, và npm package quản lý dẫn đến việc có thể module hoá phần template, CSS, và JS của bạn có thể sử dụng lại phần lớn các resource mà bạn đã tạo ( nếu bạn có tạo chúng một cách hệ thống )

Nhẹ nhàng tối ưu cho việc load trang, sử dụng những công nghệ tối tân nhất cho việc phát triển theme cho WordPress.

Nhược điểm của Sage 9

Theo hướng phát triển theme sử dụng Sage 9 thì theo mình chỉ chủ yếu sử dụng với website của khách hàng, không có nhu cầu cài đặt từ phía backend bởi Sage 9 chỉ có thể cài đặt qua FTP mà thôi. Đồng thời Sage 9 không theo quy chuẩn của theme WordPress nên việc phát triển theme để bán đại trà trên chợ là hoàn toàn không thể được.

Do sage 9 sử dụng nhiều thứ mới nên đôi khi để integrate với plugin thứ 3 ( WooCommerce, Memberpress … ) việc custom template của những plugins này đòi hỏi developer cần có một chút kiến thức về filter và hook của WordPress mới có thể sử dụng được blade template trong việc custom theme của các plugin này, cũng cần khá nhiều thời gian và công sức.

Sử dụng Sage 9 trong dự án

Để sử dụng Sage 9 trong dự án thì cực kỳ đơn giản qua các bước như sau:

B1. Cài đặt sage 9 bằng câu lệnh composer create-project roots/sage your-theme-name

B2 . Điền thông tin cần thiết liên quan đến Tên theme, phiên bản, author, đường dẫn author, đường dẫn theme …

B3. Chọn đường dẫn dev, chọn đường dẫn thư mục theme, và chọn CSS frame work

B4. Bạn chọn CSS framework mà bạn ưa thích:

Như vậy là bạn đã cài đặt xong Starter theme Sage 9 cho dự án của mình.

Phát triển như thế nào?

Sage 9 cung cấp cho bạn phần controller để lấy dữ liệu ra ngoài template qua các filter chính vì thế mà bạn chỉ cần đổ dữ liệu dạng Array và sang bên template gọi lại là xong.

Mình sẽ thường là làm HTML CSS trước ( HTML CSS viết qua blade template ) bằng cách sử dụng data dạng array và mình sẽ show dữ liệu sẵn ra trước, sau đó mình mới đổ dữ liệu theo yêu cầu từ Controller ra sau.

Và cứ như vậy việc đổ dữ liệu có thể được đảm nhận bởi Frontend dev hoặc Backend dev đều được bởi dữ liệu show ra ở dạng mảng, quan trọng là 2 phần này có thể làm độc lập tối ưu tốc độ của team. không phụ thuộc vào việc attribute của post có những gì, chỉ cần đủ các thành phần của array là được.

Tạm kết

Bài viết này mang tính chất giới thiệu Sage 9 với những ưu nhược điểm trong quá trình phát triển theme cho WordPress, những bài sau mình sẽ nói sâu hơn về việc sử dụng Sage 9 vớ Woocommerce hoặc MemberPress, hoặc những vấn đề mình gặp phải, cách xử lý chúng trong quá trình sử dụng Starter theme này.