Bạn có muốn tạo các biểu tượng theo dõi phương tiện truyền thông xã hội hoặc mạng xã hội bằng màu sắc chính thức cho trang web hoặc blog WordPress của mình không? Bạn có thể!
Bạn có thể sử dụng plugin Simple Social Icons của Natan Rice và StudioPress cho việc này. Mặc dù có nhiều plugin và bộ biểu tượng để thêm các biểu tượng theo dõi trên mạng xã hội, nhưng cái này rất dễ sử dụng trên bất kỳ trang web nào; nó có mười lăm biểu tượng mạng xã hội khác nhau và sử dụng bộ biểu tượng phông chữ để các biểu tượng của bạn luôn trông sắc nét ở bất kỳ mật độ màn hình nào. Các tùy chọn có sẵn trong plugin cho phép bạn dễ dàng đặt màu sắc, kích thước và bán kính đường viền. Vậy hãy bắt đầu.
Cài đặt Plugin biểu tượng xã hội đơn giản
Từ Trang tổng quan WordPress của bạn, nhấp vào Plugin> Thêm mới. Sau đó, tìm kiếm Biểu tượng xã hội đơn giản. Nhấp vào Cài đặt ngay và sau đó Kích hoạt.
Thêm tiện ích vào thanh bên trang web của bạn
- Bây giờ hãy nhấp vào Giao diện> Tiện ích.
- Tìm tiện ích Biểu tượng Xã hội Đơn giản và kéo nó vào Khu vực tiện ích Thanh bên của bạn.
- Tiện ích sẽ mở ra, vì vậy bạn có thể thêm các liên kết của mình. Truy cập tất cả các trang web truyền thông xã hội của bạn và sao chép các url từ đầu trình duyệt và dán vào từng trường URI.
- Sau đó, đối với các tùy chọn ở đầu tiện ích, hãy chọn như sau:
- Kích thước biểu tượng - bạn có thể để ở 36px, hoặc đối với các biểu tượng nhỏ, hãy thử 24px và lớn hơn, hãy thử 48px.
- Biểu tượng Border Radius - thử 8px cho các góc tròn hơn trên các biểu tượng 36px hoặc 10px trên các biểu tượng 48px; sử dụng 0 sẽ cho các góc vuông và đối với các biểu tượng hình tròn, hãy sử dụng bán kính đường viền bằng một nửa kích thước biểu tượng.
- Để Màu Phông chữ Biểu tượng và Màu Phông chữ Di chuột Biểu tượng ở #ffffff (trắng).
- Màu nền (# 999999 - xám trung bình) và Màu di chuột nền (# 666666 - xám đậm hơn) hiện có thể được để ở giá trị mặc định.
Bạn có thể thử nghiệm với bất kỳ cài đặt nào trong số này.
Thêm kiểu màu nền biểu tượng mới
Tiếp theo, bạn sẽ cần thêm một số CSS để thay đổi màu sắc. Nếu bạn chỉnh sửa style.css của riêng mình, bạn có thể thêm CSS bên dưới vào cuối tệp của mình, nhưng trước bất kỳ phần truy vấn phương tiện nào. Bạn cũng có thể sử dụng plugin CSS tùy chỉnh.
Để nhận mã hex màu cho mỗi biểu tượng, chúng ta có thể sử dụng bảng màu từ Biểu tượng đơn giản của Dan Leech, như được giới thiệu trên Tạp chí Smashing. Trong phần bình luận, anh ấy cho biết anh ấy đã tạo ra danh sách màu như thế nào.
Sau đó, bạn có thể thêm màu nền mới vào từng liên kết biểu tượng. Điều quan trọng là cần thiết để đảm bảo màu sắc của bạn, chứ không phải màu plugin, được sử dụng trong thanh bên của bạn. Sao chép và dán mã này vào style.css của bạn hoặc plugin CSS tùy chỉnh của bạn.
/* Simple Social Icons
--------------------------------------------- */
.simple-social-icons .social-dribbble a {
background-color: #ea4c89 !important;
}
.simple-social-icons .social-email a {
background-color: #999999 !important; /* default */
}
.simple-social-icons .social-facebook a {
background-color: #3b5998 !important;
}
.simple-social-icons .social-flickr a {
background-color: #0063db !important;
}
.simple-social-icons .social-github a {
background-color: #4183c4 !important;
}
/* Google Plus is no longer used */
.simple-social-icons .social-instagram a {
background-color: #3f729b !important;
}
.simple-social-icons .social-linkedin a {
background-color: #007fb1 !important;
}
.simple-social-icons .social-pinterest a {
background-color: #cb2027 !important;
}
.simple-social-icons .social-rss a {
background-color: #ff8300 !important;
}
.simple-social-icons .social-stumbleupon a {
background-color: #eb4924 !important;
}
.simple-social-icons .social-tumblr a {
background-color: #2c4762 !important;
}
.simple-social-icons .social-twitter a {
background-color: #00aced !important;
}
.simple-social-icons .social-vimeo a {
background-color: #44bbff !important;
}
.simple-social-icons .social-youtube a {
background-color: #cd332d !important;
}
Và đó là tất cả những gì cần làm!