[ปลั๊กอินไม่ได้ใช้อย่างสมบูรณ์] ติดตั้งปุ่มแชร์ SNS ด้วย HTML และ CSS เท่านั้น [WordPress]
โอกาส
จนถึงตอนนี้ ปุ่มแบ่งปัน 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);
แสดงตัวอย่าง
ไซต์ที่ฉันอ้างถึง
[WordPress] ปรับแต่งปุ่มแบ่งปัน SNS โดยไม่ต้องใช้ปลั๊กอิน [คัดลอกและวางตกลง! ]
ปุ่มแชร์ LINE, Facebook, Twitter, Google+ วิธีตั้งค่าลิงก์เพื่อรับ URL (& ชื่อเรื่อง) ปัจจุบันโดยอัตโนมัติ
ดิสโก้
รายการความคิดเห็น
ยังไม่มีความเห็น