VietNetwork.Vn

Bạn có muốn tùy chỉnh màu sắc trên trang web WordPress của mình không?

Màu sắc đóng một vai trò quan trọng trong việc làm cho trang web của bạn đẹp mắt về mặt thẩm mỹ và thiết lập bản sắc thương hiệu. May mắn thay, WordPress làm cho việc tùy chỉnh màu sắc trên toàn bộ trang web của bạn trở nên cực kỳ dễ dàng.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tùy chỉnh màu sắc trên trang web WordPress của bạn, bao gồm màu nền, tiêu đề, văn bản và liên kết.

1. Lý thuyết màu sắc là gì?

Trước khi bạn có thể bắt đầu tùy chỉnh màu sắc trên trang web WordPress của mình, điều quan trọng là phải hiểu lý thuyết về màu sắc.

Lý thuyết màu sắc là nghiên cứu về màu sắc và cách chúng phối hợp với nhau. Nó giúp các nhà thiết kế tạo ra sự kết hợp màu sắc bổ sung cho nhau.

Khi thiết kế một trang web, bạn cần phải chọn màu sắc trông hài hòa với nhau. Điều này sẽ làm cho trang web của bạn trông hấp dẫn hơn đối với khách truy cập, điều này có thể cải thiện trải nghiệm người dùng và tăng mức độ tương tác.

Các màu sắc khác nhau có thể tạo ra cảm xúc và cảm giác khác nhau ở mọi người và lý thuyết màu sắc có thể giúp bạn chọn cách kết hợp phù hợp cho trang web của mình.

Ví dụ, màu đỏ thường được sử dụng để đại diện cho thực phẩm và nhà hàng. Mặt khác, màu xanh thường được sử dụng trên các trang web ngân hàng và tài chính.

Đó là bởi vì màu đỏ có thể tạo ra cảm giác ấm áp, năng lượng và đam mê, trong khi màu xanh biểu thị sự tin tưởng, an toàn và bình tĩnh.


Ngoài việc bổ sung màu sắc, bạn cũng có thể sử dụng độ tương phản màu sắc để thu hút sự chú ý đến các khu vực quan trọng trên blog WordPress của mình.

Điều này cho phép bạn làm cho nội dung của mình dễ đọc hơn, thiết lập bản sắc thương hiệu mạnh và tạo tâm trạng cụ thể trên trang web.

2. Giao diện WordPress là gì và bạn có thể thay đổi màu giao diện không?

Giao diện WordPress kiểm soát giao diện trang web của bạn đối với người dùng. Một giao diện WordPress điển hình là một tập hợp các mẫu được thiết kế sẵn mà bạn cài đặt trên trang web của mình để thay đổi giao diện và bố cục của nó.

Giao diện làm cho trang web của bạn hấp dẫn hơn, dễ sử dụng hơn và tăng mức độ tương tác.


Bạn cũng có thể tạo các giao diện của riêng mình từ đầu bằng cách sử dụng các plugin như SeedProd và Thrive Theme Builder.

Với WordPress, bạn có thể dễ dàng tùy chỉnh các giao diện và thay đổi màu nền, phông chữ, nút và liên kết của chúng.

Tuy nhiên, hãy nhớ rằng một số giao diện đi kèm với các lựa chọn màu được xác định trước, trong khi những giao diện khác cung cấp sự linh hoạt hơn để bạn chọn màu của riêng mình.

Nói như vậy, hãy xem cách bạn có thể dễ dàng tùy chỉnh màu sắc trong WordPress.

3. Cách tùy chỉnh màu sắc trong WordPress

Bạn có thể tùy chỉnh màu sắc trong WordPress bằng nhiều phương pháp khác nhau, bao gồm tùy biến giao diện, trình chỉnh sửa trang đầy đủ, CSS tùy chỉnh, plugin trình tạo trang, v.v.

3.1. Thay đổi màu sắc bằng Trình tùy chỉnh giao diện

Thật dễ dàng để thay đổi màu sắc bằng cách sử dụng tùy biến giao diện WordPress tích hợp.

Trước tiên, hãy truy cập trang Giao diện »Tùy chỉnh từ thanh bên quản trị.

Lưu ý: Nếu bạn không thể tìm thấy tab 'Tùy chỉnh' trong bảng điều khiển WordPress của mình thì điều này có nghĩa là bạn đang sử dụng một giao diện khối. Cuộn xuống phần tiếp theo của hướng dẫn này để tìm hiểu cách thay đổi màu sắc trong giao diện khối.

Đối với hướng dẫn này, chúng tôi sẽ sử dụng giao diện Twenty Twenty-One mặc định.

Hãy nhớ rằng tùy biến giao diện có thể trông khác nhau tùy thuộc vào giao diện bạn hiện đang sử dụng.


Ví dụ: giao diện Hai mươi mốt đi kèm với bảng 'Màu sắc và Chế độ tối' cho phép người dùng chọn màu nền và tùy chỉnh chế độ tối.

Sau khi mở bảng điều khiển, chỉ cần nhấp vào tùy chọn 'Chọn màu'. Thao tác này sẽ mở Bộ chọn màu, nơi bạn có thể chọn màu nền ưa thích của mình.

Khi bạn đã hoàn tất, đừng quên nhấp vào nút 'Xuất bản' ở trên cùng để lưu các thay đổi và hiển thị chúng trên trang web của bạn.


3.2. Thay đổi màu sắc trong Trình chỉnh sửa trang web đầy đủ

Nếu bạn đang sử dụng giao diện dựa trên khối thì bạn sẽ không có quyền truy cập vào tùy biến giao diện. Tuy nhiên, bạn có thể sử dụng trình chỉnh sửa trang web đầy đủ (FSE) để thay đổi màu sắc trên trang web của mình.

Trước tiên, hãy đi tới màn hình Giao diện »Trình chỉnh sửa từ thanh bên quản trị để khởi chạy trình chỉnh sửa trang web đầy đủ.

Bây giờ, bạn phải nhấp vào biểu tượng 'Kiểu' ở góc trên bên phải màn hình.


Thao tác này sẽ mở cột "Kiểu", tại đây bạn cần nhấp vào bảng "Màu".

Bạn có thể thay đổi màu nền, văn bản, liên kết, tiêu đề và nút của giao diện từ đây.


Khi bạn đã hoàn tất, hãy nhấp vào nút 'Lưu' để lưu cài đặt của bạn.

3.3. Thay đổi màu sắc bằng CSS tùy chỉnh

CSS là ngôn ngữ mà bạn có thể sử dụng để thay đổi giao diện trực quan của trang web, bao gồm cả màu sắc của trang web. Bạn có thể lưu CSS tùy chỉnh trong cài đặt giao diện để áp dụng các tùy chỉnh cho toàn bộ trang web của mình.

Tuy nhiên, mã CSS tùy chỉnh sẽ không còn áp dụng nếu bạn chuyển đổi giao diện trên trang web của mình hoặc cập nhật giao diện hiện có.

Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng plugin WPCode, plugin đoạn mã WordPress tốt nhất trên thị trường. Đây là cách dễ nhất để thêm mã CSS tùy chỉnh và nó sẽ cho phép bạn tùy chỉnh màu sắc một cách an toàn trên trang web WordPress của mình.

Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin WPCode. Để biết thêm hướng dẫn, vui lòng xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách cài đặt plugin WordPress.

Lưu ý: Ngoài ra còn có một phiên bản WPCode miễn phí mà bạn có thể sử dụng. Tuy nhiên, chúng tôi khuyên bạn nên nâng cấp lên gói trả phí để khai thác toàn bộ tiềm năng của plugin.

Khi bạn đã kích hoạt WPCode, bạn cần truy cập trang Đoạn mã » + Thêm đoạn mã từ thanh bên quản trị.

Chỉ cần nhấp vào nút 'Sử dụng đoạn mã' bên dưới tiêu đề 'Thêm mã tùy chỉnh của bạn (Đoạn mã mới)'.


Sau khi bạn ở trên trang 'Tạo đoạn mã tùy chỉnh', bạn có thể bắt đầu bằng cách nhập tên cho mã của mình.

Sau đó, chỉ cần chọn 'Đoạn mã CSS' làm 'Loại mã' từ trình đơn thả xuống.


Tiếp theo, bạn phải thêm mã CSS tùy chỉnh vào hộp 'Xem trước mã'.

Đối với phần này, chúng tôi sẽ thêm mã CSS tùy chỉnh để thay đổi màu văn bản trên trang web:

p   { color:#990000;  }

Khi bạn đã hoàn thành việc đó, hãy cuộn xuống phần 'Chèn'.

Tại đây, bạn có thể chọn tùy chọn 'Chèn tự động' nếu bạn muốn mã được thực thi tự động khi kích hoạt.

Bạn cũng có thể thêm một mã ngắn vào các trang hoặc bài đăng cụ thể của WordPress.


Khi bạn đã hoàn tất, chỉ cần cuộn trở lại đầu trang và chuyển nút 'Không hoạt động' thành 'Hoạt động'.

Cuối cùng, bạn cần nhấp vào nút 'Lưu đoạn mã' để áp dụng mã CSS cho trang web của mình.


3.4. Thay đổi màu sắc bằng SeedProd

Bạn cũng có thể tùy chỉnh màu sắc bằng plugin SeedProd.

Đây là trình tạo trang WordPress tốt nhất trên thị trường cho phép bạn tạo các giao diện từ đầu mà không cần sử dụng bất kỳ mã nào.

Trước tiên, bạn cần cài đặt và kích hoạt plugin SeedProd. Để biết thêm chi tiết, bạn có thể đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy truy cập trang SeedProd » Trình tạo giao diện từ thanh bên quản trị viên WordPress.

Từ đây, nhấp vào nút 'Bộ công cụ mẫu giao diện' ở trên cùng.

Lưu ý: Nếu bạn muốn tạo giao diện của riêng mình từ đầu, thì thay vào đó, bạn cần nhấp vào nút '+ Thêm mẫu giao diện mới'.


Thao tác này sẽ đưa bạn đến trang 'Bộ chọn Bộ mẫu giao diện'. Tại đây, bạn có thể chọn từ bất kỳ mẫu giao diện được tạo sẵn nào do SeedProd cung cấp.

Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách dễ dàng tạo giao diện WordPress mà không cần bất kỳ mã nào.


Sau khi chọn một giao diện, bạn sẽ được chuyển hướng đến trang 'Mẫu giao diện'.

Tại đây, bạn cần chuyển nút 'Bật giao diện SeedProd' thành 'Có' để kích hoạt giao diện.

Bây giờ, bạn phải nhấp vào liên kết 'Chỉnh sửa Thiết kế' bên dưới bất kỳ trang giao diện nào để mở trình chỉnh sửa kéo và thả.


Khi bạn ở đó, hãy nhấp vào biểu tượng bánh răng ở cuối cột bên trái.

Thao tác này sẽ đưa bạn đến cài đặt 'CSS toàn cầu'.


Từ đây, bạn có thể tùy chỉnh màu nền, văn bản, nút, liên kết, v.v. của trang web.

Khi bạn hài lòng với lựa chọn của mình, hãy nhấp vào nút 'Lưu' để lưu cài đặt của bạn.


4. Cách thay đổi màu nền trong WordPress

Tất cả các giao diện WordPress đều có màu nền mặc định. Tuy nhiên, bạn có thể dễ dàng thay đổi nó để cá nhân hóa trang web của mình và cải thiện khả năng đọc của nó.

Nếu bạn đang sử dụng giao diện khối, thì bạn sẽ phải thay đổi màu nền bằng trình chỉnh sửa trang web đầy đủ.

Trước tiên, bạn phải đi tới màn hình Giao diện »Trình chỉnh sửa từ thanh bên quản trị.

Sau khi trình chỉnh sửa trang đầy đủ đã khởi chạy, hãy nhấp vào biểu tượng 'Kiểu' ở góc trên cùng bên phải của màn hình.

Sau đó, chỉ cần nhấp vào bảng 'Màu sắc' để mở các cài đặt bổ sung


Trong bảng điều khiển 'Màu sắc', giờ đây bạn có thể quản lý màu mặc định của các thành phần khác nhau trên trang web của mình.

Tại đây, bạn cần nhấp vào tùy chọn 'Nền' trong phần 'Thành phần'.


Khi bảng 'Nền' đã mở rộng, bạn có thể chọn màu nền trang web của mình từ đây.

Tất cả các giao diện WordPress cung cấp một số màu trang web mặc định mà bạn có thể chọn.

Tuy nhiên, nếu bạn muốn sử dụng màu tùy chỉnh, thì bạn cần nhấp vào công cụ Màu tùy chỉnh.

Điều này sẽ mở ra Bộ chọn màu, nơi bạn có thể chọn màu bạn chọn.


Bạn cũng có thể sử dụng màu gradient cho nền trang web của mình.

Đối với điều này, trước tiên bạn cần chuyển sang tab 'Gradient' ở trên cùng.

Tiếp theo, bạn có thể chọn một dải màu mặc định từ giao diện hoặc chọn màu dải màu của riêng mình với sự trợ giúp của công cụ Bộ chọn màu.


Sau khi hoàn tất, đừng quên nhấp vào nút 'Lưu' để lưu cài đặt của bạn.

Bạn cũng có thể thay đổi nền trang web của mình bằng công cụ tùy chỉnh giao diện, SeedProd và CSS tùy chỉnh.

Để biết hướng dẫn chi tiết hơn, bạn có thể xem hướng dẫn của chúng tôi về cách thay đổi màu nền trong WordPress.

5. Cách thay đổi màu tiêu đề trong WordPress

Nhiều giao diện WordPress đi kèm với tiêu đề tích hợp ở đầu trang. Nó thường chứa các liên kết trang quan trọng, biểu tượng xã hội, CTA, v.v.


Nếu bạn đang sử dụng một giao diện khối, thì bạn có thể dễ dàng tùy chỉnh tiêu đề WordPress bằng trình chỉnh sửa trang web đầy đủ.

Trước tiên, bạn cần truy cập màn hình Giao diện » Trình chỉnh sửa từ thanh bên quản trị để khởi chạy trình chỉnh sửa trang web đầy đủ. Khi đó, hãy chọn mẫu 'Tiêu đề' ở trên cùng bằng cách nhấp đúp vào mẫu đó.

Từ đây, chỉ cần cuộn xuống phần 'Màu' và nhấp vào tùy chọn 'Nền'.


Thao tác này sẽ mở một cửa sổ bật lên nơi bạn có thể chọn màu mặc định cho tiêu đề của mình.

Bạn cũng có thể chọn một màu tùy chỉnh bằng cách mở công cụ Color Picker.


Để tùy chỉnh tiêu đề của bạn bằng dải màu, bạn cần chuyển sang tab 'Dải màu'.

Sau đó, bạn có thể chọn tùy chọn độ dốc mặc định hoặc tùy chỉnh tùy chọn của riêng mình bằng Bộ chọn màu.


Cuối cùng, nhấp vào nút 'Lưu' để lưu cài đặt của bạn.

Nếu bạn muốn thay đổi màu tiêu đề bằng cách sử dụng công cụ tùy chỉnh giao diện hoặc CSS bổ sung, thì bạn có thể muốn đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách tùy chỉnh tiêu đề WordPress của bạn.

6. Cách thay đổi màu văn bản trong WordPress

Thay đổi màu văn bản có thể giúp cải thiện khả năng đọc blog WordPress của bạn.

Nếu bạn đang sử dụng giao diện khối, thì bạn sẽ phải thay đổi màu văn bản bằng trình chỉnh sửa trang web đầy đủ.

Bạn có thể bắt đầu bằng cách truy cập màn hình Giao diện » Trình chỉnh sửa từ thanh bên quản trị. Thao tác này sẽ khởi chạy toàn bộ trình chỉnh sửa trang web, nơi bạn phải nhấp vào biểu tượng 'Kiểu' ở góc trên cùng bên phải.


Tiếp theo, bạn cần nhấp vào bảng 'Màu sắc' để truy cập cài đặt bổ sung.

Khi bạn ở đó, hãy tiếp tục và nhấp vào tùy chọn 'Văn bản' trong phần 'Thành phần'.


Khi cài đặt màu văn bản đã mở, bạn sẽ có thể thấy một số màu văn bản trong phần 'Mặc định'.

Ngoài ra, bạn cũng có thể sử dụng màu văn bản tùy chỉnh bằng cách nhấp vào công cụ Màu tùy chỉnh và mở Bộ chọn màu.


Khi bạn đã lựa chọn xong, chỉ cần nhấp vào nút 'Lưu' để lưu các thay đổi.

Mẹo bổ sung: Bạn có thể sử dụng công cụ Trình kiểm tra độ tương phản của WebAIM để kiểm tra xem màu nền và màu văn bản của bạn có phù hợp với nhau không. Công cụ này có thể giúp bạn cải thiện khả năng đọc văn bản trên trang web của mình.


Để tùy chỉnh màu văn bản bằng CSS, tùy biến giao diện hoặc SeedProd, bạn có thể muốn xem hướng dẫn của chúng tôi về cách thay đổi màu văn bản trong WordPress.

7. Cách thay đổi màu lựa chọn văn bản trong WordPress

Khi khách truy cập chọn văn bản trên trang web của bạn, nó sẽ hiển thị màu nền. Màu mặc định là màu xanh lam.


Tuy nhiên, đôi khi màu sắc có thể không hài hòa với giao diện WordPress của bạn và bạn có thể muốn thay đổi nó.

Việc thêm mã CSS vào các tệp giao diện của bạn có thể dễ dàng thay đổi màu lựa chọn văn bản. Tuy nhiên, hãy nhớ rằng việc chuyển sang một giao diện khác hoặc cập nhật giao diện hiện tại của bạn sẽ làm cho mã CSS biến mất.

Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng plugin WPCode, plugin đoạn mã WordPress tốt nhất trên thị trường.

Trước tiên, bạn cần cài đặt và kích hoạt plugin WPCode. Để biết thêm hướng dẫn, 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, hãy truy cập trang Đoạn mã » + Thêm đoạn mã từ thanh bên quản trị.

Sau đó, chỉ cần nhấp vào nút 'Sử dụng đoạn mã' bên dưới tiêu đề 'Thêm mã tùy chỉnh của bạn (Đoạn mã mới)'.


Sau khi bạn ở trên trang 'Tạo đoạn mã tùy chỉnh', bạn có thể bắt đầu bằng cách nhập tên cho đoạn mã của mình.

Sau đó, bạn phải chọn 'Đoạn mã CSS' làm 'Loại mã' từ trình đơn thả xuống ở bên phải.


Bây giờ, hãy tiếp tục sao chép và dán mã CSS sau vào hộp 'Xem trước mã'.
   
::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}
Bạn có thể thay đổi màu lựa chọn văn bản bằng cách thay thế mã hex bên cạnh 'màu nền' trong đoạn mã CSS.


Khi bạn đã thêm mã, hãy cuộn xuống phần 'Chèn'.

Tại đây, bạn cần chọn phương thức 'Chèn tự động' để thực thi mã tự động khi kích hoạt.


Sau đó, cuộn trở lại trên cùng và chuyển nút 'Không hoạt động' thành 'Hoạt động'.

Cuối cùng, hãy tiếp tục và nhấp vào nút 'Lưu đoạn trích' để lưu các thay đổi của bạn.


Bây giờ, bạn có thể truy cập trang web của mình để kiểm tra màu lựa chọn văn bản.

Bạn cũng có thể thay đổi màu lựa chọn văn bản bằng tùy biến giao diện hoặc plugin. Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách thay đổi màu lựa chọn văn bản mặc định trong WordPress.


8. Cách thay đổi màu liên kết trong WordPress

Bạn có thể dễ dàng thay đổi màu liên kết trong WordPress bằng trình chỉnh sửa trang đầy đủ hoặc CSS tùy chỉnh.

Nếu bạn đang sử dụng một giao diện khối, hãy chuyển đến  màn hình Giao diện » Trình chỉnh sửa  từ thanh bên quản trị.

Sau khi trình chỉnh sửa trang đầy đủ đã khởi chạy, bạn phải nhấp vào biểu tượng 'Kiểu' ở góc trên cùng bên phải.


Tiếp theo, nhấp vào bảng 'Màu sắc' ở cột bên phải để xem các cài đặt bổ sung.

Khi bạn ở đó, chỉ cần nhấp vào bảng 'Liên kết'.


Thao tác này sẽ khởi chạy cài đặt màu liên kết và bạn sẽ thấy nhiều màu liên kết mặc định được hiển thị ở cột bên phải.

Tuy nhiên, bạn cũng có thể sử dụng màu liên kết tùy chỉnh bằng cách nhấp vào công cụ Màu tùy chỉnh để mở Bộ chọn màu.


Bạn cũng có thể thay đổi màu liên kết di chuột bằng FSE. Điều này có nghĩa là màu liên kết sẽ thay đổi khi ai đó di chuột qua nó.

Trước tiên, bạn sẽ cần chuyển sang tab 'Hover' từ trên cùng.

Khi đó, bạn có thể chọn màu mặc định hoặc màu tùy chỉnh để thay đổi màu liên kết di chuột.


Cuối cùng, nhấp vào nút 'Lưu' để lưu cài đặt của bạn.

Để biết hướng dẫn chi tiết hơn, bạn có thể xem hướng dẫn của chúng tôi về cách thay đổi màu liên kết trong WordPress.

9. Cách thay đổi bảng màu quản trị viên trong WordPress

Bạn cũng có thể thay đổi bảng màu quản trị viên trong WordPress nếu muốn. Phương pháp này có thể hữu ích nếu bạn muốn bảng điều khiển quản trị phù hợp với thương hiệu trang web của bạn hoặc sử dụng màu sắc yêu thích của bạn.

Tuy nhiên, hãy nhớ rằng việc thay đổi bảng màu của bảng điều khiển WordPress sẽ không ảnh hưởng đến phần hiển thị trên trang web của bạn.

Để thay đổi bảng màu của quản trị viên, chỉ cần truy cập trang Người dùng » Hồ sơ từ thanh bên của quản trị viên.

Bạn sẽ thấy nhiều bảng phối màu bên cạnh tùy chọn 'Bảng phối màu của quản trị viên'.

Chọn một cái bạn thích và sau đó nhấp vào nút 'Cập nhật hồ sơ' ở cuối trang để lưu các thay đổi của bạn.


Để biết hướng dẫn chi tiết hơn, vui lòng xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách thay đổi bảng màu quản trị viên trong WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tùy chỉnh màu sắc trên trang web WordPress của mình. Bạn cũng có thể muốn xem hướng dẫn SEO WordPress cuối cùng của chúng tôi và bài viết của chúng tôi về cách chọn bảng màu hoàn hảo cho trang web WordPress của bạn.