[ปลั๊กอินไม่ได้ใช้อย่างสมบูรณ์] ติดตั้งปุ่มแชร์ SNS ด้วย HTML และ CSS เท่านั้น [WordPress]

2019 7 年月日 302019 8 年月日 3

1. โอกาส
2. คุณสมบัติของปุ่มแชร์ด้วยรหัสนี้
3. รหัสปุ่มแบ่งปันและวิธีติดตั้ง
4. HTML
5. CSS
6. แสดงตัวอย่าง

โอกาส

จนถึงตอนนี้ ปุ่มแบ่งปัน SNS คือ "ปลั๊กอิน WordPress Share Buttons – AddThisฉันอาศัยปลั๊กอินที่เรียกว่า

ปลั๊กอินนี้คือ

คุณสามารถเพิ่มบุ๊กมาร์ก Hatena รวมถึง SNS ต่างประเทศที่สำคัญ เช่น Facebook, Twitter, Line, pocket และ pinterest
มีการออกแบบปุ่มแชร์ที่แคบและแคบที่ด้านข้าง

ฉันชอบมันด้วยเหตุผลนั้น แต่มันเป็นปลั๊กอินที่ค่อนข้างหนัก

หากคุณค้นหา "ไม่มีปลั๊กอิน ปุ่มแชร์" คุณจะพบวิธีการใช้ปลั๊กอิน PHP, CSS, HTML และไอคอนโซเชียล

ครั้งนี้ ฉันลองตั้งค่าปุ่มแชร์ SNS โดยใช้เฉพาะ CSS และ HTML โดยไม่ใช้ PHP และไอคอนโซเชียล

คุณสมบัติของปุ่มแชร์ด้วยรหัสนี้

สร้างด้วย HTML และ CSS เท่านั้น
PHP อย่าใช้ไอคอนโซเชียล
เรียกใช้จาวาสคริปต์ในแท็ก
รับ URL และชื่อหน้าของหน้าที่จะแบ่งปันโดยอัตโนมัติ
เร็วกว่าปลั๊กอิน (สูงสุด 10 คะแนนเมื่อเทียบกับ AddThis)
ไม่สามารถนับจำนวนหุ้นได้
การออกแบบแนวนอนที่เรียบง่าย

รหัสปุ่มแบ่งปันและวิธีติดตั้ง

HTML

เขียนที่ไหน:
"ลักษณะที่ปรากฏ" → "ปรับแต่ง" → "วิดเจ็ต" → ตำแหน่งที่คุณต้องการวางปุ่มแชร์ → เพิ่มวิดเจ็ต → "กำหนด HTML"

แบ่งปันบทความนี้

CSS

ตำแหน่ง: ลักษณะที่ปรากฏ -> ปรับแต่ง -> CSS เพิ่มเติม

/*---ปุ่มแชร์ SNS---*/ /* ปุ่มเปิดข้อความ */ .fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before { font - ครอบครัว: helvetica neue,helvetica,arial,sans-serif; font-weight: bold; font-size:14px } .fa-facebook:before { เนื้อหา: "f"; } .fa-twitter:before { เนื้อหา: "twitter ";} .fa-hatena:before { เนื้อหา: "B!"; font-family: Verdana; .fa-pocket:before { เนื้อหา: "pocket"; } /* การปรับตำแหน่งการแสดงปุ่ม */ .button-area { text-align: center; margin-top:15px; } /* การตั้งค่าการแสดงชื่อเรื่อง */ . button-area-title { text-align: center; padding:.7em; } /* การออกแบบบล็อกปุ่ม */ .button-area li a { padding: 2px; display: block; text-align: center; : none; color: #fff; border-radius: 4px; } /* สีพื้นหลังสำหรับแต่ละ SNS */ .twitter a { สีพื้นหลัง: # 55acee; } .facebook a{ สีพื้นหลัง: #3b5998; a{ สีพื้นหลัง: #008fde; } .line a{ สีพื้นหลัง: #1dcd00; } .pocket a{ สีพื้นหลัง: #ea5a6c; margin : 0; padding: 0; list-style: none; } /* กำหนดความกว้างของปุ่มและระยะขอบ */ .button-area li { float: left; width: 19%; -area ul:after { display: block; clear: ทั้งคู่; webkit-transform: translateY(-0px);transform: translateY(-3px);