Thực hiện cá nhân hóa với bản xem trước thời gian thực trên blog của bạn dễ dàng hơn và hài lòng hơn nhiều, khi bạn có cơ hội thấy những thay đổi khác nhau ngay khi bạn thực hiện chúng. Tất nhiên, cách tốt nhất để thực hiện các thay đổi có thể áp dụng trong thời gian thực là sử dụng một plugin.

tùy biến CSS là một tính năng được cung cấp bởi một số bổ sung trên WordPress.org. Nếu bạn đang tìm kiếm một plugin tạo biểu định kiểu (Mã CSS), bạn có một số lựa chọn có sẵn cho bạn. Tuy nhiên, trong khi có rất nhiều plugin bạn có thể sử dụng để tạo mã CSS tùy chỉnh, có rất ít tùy chọn cung cấp khả năng chỉnh sửa mã CSS theo thời gian thực.

Vì vậy, sau khi khám phá thư mục plugin để tìm giải pháp cho hạn chế này, tôi đã tìm được một số viên ngọc quý hiếm đáng để chúng ta quan tâm.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một blog WordPress trong 7 bước et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

1. Bút chì màu vàng: Trình chỉnh sửa kiểu Visual CSS

Yellow Pencil là một trình chỉnh sửa phong cách trực quan mà bạn có thể sử dụng với bất kỳ chủ đề nào để cá nhân hóa trang web của mình trong vài phút (phông chữ, màu sắc, hoạt ảnh và hơn thế nữa…).Yellowpencil Visual css style editor plugin wordpress

Ce Plugin WordPress premium sẽ tạo kiểu CSS bằng cách lý lịch trong khi bạn chơi với màu sắc như thể đó là một trò chơi. Nó được thiết kế cho người mới bắt đầu cũng như người dùng có kinh nghiệm.

Khám phá cũng của chúng tôi Plugin 5 WordPress để hiển thị thông báo

Không có kiến ​​thức mã hóa được yêu cầu. Tuy nhiên, Plugin WordPress có một trình soạn thảo CSS tốt cho những người thích viết mã. Bạn có thể viết mã trực tiếp với trình chỉnh sửa này và tùy chỉnh CSS của mình.

Tải về | Bản demo | Web hosting

2. Dễ dàng tùy chỉnh JS và CSS 

Ce Plugin WordPress premium là một trình soạn thảo mã CSS và JavaScript mạnh mẽ cho phép bạn thêm chúng vào bất kỳ phần nào trên trang web của mình. Nó cho phép bạn giữ các tùy chỉnh của mình ngay cả sau khi cập nhật lớn theme WordPress. Dễ dàng tùy chỉnh js và css plugin wordpress tùy chỉnh bổ sung

Bạn có tùy chọn giới hạn lĩnh vực sử dụng mã được cá nhân hóa của mình. Ví dụ: bạn chỉ có thể sử dụng mã của mình cho một bài báo có định dạng video.

Xem bài viết của chúng tôi trên Cách yêu cầu chấp nhận các điều khoản sử dụng trên WordPress

Hoặc bạn có thể giới hạn mã của mình ở một theme WordPress riêng; Điều này rất hữu ích nếu bạn thường xuyên thay đổi chủ đề cho blog WordPress.

Tải về | Bản demo | Web hosting

3. JS và CSS tùy chỉnh cho Gutenberg

Plugin WordPress cao cấp Custom JS và CSS cho Gutenberg sẽ cho phép bạn thêm vô số kiểu tùy chỉnh không giới hạn vào trình chỉnh sửa WYSIWYG cho các bài đăng và trang WordPress của bạn. Nó hoàn toàn tương thích với phiên bản Gutenberg của WordPress.

Js và css tùy chỉnh cho plugin gutenberg wordpress

Bạn có thể chỉ cần tạo một kiểu mới với trình soạn thảo CSS dễ sử dụng. Plugin WordPress này mở rộng các tính năng của lĩnh vực tùy chỉnh của trang web của bạn và cung cấp cho bạn khả năng sửa đổi các trường tùy chỉnh của bạn với một mô-đun cá nhân hóa mạnh mẽ và năng động. và chức năng của xem trước thời gian thực của plugin WordPress này làm cho nó rất thoải mái và thân thiện với người dùng.

Tải về | Bản demo | Web hosting

4. Tiết CSS Editor

Công ty sản phẩm WordPress ThemeIsle và Wunderkind đã phát triển plugin này. Sau khi cài đặt và kích hoạt phần sau, hãy điều hướng đến vị trí sau “ Giao diện> Cá nhân hóa Để truy cập trang tổng quan và tìm "Trình chỉnh sửa CSS nâng cao" trong menu. Nó sẽ xuất hiện ở đầu danh sách các mục menu trong Customizer. Trình chỉnh sửa css nâng cao - plugin wordpress

Để sửa đổi mã CSS, tất cả những gì bạn phải làm là thêm một bộ chọn và quy tắc áp dụng cho nó trong hộp văn bản khi bạn nhấp vào "menu". Trình chỉnh sửa CSS Nâng cao".

Xem thêm Cách cải thiện các trang chất lượng kém trong blog của bạn

Các quy tắc CSS có thể được viết để áp dụng nói chung hoặc để nhắm mục tiêu một phần tử cụ thể trên các thiết bị cụ thể (máy tính, điện thoại, máy tính bảng, v.v.). Ngay sau khi các quy tắc được viết, Tùy biến sẽ hiển thị bản xem trước với các thay đổi đã được thực hiện.

Tải về | Bản demo | Web hosting

5. SiteOrigin CSS

Cho đến nay, nó là plugin WordPress cung cấp nhiều tùy chọn nhất trong danh sách này. Điều tuyệt vời nhất về cái sau là nó miễn phí. Plugin WordPress này là plugin duy nhất không thể tìm thấy trong tùy biến.

Siteorigin css - plugin wordpress

Sau khi cài đặt và kích hoạt plugin, bạn cần điều hướng đến vị trí sau “ Giao diện> CSS tùy chỉnh Để truy cập phiên bản CSS của plugin. Trên trang này, bạn có thể thấy một trình soạn thảo văn bản không cung cấp bản xem trước trực tiếp. 

Đọc bài viết của chúng tôi về Các plugin 10 WordPress để tăng doanh số của trang web của bạn

Để truy cập phần sau, bạn phải nhấp vào một trong hai nút xuất hiện ở bên trái, ngay phía trên trình chỉnh sửa. Nút có biểu tượng con mắt sẽ hiển thị trình chỉnh sửa mã CSS trực quan mà những người đam mê sẽ đánh giá cao. Biểu tượng với các mũi tên mở rộng sẽ hiển thị một trình soạn thảo văn bản ngụ ý rằng bạn đã nắm vững các mã CSS.

Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

Kết luận

Đây là ! Đó là tất cả cho danh sách này plugin WordPress cao cấp Điều đó sẽ giúp bạn chỉnh sửa trực quan CSS trên blog của bạn. Nếu bạn có ý kiến hoặc đề xuất, đừng ngần ngại cho chúng tôi biết trong phần dành riêng.

Tuy nhiên, bạn cũng có thể tham khảo ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Chúng tôi mời bạn đến chia sẻ trên các mạng xã hội yêu thích của bạn.   

...