Cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn

Bạn có muốn thêm CSS tùy chỉnh để thay đổi giao diện trang web của mình không?.

Việc thêm CSS tùy chỉnh giúp bạn thay đổi bố cục và giao diện của trang web, điều không thể thực hiện được thông qua các tùy chọn mặc định. Sử dụng FTP quá khó hiểu đối với hầu hết người mới bắt đầu, nhưng có nhiều cách khác để thêm CSS tùy chỉnh.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn mà không cần chỉnh sửa bất kỳ tệp chủ đề nào.

Tại sao Thêm CSS tùy chỉnh trong WordPress?

CSS là viết tắt của Cascading Style Sheets và là ngôn ngữ giúp bạn tạo kiểu cho trang web WordPress của mình . CSS và HTML đi cùng nhau vì CSS được sử dụng để tạo kiểu cho các thành phần HTML khác nhau như màu sắc, kích thước, bố cục và hiển thị.

Việc thêm CSS tùy chỉnh giúp tùy chỉnh thiết kế và giao diện trang web của bạn, điều này không thể thực hiện được thông qua các tùy chọn mặc định. Nó cung cấp cho bạn nhiều quyền kiểm soát hơn và bạn có thể dễ dàng thực hiện các thay đổi đối với chủ đề WordPress của mình bằng một vài dòng mã.

Ví dụ: giả sử bạn muốn thay đổi màu nền của từng bài đăng riêng lẻ thay vì sử dụng cùng một màu trên toàn bộ trang web. Bằng cách thêm mã CSS tùy chỉnh, bạn có thể cá nhân hóa nền của một bài đăng hoặc trang cụ thể.

Tương tự, bạn có thể thay đổi kiểu và giao diện của danh mục sản phẩm trên cửa hàng Thương mại điện tử của mình bằng cách sử dụng CSS bổ sung.

Như đã nói, chúng ta hãy xem các cách khác nhau để bạn có thể thêm CSS tùy chỉnh vào trang web WordPress của mình. Bạn có thể nhấp vào liên kết bên dưới để chuyển tới bất kỳ phần nào bạn quan tâm:

Phương pháp 1: Thêm CSS tùy chỉnh bằng Trình tùy chỉnh chủ đề

Kể từ WordPress 4.7, giờ đây người dùng có thể thêm CSS tùy chỉnh trực tiếp từ khu vực quản trị WordPress. Điều này cực kỳ dễ dàng và bạn sẽ có thể xem các thay đổi của mình bằng bản xem trước trực tiếp ngay lập tức.

Trước tiên, bạn cần truy cập trang Giao diện »Tùy chỉnh từ bảng điều khiển WordPress của bạn.

Thao tác này sẽ khởi chạy giao diện tùy biến chủ đề WordPress.

Bạn sẽ thấy bản xem trước trực tiếp trang web của mình với một loạt các tùy chọn ở khung bên trái. Nhấp vào tab ‘CSS bổ sung’ từ bảng điều khiển bên trái.

Tab sẽ trượt để hiển thị cho bạn một hộp đơn giản nơi bạn có thể thêm CSS tùy chỉnh của mình. Ngay sau khi bạn thêm một quy tắc CSS hợp lệ, bạn sẽ có thể thấy quy tắc đó được áp dụng trên ngăn xem trước trực tiếp của trang web của mình.

Bạn có thể tiếp tục thêm mã CSS tùy chỉnh cho đến khi hài lòng với giao diện trên trang web của mình.

Đừng quên nhấp vào nút ‘Xuất bản’ ở trên cùng khi bạn hoàn tất.

Lưu ý: Mọi CSS tùy chỉnh mà bạn thêm bằng cách sử dụng tùy biến chủ đề chỉ khả dụng với chủ đề cụ thể đó. Nếu bạn muốn sử dụng nó với các chủ đề khác, thì bạn cần sao chép và dán nó vào chủ đề mới của mình bằng phương pháp tương tự.

Phương pháp 2: Thêm CSS tùy chỉnh bằng Plugin WPCode

Phương pháp đầu tiên chỉ cho phép bạn lưu CSS tùy chỉnh cho chủ đề hiện đang hoạt động. Nếu thay đổi chủ đề, bạn có thể cần sao chép và dán CSS tùy chỉnh của mình vào chủ đề mới.

Nếu bạn muốn CSS tùy chỉnh của mình được áp dụng bất kể bạn đang sử dụng chủ đề WordPress nào , thì phương pháp này là dành cho bạn.

WPCode là plugin đoạn mã tùy chỉnh tốt nhất trên thị trường, với hơn 1 triệu người dùng. Nó giúp dễ dàng thêm mã tùy chỉnh trong WordPress và đi kèm với các tính năng như thư viện đoạn mã tích hợp, logic có điều kiện, pixel chuyển đổi, v.v.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode miễn phí . Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, chỉ cần truy cập Đoạn mã » + Thêm mới từ bảng điều khiển quản trị viên WordPress.

Sau đó, di chuột qua tùy chọn ‘Thêm mã tùy chỉnh của bạn (đoạn mã mới)’ trong thư viện đoạn mã và nhấp vào nút ‘Sử dụng đoạn mã’.

Tiếp theo, ở đầu trang, hãy thêm tiêu đề cho đoạn mã CSS tùy chỉnh của bạn. Đây có thể là bất cứ thứ gì giúp bạn xác định mã.

Sau đó, viết hoặc dán CSS tùy chỉnh của bạn vào hộp ‘Xem trước mã’ và đặt ‘Loại mã’ bằng cách chọn tùy chọn ‘Đoạn mã CSS’ từ trình đơn thả xuống.

Sau đó, cuộn xuống phần ‘Chèn’ và chọn phương thức ‘Tự động chèn’ nếu bạn muốn thực thi mã trên toàn bộ trang web WordPress của mình.

Nếu bạn chỉ muốn thực thi mã trên một số trang hoặc bài đăng nhất định, bạn có thể chọn phương thức ‘Mã ngắn’.

Bây giờ, bạn cần quay lại đầu trang và chuyển công tắc sang ‘Hoạt động’, sau đó nhấp vào nút ‘Lưu đoạn mã’.

Bây giờ bạn có thể xem trang web WordPress của mình để xem CSS tùy chỉnh đang hoạt động.

Phương pháp 3: Thêm CSS bổ sung với Full Site Editor (FSE)

Một cách khác để bạn có thể thêm CSS tùy chỉnh trong WordPress là sử dụng Trình chỉnh sửa trang web đầy đủ (FSE). Với FSE, bạn có thể chỉnh sửa bố cục và thiết kế của toàn bộ trang web bằng trình chỉnh sửa khối WordPress, giống như khi chỉnh sửa một bài đăng hoặc trang blog.

Xin lưu ý rằng trình chỉnh sửa trang web đầy đủ chỉ khả dụng cho các chủ đề đã chọn. Để biết thêm chi tiết, bạn có thể xem bài viết của chúng tôi về các chủ đề chỉnh sửa toàn bộ trang web WordPress tốt nhất .

Sử dụng một plugin để thêm CSS dễ dàng hơn một chút. Điều đó nói rằng, nếu bạn không muốn sử dụng plugin, thì chúng tôi sẽ chỉ cho bạn cách truy cập tùy biến ngay cả khi nó không còn khả dụng trong menu quản trị của bạn.

Tất cả những gì bạn cần làm là đăng nhập vào quản trị viên WordPress của mình.

Sau đó, chỉ cần sao chép và dán URL bên dưới vào trình duyệt của bạn và thay thế ‘example.com’ bằng tên miền của trang web của riêng bạn .

Thao tác này sẽ đưa bạn đến một phiên bản giới hạn của tùy biến chủ đề. Trong menu bên trái, bạn sẽ thấy tùy chọn thêm CSS tùy chỉnh ở dưới cùng.

Chỉ cần nhấp vào tab ‘CSS bổ sung’.

Bây giờ hãy tiếp tục và nhập mã CSS của bạn vào khu vực CSS bổ sung.

Sau khi thêm mã, chỉ cần nhấp vào nút ‘Xuất bản’.

Sử dụng plugin CSS tùy chỉnh so với Thêm CSS trong chủ đề

Tất cả các phương pháp được mô tả ở trên được khuyến nghị cho người mới bắt đầu. Người dùng nâng cao cũng có thể thêm CSS tùy chỉnh trực tiếp vào chủ đề của họ.

Tuy nhiên, bạn không nên thêm đoạn mã CSS tùy chỉnh vào chủ đề gốc. Các thay đổi CSS của bạn sẽ bị mất nếu bạn vô tình cập nhật chủ đề mà không lưu các thay đổi tùy chỉnh của mình.

Cách tiếp cận tốt nhất là sử dụng một chủ đề con để thay thế. Tuy nhiên, nhiều người mới bắt đầu không muốn tạo một chủ đề con. Ngoài việc thêm CSS tùy chỉnh, thường thì những người mới bắt đầu thực sự không biết họ sẽ sử dụng chủ đề con đó như thế nào.

Sử dụng plugin CSS tùy chỉnh cho phép bạn lưu trữ CSS tùy chỉnh độc lập với chủ đề của mình. Bằng cách này, bạn có thể dễ dàng chuyển đổi chủ đề và CSS tùy chỉnh của bạn sẽ vẫn ở đó.

Một cách tuyệt vời khác để thêm CSS tùy chỉnh vào trang web WordPress của bạn là sử dụng plugin CSS Hero . Plugin tuyệt vời này cho phép bạn chỉnh sửa hầu hết mọi kiểu CSS trên trang web WordPress của mình mà không cần viết một dòng mã nào.

Bạn cũng có thể thêm CSS tùy chỉnh bằng plugin SeedProd . SeedProd là trình tạo trang web kéo và thả cho phép bạn tạo các chủ đề và trang đích WordPress tùy chỉnh cho trang web WordPress của mình. Bạn có thể dễ dàng chỉnh sửa cài đặt CSS chung mà không cần mã.

Chúng tôi hy vọng bài viết này đã giúp thêm CSS tùy chỉnh vào trang web WordPress của bạn. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách chọn phần mềm thiết kế web tốt nhất và plugin trình tạo trang kéo và thả WordPress tốt nhất .