ลิงค์โทรศัพท์: วิธีเพิ่มลิงค์ "โทรได้" & CTA ในเว็บไซต์ของคุณ

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

ในบทความนี้ เราจะมาดูวิธีเพิ่มลิงก์การโทร รวมถึงลิงก์ที่คลิกได้อื่นๆ เช่น อีเมลและ CTA อื่นๆ

สมัครสมาชิกช่อง Youtube ของเรา

ลิงก์การโทรทำงานอย่างไร

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

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

การเพิ่มลิงก์การโทรด้วยหมายเลขโทรศัพท์ HTML ไปยังเว็บไซต์ของคุณ

เพิ่มรหัสเป็นข้อความในตำแหน่งที่คุณต้องการให้ลิงก์ปรากฏ:

<a href="tel:123-456-7890">123-456-7890</a>

Href=tel: สร้างลิงค์การโทร สิ่งนี้จะบอกเบราว์เซอร์ถึงวิธีใช้หมายเลข

“โทร: 123-456-7890” สร้างหมายเลขโทรศัพท์ HTML ตัวเลขในเครื่องหมายคำพูดคือหมายเลขที่จะโทร

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

การแสดงข้อความแทนตัวเลขจะมีลักษณะดังนี้:

<a href="tel:123-456-7890">CLICK TO CALL</a>

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

การเพิ่มนามสกุล

หมายเลขโทรศัพท์บางหมายเลขมีนามสกุล คุณสามารถเพิ่มรหัสที่จะสร้างการหยุดชั่วครู่ก่อนกดหมายเลขต่อ การเพิ่ม P ข้างหน้าส่วนขยายจะเพิ่มการหยุดชั่วคราวหนึ่งวินาที รหัสอาจมีลักษณะดังนี้:

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

หมุนหมายเลข รอหนึ่งวินาที แล้วต่อหมายเลขต่อ

คุณสามารถกำหนดให้รอสัญญาณโทรศัพท์โดยใช้ w แทน p

การเพิ่มรหัสประเทศ

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

<a href="tel:+1123-456-7890">123-456-7890</a>

การเพิ่ม Microdata สำหรับ Local SEO

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

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

ตัวอย่างเช่น รหัสอาจมีลักษณะดังนี้:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

คำกระตุ้นการตัดสินใจอื่น ๆ

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

• tel: – โทรออก
• mailto: – เปิดแอปอีเมล
• โทร: เปิด Skype
• sms: – ส่งข้อความ
• แฟกซ์: – ส่งแฟกซ์

โปรโตคอลทั้งหมดเหล่านี้ใช้ในลักษณะเดียวกับที่เราเห็นด้านบน มาดูตัวอย่างกัน

การเพิ่มรหัสในหน้าติดต่อของคุณ

หนึ่งในสถานที่ที่ดีที่สุดในการเพิ่มลิงก์การโทรอยู่ภายในข้อมูลติดต่อของคุณในหน้าติดต่อเรา

ไม่ว่าคุณจะใช้ตัวแก้ไขแบบคลาสสิกหรือตัวแก้ไข Gutenberg ใหม่ คุณจะต้องดูหน้าเวอร์ชันข้อความ ในตัวแก้ไขแบบคลาสสิก ให้คลิกแท็บ ข้อความ ใน Gutenberg ให้คลิก จุดสามจุด ที่ด้านขวาบนและเลือก Code Editor

เพิ่มรหัสแทนหมายเลขโทรศัพท์ของคุณ

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

การสร้างรหัสสำหรับลิงค์อีเมลหรือ URL

รหัส HTML สำหรับอีเมลคือ mailto: ที่อยู่อีเมลถูกเพิ่มที่ส่วนท้ายดังนี้:

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

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

< href="mailto: [email protected]"; Click here to send me an email</a>

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

การเพิ่มรหัสเพื่อเปิด URLs

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

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

ฉันได้เพิ่มคำประกาศพร้อมรหัสเพื่อดูหน้ากิจกรรม

ปิดการใช้งานบนเดสก์ท็อปและแท็บเล็ต

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

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

การเพิ่มรหัสลงในส่วนหัวหรือส่วนท้ายของคุณ

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

ในแดชบอร์ดของคุณ ไปที่ Appearance > Editor > Theme Header (หรือ Theme Footer ) วางโค้ดไว้ในส่วน <body> ของโค้ด ฉันมองหาแท็กปิดท้าย </a> คลิก Enter เพื่อเพิ่มบรรทัดพิเศษสองสามบรรทัด และวางในโค้ดของฉัน คุณสามารถดูรหัสได้ที่นี่ในบรรทัดที่ 28 และ 29

นี่คือสิ่งที่ดูเหมือนเมื่อฉันวางลิงก์การโทรและลิงก์อีเมลภายในส่วนหัวของธีม Twenty Nineteen มีและใช้งานได้แต่ไม่สวยมาก ซึ่งสามารถแก้ไขได้โดยการเพิ่มสีและพื้นที่ระยะขอบเพื่อให้โดดเด่นจากกัน แน่นอนว่าสิ่งนี้ทำใน CSS

จัดแต่งทรงผมลิงค์

คุณจะต้องเพิ่มโค้ดลงในช่อง CSS เพิ่มเติมในเครื่องมือปรับแต่ง

รหัสของคุณอาจมีลักษณะดังนี้:

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

สิ่งนี้จะบอก CSS ถึงวิธีการจัดรูปแบบข้อความสำหรับ tel: และ mailto: โดยจะเปลี่ยนแบบอักษรหมายเลขโทรศัพท์เป็นสีน้ำตาล แบบอักษรอีเมลสีส้ม และเพิ่มระยะขอบเล็ก ๆ ทางด้านขวาของแต่ละลิงก์

CSS ทำงานได้ทุกที่ที่มีโค้ดรวมอยู่ในวิดเจ็ต โพสต์ ฯลฯ คุณยังสามารถใช้ไอคอนแทนข้อความได้อีกด้วย

การเพิ่มรหัสลงในเมนูรอง Divi

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

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

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

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

ตัวอย่างนี้เป็นเพียงการแสดงข้อความ

ในนี้ฉันได้เพิ่มหมายเลขโทรศัพท์พร้อมกับข้อความ

การทดสอบบนมือถือ

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

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

การเพิ่มลิงค์การโทรด้วยปลั๊กอิน

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

ปุ่มโทรเลย

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

ข้อมูลมากกว่านี้

ปุ่มด้านหนึบ

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

ข้อมูลมากกว่านี้

แถบสัมผัสความเร็ว

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

ข้อมูลมากกว่านี้

แถบติดต่อมือถือ

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

ข้อมูลมากกว่านี้

ความคิดสุดท้าย

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

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

ภาพเด่นผ่าน Jane Kelly / shutterstock.com