워드프레스 링크버튼 만들기 (CSS 코드추가)
워드프레스를 새로 만드시고 열심히 블로그 포스팅을 하다 보면 아쉬운 점이 하나씩 눈에 뜹니다. 그 중에 하나가 링크버튼 입니다. 워드프레스 링크버튼 말고, CSS에 직접 코드를 추가하여 멋진 링크버튼을 만드는 방법을 설명 드리도록 하겠습니다.
워드프레스 링크버튼 필요성
링크버튼은 블로그에서 중요한 역할을 합니다. 바로 본인 블로그 페이지에서 방문자들이 직접적인 액션을 취할 수 있는 가장 큰 역할이 하는 것이 바로 링크버튼입니다.
예를 들어 본인이 방문자들을 원하는 웹사이트 및 블로그 페이지로 보내고 싶을 때 우리는 이 링크버튼을 활용합니다. 또한, 구글 애드 센스 광고 수익을 위해 우리는 이 링크버튼을 통하여 전면광고를 방문자에게 노출시킬 수도 있습니다.
방문자들에게 우리 링크버튼을 매력적으로 보이게 해서 클릭을 유도하는 것은 중요합니다. 그리고 그것이 본인이 운영하는 블로그의 애드 센스 수익에 상당한 영향을 미친다는 것을 알고 계셔야 합니다.
여기서, 잠깐 워드프레스에서 제공하는 링크버튼을 알아보도록 하겠습니다. 위 사진에서 +버튼을 선택하시고 버튼이라고 입력을 하시면 사진 속의 검은색 링크버튼이 생성됩니다.
이 링크버튼을 선택하시면 링크 아이콘이 보이실 텐데 거기에 방문자를 보내시고자 하는 URL주소를 입력하시면 워드프레스 링크버튼이 완성이 됩니다. 그런데 너무 못 생겨서 아무도 클릭을 하고 싶지 않을 것 같습니다.
워드프레스 링크버튼 만들기
1) Button Gernerator 웹사이트
Button Generator는 버튼을 아주 쉽게 제작할 수 있도록 도와주는 웹사이트입니다. 위의 사진은 Button Generator 웹사이트에서 원하는 버튼을 생성하는 과정에 대한 사진입니다.
워드프레스에서 사용할 수 있는 링크버튼을 생성할 수 있는 Button Generator 웹사이트는 너무나도 많습니다. 검색란에 Button Generator 라고 검색을 하면 엄청나게 나올 겁니다.
그 중 제가 설명 드리는 웹사이트를 사용하시려면 아래 사진을 참고하시기 바랍니다.
저는 파란색을 좋아하기 때문에 위의 버튼을 우선 선택해 보았습니다. 그리고 글자 크기, 버튼 사이즈 그리고 모서리까지 제가 원하는 대로 수정해 보았습니다. 아래 변경한 내용을 한번 기억해 두세요. 나중에 다시 설명 드리도록 하겠습니다.
<링크버튼 관련 수정 사항>
- Font Size : 28px
- Vertical Size : 24px / Horizontal Size 76px
- Border Radius : 24px
그리고 이렇게 모든 수정이 다 완료되면 가운데 보이는 링크버튼을 클릭하면 관련 코드를 보실 수가 있습니다. 복잡해 보이는 코드 걱정하지 마시고, 그냥 전체 다 복사해서 메모장 같은 곳에 붙여 넣으시기를 추천 드립니다.
그리고 코드 첫번째 줄과 그 나머지 부분으로 구성되어 있다고 생각하시면 됩니다. 이렇게 구분 짓는 이유는 이 2가지 코드를 붙여 넣는 곳이 서로 다르기 때문입니다.
이렇게 메모장에 복사하셨다면 Button Generator에서 할 일은 끝이 납니다.
하지만 언제든지 새로운 링크버튼을 만들고 싶으실 때에는 Button Generator 웹사이트를 통하여 생성하실 수 있습니다.
2) 워드프레스 CSS에 복사한 코드 붙여넣기
위 사진의 위치를 모르시는 분들을 위해 간단히 설명 드리도록 하겠습니다.
사용하시는 워드프레스 관리자 화면에 들어오셔서 왼쪽 메인 메뉴 중에 ‘외모’를 찾아 들어가시고, ‘사용자 정의 하기’를 거쳐 ‘추가CSS’ 메뉴를 선택하시면 됩니다.
그리고 메모장에 붙여 넣은 전체 코드 중에 첫번째 줄을 제외한 나머지 부분을 전부 붙여넣기 하시면 됩니다.
기존에 설정해 놓은 다른 코드가 있어도 상관없으며, 그럴 경우 제일 아래에 붙여넣기 하시면 됩니다. 붙여넣기가 끝나셨다면 공개 버튼을 클릭하시면 워드프레스에 적용이 됩니다.
그리고 위에서 링크 버튼 수정 사항 기억해 두시라는 것 생각나시나요? 위의 사진 속 붙여 넣은 코드 속에 글자크기, 버튼 사이즈 그리고 모서리 수치가 제가 수정한 대로 나와 있습니다.
혹시나 링크버튼을 만들고 미리보기를 하였는데, 생각보다 글자크기, 버튼 사이즈가 별로다 라고 느끼신다면 추가 CSS에서 수정하셔서 사용하시면 됩니다.
3) 워드프레스 링크버튼 블로그에 넣는 법
이제는 어떻게 워드프레스에서 우리가 이제까지 만든 링크버튼을 사용할 수 있는지에 대하여 이야기해 보도록 하겠습니다. 우선 새 글로 들어가셔서 +버튼을 선택하시고 사용자 정의 HTML을 클릭하십시오.
사용자 정의 HTML이 보이시지 않으시면 검색 란에 HTML이라고 입력하시면 보이실 겁니다. 이 사용자 정의 HTML을 클릭을 하게 되면 마우스 커서가 있는 부분에 직사각형 모양이 하나 보이실 겁니다.
그 직사각형에다가 메모장에 붙이신 첫번째 줄 코드만 붙여 넣으시면 됩니다. 붙여 넣으신 코드 중에 #은 방문자들을 이동시킬 URL 주소를 입력하시면 됩니다. 그리고 Blue라고 되어 있는 부분에는 링크버튼 위에 나오는 글자이니, 원하시는 대로 작성하시면 됩니다.
저처럼 Blue 링크버튼 말고 다른 형태나 색을 고르신 분들은 아마도 다른 색 이름이 나올 것 같은데, 어쨌든 거기에 원하시는 글자를 넣으시면 됩니다. 여기까지 마치셨다면 끝난 겁니다.
우리가 글을 쓰는 공간에서는 아무 변화가 없지만, 미리보기를 하면 이렇게 멋진 링크버튼이 보이실 겁니다.
오늘은 워드프레스에서 CSS에 코드를 입력하여 멋진 링크버튼을 만들어 보았습니다. 워드프레스에서 글을 쓰고 링크버튼이 필요할 때마다 못생긴 링크버튼을 사용하는 것이 마음에 걸렸었습니다.
이번 기회에 저도 새 링크버튼을 만들고 활용할 수 있어 너무 좋은 것 같습니다. 저처럼 새 링크버튼 생성이 필요하셨던 분들에게 도움이 되었음 합니다. 글 읽어 주셔서 감사합니다.
