나만의 워드프레스 버튼 만들기
구글 애드센스를 활용하여 블로그를 수익화하려면 방문자와의 상호작용을 극대화하는 것이 중요합니다. 특히, 방문자의 버튼 클릭은 수익에 직접적인 영향을 미치는 가장 효과적인 상호작용 중 하나입니다. 이번 글에서는 블로그에 나만의 워드프레스 버튼 만들기 방법을 알아보겠습니다.
워드프레스 버튼 만들기의 필요성
워드프레스에서 버튼은 아래과 같은 누를 수 있는 오브젝트를 말합니다. 아래 버튼에 마우스를 올려보시거나 모바일에서는 손가락을 올려보면 색깔이 변하도록 설정되어 있죠. 이러한 버튼을 글에 적절하게 섞어서 쓰면 무엇이 좋을까요?
글 안에 들어있는 버튼은 단순한 텍스트 링크와 달리 다음과 같은 장점을 제공합니다.
- 시각적 강조: 눈에 띄는 디자인으로 방문자의 클릭을 유도할 수 있습니다.
- 사용자 경험 개선: 버튼을 활용하여 블로그 내부 또는 외부로의 원활한 이동을 돕습니다.
- SEO 및 수익 향상: 방문자의 내부 순환(버튼을 누르면 내 블로그의 다른 글로 보냄)을 유도해 블로그 체류 시간을 늘리고, 구글 애드센스 수익 잠재력을 높입니다.
워드프레스에서 버튼 추가 방법
워드프레스에서 버튼을 추가하려면 테마와 플러그인을 활용할 수 있습니다. 여기서는 카덴스 테마(Kadence Theme)의 Button(Adv) 블록(아래 그림 참고)을 예로 들어 설명하겠습니다.
버튼 블록 추가
먼저 버튼 블록을 추가하는 방법은 다음과 같습니다.
- 편집기 열기
워드프레스 블로그 글을 편집하거나 새 글을 작성합니다. - Button(Adv) 블록 선택
블록 추가 버튼 (+)을 누르거나, 슬래쉬(/)를 눌러서Button(Adv)
블록을 추가합니다. 버튼 블록은 아래 그림을 참고해주세요!
위 과정을 잘 마치면 다음과 같은 버튼을 볼 수 있습니다.
👉 이 버튼 블록에 블로그의 다른 페이지, 포스트, 외부 사이트로 연결하는 링크를 설정해 봅시다.
버튼 설정 방법
① 버튼 텍스트 입력
버튼을 추가한 후 버튼 위에 원하는 텍스트를 입력합니다. 예: “더 알아보기”
② 링크 연결
링크를 연결하기 위해서는 버튼을 클릭하면 오른쪽에 뜨는 설정 창을 통해야 합니다. 오른쪽 General 설정 창에 보이는 (아래 그림 참조) Button Link 칸에 연결 시키고 싶은 링크 주소를 입력합니다.
Button Link
칸에 이동시키고자 하는 URL을 입력합니다.- 입력 후 화살표 아이콘을 눌러 링크를 저장합니다.
예: https://wplaybook.com

여기서 주의 할 점은 URL 입력 후, 반드시 화살표 아이콘()을 눌러야 연결이 완성된다는 것입니다. 잘 설정했다면, 아래 버튼처럼 버튼을 눌렀을 경우 원하는 사이트로 이동하는 것을 알 수 있습니다.
③ 버튼 상태 스타일 설정
버튼의 색깔과 모양 같은 스타일을 설정하고 싶은 경우, Style 창을 통해서 설정 가능합니다. 아래 그림을 보시면 정말 여러가지 설정이 가능한 것을 보실 수 있습니다. 대표적인 설정 값은 다음과 같은 것들이 있습니다.

- 버튼 글씨 크기 및 색상
- 버튼 배경 색상
- 버튼 테두리 색상
- 버튼 테두리 굵기
- 버튼 모서리 처리
- 버튼 안 아이콘 삽입
워드프레스에 버튼을 삽입 할 때, 한가지 중요한 개념이 있는데 바로 Normal / Hover 개념입니다.

위와 같이 설정창 상단에 있는 Normal과 Hover로 버튼의 기본 상태와 마우스를 올렸을때 나오는 색상들이 차이가 있게 설정할 수 있습니다.
- Normal: 기본 상태의 버튼 색상 및 스타일을 설정합니다.
- Hover: 사용자가 마우스를 버튼 위에 올렸을 때 나타나는 색상과 효과를 설정합니다.
④ 아이콘 추가 (선택 사항)
버튼에 시각적인 정보를 담은 아이콘이 있다면 더욱 독자의 시선을 사로잡을 수 있습니다.
- 버튼에 적절한 아이콘을 추가하여 시각적 매력을 더할 수 있습니다.
- 예를 들어, 외부 링크는 화살표 아이콘, 다운로드 링크는 파일 아이콘을 사용할 수 있습니다.
마지막으로 아이콘 설정에 대한 자세한 설명은 아래 포스트를 참고 하시면 됩니다.
워드프레스 버튼 만들기 꿀팁
워드프레스 버튼 만들기를 할 때, 다음과 같은 사항들을 생각하면서 설정하시면 좀 더 좋은 결과를 얻으실 수 있습니다.
버튼 디자인 최적화
- 텍스트 가독성: 버튼 텍스트는 간결하고 명확해야 합니다. 예: “무료 다운로드”
- 컬러 조합: 버튼 색상은 배경과 대비를 이루어 눈에 잘 띄어야 합니다.
- 예: 흰색 배경에 파란색 버튼, 또는 어두운 배경에 노란색 버튼.
내부 링크 활용
버튼의 장점은 ‘눌러보고 싶게 생겼다’ 입니다. 한번 불러들인 블로그 방문자를 링크를 통해 블로그 내부에서 순환시키는 것은 블로그 점수를 높이는 좋은 방법 중 하나입니다.
- 버튼을 활용하여 블로그 내부의 관련 페이지로 방문자를 안내하세요.
- 예: “이 글이 유익했다면 SEO 최적화 관련 글도 확인해보세요!”
메인 페이지와 CTA 버튼
말에는 힘이 있다고 하죠, 버튼에 글을 쓸 때 독자가 하기 원하는 행동을 직접 작성하시는게 좋습니다.
- 메인 페이지에 Call-to-Action(CTA) 버튼을 추가하면 클릭 전환율을 높일 수 있습니다.
- 예: “지금 가입하기” 버튼을 상단 배너에 추가
워드프레스 버튼 만들기 활용 사례
각 페이지 별로 버튼을 잘 활용해서 꾸밀 수 있는 여러 경우들에 대한 예를 한번 들어보면 다음과 같습니다.
활용 위치 | 설명 |
---|---|
포스팅 내부 | 관련된 글 또는 외부 사이트를 소개하는 링크 버튼. |
메인 페이지 | 블로그 구독, 뉴스레터 가입, 또는 주요 서비스로 안내하는 버튼. |
사이드바 | 블로그 카테고리 또는 인기 포스트로 연결하는 링크 버튼. |
푸터(Footer) | 연락처, 이용약관, 개인 정보 보호 정책 페이지로 이동하는 버튼. |
어떤가요? 잘 응용하신다면 버튼은 사용 할 곳이 정말 무궁무진하죠?!
결론 및 추가 정보
워드프레스에서 나만의 버튼을 만들어 사용하는 방법을 익히셨다면, 이제 이를 활용해 블로그 방문자와의 상호작용을 극대화해 보세요. 더 자세한 버튼 아이콘 설정법은 여기에서 확인하세요.
블로그 운영에 도움이 되는 또 다른 가이드를 보시려면 아래 글을 참고해 주세요:

온라인 수익화를 연구하는 워플과 데이터 분석을 연구하는 슬기로운통계생활의 창업자이며, 2021년 부터 온라인 사업을 운영해오고 있습니다. 500개가 넘는 영상을 제작했으며, 여러 회사들과 협업을 통해 강의를 판매하고 있습니다. 워플을 통해 워드프레스 웹사이트를 사용하여, 수익으로 이뤄지는 퍼널 만들기, SEO 및 커뮤니티 수익화를 연구하고 있습니다. 오래 지속가능한, 건전한 온라인 수익화를 추구합니다.