[Plug-in hoàn toàn không sử dụng] Cài đặt nút chia sẻ SNS chỉ với HTML và CSS [WordPress]

Ngày 2019 tháng 7 năm 30Ngày 2019 tháng 8 năm 3

Mục lục

1. cơ hội
2. Các tính năng của nút chia sẻ với mã này
3. Chia sẻ mã nút và cách cài đặt
4. HTML
5. CSS
6. Hiển thị ví dụ

cơ hội

Cho đến bây giờ, nút chia sẻ SNS là "Plugin chia sẻ nút WordPress – AddThisTôi đã dựa vào một plug-in có tên

plugin này là

Bạn có thể thêm dấu trang Hatena cũng như SNS lớn ở nước ngoài như Facebook, Twitter, Line, pocket và pinterest.
Có một thiết kế nút chia sẻ hẹp và hẹp ở bên cạnh.

Tôi thích nó vì lý do đó, nhưng nó là một plug-in khá nặng.

Nếu bạn tìm kiếm "no plugin, share button", bạn sẽ tìm thấy các phương pháp sử dụng plugin PHP, CSS, HTML và biểu tượng xã hội.

Lần này, tôi đã thử thiết lập các nút chia sẻ SNS chỉ sử dụng CSS và HTML mà không sử dụng PHP và các biểu tượng xã hội.

Các tính năng của nút chia sẻ với mã này

Chỉ được tạo bằng HTML và CSS
PHP, không sử dụng các biểu tượng xã hội
thực thi javascript trong thẻ
Tự động lấy URL và tiêu đề trang của trang sẽ được chia sẻ
Nhanh hơn plug-in (tối đa 10 điểm so với AddThis)
Số lượng chia sẻ không thể đếm được
Thiết kế ngang đơn giản

Chia sẻ mã nút và cách cài đặt

HTML

Viết ở đâu:
"Giao diện" → "Tùy chỉnh" → "Widget" → Nơi bạn muốn đặt nút chia sẻ → Thêm tiện ích → "HTML tùy chỉnh"

Chia sẻ bài viết này

CSS

Vị trí: Giao diện -> Tùy chỉnh -> CSS bổ sung

/*---Nút chia sẻ SNS---*/ /* Văn bản trên nút */ .fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before { font - họ: helvetica neue,helvetica,arial,sans-serif; font-weight: bold; font-size:14px } .fa-facebook:before { content: "f"; } .fa-twitter:before { content: "twitter ";} .fa-hatena:before { content: "B!"; font-family: Verdana; .fa-pocket:before { content: "pocket"; } /* Điều chỉnh vị trí hiển thị nút */ .button-area { text-align: center; margin-top:15px; } /* Cài đặt hiển thị tiêu đề */ . button-area-title { text-align: center; padding:.7em; } /* thiết kế khối nút */ .button-area li a { padding: 2px; display: block; text-align: center; : none; color: #fff; border-radius: 4px; } /* Màu nền cho mỗi SNS */ .twitter a { background-color: # 55acee; } .facebook a{ background-color: #3b5998; a{ background-color: #008fde; } .line a{ background-color: #1dcd00; } .pocket a{ background-color: #ea5a6c; lề : 0; padding: 0; list-style: none; } /* Đặt độ rộng và lề của nút */ .button-area li { float: left; width: 19%; -area ul:after { display: block; clear: cả hai; webkit-transform: translateY(-0px);transform: translateY(-3px);