전화 링크: 웹사이트에 "통화 가능" 링크 및 CTA를 추가하는 방법
게시 됨: 2019-01-14많은 비즈니스 웹사이트에는 고객이 연락할 수 있도록 전화번호가 표시됩니다. 데스크톱이 사이트에 액세스하는 가장 인기 있는 방법이었을 때 사용자는 전화번호를 기록해 두고 별도의 장치에서 전화를 걸었습니다. 물론 대부분의 사용자는 이제 웹 사이트에 액세스하여 동일한 장치에서 전화를 겁니다. 그러면 클릭 가능한 HTML 전화번호를 생성하여 통화 링크를 추가할 수 있는 기회가 열립니다.
이 기사에서는 통화 링크와 이메일 및 기타 CTA와 같은 클릭 가능한 다른 링크를 추가하는 방법을 살펴보겠습니다.
YouTube 채널 구독
통화 링크 작동 방식
전화번호를 클릭 가능하게 만드는 것은 HTML로 쉽게 수행됩니다. HTML5에는 브라우저에서 사용할 수 있는 tel: 및 mailto:와 같은 프로토콜이 포함되어 있습니다. 브라우저는 이러한 프로토콜에 다르게 응답합니다. 일부는 전화 앱을 실행하고 통화 버튼을 클릭하기를 기다리는 동안 디스플레이에 번호를 추가합니다. 다른 사람들은 전화를 걸고 다른 사람들은 먼저 괜찮은지 물어볼 것입니다.
HTML이므로 헤더, 바닥글, 사이드바, 게시물 및 페이지 콘텐츠 내, 위젯 내 등 사이트의 모든 위치에 프로토콜을 추가할 수 있습니다.
웹사이트에 HTML 전화번호 통화 링크 추가
링크를 표시할 위치에 코드를 텍스트로 추가합니다.
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: 통화 링크를 생성합니다. 이것은 브라우저에 번호를 사용하는 방법을 알려줍니다.
"Tel: 123-456-7890" HTML 전화번호를 생성합니다. 따옴표 안의 번호는 전화를 걸 번호입니다.
>< 태그 안의 숫자는 시각적인 부분이며 전화번호, "클릭 투 콜" 또는 "지금 전화하기"와 같은 텍스트 행 또는 기타 클릭 유도문안을 포함하여 원하는 모든 것이 될 수 있습니다. 원하다. 클릭했을 때 어떤 일이 일어날지 설명해야 합니다.
번호 대신 메시지를 표시하면 다음과 같습니다.
<a href="tel:123-456-7890">CLICK TO CALL</a>
방문자는 텍스트를 볼 수 있지만 텍스트를 클릭하면 전화 걸기 화면이 표시되며 통화 버튼을 클릭할 수 있도록 귀하의 번호가 준비되어 있습니다.
확장 추가
일부 전화번호에는 내선 번호가 있습니다. 내선 번호로 전화를 걸기 전에 잠시 멈추는 코드를 추가할 수 있습니다. 확장자 앞에 P 를 추가하면 1초의 일시 중지가 추가됩니다. 코드는 다음과 같습니다.
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
이 번호로 전화를 걸고 1초 동안 기다린 다음 내선 번호로 전화를 겁니다.
p 대신 w 를 사용하여 발신음을 기다리게 할 수 있습니다.
국가 코드 추가
국가 코드는 전화 번호 앞에 국가 코드와 함께 + 를 포함하여 추가할 수 있습니다. 예는 다음과 같습니다.
<a href="tel:+1123-456-7890">123-456-7890</a>
로컬 SEO를 위한 마이크로데이터 추가
내가 스마트폰을 들고 다닐 때 가장 좋아하는 편리함 중 하나는 지역 비즈니스를 검색할 때 Google에서 검색할 때 클릭 가능한 전화번호를 제공하는 것입니다. 메모하거나 외우려고 할 필요 없이 번호를 클릭하면 전화를 걸 수 있습니다. 이 기능은 이제 필수입니다. 다행히 웹사이트에 추가할 수 있으므로 Google에서 지역 검색에서 전화번호를 제공할 수 있습니다.
이것은 마이크로데이터로 수행됩니다. 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 프로토콜에는 다음이 포함됩니다.
- 전화: – 전화 걸기
- mailto: – 이메일 앱 열기
- 통화: Skype를 엽니다.
- sms: – 문자 메시지 보내기
- 팩스: – 팩스 보내기
이 모든 프로토콜은 위에서 본 것과 같은 방식으로 사용됩니다. 몇 가지 예를 살펴보겠습니다.
연락처 페이지에 코드 추가하기
통화 링크를 추가할 수 있는 가장 좋은 위치 중 하나는 연락처 페이지의 연락처 정보에 있습니다.
클래식 편집기를 사용하든 새로운 구텐베르크 편집기를 사용하든 페이지의 텍스트 버전을 확인해야 합니다. 클래식 편집기에서 텍스트 탭을 클릭합니다. 구텐베르크에서 오른쪽 상단의 점 세 개를 클릭하고 코드 편집기 를 선택합니다.
전화번호 대신 코드를 추가하세요.
코드 편집기를 종료하거나 페이지를 미리 보면 전화번호가 이제 클릭 가능한 링크임을 알 수 있습니다.
이메일 링크 또는 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>
다음은 Spa 레이아웃 팩의 연락처 페이지에 있는 예입니다. 아이콘과 이메일 보내기 텍스트가 있는 광고 문구 모듈을 추가했습니다. 텍스트 탭을 선택하고 이메일 HTML을 추가했습니다. 이제 텍스트를 클릭할 수 있으며 이메일 앱이 열립니다.
URL을 여는 코드 추가
HTML을 사용하여 원하는 URL을 열 수 있습니다. 이것은 뉴스레터 가입, 이벤트 등의 페이지로 독자를 보내려는 경우에 좋습니다. 링크하기 위해 HTML 코드에 URL이 포함됩니다. 예를 들어:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
이벤트 페이지를 보기 위해 코드가 있는 또 다른 광고 문구를 추가했습니다.
데스크톱 및 태블릿에서 비활성화
통화 링크의 한 가지 문제는 데스크톱이나 태블릿에 유용하지 않다는 것입니다. 각 유형의 장치에 고유한 모듈을 만든 다음 다른 장치에서 비활성화하여 Divi로 이 문제를 해결할 수 있습니다.
여기에서 전화번호로 두 개의 모듈을 만들었습니다. 하나는 HTML 전화번호를 포함하고 다른 하나는 포함하지 않습니다. 나는 태블릿과 데스크탑에서 클릭 가능한 번호가 있는 것을 비활성화하여 링크를 볼 수 없도록 했습니다. 또한 전화에 대한 링크가 없는 모듈을 비활성화하여 전화 사용자는 링크가 있는 모듈만 볼 수 있습니다.
머리글 또는 바닥글에 코드 추가
테마 편집기를 사용하여 머리글이나 바닥글에 코드를 추가할 수 있습니다. 항상 하위 테마를 사용하세요. 그렇지 않으면 테마를 업데이트할 때 PHP 코드를 덮어쓰게 됩니다. 잘 보이려면 CSS 스타일링이 필요합니다.
대시보드에서 모양 > 편집기 > 테마 머리글 (또는 테마 바닥글 )로 이동합니다. 코드의 <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 크롬의 개발자 도구를 사용할 수 있습니다.
홈페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택합니다. 화면 왼쪽 상단에 기기 목록이 표시됩니다. 해당 화면에서 귀하의 웹사이트가 어떻게 보이는지 보려면 하나를 선택하십시오. HTML 전화번호 링크를 클릭하면 앱을 선택하라는 대화 상자가 열립니다. 이것이 보이면 링크가 작동합니다. 나는 여전히 실제 스마트폰에서 시도하는 것을 권장하지만 이것은 링크가 무언가를 하고 있다는 좋은 표시입니다.
플러그인으로 통화 링크 추가
플러그인을 사용하여 헤더에 호출 링크를 추가할 수도 있습니다. 여기에는 일반적으로 스타일 지정, 여러 클릭 유도문안 추가, 방문자의 장치에 따라 켜거나 끌 수 있는 기능이 포함됩니다. 또한 설정 및 사용이 간편합니다. 코드를 처리하고 싶지 않다면 훌륭한 선택입니다. 다음은 몇 가지 최상의 옵션입니다.
지금 전화 버튼
지금 통화 버튼은 모바일 방문자를 위해 화면 하단에 클릭 투 콜 버튼을 추가합니다. 다른 기기에서는 표시되지 않습니다. 원하는 경우 텍스트를 추가할 수도 있습니다. 버튼은 전화 아이콘이므로 용도를 쉽게 이해할 수 있습니다. 버튼을 활성화하고 전화번호를 입력하기만 하면 됩니다. 고급 설정에서 기본 동작을 변경할 수 있습니다.
추가 정보
스티커 사이드 버튼
이 플러그인을 사용하면 웹사이트 측면에 고정되고 사용자가 스크롤할 때 화면에 남아 있는 버튼을 추가할 수 있습니다. 클릭 가능한 전화번호, 이메일 주소, 소셜 미디어 아이콘, 매장 위치를 추가할 수 있습니다. 오른쪽 또는 왼쪽에 설정하고, 애니메이션 및 롤오버 스타일을 선택하고, 색상을 사용자 지정하고, 표시할 위치를 선택합니다.
추가 정보
스피드 컨택트 바
여기에는 전화번호, 팩스 번호, 헤드라인, 주소, 이메일, 소셜 네트워크 및 사용자 지정 URL에 대한 클릭 가능한 링크가 포함된 연락처 막대가 추가됩니다. 막대를 위 또는 아래로 설정하고 텍스트와 링크의 크기, 색상, 색상, 막대가 반응하는 방식을 조정합니다. 크기도 조절할 수 있습니다. 필터 후크를 사용하여 더 많은 콘텐츠를 추가할 수 있습니다.
추가 정보
모바일 연락처 바
이 플러그인은 모바일 장치에서 볼 때 웹사이트에 대한 링크를 추가합니다. 전화, 이메일, Skype, 사용자 지정 URL 및 소셜 네트워크를 포함한 13가지 옵션 중에서 표시할 링크를 선택할 수 있습니다. 아이콘에 대한 FontAwesome 통합이 있습니다. 링크의 스타일을 지정하고 크기, 테두리, 불투명도 등을 선택할 수 있습니다. 메뉴는 화면 상단 또는 하단에서 설정합니다. 메뉴는 사용자가 스크롤할 때 화면에 남아 있습니다. 또한 항목 카운터 버튼이 있는 맨 위로 스크롤 및 WooCommerce 장바구니가 포함되어 있습니다.
추가 정보
마지막 생각들
웹사이트에 접속하기 위한 스마트폰의 인기는 나날이 증가하고 있습니다. 이러한 인기는 통화 링크를 단순한 편리함에서 완전한 필요성으로 전환합니다. 클릭 가능한 전화번호를 추가하면 귀하의 비즈니스 또는 경쟁업체에 전화를 거는 사용자를 구분할 수 있습니다. 다행히도 WordPress 웹사이트의 머리글, 바닥글, 위젯, 페이지 및 게시물에 HTML 전화번호를 추가하기 위해 클릭 가능한 링크를 만드는 것은 그리 어렵지 않습니다.
우리는 당신의 의견을 듣고 싶습니다. 웹사이트에 통화 링크를 추가했습니까? 아래 의견에 귀하의 경험에 대해 알려주십시오.
Jane Kelly/Shutterstock.com을 통한 추천 이미지