การขีดเส้นใต้ลิงก์เคลื่อนไหวใน WordPress

ตัวอย่างของเอฟเฟกต์ลิงก์ที่เราทำ

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

ไฮเปอร์ลิงก์มีมาตั้งแต่ต้นอินเทอร์เน็ต และยังคงเป็นมาตรฐานปกติจนถึงช่วงปลายทศวรรษ 2010 เมื่อถึงจุดนั้น นักออกแบบก็เริ่มลบเส้นใต้ เพิ่มเอฟเฟกต์โฮเวอร์ที่น่าสนใจ และเปลี่ยนสไตล์ทั่วไปของ <a>

วันนี้ เราเห็นการฟื้นคืนชีพของไฮเปอร์ลิงก์มาตรฐาน เนื่องจากผู้ใช้คุ้นเคยกับมัน ส่งผลให้อัตราการคลิกผ่านสูงขึ้น และเป็นการตั้งค่าเริ่มต้นเมื่อใช้ WordPress

เมื่อเร็ว ๆ นี้เราได้ทำการทดสอบเพื่อดูว่าการลบขีดเส้นใต้ส่งผลต่ออัตราการคลิกผ่านบนเว็บไซต์ WordPress ของเราหรือไม่ เราพบว่าเมื่อขีดเส้นใต้ออก ผู้ใช้จะคลิกลิงก์บนเว็บไซต์น้อยลง ทันทีที่ขีดเส้นใต้กลับมา ผู้ใช้ก็คลิกลิงก์เพิ่มเติม สิ่งนี้หมายความว่าการขีดเส้นใต้เป็นองค์ประกอบสำคัญของลิงก์ออนไลน์ใดๆ

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

เราต้องการสร้างข้อมูลโค้ดที่สามารถนำไปใช้กับเว็บไซต์ WordPress ใด ๆ ซึ่งจะทำให้ไฮเปอร์ลิงก์เคลื่อนไหวที่ขีดเส้นใต้เมื่อผู้ใช้วางเมาส์เหนือลิงก์

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

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

ตัวอย่างที่เราชื่นชอบคือการจัดสไตล์ลิงก์ที่ Kinsta Blog เราตัดสินใจใช้ลิงก์ในบล็อกนั้นเป็นแรงบันดาลใจ นี่คือกลุ่มของ CSS ที่ใช้เอฟเฟกต์โฮเวอร์ที่สวยงามกับไฮเปอร์ลิงก์ ติดตั้งง่ายบนเว็บไซต์ WordPress ซึ่งเราจะพูดถึงด้านล่าง

CSS เพื่อจัดรูปแบบไฮเปอร์ลิงก์ใน WordPress

นี่คือไดอะแกรมเรียบร้อยที่แสดงโค้ดและอธิบายว่าแต่ละบรรทัดทำอะไร ซึ่งโพสต์ใน Reddit ได้รับการตอบรับเป็นอย่างดี รวมทั้งคำแนะนำเพิ่มเติมเกี่ยวกับวิธีการปรับปรุงโค้ด

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

a { color : #6699CC ; background-image : linear-gradient (transparent calc( 100% - 2px ), #6699CC 1px ); text-decoration : none; background-size : 100% 100% ; background-position : 100% ; position : relative; background-repeat : no-repeat; transition : all . 2s ; } a :hover { background-size : 0 100% ; }
 ภาษารหัส: CSS ( css )

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

มีความกังวลบางอย่างใน subreddit ว่าโค้ดนี้อาจหนักไปหน่อยในการสร้างภาพเคลื่อนไหวของไฮเปอร์ลิงก์ (และจะทำให้เกิดการทาสีใหม่) และอีกวิธีหนึ่งในการเพิ่มเอฟเฟ็กต์โฮเวอร์ลิงก์ไปยัง WordPress ได้ปรากฏขึ้น

นี่คือรหัส (สร้างโดยผู้โพสต์ของความคิดเห็นนั้น):

 body{ padding : 1.5 rem; } a{ position : relative; text-decoration: none; color: purple; &:after{ content : '' ; position: absolute; bottom: 0 ; left: 0 ; width: 100 %; height: 0.1 em; min-height: 1 px; background-color: currentColor; transform-origin: right; transition: transform .25 s ease; } &:hover{ &:after{ transform : scaleX( 0 ); } } }
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

และนี่คือสิ่งที่มันทำ:

ตัวอย่างของลิงค์ที่มีสไตล์ด้วยวิธีนี้

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

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

วิธีกำหนดสไตล์ลิงค์ใน WordPress

การใส่สไตล์ไฮเปอร์ลิงก์ใน Word press นั้นค่อนข้างง่าย สิ่งที่คุณต้องทำคือคัดลอกและวางโค้ดลงในตัวแก้ไข CSS ที่ใช้กับสไตล์บนเว็บไซต์ WordPress ของคุณ คุณสามารถทำได้สองวิธี แต่วิธีที่ง่ายที่สุดและง่ายที่สุดในการนำ CSS แบบกำหนดเองไปใช้กับ WordPress คือการใช้ตัวแก้ไข CSS ในตัว ซึ่งสามารถพบได้ภายใต้ ลักษณะที่ปรากฏ -> ปรับแต่ง

(คุณยังสามารถใช้ปลั๊กอินนี้ซึ่งจะใช้ CSS แม้ว่าธีมของคุณจะเปลี่ยนไป)

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

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

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

เราทำสิ่งนี้โดยเลือกเนื้อหาโพสต์โดยเฉพาะโดยใช้รหัสองค์ประกอบดังนี้:

 #โพสต์เนื้อหา {รหัสของคุณที่นี่}

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

บทสรุป

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

หากคุณมีคำถามใดๆ เกี่ยวกับการใช้สไตล์ CSS กับไฮเปอร์ลิงก์ใน WordPress โปรดติดต่อเราในความคิดเห็น