วิธีเปลี่ยนสีลิงค์ใน WordPress (4 วิธี)

เผยแพร่แล้ว: 2022-05-06

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

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

สารบัญ

  • ทำไมคุณอาจพิจารณาเปลี่ยนสีลิงค์ของเว็บไซต์ของคุณ
  • การเลือกสีลิงค์ที่เหมาะสมสำหรับเว็บไซต์ของคุณ
  • วิธีเปลี่ยนสีลิงค์ใน WordPress (4 วิธี)
    1. ใช้ฟีเจอร์ Global Styles (บล็อกธีมเท่านั้น)
    2. ผ่าน WordPress Customizer
    3. แก้ไขธีมตัวสร้างบีเวอร์ของคุณ
    4. เพิ่มโค้ด CSS ที่กำหนดเอง
  • บทสรุป

ทำไมคุณอาจพิจารณาเปลี่ยนสีลิงค์ของเว็บไซต์ของคุณ

ลิงค์มีบทบาทสำคัญในเว็บไซต์ของคุณ ตัวอย่างเช่น เมื่อคุณนำเสนอเนื้อหาบล็อกที่มีลิงก์ขาเข้าและขาออก คุณสามารถปรับปรุง Search Engine Optimization (SEO) ได้ Google ใช้ลิงก์อัตราการคลิกผ่าน (CTR) เพื่อจัดอันดับเนื้อหาของคุณซึ่งทำให้การสร้างลิงก์เป็นกลยุทธ์ SEO ที่มีประสิทธิภาพ

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

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

ดังนั้น หากคุณไม่ได้รับการคลิกลิงก์มากนัก คุณอาจต้องลองใช้สีต่างๆ สีลิงก์ที่มีประสิทธิภาพมากขึ้นสามารถ:

  • เพิ่มการมองเห็น
  • เข้ากับสีแบรนด์ของคุณ
  • ปรับปรุงความน่าเชื่อถือ
  • ปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณ

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

การเลือกสีลิงค์ที่เหมาะสมสำหรับเว็บไซต์ของคุณ

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

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

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

เว็บไซต์ที่มีลิงก์สีไม่ดี

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

เว็บไซต์ MIT Education

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

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

วงล้อสี Adobe

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

เว็บไซต์เสื้อผ้าผู้ชาย

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

วิธีเปลี่ยนสีลิงค์ใน WordPress (4 วิธี)

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

1. ใช้ฟีเจอร์ Global Styles (บล็อกธีมเท่านั้น)

ด้วยการเปิดตัว WordPress 5.9 คุณมีตัวเลือกในการปรับแต่งเว็บไซต์ทั้งหมดของคุณผ่าน Full Site Editing (FSE) แทนที่จะใช้เครื่องมือปรับแต่ง อินเทอร์เฟซสไตล์สากลช่วยให้คุณแก้ไของค์ประกอบธีมที่ใหญ่ขึ้นได้ อย่างไรก็ตาม ธีม WordPress ส่วนใหญ่ไม่สนับสนุนฟังก์ชันใหม่นี้ในขณะนี้

หากต้องการใช้วิธีนี้ต่อ คุณต้องใช้ WordPress Block Editor และ Block Theme ที่เข้ากันได้ จากนั้น ในการเริ่มต้น คุณสามารถไปที่ Appearance > Editor ในแดชบอร์ด WordPress ของคุณ:

WordPress ตัวแก้ไขเว็บไซต์เต็มรูปแบบ

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

รูปแบบตัวแก้ไขเว็บไซต์แบบเต็ม

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

สีของตัวแก้ไขไซต์แบบเต็ม

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

สีลิงค์ตัวแก้ไขเว็บไซต์แบบเต็ม

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

2. ผ่าน WordPress Customizer

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

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

ตัวปรับแต่ง WordPress

การดำเนินการนี้จะเปิดเครื่องมือ ปรับแต่งเอง โดยอัตโนมัติ จากนั้นคุณจะต้องค้นหาแท็บการแก้ไขสี ซึ่งจะแตกต่างกันไปตามธีมของคุณ สำหรับตัวอย่างนี้ เราได้เปิดใช้งานธีม Astra ในเครื่องมือปรับแต่งของเรา เราไปที่ Global > Colours :

แอสตร้า โกลบอล คัลเลอร์

ที่นี่ เราสามารถค้นหาการตั้งค่าต่างๆ เกี่ยวกับสีของธีมของเราได้ สำหรับธีมนี้ เราพบตัวเลือกที่มีป้ายกำกับว่า Link Color โปรดจำไว้ว่าอาจมีป้ายกำกับแตกต่างกันไปตามธีมของคุณ หากคุณไม่เห็นปุ่มนี้ ให้ลองค้นหาแท็บชื่อ Accent Color หรือ Primary Accent

ใช้ตัวเลือกสี เลือกสีที่คุณต้องการ:

ลิงค์ตัวเลือกสี

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

3. แก้ไขธีมตัวสร้างบีเวอร์ของคุณ

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

ยิ่งไปกว่านั้น Beaver Builder ยังให้คุณออกแบบเว็บไซต์ได้อย่างรวดเร็วด้วยเครื่องมือสร้างเพจแบบลากและวาง ไม่ว่าคุณต้องการสร้างบล็อกหรือร้านค้าออนไลน์ หมายความว่าคุณสามารถแก้ไขเว็บไซต์ของคุณได้โดยไม่ต้องจัดการกับโค้ดใดๆ:

ธีมตัวสร้างบีเวอร์

ในการเริ่มต้น คุณจะต้องติดตั้งและเปิดใช้งานทั้งปลั๊กอิน Beaver Builder และธีม Beaver Builder ของเรา โปรดทราบว่านี่เป็นเครื่องมือระดับพรีเมียม ดังนั้น คุณจะต้องเลือกแผนด้วย

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

เครื่องมือปรับแต่ง Beaver Builder

จากนั้นไปที่ General > Accent Color ด้วยการใช้ตัวเลือกสี คุณสามารถเลือกสีที่กำหนดเองสำหรับลิงก์ของคุณ:

สีเน้นเสียงของตัวสร้างบีเวอร์

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

4. เพิ่มโค้ด CSS ที่กำหนดเอง

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

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

เว็บไซต์สีฐานสิบหก

ใต้แต่ละสี คุณจะเห็นรหัสฐานสิบหก คัดลอกรหัสเฉพาะสำหรับสีที่คุณต้องการเลือก สำหรับตัวอย่างนี้ เราได้เลือก #399a8b :

รหัสที่กำหนดเองฐานสิบหกสี

จากนั้นไปที่ผู้ดูแลระบบ WP ของคุณและคลิกที่ ลักษณะที่ ปรากฏ > ปรับแต่ง เพื่อเปิดเครื่องมือปรับแต่ง ที่ด้านล่างของตัวเลือกแท็บ ในแผงด้านซ้ายมือ คุณจะเห็น CSS เพิ่มเติม :

CSS เพิ่มเติม

ตอนนี้ เพียงวางโค้ดฐานสิบหกของสีใหม่ของคุณลงในข้อมูลโค้ด CSS ต่อไปนี้:

 a { color: #399a8b; }

จากนั้นคัดลอก CSS นี้แล้ววางลงในช่องที่ด้านล่างของแท็บ CSS เพิ่มเติม :

การเพิ่มรหัสสีที่กำหนดเอง

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

บทสรุป

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

เพื่อสรุป ต่อไปนี้คือสี่วิธีง่ายๆ ในการเปลี่ยนสีลิงก์ในเว็บไซต์ของคุณ:

  1. ใช้ฟีเจอร์สไตล์สากล (ธีมบล็อกเท่านั้น)
  2. ใช้ตัวปรับแต่ง WordPress ของคุณ
  3. แก้ไขธีม Beaver Builder ของคุณ
  4. เพิ่มโค้ด CSS ที่กำหนดเอง

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