วิธีเพิ่มปุ่มคลิกเพื่อโทรบน WordPress บนเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2019-01-21

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

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

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

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

คุณควรใช้ปลั๊กอิน Click To Call หรือ HTML หรือไม่?

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

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

ในคู่มือนี้ เราจะแสดงให้คุณเห็นทั้งสองวิธี มาเริ่มกันเลย เริ่มต้นด้วยเส้นทางปลั๊กอิน...

วิธีที่ 1: ใช้ปลั๊กอิน WordPress คลิกเพื่อโทรฟรี

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

  • แถบ Click To Call ที่เรียบง่ายจริงๆ – แทนที่จะเพิ่มปุ่มแบบสแตนด์อโลน ปลั๊กอินนี้จะเพิ่มแถบทั้งหมดที่ด้านล่างของหน้าจอของผู้เยี่ยมชมบนมือถือ หากคุณต้องการทำให้คนอื่นโทรหาคุณได้ง่าย/ชัดเจน นี่คือตัวเลือกที่ดี
  • ปุ่มโทรเลย – นอกเหนือจากแถบเต็มรูปแบบเช่นปลั๊กอินด้านบน ปลั๊กอินนี้ยังช่วยให้คุณใช้ปุ่มโทรแบบปุ่มการทำงานแบบลอยตัวได้มากขึ้น
  • Call Now Button Ultimate – ปลั๊กอินนี้เพิ่มแถบด้านล่างของการโทรตอนนี้ แต่ที่พิเศษกว่านั้นคือมันให้คุณตั้งค่า "ชั่วโมงการทำงาน" ได้เมื่อคุณว่างทางโทรศัพท์ ในช่วงนอกเวลาทำการ ปุ่มจะแจ้งให้ผู้เยี่ยมชมส่งอีเมลแทนการโทร

กวดวิชาปลั๊กอิน Click To Call Bar ที่ง่ายจริงๆ

ปลั๊กอินนี้ฟรีและมีให้ที่ WordPress.org ดังนั้นคุณจึงสามารถติดตั้งได้จากแดชบอร์ด WordPress ของคุณโดยไปที่ Plugins → Add New

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

  • เปิดใช้งานฟังก์ชั่นปุ่มคลิกเพื่อโทร
  • เพิ่มข้อความ CTA ข้างปุ่มโทรของคุณ
  • เลือกหมายเลขโทรศัพท์ที่ผู้เยี่ยมชมจะโทรหา
  • กำหนดค่าสีที่ใช้บนปุ่มคลิกเพื่อโทร

การตั้งค่าปลั๊กอิน Click To Call Bar ที่ง่ายมาก

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

ต่อไปนี้คือตัวอย่างลักษณะที่ปรากฏบนอุปกรณ์เคลื่อนที่:

ตัวอย่างปลั๊กอิน Click To Call Bar ที่ง่ายมาก

บทแนะนำปลั๊กอินปุ่มโทรทันที

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

เหมือนกับที่อื่น ๆ มันแสดงอยู่ที่ WordPress.org ซึ่งหมายความว่าคุณสามารถติดตั้งได้โดยไปที่ Plugins → Add New

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

ที่ด้านบนสุด คุณสามารถ:

  • เปิดใช้งานปุ่ม
  • ป้อนหมายเลขโทรศัพท์ที่ผู้เข้าชมจะโทรหา
  • เลือกข้อความปุ่ม ( หากต้องการ )

การตั้งค่าปุ่มโทรเลย

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

ปุ่มโทรทันที ปลั๊กอิน การตั้งค่าขั้นสูง

เมื่อเปิดใช้งานปุ่มของคุณ ปุ่มจะแสดงต่อผู้เข้าชมมือถือเท่านั้น ดังนั้นคุณจะต้องดูตัวอย่างจากอุปกรณ์มือถือจึงจะสามารถดูการทำงานได้

นี่คือตัวอย่างจากไซต์ของเราเกี่ยวกับแนวทางปุ่มการทำงานแบบลอย:

ตัวอย่างปลั๊กอินปุ่มโทรตอนนี้

บทแนะนำปลั๊กอินสุดยอดปุ่มโทรตอนนี้

สิ่งพิเศษเกี่ยวกับปลั๊กอิน Call Now Button Ultimate คือคุณสามารถเลือกเวลาที่ต้องการให้ผู้เยี่ยมชมสามารถโทรหาคุณได้ ในช่วงนอกเวลาทำการที่หมายเลขโทรศัพท์ของคุณไม่สามารถใช้ได้ คุณสามารถแสดงข้อความแจ้งให้ผู้เยี่ยมชมส่งอีเมลแทนได้

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

เมื่อคุณทำเสร็จแล้ว ไปที่ส่วน Call Now Button Ultimate ในแดชบอร์ด WordPress ของคุณเพื่อตั้งค่า

ที่ด้านบน คุณสามารถเปิดใช้งานปลั๊กอินและป้อนหมายเลขโทรศัพท์และที่อยู่อีเมลของคุณ:

ปุ่มโทรทันที การตั้งค่าพื้นฐานของปลั๊กอินขั้นสูง

จากนั้นไปที่ด้านล่างหน้า คุณสามารถป้อนเวลาทำการและกำหนดค่าข้อความและสีของปุ่ม:

ปุ่มโทรทันที Ultimate Plugin การตั้งค่าขั้นสูง

เช่นเดียวกับปลั๊กอินอื่นๆ ปุ่มโทรเลยจะแสดงต่อผู้เยี่ยมชมมือถือเท่านั้น

นี่คือลักษณะที่ปรากฏระหว่างเวลาทำการของคุณ:

ตัวอย่างปลั๊กอิน Call Now Button Ultimate ในช่วงเวลาหลายชั่วโมง

และนี่คือสิ่งที่ดูเหมือนนอกเวลาทำการของคุณ:

ตัวอย่างปลั๊กอิน Call Now Button Ultimate นอกเวลาทำการ

วิธีที่ 2: WordPress Click To Call HTML Button

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

ในการสร้างปุ่มดังกล่าว คุณสามารถใช้ไฮเปอร์ลิงก์ปกติและใส่หมายเลขโทรศัพท์ของคุณใน tel: schema

นี่คือสิ่งที่ดูเหมือน – คุณเพียงแค่ต้องแทนที่หมายเลขโทรศัพท์ตัวอย่างด้วยหมายเลขโทรศัพท์ของคุณเอง และแก้ไขข้อความ CTA ตามต้องการ:

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

นั่นคือทั้งหมดที่มีให้!

หากต้องการ คุณสามารถใช้ CSS ที่กำหนดเองเพื่อสร้างปุ่มแทนไฮเปอร์ลิงก์ปกติได้

ตัวอย่างเช่น คุณสามารถใช้ HTML นี้:

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

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

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

คลิกเพื่อเรียกตัวอย่าง HTML

คุณสามารถเพิ่ม CSS ที่กำหนดเองได้อย่างปลอดภัยผ่าน WordPress Customizer หรือปลั๊กอินฟรี เช่น Simple CSS

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

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

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

เริ่มใช้ปุ่มคลิกเพื่อโทรของ WordPress วันนี้!

ไม่ว่าคุณจะใช้ปลั๊กอินหรือ HTML ที่กำหนดเอง คุณก็สร้างปุ่มคลิกเพื่อโทรบน WordPress ได้ง่ายๆ

ด้วยปุ่มของคุณ ผู้เข้าชมบนอุปกรณ์เคลื่อนที่จะติดต่อกับคุณได้ง่ายกว่าที่เคย

เพียงจำไว้ว่า - การโทรศัพท์ทำให้ทรัพยากรบุคคลมีมาก

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

เรียนรู้วิธีเริ่มต้นใช้งานปลั๊กอิน Heroic Knowledge Base, ธีม KnowAll หรือปลั๊กอิน Heroic FAQs