วิธีสร้างปุ่มแชร์โซเชียลใน GeneratePress

ในบทช่วยสอนนี้เราจะดูที่ วิธีสร้างปุ่มแชร์โซเชียลใน GeneratePress?

สิ่งนี้จะช่วยคุณในการปรับปรุงการโปรโมตข้ามช่องทางของบล็อกโพสต์ของคุณอย่างไม่ต้องสงสัย ซึ่งจะช่วยเพิ่มสถานะเว็บของคุณ

ฉันจะแสดงให้คุณเห็นถึงวิธีการสร้างปุ่มแบ่งปันทางสังคมแบบติดหนึบที่ลอยอยู่ที่ส่วนหน้าของรายการบล็อกของคุณ หมายความว่าสิ่งเหล่านั้นจะปรากฏแก่ผู้ชมของคุณเสมอ

เราสามารถทำได้โดยใช้ปลั๊กอิน แต่ส่วนที่ดีที่สุดคือการสร้างมันขึ้นมาด้วยตนเอง ด้วยวิธีนี้ คุณจะรู้ว่าคุณกำลังหลีกเลี่ยงการเพิ่ม JavaScript (ทำให้ประสิทธิภาพเว็บไซต์ลดลง) บนไซต์ของคุณ

บทเรียนนี้กำหนดให้คุณต้องมี GeneratePress ระดับพรีเมียม เนื่องจากเราจะใช้โมดูล Elements

สร้างปุ่มแชร์โซเชียลใน GeneratePress โดยไม่ต้องใช้ปลั๊กอิน

การสร้างปุ่มแชร์ทางสังคมในธีม GeneratePress โดยไม่ต้องใช้ปลั๊กอินต้องการให้คุณทราบเกี่ยวกับไอคอน SVG

SVG เป็นกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ เป็นภาพมาตรฐานแบบเปิด (ส่วนใหญ่ใช้เป็นไอคอน) พัฒนาโดย W3C (World Wide Web Consortium) (World Wide Web Consortium)

ประโยชน์ของการใช้ SVG

• มีขนาดไฟล์เล็กที่ไม่ส่งผลต่อความเร็วไซต์
• คุณสามารถเพิ่มไฮเปอร์ลิงก์ไปยังไอคอน SVG ได้อย่างง่ายดาย
• สามารถแก้ไขได้ง่ายด้วยซอฟต์แวร์กราฟิกแบบเวกเตอร์ใดๆ
• ไอคอน SVG ไม่มีความละเอียดแยกกัน ทำให้เหมาะสำหรับการดูบนเดสก์ท็อป แท็บเล็ต และมือถือ
• รูปภาพ SVG นั้นเป็นมิตรกับ SEO มากกว่ารูปภาพทั่วไป

เราจะใช้ SVG จาก Iconmonstr ความหมายไม่เพียงแต่ไอคอนเท่านั้น แต่ยังรวมถึงไอคอนที่มีโค้ด XML ด้วย

ขั้นตอนที่ 1: เพิ่มรหัสปุ่มแบ่งปันทางสังคมเพื่อสร้างตะขอองค์ประกอบกด

เพื่อให้บรรลุผลนี้ คุณจะต้องสร้างองค์ประกอบใหม่ใน GeneratePress ก่อน ไปที่แดชบอร์ด WordPress ของคุณ ใต้ลักษณะที่ปรากฏ คลิกที่องค์ประกอบ นี่จะเป็นการเปิดหน้าองค์ประกอบ คลิกที่เพิ่มองค์ประกอบใหม่

ทันทีที่คุณคลิกเพิ่มองค์ประกอบใหม่ GeneratePress จะแสดงหน้าต่างโต้ตอบ คลิกที่ตะขอ ถูกต้องแล้ว คุณต้องมีฮุกแบบกำหนดเอง GeneratePress สำหรับการดำเนินการนี้

ตั้งชื่อให้กับองค์ประกอบใหม่และเพิ่มโค้ด

เลือกฮุกเป็นสร้างหลังจากส่วนหัว รัน PHP และตั้งค่ากฎการแสดงผลเป็น โพสต์ – ทุกโพสต์

เนื่องจากเราต้องการไอคอนการแบ่งปันทางสังคมเพื่อลอยบนวิวพอร์ตหน้าจอของเรา ขอแนะนำให้เลือกสร้าง After Header Hook

เหตุผลที่เราเลือกการตั้งค่าการแสดงผลเป็นโพสต์ทั้งหมดก็เนื่องมาจากคุณต้องการให้ผู้ใช้แบ่งปันเนื้อหาของคุณบนเว็บไซต์โซเชียลของพวกเขา

อย่าลืมกดปุ่มเผยแพร่

คัดลอกโค้ดต่อไปนี้เพื่อนำไปใช้บนเว็บไซต์ของคุณ

ขั้นตอนที่ 2: ดำเนินการจัดแต่งทรงผม CSS กับไอคอนการแบ่งปันทางสังคม

โดยไปที่แดชบอร์ด WordPress ใต้ลักษณะที่ปรากฏ คลิกที่ปรับแต่ง

นี่จะเป็นการเปิดตัวปรับแต่งธีม GeneratePress ลงไปจนสุดแล้วคลิกที่ CSS เพิ่มเติม

วางโค้ด CSS ต่อไปนี้เพื่อให้มีรูปแบบที่เทียบเคียงได้ คุณได้รับอนุญาตให้ปรับ CSS ตามความต้องการของคุณ

ขั้นตอนที่ 3: ผลลัพธ์สุดท้ายของปุ่มแบ่งปันทางสังคมใน GeneratePress

สุดท้ายนี้เป็นวิธีที่ ร่วมกันทางสังคม ไอคอนควรมีลักษณะเหมือนบนเว็บไซต์ของคุณ โปรดจำไว้ว่าเราได้ทำให้พวกเขาลอยจากด้านบนที่ 70% ของวิวพอร์ตหน้าจอ

ประโยชน์ของปุ่มแบ่งปันทางสังคมใน GeneratePress (ไม่มีปลั๊กอิน) (ไม่มีปลั๊กอิน)

การใช้ SVG จาก Iconmonstr ทำให้ไอคอนของคุณมีน้ำหนักเบามาก
ไม่มีโค้ด JavaScript ใด ๆ ที่เกี่ยวข้อง

เมื่อใช้กลยุทธ์นี้ คุณจะไม่ได้ติดตั้งปลั๊กอินของบุคคลที่สามใดๆ
มันตอบสนอง

ปุ่มทั้งหมดจะทำงานได้อย่างรวดเร็วอย่างไม่น่าเชื่อสำหรับการแบ่งปัน

สรุป: วิธีสร้างปุ่มแชร์โซเชียลใน GeneratePress

ตอนนี้คุณได้ค้นพบวิธีสร้างปุ่มแชร์ทางสังคมใน GeneratePress โดยใช้โค้ดและปลั๊กอินแล้ว

ใช้ตัวเลือกที่ง่ายสำหรับคุณและตรงกับความต้องการของคุณ โปรดแก้ไขโค้ด PHP และ/หรือ CSS จากบทความได้ตามสบาย