Một trong những vấn đề mình được hỏi nhiều nhất đó làm thể nào để chỉnh sửa giao diện trên WordPress.

Và thường câu trả lời bạn tìm được sẽ là sử dụng CSS, nhưng nếu bạn không biết gì về code thì sao?

Không sao bạn có thể sử dụng các plugin dạng kéo thả hoặc sử dụng CSS Hero plugin.

Plugin này phù với những người “không biết code” “không biết CSS”

Diều Hâu sẽ giới thiệu đến bạn một plugin giúp bạn tùy chỉnh giao diện mà không cần thành thạo CSS hay code đó là CSS Hero.

Review CSS Hero

CSS Hero là một plugin WordPress trả phí cho phép chỉnh sửa giao diện WordPress, mà không cần đụng vào bất kỳ dòng code nào (Không cần biết HTML hay CSS).

Người sử dụng hoàn toàn có khả năng quay lại các thay đổi, khá tiện cho mấy bạn mới.

Tất cả các thay đổi sẽ được lưu dưới dạng stylesheet, có nghĩa là bạn dễ dàng tùy chỉnh giao diện WordPress mà không lo tới việc rằng mình làm sai hay đơn giản rằng bạn chỉ đang muốn thử.

Điều này tương tự nút Ctrl+Z kì diệu vậy bạn có thể back lại bất cứ lúc nào.

Kể cả bạn là một web Desinger hoặc Developer, các bạn sẽ thấy CSS Hero thực sự rất tuyệt vời. Plugin hoạt động tốt với tất cả framework WordPress và các giao diện nổi tiếng nhất.

Chúng ta cũng dễ dàng thực hiện các thay đổi trên child theme, sau đó đưa giao diện này lên để sử dụng trên website của khách hàng.

CSS Hero sẽ giúp các bạn tiết kiệm rất nhiều thời gian và công sức khi thực hiện tuỳ chỉnh cho website WordPress.

Thông thường, mình khá nghi ngờ về kiểu tùy chỉnh point-and-click (chỉ cần click vào là tùy chỉnh được). Đa phần vì mấy kiểu này sẽ làm website bạn nặng và chậm hơn.

Tuy nhiên, CSS Hero thực sự làm mình ấn tượng ngay trong lần sử dụng đầu tiên.

Nếu các bạn yêu cầu mình đánh giá CSS Hero một cách trung thực, mình sẽ cho plugin này 5/5 sao.

Cách sử dụng CSS Hero để tuỳ chỉnh giao diện WordPress

Trước tiên, bạn cần cài đặt và kích hoạt plugin CSS Hero. Nếu đây là lần đầu tiền bạn cài plugin, hãy xem hướng dẫn chi tiết của mình về cách cài đặt plugin WordPress.

CSS Hero là một plugin WordPress cao cấp với mức giá cho gói thấp nhất là $29/năm/1 site (nói chung là cũng hợp lý với những gì nó mang lại cho bạn).

Nhưng đối với một số bạn mới học sử dụng WordPress hoặc chưa đủ điều kiện để mua chính thức từ nhà sản xuất.

Bạn có thể mua tại TheDevKit đang cung cấp CSS Hero Lifetime Pro chỉ với 250k (đang giảm giá 30%)

Lưu ý: là với plugin này bạn chỉ được sử dụng trên 1 domain duy nhất và được cập nhật suốt đời luôn).

Sau khi cài đặt và kích hoạt, nó sẽ yêu cầu bạn login vào tài khoản đã mua hàng từ nhà sản xuất. Bạn chỉ cần login và quay lại Dashboard và tiến hành sử dụng là được.

Mục tiêu của CSS Hero là cung cấp giao diện WYSIWG (mọi thứ bạn thấy đều có thể chỉnh sửa được) để dễ dàng tùy chỉnh giao diện. Đơn giản chỉ cần đăng nhập vào Dashboard và bạn sẽ thấy nút “Customize with CSS Hero” trên thanh admin WordPress.

Nhấp vào nút này sẽ sang kiểu live preview mà bạn hay thấy ở các plugin page builder. Bây giờ các bạn sẽ thấy thanh công cụ CSS Hero.

Tiếp theo, chỉ cần nhấn vào bất kỳ chỗ nào bạn muốn chỉnh sửa trên website và CSS Hero sẽ hiển thị cho chúng ta các thuộc tính CSS cụ thể cho thành phần đó.

Ví dụ ở đây mình sẽ chỉnh sửa chữ “Diều Hâu”

Ở đây sẽ bao gồm các thuộc tính CSS thường dùng nhất như background, typography, border, spacing,..v.. Các bạn cũng dễ dàng nhấn vào bất kỳ mục nào để mở rộng mục và sau đấy chỉnh sửa các thuộc tính CSS với một giao diện hết sức trực quan.

Khi thực hiện các thay đổi, bạn sẽ thấy các đoạn css được hiện ở bên dưới. Nếu như đang học CSS bạn sẽ thấy chức năng này thực sự tuyệt vời, nó giúp bạn thấy được cách hoạt động của từng thuộc tính để hiểu rõ hơn.

Gặp khó khăn trong việc tìm kiếm hình ảnh bản quyền miễn phí cho website của mình? CSS Hero đi kèm với Build-in Unplash được tích hợp sẵn cho phép các bạn sử dụng, tìm kiếm và sử dụng những bức ảnh tuyệt vời cho website.

CSS Hero cũng đi kèm với các snippet được tạo sẵn mà chúng ta dễ dàng áp dụng cho các thành phần trang khác nhau trên website. Chỉ cần chuyển sang tab Snippets ở bên phải.

Nó giống kiểu các template có sẵn trong page builder bạn chỉ cần chọn lưu lại.

Khi tạo ra các thay đổi cho website, CSS Hero sẽ tự động lưu những thay đổi này nhưng sẽ không xuất bản chúng. Để áp dụng những thay đổi này trực tiếp cho website của mình, các bạn sẽ

cần nhấn vào nút Save and Publish.

Cách Undo các thay đổi trên CSS Hero

Một trong những tính năng hữu ích nhất của CSS Hero là khả năng undo các thay đổi mà chúng ta đã thực hiện. CSS Hero sẽ lưu giữ lịch sử của những thay đổi được thực hiện trên giao diện. Chỉ cần nhấp vào nút history trên thanh công cụ CSS Hero để xem danh sách các thay đổi.

Giống như chức năng revision trong WordPress vậy, nếu bạn chưa hiểu rõ về tính năng này có thể đọc bài disable Post Revision để tối ưu cơ sở dữ liệu.

Các bạn hãy nhấn vào date and time để xem hiện tại website của mình hiển thị như thế nào. Nếu muốn trở lại trạng thái trước đấy, chỉ cần lưu lại hoặc tiếp tục chỉnh sửa từ thời điểm này.

Thao tác này không có nghĩa là những thay đổi bạn thực hiện sau thời điểm đó sẽ biến mất. Chúng vẫn sẽ được lưu trữ và bạn cũng dễ dàng quay lại để sử đổi. Rất đơn giản phải không!

Nhưng nếu các bạn chỉ muốn undo các thay đổi đã thực hiện cho một mục cụ thể thì sao?

Trong trường hợp này, chúng ta không cần sử dụng công cụ history. Chỉ cần nhấn vào thành phần trang mà bạn muốn hoàn tác, sau đấy nhấn vào nút reset.

Thao tác này sẽ thay đổi item trở lại cài đặt mặc định ban đầu của giao diện WordPress.

Tuỳ chỉnh giao diện website trên mobile

Việc khó khăn nhất của website desinger là khả năng tương thích của các thiết bị. Bạn sẽ cần đảm bảo rằng website hiển thị tốt trên các kích thước màn hình khác nhau. Các website designer sử dụng nhiều công cụ để kiểm tra khả năng tương thích của trình duyệt và thiết bị. Rất hay là CSS Hero cũng đi kèm với một công cụ xem trước trên thiết bị di động.

Chỉ cần nhấn vào biểu tượng desktop trong thanh công cụ và sau đấy nhấp vào loại thiết bị. Chúng ta dễ dàng chọn thiết bị di động, máy tính bảng hay máy tính để bàn. Khu vực xem trước sẽ thay đổi thành thiết bị đã lựa chọn.

Bây giờ bạn sẽ dễ dàng chỉnh sửa website trong khi xem trước cho các thiết bị di động. Công cụ này vô cùng hữu ích để tùy chỉnh giao diện cho các thiết bị di động và máy tính bảng.

Khả năng tương thích giao diện của CSS Hero

Website chính thức của CSS Hero có một danh sách rất nhiều các giao diện tương thích.

Danh sách này bao gồm các giao diện WordPress miễn phí tốt nhất.

Danh sách cũng có các giao diện cao cấp phổ biến nhất như CSSIgniter, Themify, StudioPress, v…v. Xem thêm tại đây.

Thế còn những giao diện không có trong danh sách giao diện tương thích?

CSS Hero đi kèm với một tính năng gọi là Rocket Mode Auto-detection. Nếu như đang sử dụng một giao diện không có trong danh sách tương thích.

CSS Hero sẽ tự động bắt đầu sử dụng chế độ rocket. Chế độ này sẽ cố gắng tự đoán các đoạn CSS từ giao diện của các bạn. Thường thường thì chức năng này hoạt động rất tốt.

Nếu giao diện của các bạn được code tuân theo các tiêu chuẩn WordPress. Thì chúng ta sẽ dễ dàng chỉnh sửa hầu hết mọi thứ.

Các bạn cũng nên liên hệ với các nhà sản xuất theme, nếu nó không tương thích với CSS Hero.

Những plugin nào tương thích với CSS Hero

CSS Hero thường xuyên được kiểm tra với các plugin WordPress phổ biến nhất về khả năng tương thích.

Việc này bao gồm contact form, page builder, WooCommerce và các plugin khác.

Bạn có thể xem dạnh sách đó tại đây.

Nếu các bạn đang sử dụng plugin WordPress không tương thích với CSS Hero. Thì các bạn hãy yêu cầu nhà cung cấp khắc phục điều này. Họ thực sự không cần phải chỉnh sửa nhiều để phù hợp với CSS Hero đâu.

Mình hy vọng rằng bạn thấy bài review CSS Hero này sẽ giúp bạn tùy chỉnh giao diện dễ dàng hơn. Các bạn hãy muốn xem qua hướng dẫn của mình về việc tăng tốc độ và hiệu suất WordPress cho người mới sử dụng nhé.