워드프레스 링크 버튼 만드는 방법 2가지

워드프레스에서 특정 웹페이지로 이동하는 링크를 삽입할 때 깔끔하고 보기 좋게 사용할 수 있는 링크 버튼을 별도의 플러그인 없이 만드는 방법에 관하여 이야기하겠습니다.

워드프레스 링크 버튼 – 기본 블록 편집기를 이용하여 만들기

워드프레스에서 기본으로 제공되는 블록 편집기의 기능을 이용하여 만들 수 있습니다.

1. 블록 추가를 누르고 버튼을 선택한 후 내용을 입력합니다.

2. 우측 블록 메뉴를 이용하여 버튼 색상과 글자 크기, 표 테두리의 곡률을 조정합니다.

3. 링크버튼을 클릭하여 해당 주소를 입력합니다.

4. 미리보기를 이용하여 확인합니다.

워드프레스 링크 버튼 – CSS 코드를 이용하여 만들기

외부 버튼 생성기 사이트를 이용하여 원하는 디자인의 코드를 얻고 이를 적용하여 만들 수 있습니다. 단순한 형태와 한정적인 기능의 블록 편집기와는 달리, 다양한 스타일의 버튼 모양을 선택할 수 있고 색상과 크기, 효과 등을 원하는 대로 편집하여 사용할 수 있는 장점이 있습니다.

1. 사이트로 이동합니다.

버튼 제너레이터 사이트 이동

2. 원하는 스타일대로 버튼을 디자인합니다.

이미지 출처 : www.bestcssbuttongenerator.com 캡쳐

① 버튼 창 : 여러 종류의 버튼이 나열되어 있어 선택할 수 있습니다.
② 프리뷰 창 : 선택한 버튼의 형태와 조정하는 상태를 볼 수 있는 프리뷰 창입니다. 창 하단의 좌측에는 버튼의 디테일한 색상을 조정하는 메뉴가 있고 투명, 그라데이션 미적용 체크 버튼과 리셋버튼이 있습니다.
③ 조정 창
▪ 텍스트 : 텍스트를 입력 창과 폰트 종류와 굵기, 기울임, 사이즈 조정, 코드 이름을 변경할 수 있습니다
▪ 사이즈 : 버튼의 가로세로 사이즈를 조정할 수 있습니다.
▪ 테두리 : 모서리의 둥근 정도와 테두리 사이즈를 조정할 수 있습니다.
▪ 박스 그림자 : 박스 그림자의 위치, 흐린 반경, 퍼지는 반경을 조정하고 적용 여부를선택할 수 있습니다.
▪ 텍스트 그림자 : 글자의 그림자에 관한 위치와 흐린 반경을 조정하고 적용 여부를 선택할 수 있습니다.

3. 프리뷰 창 하단 우측의 코드 받기를 클릭합니다.

4. 우측 창에 표시된 CSS 코드를 복사합니다.
▪ 맨 위 첫 줄부터가 아닌 .myButton 이라고 표시된 부분부터 끝까지 복사합니다.

5. 워드프레스에서 외모 → 사용자 정의하기 → 추가 CSS로 이동합니다.

복사한 코드를 붙이고 공개를 누릅니다.

▪ 추가 팁
코드의 ‘myButton’ 부분을 버튼의 종류 별로 각각 다르게 이름을 바꿔서
여러 종류에 관한 코드를 한꺼번에 삽입해 놓고 선택하여 사용할 수 있습니다.
그리고 한글로 설명을 삽입해 놓으면 추후 구별하기 편리합니다.
– 예 : /*파란 라운드 버튼*/
참고로 한글로 적어 넣은 부분은 코딩에 영향을 주지 않으므로 안심하고
사용해도 됩니다.

6. 블록을 생성해서 내용을 삽입한 후 링크 주소를 넣고, 오른쪽 블록 메뉴로 가서
추가 CSS 클래스에 코드 이름인‘myButton’을 넣습니다.

7. 버튼을 화면 중앙에 표시하기 위해 블록 선택 후 메뉴 오른쪽의 점 3개를 누르고 ‘html로 편집’을 선택합니다.

8. 표시되는 코드 편집기 맨 앞에 <center> ~~~ </center> 코드를 삽입합니다.

‘블럭복구시도’ 라고 문구가 나오는데 이때 오른쪽 점3개를 클릭 후 html로 전환을 선택합니다. 만약 중앙 배치를 원하지 않는다면 위의 과정은 건너뜁니다.
* 기본 배치는 왼쪽입니다.

7. 미리보기를 통해 원하는 대로 적용이 되었는지 확인합니다.

마무리

지금까지 워드프레스 링크 버튼 만들기에 관한 2가지 방법을 이야기하였는데요, 각각 필요한 상황에 따라 원하는 방법을 적절히 활용하면 편리성과 강조의 느낌을 더할 수 있는 좋은 수단이 될 것입니다.