워드프레스 블로그를 운영하다보면 내가 작성하는 글에 다른 사이트 또는 또 다른 글로 연결하는 버튼을 사용하는 경우가 있습니다. 티스토리 블로그에서는 HTML을 이용하여 버튼을 삽입하지만 워드프레스에서는 블록 에디터에서 기본적으로 제공하는 버튼 블록을 이용하여 쉽게 만들 수 있습니다. 기본적으로 제공하는 기능 및 디자인이 부족하다고 생각이 들면 CSS 클래스를 이용하여 내가 원하는 형태로 버튼을 변경할 수 있습니다. 이번글에서는 워드프레스에서 링크가 연결된 버튼을 만드는 방법에 대해 정리하였습니다.
1. 블록 에디터 내장 버튼 추가하는 방법
워드프레스에서 기본적으로 제공하는 에디터인 구텐베르그 블록 에디터에는 [버튼] 이라는 블록이 있습니다. 이 [버튼] 블록을 이용하여 쉽게 버튼을 만들어 넣을 수 있습니다. 버튼 블록을 넣기 위해서는 블록을 넣는 방법과 동일하게 워드프레스 왼쪽 상단에 있는 [➕] 버튼을 클릭 합니다. 넣을 수 있는 다양한 블록이 있는데, [디자인] 항목에서 [버튼]을 클릭 합니다. 검색창에서 [버튼]을 검색하여 입력해도 됩니다.
버튼에 들어갈 텍스트를 입력하고 오른쪽에 있는 블록 속성에서 버튼 관련 속성을 변경하면 됩니다. 버튼 블록 속성은 크게 [설정] 항목과 [스타일] 항목 2개가 있습니다. [설정] 탭에서 버튼 폭과 연결될 링크 관계를 설정할 수 있습니다. 버튼 폭을 설정하지 않을 경우 글자 크기에 맞춰 자동으로 크기가 변경이 됩니다. 첫 번째 예시에서는 버튼 폭을 100%로 설정하였습니다.
[스타일] 항목에서 버튼에 입력된 글자 색, 버튼 배경 색, 글자 크기, 버튼의 코너 곡률을 설정할 수 있습니다. 버튼 배경은 단색 뿐만 아니라 그라디언트도 가능합니다. [버튼]을 클릭했을 이동할 링크의 경우 [미니 도구]에서 [링크] 아이콘을 클릭하여 주소를 입력하시면 됩니다.
아래가 실제 워드프레스 편집기에서 기본적으로 제공하는 기능을 이용하여 만든 버튼들입니다. 버튼에 마우스를 올렸을 때 색상이 변하는 것과 같은 효과는 없지만 링크를 넣을 때 활용하기에 부족함이 없습니다. 버튼 정렬의 경우 [미니 도구]에서 설정을 하시면 됩니다.
2. CSS 클래스 설정을 통한 커스텀 버튼 추가
워드프레스 블록 편집기에서 기본적으로 제공하는 버튼 스타일이 마음에 들지 않을 경우 온라인에서 버튼 생성기 사이트를 이용하여 버튼을 만들 수 있습니다. 구글에서 ‘button generator’라고 검색하면 다양한 버튼 생성 사이트가 나오는데 저는 제일 처음에 나오는 ‘Best CSS Button Generator‘ 사이트를 이용하였습니다. 검색하는 것이 귀찮으면 아래 링크 이용하세요.
CSS 버튼 생성기 사이트에서 원하는 형태의 버튼을 설정합니다. 기본적으로 제공하고 있는 버튼 템플릿에서 원하는 유형을 선택하고, 오른쪽 상세 조절 항목에서 형태를 변경하면 됩니다. 원하는 형태가 결정이 되면 ‘Get Code’를 클릭합니다.
‘Get Code’를 클릭하면 만든 버튼의 CSS 클래스와 버튼을 추가할 때 사용할 HTML 코드가 나타납니다. 아래 코드의 첫번째 줄은 버튼을 삽입할 때 사용할 HTML 코드이며, 그 아래 코드는 CSS 코드입니다.
<a href="#" class="myButton1">twitter</a>
.myButton1 {
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
background-color:#33bdef;
border-radius:8px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:16px 76px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;
}
.myButton1:hover {
background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
background-color:#019ad2;
}
.myButton1:active {
position:relative;
top:1px;
}
CSS 코드는 워드프레스 관리 페이지 메뉴에서 [외모] – [사용자 정의 하기] – [추가 CSS]를 선택한 후 코드의 첫번째 줄을 제외한 나머지 내용을 입력합니다. 코드를 입력한 후 [공개] 버튼을 클릭하여 저장하면 CSS 클래스 설정은 끝이 났습니다.
이제 버튼을 넣어 보겠습니다. 버튼을 넣은 방법은 HTML 코드를 이용하여 넣을 수 있으면, [버튼] 블록을 이용하여 추가할 수도 있습니다. HTML 를 이용하여 넣을 경우 ➕ 버튼을 클릭하여 [사용자 정의 HTML] 블록을 선택합니다. 복사한 HTML 코드에서 이동할 웹사이트 주소와 버튼에 보여지는 내용을 입력합니다.
실제 만들어진 버튼은 버튼 생성사이트에서 만들어진 것과 동일하게 보여집니다. 워드프레스에서 기본적으로 제공하는 버튼의 경우 마우스를 버튼에 올렸을 때 색상과 글자가 변하지 않는에 이번에 설정한 버튼의 경우 색생이 변경됨을 볼 수 있습니다.
외부에서 만든 CSS 버튼의 경우도 HTML 코드를 직접 삽입하는 것보다, 워드프레스에서 기본적으로 제공하는 [버튼] 블록을 이용할 수 있습니다. 앞서 설명한 것과 동일한 방법으로 버튼을 생성한 후 CSS 클랙스만 변경하면 됩니다. [버튼] 블록 속성 창에서 [추가 CSS 클래스] 항목에 설정한 버튼 클래스 이름을 입력하시면 됩니다.
여기까지 버튼을 만들어 넣은 방법에 대해서 알아 보았습니다. CSS 코드를 이용하여 원하는 형태의 버튼을 만들어 사용하는 것도 좋겠지만, 만약 블로그 글에 버튼을 사용하는 경우라면 개인적으로는 블록 편집기에서 기본적으로 제공하는 기능도 충분하다고 생각합니다.
[워드프레스 설정 관련 글 보기]