Làm thế nào để thay đổi màu sắc Link trong WordPress?

Mọi người thường quá chú tâm đến việc tối ưu hóa những thứ phổ biến và bỏ qua những chi tiết nhỏ trên website. Đôi khi những chi tiết nhỏ như màu sắc của đường link trên website cũng sẽ gây ảnh hưởng không nhỏ đến trải nghiệm của người truy cập cũng như sự gắn bó của họ.

Do vậy, chúng ta cũng cần phải chú ý đến những chi tiết nhỏ nhặt trên website một chút, ví dụ như là màu sắc của các link trong bài. Đặc biệt, khi bạn sử dụng một theme mà không cung cấp màu sắc phù hợp cho các link cũng như tính năng để thay đổi theme đó, phương pháp mà chúng mình nêu trong bài đăng này sẽ giúp ích cho bạn!

Trước khi bắt đầu

Nếu bạn đang sử dụng theme thì bạn nên nghiên cứu kĩ những tài liệu liên quan đến nó về việc thay đổi màu sắc của link đến theme và thực hiện theo những hướng dẫn đó. Mặt khác, nếu theme không có tài liệu hướng dẫn thì bạn có thể tham khảo hướng dẫn của mình xem sao nhé.

Lý do là tính năng này có thể chỉ được tích hợp trong một số theme WordPress nhất định mà thôi.

Ví dụ: Con theme “Memory” của chúng mình có sở hữu tính năng này. Màu sắc của link sẽ tương ứng với màu sắc chính của theme, do vậy bạn có thể chọn lựa màu chủ đạo cho theme để link hiện lên màu bạn mong muốn.

Bên cạnh đó, “Memory” cũng cho phép bạn thay đổi màu của các link trong menu. Tất cả những gì chúng ta cần làm là vào menu Appearance menu > Customize > Colors > Header Menu, sau đó chỉ cần click vào các nút như sau:

vào menu Appearance menu > Customize > Colors > Header Menu, sau đó chỉ cần click vào các nút như hình

Vì vậy, hãy đảm bảo theme của bạn có cung cấp tính năng thay đổi màu link hay không trước khi bắt đầu thực hiện nhé!

Thay đổi màu của các link trong WordPress bằng CSS

Cách tốt nhất để thay đổi màu sắc là sử dụng CSS. Nhưng bạn cũng đừng lo lắng nếu như bạn không quen sử dụng CSS. Chỉ cần làm theo đúng những hướng dẫn sau đây, mình tin chắc bạn có thể thực hiện nó một cách dễ dàng!

Bước 1: Tìm địa chỉ để thêm mã CSS

Thông thường, lập trình viên sẽ thêm CSS vào tệp style.css trong thư mục của theme. Điều này có nghĩa là bạn phải biết một chút về code.

Tuy nhiên, nếu bạn xây dựng trang web của mình từ đầu bằng code, bạn chắc chắn biết cách thay đổi code để làm cho các link hiển thị như bạn muốn. Nếu không, bạn có thể thử điều này.

Trong bảng điều khiển quản trị (Admin Dashboard), đi đến Appearance > Customize > Additional CSS. Bạn sẽ thấy một hộp trống để thêm mã CSS ở đó.

Thêm mã CSS ở hộp trống trong Additional CSS

Bước 2: Thêm mã CSS vào hộp

Đầu tiên, chúng ta sẽ tìm hiểu về CSS để thay đổi màu của các link. Mình sẽ giải thích sáng tỏ về mã ở đây:

  • Thay đổi màu của link trong dòng hiển thị đầu tiên:
a:link{
text-decoration: none;
color: #000000;
}
  • Thay đổi màu sắc khi người truy cập di chuột trên link
a:hover{
text-decoration: underline;
color: #000000;
}
  • Thay đổi màu của link mà người truy cập đã truy cập vào:
a:visited{
text-decoration: none;
color: #000000;
}

Trong đó:

text-decoration: none: không gạch chân văn bản.

text-decoration: underline: gạch chân văn bản. Bạn có thể thay đổi text-decoration từ không gạch chân thành gạch chân và ngược lại.

# 000000: là mã code của màu sắc mà bạn muốn. Bạn có thể chọn một màu, sau đó chọn mã code tương ứng với màu đó ở đây.

Bây giờ thì bạn có thể tạo mã Code của riêng mình, chẳng hạn như:

a:link{
text-decoration: none;
color: #FB2B09;
}
a:hover{
text-decoration: underline;
color: #A609FB;
}
a:visited{
text-decoration: none;
color: #0912FB;
}

Sao chép mã này vào phần hộp trống mà chúng ta đã tìm thấy ở bước 1 sau đó kiểm tra kết quả.

Thay đổi màu của link bằng CSS

Lời kết

Khi bạn thêm mã CSS, không chỉ các link mà cả các Social buttons cũng thay đổi màu sắc. Để thay đổi các nút màu sắc trở lại, chúng ta cần sử dụng CSS một lần nữa.

Như bạn có thể thấy, nếu con theme của bạn không hỗ trợ thay đổi màu sắc thì bạn nên tìm hiểu thêm về CSS để làm điều đó. Ngoài ra, CSS có thể giúp bạn thay đổi hiển thị mọi yếu tố của trang web. Sau khi bạn thêm mã CSS, hãy nhớ kiểm tra các yếu tố khác để tránh bất kỳ lỗi nào nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *