웹 사이트에 WordPress 클릭 투 콜 버튼을 추가하는 방법
게시 됨: 2019-01-21여기 HeroThemes에서는 사이트 방문자가 도움을 요청 하지 않아도 되도록 고품질 WordPress 지식 기반 테마 및 플러그인을 만드는 데 많은 노력을 기울였습니다.
그러나 사람들은 여전히 전화 지원이 필요하며 웹 사이트 방문자가 쉽게 전화를 걸 수 있도록 하려는 비지원 이유도 많이 있습니다.
그러나 사람들이 모바일 장치에서 검색할 때 마지막으로 하고 싶은 일은 사용자가 직접 귀하의 전화번호를 입력하게 하거나 작은 전화번호를 클릭하도록 하는 것입니다. 대신 클릭 투 콜 버튼이 훨씬 더 나은 옵션입니다.
이 게시물에서는 간단한 무료 플러그인이나 HTML을 사용하여 WordPress 클릭 투 콜 기능을 웹사이트에 추가하는 방법을 보여줍니다. 기술 지식 수준에 관계없이 따라하고 멋진 클릭 투 콜 버튼을 만들 수 있습니다.
클릭 투 콜 플러그인 또는 HTML을 사용해야 합니까?
플러그인을 사용하는 것은 멋진 것을 만드는 가장 간단한 방법입니다. 따라서 즉시 "작동하는" 것을 원한다면 플러그인 경로를 선택하는 것이 좋습니다. 그러나 플러그인이 지원하는 위치에만 통화 버튼을 표시하도록 제한됩니다.
사이트의 아무 곳에나 클릭 투 콜 버튼을 추가할 수 있고 싶거나 다른 플러그인을 사용하고 싶지 않은 경우 고유한 HTML로 클릭 투 콜 기능을 추가하는 것은 하이퍼링크를 삽입하는 것만큼 간단하므로 여전히 꽤 사용자 친화적 인 접근 방식. 그러나 보기 좋게 만들기 위해 몇 가지 기본 사용자 정의 CSS를 추가해야 할 수도 있습니다. 이는 염두에 두어야 할 사항입니다.
이 가이드에서는 두 가지 방법을 모두 보여줍니다 . 플러그인 경로로 시작하여 시작하겠습니다...
접근 방식 1: 무료 WordPress 클릭 투 콜 버튼 플러그인 사용
워드프레스 클릭 투 콜 플러그인에는 여러 가지가 있지만 그 중 3가지에 대한 단계별 가이드를 보여드리겠습니다.
- 정말 간단한 클릭 투 콜 바 – 독립 실행형 버튼을 추가하는 대신 이 플러그인은 모바일 방문자 화면 하단에 전체 바를 추가합니다. 사람들이 당신에게 전화를 걸기 쉽고 명확하게 만들고 싶다면 이것이 좋은 선택입니다.
- 지금 호출 버튼 – 위의 플러그인과 같은 전체 표시줄 외에도 이 플러그인을 사용하면 플로팅 작업 버튼 스타일의 호출 버튼을 더 많이 사용할 수 있습니다.
- Call Now Button Ultimate – 이 플러그인은 동일한 통화 지금 하단 표시줄을 추가합니다. 그러나 독특한 점은 전화로 가능한 시간에 대해 "영업 시간"을 설정할 수 있다는 것입니다. 근무 외 시간 동안 버튼을 누르면 방문자에게 전화 대신 이메일을 보내라는 메시지가 표시됩니다.
정말 간단한 클릭 투 콜 바 플러그인 튜토리얼
이 플러그인은 무료이며 WordPress.org에서 사용할 수 있으므로 플러그인 → 새로 추가 로 이동하여 WordPress 대시보드에서 바로 설치할 수 있습니다.
플러그인을 설치하고 활성화했으면 설정 → 정말 간단한 클릭 투 콜로 이동하여 플러그인을 구성합니다. 여기에서 다음을 수행할 수 있습니다.
- 클릭 투 콜 버튼 기능 활성화
- 통화 버튼 옆에 텍스트 CTA 추가
- 방문자가 전화할 전화번호를 선택하세요.
- 클릭 투 콜 버튼에 사용되는 색상 구성
그런 다음 변경 사항을 저장하여 버튼을 활성화합니다. 이 버튼은 모바일 방문자 에게만 표시되므로 데스크톱 컴퓨터에서 검색하는 경우에는 표시되지 않습니다.
다음은 모바일에서 어떻게 보일 수 있는지에 대한 예입니다.
지금 전화 버튼 플러그인 튜토리얼
위에서 언급했듯이 지금 전화 걸기 버튼 플러그인은 지금 전화 걸기 방식 외에 부동 작업 지금 전화 걸기 버튼을 사용할 수 있다는 점에서 조금 더 유연합니다.
다른 것과 마찬가지로 WordPress.org에 나열되어 있습니다. 즉, Plugins → Add New 로 이동하여 설치할 수 있습니다.
플러그인을 설치하고 활성화했으면 설정 → 지금 호출 버튼 으로 이동하여 플러그인을 구성합니다.
상단에서 다음을 수행할 수 있습니다.
- 버튼 활성화
- 방문자가 전화할 전화번호를 입력하세요.
- 버튼 텍스트 선택( 원하는 경우 )
고급 설정 링크를 클릭하여 더 많은 설정을 표시할 수도 있습니다. 이를 통해 위치, 색상, 클릭 추적 추가 등을 변경할 수 있습니다.
버튼이 활성화되면 모바일 방문자에게만 표시되므로 모바일 장치에서 버튼이 작동하는지 확인해야 합니다.
다음은 플로팅 작업 버튼 접근 방식에 대한 사이트의 예입니다.
지금 전화 버튼 Ultimate 플러그인 튜토리얼
Call Now Button Ultimate 플러그인의 독특한 점은 방문자가 전화를 걸 수 있는 시간을 선택할 수 있다는 것입니다. 전화번호를 사용할 수 없는 업무 외 시간에는 방문자에게 대신 이메일을 보내라는 메시지를 표시할 수 있습니다.
다른 사람들과 마찬가지로 WordPress 대시보드에서 플러그인 → 새로 추가 로 이동하여 이 무료 플러그인을 설치하고 활성화할 수 있습니다.
완료하면 WordPress 대시보드의 Call Now Button Ultimate 영역으로 이동하여 설정합니다.
상단에서 플러그인을 활성화하고 전화번호와 이메일 주소를 입력할 수 있습니다.
그런 다음 페이지 아래에서 작업 시간을 입력하고 버튼 텍스트와 색상을 구성할 수 있습니다.
다른 플러그인과 마찬가지로 지금 통화 버튼은 모바일 방문자에게만 표시됩니다.
영업 시간 동안의 모습은 다음과 같습니다.
영업 시간 외의 모습은 다음과 같습니다.
접근 방식 2: WordPress 클릭하여 HTML 버튼 호출
클릭 투 콜 워드프레스 플러그인의 대안으로, 클릭 투 콜 HTML을 사용하여 버튼을 생성할 수도 있습니다. 이 접근 방식의 이점은 사이트의 아무 곳에나 버튼을 추가할 수 있다는 것입니다.
이러한 버튼을 생성하려면 일반 하이퍼링크를 사용하고 전화번호를 tel: 스키마로 래핑하면 됩니다.
다음과 같이 표시됩니다. 예제 전화번호를 자신의 것으로 바꾸고 필요에 따라 텍스트 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>
그런 다음 WordPress 사이트에 사용자 정의 CSS를 추가하여 버튼으로 만들 수 있습니다. 예를 들어:
.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}
WordPress Customizer 또는 Simple CSS와 같은 무료 플러그인을 통해 사용자 정의 CSS를 안전하게 추가할 수 있습니다.
하지만 기억하세요. 기본적으로 클릭 투 콜 HTML 버튼은 데스크톱 컴퓨터를 포함한 모든 방문자에게 표시됩니다.
이를 변경하려면 CSS 미디어 쿼리를 사용하여 모바일 장치에만 버튼을 표시할 수 있습니다. 예를 들어, 이 스니펫은 너비가 600px 이상인 화면 크기에서 버튼을 숨깁니다.
@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}
지금 WordPress Click To Call 버튼 사용을 시작하십시오!
플러그인을 사용하든 사용자 정의 HTML을 사용하든 WordPress에서 클릭 투 콜 버튼을 쉽게 만들 수 있습니다.
버튼이 있으면 모바일 방문자가 귀하에게 연락하는 것이 그 어느 때보다 쉬워집니다.
기억하세요. 전화 통화는 인적 자원에 막대한 영향을 미칩니다.
받는 전화 수를 줄이려면 WordPress 지식 기반 또는 FAQ 섹션을 만들면 방문자가 일대일 전화 지원 없이도 필요한 도움을 받을 수 있습니다. 그러면 많은 시간과 노력을 절약할 수 있습니다.
Heroic Knowledge Base 플러그인, KnowAll 테마 또는 Heroic FAQ 플러그인을 시작하는 방법을 알아보세요.