วิธีสร้างตัวอย่าง Visual Link ใน WordPress

การเพิ่มความสมบูรณ์ให้กับหน้า WordPress และโพสต์ของคุณด้วยเนื้อหา เช่น แหล่งข้อมูลที่เป็นประโยชน์ ผลิตภัณฑ์ที่เกี่ยวข้อง CTA ส่งเสริมการขาย หรือเนื้อหาที่ดูแลจัดการเพื่อความบันเทิง สามารถช่วยให้คุณหรือแบรนด์ของคุณมอบคุณค่าที่มากขึ้นให้กับผู้ชมของคุณ แม้ว่าลิงก์ธรรมดาจะไม่ถูกตัดออกเสมอไป เว้นแต่ข้อความของ Anchor และความรู้สึกรอบข้างจะมีความน่าสนใจเพียงพอ ลิงก์เหล่านั้นก็อาจถูกมองข้ามไป การสร้างลิงก์ภาพสำหรับเว็บไซต์ของคุณ เช่น ลิงก์ที่ปรับปรุงแล้วที่คุณเห็นบน Facebook คุณสามารถเพิ่มเนื้อหาเชิงโต้ตอบที่น่าสนใจซึ่งผู้เยี่ยมชมของคุณจะให้ความสนใจ ปลั๊กอิน Visual Link Preview สำหรับ WordPress เป็นวิธีง่ายๆ ในการเพิ่มความสวยงามให้กับลิงก์ของคุณ

นี่เป็นเพียงไม่กี่วิธีที่คุณสามารถใช้ปลั๊กอินนี้ได้:

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

นอกจากนี้ ในรูปแบบที่ง่ายที่สุด ปลั๊กอินการแสดงตัวอย่าง Visual Link เป็นวิธีที่น่าสนใจยิ่งขึ้นในการลิงก์ไปยังโพสต์ที่เกี่ยวข้องและทำให้ผู้คนอยู่ในไซต์ของคุณนานขึ้น

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

การค้นหาและติดตั้ง Visual Link Preview Plugin

คุณอาจรู้วิธีดำเนินการนี้อยู่แล้ว แต่ในกรณีนี้ ต่อไปนี้คือวิธีติดตั้งปลั๊กอิน WordPress ใหม่อย่างรวดเร็ว:

• ลงชื่อเข้าใช้แดชบอร์ด WordPress ของคุณ
• เลือก Plugins จากแถบด้านข้างทางซ้าย
• เลือก Add New ในเมนูย่อยที่จะแสดงด้านล่าง Plugins
• พิมพ์ “Visual Link Preview” ลงในแถบค้นหาที่ด้านบนขวาของหน้า
• คลิก ติดตั้งทันที ที่ด้านบนขวาของช่องแสดงตัวอย่างปลั๊กอิน
• เมื่อติดตั้งแล้ว ให้คลิกเปิดใช้งาน

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

เริ่มต้นใช้งานการตั้งค่าและการปรับแต่ง

เมื่อเปิดใช้งานปลั๊กอินแล้ว ให้เลื่อนลงมาในรายการปลั๊กอินเพื่อค้นหา ใต้ชื่อปลั๊กอิน คลิกลิงก์การตั้งค่า – คุณจะถูกส่งไปยังหน้านี้:

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

มีการปรับแต่งดังต่อไปนี้:

• ความกว้างของคอนเทนเนอร์ สีพื้นหลัง และช่องว่างภายใน
• รัศมีเส้นขอบ ความกว้าง ลักษณะ (ทึบ เส้นประ จุด ฯลฯ) และสี
• ตำแหน่งรูปภาพ (ซ้าย ขวา บนหรือล่าง) ขนาดและรัศมีเส้นขอบ
• ขนาดและสีสำหรับชื่อเรื่องและแบบอักษรสรุป

สิ่งเหล่านี้ส่วนใหญ่อธิบายตนเองได้ค่อนข้างดี แต่มีบางสิ่งที่ควรทราบเกี่ยวกับขนาดภาพ คุณสามารถกำหนดขนาดภาพย่อหรือขนาดที่กำหนดเองได้ สำหรับภาพขนาดย่อ ขนาดมาตรฐานคือ “ภาพขนาดย่อ” “กลาง” และ “ใหญ่” ดังนั้นคุณเพียงแค่พิมพ์สิ่งที่คุณต้องการในช่อง หรือคุณสามารถกำหนดขนาดที่กำหนดเองในรูปแบบนี้: widthxheight (150×150 เป็นต้น)

สำหรับตอนนี้ ฉันจะปล่อยให้ทุกอย่างเป็นไปตามที่เป็นอยู่เพื่อดูว่ากล่องลิงก์เริ่มต้นเป็นอย่างไร จากนั้นฉันจะกลับไปปรับแต่ง

การใช้ปลั๊กอินกับ Gutenberg Block Editor

ฉันเข้าไปในบล็อกโพสต์แบบร่างและเพิ่มบล็อกด้านล่างย่อหน้า คุณจะพบบล็อกการแสดงตัวอย่าง Visual Link ใต้วิดเจ็ต หรือเพียงแค่ค้นหาที่ด้านบนของตัวเลือกบล็อก

นี่คือลักษณะของบล็อกการแสดงตัวอย่าง Visual Link:

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

ฉันเลือกโพสต์บล็อกที่เผยแพร่ นี่คือสิ่งที่ดูเหมือนโดยที่ฉันไม่ต้องปรับแต่งสไตล์:

การตั้งค่าบล็อกของการแสดงตัวอย่าง Visual Link ใน Gutenberg

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

เปลี่ยนลิงค์ครับ โปรดทราบว่าหากคุณคลิก เปลี่ยนลิงก์ ลิงก์ที่คุณมีจะถูกลบออกทันที ดังนั้นโปรดอย่าคลิกโดยบังเอิญ

เปลี่ยนหรือลบรูปภาพที่แสดง หากคุณลบรูปภาพที่แสดง นี่คือลักษณะของ Visual Link:

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

คุณสามารถหารูปภาพเด่นใน Media Library ของคุณได้ แต่อาจถูกฝังไว้ คุณยังสามารถเพิ่มลิงก์ใหม่เพื่อเพิ่มเนื้อหาต้นฉบับโดยอัตโนมัติ

เปิดและปิดการตั้งค่าลิงก์ คุณสามารถเลือกเปิดลิงก์ในแท็บใหม่ และเปลี่ยนลิงก์เป็นลิงก์ nofollow ได้

การเพิ่มลิงค์ภายนอกด้วย Gutenberg

ครั้งนี้ฉันกำลังเพิ่มลิงค์ภายนอก ฉันได้คัดลอกและวางลงในฟิลด์ที่ถูกต้อง:

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

การบันทึกบล็อกที่นำกลับมาใช้ใหม่ได้

หากคุณมีหน้า บล็อกโพสต์ หรือลิงก์ภายนอกที่คุณจะใช้บ่อยๆ คุณสามารถสร้างได้เพียงครั้งเดียว แล้วบันทึกเป็นบล็อกที่นำกลับมาใช้ใหม่ได้ เพื่อเพิ่มได้อย่างง่ายดายในอนาคต ใช้งานได้เฉพาะในบรรณาธิการ Gutenberg, FYI

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

การใช้ปลั๊กอินกับ Classic Editor

ใช้ตัวแก้ไขแบบคลาสสิก ไปที่โพสต์หรือเพจของคุณและไปยังตำแหน่งที่คุณต้องการเพิ่มลิงก์แบบภาพ คลิกปุ่มแสดงตัวอย่าง Visual Link ที่ด้านบนของหน้า:

กล่องนี้จะปรากฏขึ้น:

จากดรอปดาวน์ Type คุณสามารถเลือกที่จะเพิ่มลิงค์ของคุณเองหรือลิงค์ภายนอก อันดับแรก ฉันจะเพิ่มลิงค์ของตัวเอง เมื่อคุณเลือกเนื้อหาที่จะลิงก์แล้ว ช่องต่างๆ จะเติมข้อมูลอัตโนมัติ เช่นเดียวกับ Gutenberg นี่คือที่ที่คุณจะทำการเปลี่ยนแปลงใดๆ คุณสามารถลบรูปภาพและเลือกที่จะเพิ่มรูปภาพใหม่ เปลี่ยนชื่อ และอัปเดตข้อมูลสรุปได้จากหน้าต่างนี้ คุณยังสามารถใช้การตั้งค่าเริ่มต้นของปลั๊กอินหรือเทมเพลตที่กำหนดเองได้ที่นี่ เช่นเดียวกับ Gutenberg

การเพิ่มลิงค์ภายนอกด้วย Classic Editor

คราวนี้ฉันจะเพิ่มลิงค์ภายนอก นี่คือฟิลด์สำหรับลิงค์ภายนอก:

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

การปรับแต่งเทมเพลตและกล่องแสดงตัวอย่าง Visual Link

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

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

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

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

คุณสามารถใช้เวลามากมายในการค้นหาการปรับแต่งที่เหมาะสม โดยเฉพาะอย่างยิ่งเมื่อคุณสร้างเทมเพลตที่กำหนดเองได้เพียงเทมเพลตเดียว

ดูตัวอย่างการปรับแต่งเทมเพลตของคุณ

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

วิธีรับสไตล์เริ่มต้นกลับ

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

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

ข้อเสียของปลั๊กอินแสดงตัวอย่าง Visual Link

ปลั๊กอิน Visual Link Preview เป็นปลั๊กอินที่เรียบง่ายและตรงไปตรงมา ซึ่งทำงานตามที่บอกว่าจะทำ และเรียนรู้การใช้งานได้ง่ายมาก อย่างไรก็ตาม เนื่องจากเป็นพื้นฐานมาก จึงยังขาดบางพื้นที่ที่สามารถปรับปรุงได้

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

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

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

ห่อ

โดยรวมแล้ว แม้จะมีข้อเสีย ฉันชอบปลั๊กอิน Visual Link Preview การติดตั้งและใช้งานนั้นง่ายมาก ไม่ว่าคุณจะชอบใช้งานเอดิเตอร์ตัวไหน – Gutenberg หรือคลาสสิก และนี่เป็นวิธีการเพิ่มลิงก์ที่น่าพึงพอใจและสวยงามอย่างแน่นอน ซึ่งอาจไปได้ไกลหากคุณเกี่ยวข้องกับการตลาดแบบพันธมิตรหรือต้องการลิงก์ไปยังหน้า Landing Page ของคุณ ขณะนี้ เนื่องจากคุณไม่สามารถสร้างเทมเพลตได้มากกว่าหนึ่งเทมเพลต จึงเหมาะที่สุดสำหรับเว็บไซต์ที่มีรูปลักษณ์ที่เป็นมาตรฐานสำหรับโพสต์และหน้าทั้งหมด ดังนั้น หากคุณมีหน้า Landing Page ที่แตกต่างกันจำนวนมากในสไตล์ที่หลากหลาย คุณจะลำบากในการสร้างเทมเพลตกล่องแสดงตัวอย่างหนึ่งรายการที่เหมาะกับทุกที่ที่วาง มิฉะนั้น แม้ว่าจะเป็นปลั๊กอินที่มีน้ำหนักเบาซึ่งทำงานได้ดี

คุณอาจชอบบทความนี้ด้วย 5 สิ่งเจ๋งๆ ที่คุณสามารถทำได้ใน Divi พร้อมลิงก์สมอ