워드프레스 버튼 만드는 방법 알아보도록 하겠습니다. 워드프레스를 이용하는 분들이라면 다양한 수익 모델이 있겠지만, 그 중에서도 버튼을 활용한 클릭 유도는 핵심적인 수익 창출 방법 중 하나라고 생각이 드는데요. 특히나 다양한 어필리에이트 프로그램에 참여하고 있는 분들이라면 보기 좋은 버튼은 필수적인 사항이라고 생각이 듭니다. 마우스 오버에 반응하고, 부드러운 사각형의 예쁜 색감의 버튼은 글을 읽는 사람들의 클릭을 유도 할 수 있는 좋은 수단 중 하나이기 때문이죠.
워드프레스에서도 기본적으로 제공되는 버튼이 있지만, 다소 밋밋한 감이 있다 생각되는 분들이라면 나만의 버튼을 만들어서 다양하게 활용해보시길 바랍니다. 워드프레스 초보자인 분들은 아래 순서를 참고하시어 하나씩 적용해보시길 바랍니다. 무조건 되는 방법이니 중간에 포기하지 마시고 처음 한 번만 세팅해두면 나중에 간단하게 적용이 가능합니다.
워드프레스 버튼 만드는 방법
버튼을 만들기 위해서는 직접 코드를 작성할 수도 있지만, 초보자를 기준으로 버튼 생성 사이트의 도움을 받아 빠르고 간편하게 버튼을 만들 수 있습니다. 우선 bestcssbuttongenerator 사이트로 들어갑니다.
그럼 아래와 같은 화면을 볼 수 있습니다.
좌측에 보이는 버튼들 중 본인이 원하는 버튼을 선택할 수 있습니다. 가운데 화면에는 버튼의 미리보기가 나옵니다. 마우스오버를 해보고, 클릭을 해볼 수 있습니다. 그리고 오른쪽 칸에는 버튼의 세부적인 세팅을 변경할 수 있습니다. 하나씩 조정해서 원하는 버튼으로 커스터마이징 할 수 있습니다.
어느 정도 클릭을 부를 법한 버튼이 완성되었다면 버튼 미리보기 아래에 있는 Get Code 버튼을 클릭합니다.
그러면 우측에 CSS 가 나옵니다. 이 부분에서 위 이미지 처럼 첫 한 줄은 제외하고 모두 복사해주세요.
이제 적용하고 싶은 내 워드프레스로 들어옵니다.
워드프레스 좌측 메뉴에 모양-사용자 정의로 들어가세요. 그리고 나면 다음과 같은 화면이 나오는데요.
여기서 좌측 메뉴 가장 마지막에 있는 추가 CSS 로 들어갑니다.
기본에 작성한 추가 CSS가 있는 분들이라면 코드가 있고 아무것도 없는 분들도 있을 수 있습니다. 이제 아까 버튼 생성 사이트에서 복사한 부분을 붙여넣기 합니다. 기존에 작성된 사항이 있는 분들이라면 구분을 위해서 한칸 띄우고 붙여넣기를 하는 게 나중에 확인하기 편합니다. 그리고 위에 있는 공개 버튼을 클릭합니다.
그리고 나면 발행됨으로 변경이 되는데요. 발행됨으로 되고 나면 이제 버튼 사용 준비가 완료가 된 것 입니다. 따로 반응은 없어요. 이제 글을 한 번 작성해보면서 테스트 해보도록 하겠습니다.
일반적으로 글을 쓰듯 텍스트에 링크를 삽입해줍니다. 그리고 블록에 나오는 바로가기 메뉴에서 가장 오른쪽 점 세개를 클릭.
나오는 하위 메뉴에서 HTML로 편집을 클릭합니다.
그러면 이와 같은 HTML 을 볼 수 있는데요. 여기서 a href 사이에 앞뒤로 한칸씩 띄어쓰기를 하고 class=”myButton” 을 넣어줍니다. B는 대문자입니다. 그러면 버튼 적용이 완료됩니다. 이제 발행해서 확인을 해보면
위와 같이 내가 만든 버튼으로 잘 삽입이 된 것을 확인할 수가 있습니다. 참고하시어 워드프레스 운영하는 데에 도움이 되었으면 합니다.
함께 보면 좋은 글