Template Giao diện luôn là chủ đề được quan tâm hàng đầu khi làm các trang web. Bài này chúng ta cùng tìm hiểu về template giao diện với Joomla 5.
Template Joomla vs Theme WP
Trên WP, cài theme cũng gần như đồng nghĩa với có được một trang web gần như hoàn chỉnh để hoạt động ngay. Ở một khía cạnh nào đó, làm web trên WP tập trung vào việc tìm theme vừa ý, cài đặt vào và sử dụng.
Template Joomla (thuật ngữ tiếng Việt hay quen dùng là Giao diện), khi bạn cài đặt một Template vào và kích hoạt thì phần nhiều sẽ thấy trang web mới trống trơn. Vì vậy nếu bạn có cài đặt một Template mới và kích hoạt, bạn thấy không có gì thì là chuyện rất bình thường như ở huyện nhé. Đừng quá ngạc nhiên, khi sử dụng đúng cách chỉ 1-2 template là đủ biến hoá cho mọi giao diện website.
Để đáp ứng khả năng tuỳ biến cao và đa dụng cho website, Template Joomla thường chỉ là một bộ cấu trúc khung, cung cấp các layout, cùng với các gói style (css) định nghĩa sẵn để bạn khai thác.
Template Joomla chỉ tập trung vào layout và style giao diện. Ít đi vào xử lý dữ liệu, cũng không gọi các hàm chức năng như trên WP. Việc tách rời này của Joomla giúp bạn có thể bổ sung giao diện, dùng thêm giao diện mới, hoặc đổi giao diện mà không làm thay đổi chức năng và dữ liệu. Tuy vậy, với những người mới sử dụng Joomla sẽ là một rào cản nho nhỏ.
Position (Điểm neo) trên layout của Template Joomla
Template Joomla thường thiết kế sẵn các layout như cột trái, cột phải, phân chia bố cục như dạng tin tức. Tại đó để sẵn các position (Điểm neo) để bạn có thể neo (chèn) Module hiển thị tại đó.
Postion (Điểm neo) được đặt tên riêng theo chủ ý của template. Mà position (Điểm neo) là để bạn có thể neo (chèn) Module vào đó. Như vậy ở một khía cạnh nào đó về mặt hiển thị ra Frontend, Module có mối liên hệ với template thông qua Position (Điểm neo).
Sau khi bạn click vào nút layout thì một cửa sổ sẽ mở lên, với trang Frontend bạn vẫn thường thấy, nhưng có luôn cả những vị trí ẩn với position (điểm neo) nữa. Những vị trí position (điểm neo) đó là để sẵn để bạn có thể neo chèn module vào, và module này xuất hiện trên trang nào, cho ai là do bạn chỉnh.
Style: card outline và none outline là gì
Như trên hình bạn thấy, trên layout sau Position: ****** thì bên dưới có ghi dòng: Style: *******.
Đây là chế độ định sẵn nếu bạn không có lựa chọn gì khác. Ví dụ: Style: card bạn thấy, khi bạn thêm module vào và không chỉnh lại, thì chế độ định sẵn sẽ được sử dụng.
Style này những phần UI trang trí bao bọc cho module khi xuất hiện trên trang Frontend. Về mặt kỹ thuật, tuỳ theo style được chọn, các mã html bao bọc sẽ được thêm vào để bao lấy module.
Nhìn vào hình bên dưới, module này có Style: card, các mã html sẽ được bổ sung để bao bọc lấy module.
Kết quả cuối cùng là bạn sẽ thấy tiêu đề module trên Frontend có nền màu hơi xám, cả module được bao bọc bởi một đường viền màu xám.
Trên template còn định nghĩa sẵn các Style khác để bạn chọn sử dụng.
Khi tạo hoặc chỉnh module, bấm vào tab Advanced, bạn sẽ thấy field Module Style, click chọn vào bạn sẽ thấy danh sách các style khác.
Trong đó Inherited: là chế độ tự động lấy từ giá trị định sẵn từ giá trị định sẵn trên layout template (minh hoạ trong hình phía trên)
Còn các style khác bạn có thể chọn.
Minh hoạ thêm: khi bạn chọn lại Module style là noCard, mã html bao bọc cũng được thay đổi. Về mặt giao diện, đường viền xung quanh và màu nên trên tiêu đề title cũng không có.
Các template sẽ làm sẵn các module style này để bạn chọn sử dụng theo ý bạn khi cần thiết.
Điều chỉnh với template
Bây giờ bạn sẽ bắt đầu chỉnh template để hiển thị cho Frontend
Bạn bấm click vào nút Custom đi.
Tới đây thì chắc chắn bạn biết sử dụng, bên trong phần chỉnh sửa bạn có thể thêm vào chữ, hoặc thay bằng logo. Chọn font cho website Frontend.
Khám phá thêm tính năng thú vị với template
Trong một trang nào đó, bạn muốn thay một logo khác, đổi lại font chữ, màu sắc thì làm thế nào. Xem video clip nhé.
Đây là cách bạn nhân đôi bộ chỉnh cho template, và áp dụng lên một menu. Nếu bạn cài một template khác vào, và cũng chỉ muốn dùng riêng cho một vài menu, bạn cũng chỉ cần áp dụng theo cách này.
Tìm và cài Template khác
Template Joomla 5 cũng rất phong phú, tràn ngập luôn. Bạn có thể tìm được rất nhiều template ở rất nhiều trang khác nhau.
XiroStart
Là template kế thừa từ template mặc định của joomla, với css html chuyển sang hoàn toàn dùng với Boostrap 5, cung cấp thêm layout chỉnh Article (Tin Bài) và chỉnh Module ngay trong trang Frontend rất trực quan. Rất thuận tiện cho các developer và những người quản lý website, vì không phải lần mò quá nhiều vào trong Backend để chỉnh sửa nội dung và module nữa.
Template này mượt, nhẹ, hiện đại, dùng xây dựng các giao diện tốc độ cao, thân thiện.
Template Joomla 5 dạng Framework Template
Các template dạng Framework template thì chuẩn bị sẵn rất nhiều thành phần trong css. Bổ sung tính năng dựng layout và chèn position thêm chỉ bằng cách click, kéo, thả. Cung cấp tính năng làm các loại Megamenu.
Các template framework miễn phí:
- T4 template framework
- Gantry
- Astroid
Dù là giúp bạn thao tác nhanh hơn để làm template frontend, nhưng việc tìm hiểu cách sử dụng các template framework này cũng tốn không ít thời gian. Và do quá nhiều tính năng chuẩn bị sẵn, kéo theo kích thước render trên trang Frontend cũng khá nặng nề. Ngoài ra việc bị lệ thuộc chặt cố định vào framwork này cũng làm bạn khó khăn khi cần tối ưu code, tối ưu hiệu suất và mở rộng một số chức năng.
Template dạng Builder
Template dạng Builder là template kéo thả và chỉnh sửa trực quan mà không đụng đến code. Gần như là bộ css và html là của bộ Builder này.
Với các giao diện có sẵn và bán sẵn, bạn sẽ nhanh chóng có được giao diện phù hợp. Dù giảm thời gian thiết kế, nhưng bạn bị lệ thuộc hoàn toàn vào các extenstion và cấu trúc js, css, layout được cung cấp bởi Builder.
Sử dụng template nào
Hệ thống template joomla cho phép bạn sử dụng template đã cài đặt lên từng menu riêng. Vì vậy bạn hoàn toàn có thể sử dụng đồng thời các template khác nhau. Vậy nên bạn có thể cài đặt các template, sau đó phát triển và thay thế dần những template không phù hợp.
Dustin Dũng có 15 năm kinh nghiệm làm việc với PHP, SQL, Đã thực hiện qua các dự án với Joomla!, Wordpress, Opencart, PrestaShop, Magento. Với Joomla!, Dustin Dũng có hơn 15 năm kinh nghiệm, từ Mambo, rồi Joomla 1.0 và bây giờ là Joomla! 5