워드프레스 클래식 편집기 링크버튼 만드는 방법

워드프레스 클래식 편집기 링크버튼 만드는 방법. 워드프레스를 하면서 더 많은 수익을 올리기 위해 내부 링크를 걸어주는 경우가 많은데요, 그냥 글에 링크를 걸어주게 되면, 눈에 잘 띄지도 않을뿐더러 클릭률이 낮습니다.

클릭률이 높이기 위해서 ‘링크 바로가기 버튼’을 눈에 잘 띄도록 만드는 방법을 배워보도록 하겠습니다.

클래식 편집기 링크버튼 만들기

클래식 편집기를 사용하시는 분들은 버튼을 생성하기 위해서 조금 돌아가셔야 합니다.

블록 편집기를 쓰시면 편하지만, 클래식 편집기가 익숙하신 분들이 블록 편집기로 바꾸시는 것은 쉽지 않기 때문에 한 번 배워보도록 하겠습니다.

사용할 버튼 선택하기

워드프레스에 사용할 버튼을 만들어야 하는데요, 플러그인이 있기도 하지만, 가장 많이 사용하는 사이트에서 마음에 드는 버튼을 가져와 보도록 하겠습니다.

버튼 선택 링크 바로가기

링크를 들어가셔서 원하시는 버튼을 선택해 주시고, 그림 오른쪽 하단에 ‘Get Code’를 클릭해 주시면 됩니다.

그러면 아래 사진과 같이 코드 번호가 나오게 되는데요, 가장 위에 있는<a href="#" class="myButton">twitter</a>‘를 제외하고 복사해 주시면 됩니다.

코드 복사

CSS 코드 넣어주기

워드프레스 블로그로 돌아오셔서 방금 복사한 CSS 코드를 삽입해 주겠습니다. 외모를 보시면, 사용자 정의하기가 있습니다. 클릭하셔서 추가 CSS를 눌러주시면 코드를 넣는 곳이 뜨게 됩니다.

CSS 코드 넣기

위에 사진과 같이 코드를 넣어주시면 됩니다.

CSS 코드 수정하기

블로그를 방문하는 이용자가 보기 쉽고, 블로그를 사용하는 본인도 버튼 생성이 쉽도록 몇 가지 코드 수정해 보도록 하겠습니다.

CSS 코드 수정

1. 손쉽게 버튼을 사용하기 위한 수정

주황색으로 표시된 부분이 ‘my Button’으로 되어있을 건데요, ‘.button’으로 바꿔주도록 하겠습니다.

본인이 버튼을 생성할 때마다 ‘button’을 넣어주어야 하므로 사용하기 쉽게 대문자 없이 소문자로 바꿔주세요. 

2. 링크버튼 크기 수정

빨간색 박스 부분은 링크버튼이 잘 보이도록 크기를 조정해 주도록 하겠습니다. font-sizes는 18로 수정, padding은 10px 30px; 수정해 주도록 하겠습니다.

3. 버튼 가운데로 위치 정렬

버튼의 위치를 조정하기 위해서 text shadow 바로 밑에 ‘text-a;ign: center;’를 추가해 주도록 하겠습니다. 위치를 잘 확인하시고 넣어주시면 됩니다.

이렇게 가운데 위치 정렬까지 끝나셨다면 추가 CSS 코드는 건드실 필요가 없습니다.

링크버튼 사용하기

워드프레스 글쓰기로 돌아오셔서 링크 박스에 들어갈 글을 써주시고 이동할 링크를 삽입해 주세요.

링크를 삽입해 주셨다면 텍스트를 클릭해 주세요.

링크 버튼 만들기

텍스트에 들어가게 되면 아래 사진과 같이 a와 herf 사이에 class=”button”을 넣어주시기만 하면 끝납니다.

코드 추가

class=”button”을 넣는 작업은 링크버튼을 사용할 때마다 넣어주셔야 하기 때문에 까먹지 않도록 메모장에 적어두시면 좋겠습니다.

이렇게 글 미리보기를 하게 되면 아래와 같이 버튼이 만들어져 있는 것을 확인할 수 있습니다.

몽Car블로그

제가 사용하고 있는 버튼을 그대로 사용하고 싶으시다면, 코드를 복사해서 그대로 사용하시면 됩니다.

링크 박스 코드 공유

정리

이렇게 워드프레스 클래식 편집기 링크버튼 만드는 방법에 대해서 알아보았는데요, 수익률을 더 올리기 위해서는 방문자의 체류시간이 중요합니다.

제가 적용하고 있는 소제목 코드는 가독성을 올리는 데 많은 도움을 주고, 실제로 수익이 오를 수 있는 계기가 되었습니다.

소제목 꾸미는 방법 바로가기

소제목 꾸미는 방법이 궁금하신 분들은 위에 링크를 방문해 주시면 도움을 드리겠습니다.

Leave a Comment