종종 워드프레스 정보꾸러미 블로그에 사용되고 있는 버튼을 만드는 방법에 대한 질문을 하시는 분들이 계십니다. 워드프레스에서 기본 에디터인 블록 에디터를 사용하는 경우 쉽게 스타일리쉬한 버튼을 만들 수 있습니다.
위의 두 글에 제시된 방법으로 충분히 독창적이고 예쁜 버튼을 만들 수 있을 것입니다. 이 글에서는 워드프레스 정보꾸러미 블로그에 사용되고 있는 버튼을 만드는 방법에 대하여 살펴보겠습니다.
워드프레스 정보꾸러미 블로그에 사용된 버튼을 만드는 방법
워드프레스 정보꾸러미 블로그에는 다음과 비슷한 버튼이 사용되고 있습니다.
몇 가지 버튼이 더 있지만 위의 두 가지 스타일의 버튼이 자주 사용되고 있습니다.
위와 같이 만드는 방법을 간략히 살펴보겠습니다.
먼저 블록 에디터에서 버튼을 만들도록 합니다. 키보드 단축키로 [/버튼]을 입력하면 빠르게 버튼을 추가할 수 있습니다.
우선 패턴으로 저장할 기본적인 버튼을 만들려고 합니다.
버튼의 정렬을 가운데로 정렬하고 버튼 텍스트를 입력합니다. 💡 아이콘을 추가하고 싶은 경우 Win 키 + 점(.)을 클릭하고 💡를 선택합니다. (아니면 💡를 복사하여 붙여넣기 해도 될 것 같습니다.)
버튼 텍스트를 입력하여 버튼을 만듭니다.
버튼이 완성되었다면 버튼을 선택하고 버튼 블록 설정에서 고급 » 추가 CSS 클래스에 적당한 클래스를 입력합니다.
여기에서는 myCustomBtn 을 입력하겠습니다.
다음으로 모양 » 사용자 정의 » 추가 CSS에 다음과 같은 코드를 추가합니다. (이 코드는 한 번만 추가하면 됩니다.)
.myCustomBtn a:hover,.myCustomBtn a:focus {
background: linear-gradient(to bottom,#2193b0,#6dd5ed);
box-shadow: 0 6px 12px 0 rgba(0,0,0,.3);
transform: translateY(-2px)
}
.myCustomBtn a {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
background: linear-gradient(to bottom,#6dd5ed,#2193b0);
border-radius: 17px;
border: none;
color: #fff;
font-family: 'Helvetica Neue',sans-serif;
font-size: 1.4rem!important;
line-height: 2.2rem!important;
font-weight: 700;
padding: 12px 35px!important;
text-decoration: none;
transition: all 0.3s ease
}이 CSS 코드를 추가하면 버튼이 워드프레스 정보꾸러미 사이트에서 사용된 파란색 버튼의 스타일이 됩니다.
차일드 테마를 만들어서 운영하는 경우 차일드 테마 내의 스타일시트 파일(style.css)에 추가하면 더 좋습니다. 차일드 테마를 설치하지 않은 경우에은 사용자 정의 섹션에 추가하면 됩니다.
이제 버튼을 만든 페이지를 임시 저장하고 미리 보기하면 버튼이 다음과 비슷하게 표시됩니다.
버튼 스타일이 마음에 들지 않으면 상기에 제시된 코드를 챗GPT에 넣어서 원하는 스타일로 변경해달라고 요청하면 됩니다.
이제 이 버튼을 패턴으로 만들어서 재활용할 수 있습니다.
패턴 생성 방법은 다음 글을 참고해보세요.
패턴을 생성할 때 동기화됨 체크는 해제하도록 합니다.
동일한 버튼(텍스트 및 링크 포함)을 추가한다면 동기화됨을 체크하면 편리합니다. 보통은 페이지/게시글마다 다른 버튼을 추가하므로 동기화를 해제하는 것이 일반적입니다.
버튼이 패턴으로 추가되었다면, 이후부터는 [/버튼이름]을 입력하여 빠르게 버튼을 불러올 수 있습니다.
동일한 방법으로 다른 버튼을 추가하여 패턴으로 만들어 활용할 수 있습니다. 버튼 스타일은 챗GPT를 활용하여 원하는 스타일의 코드를 생성할 수 있을 것입니다.
티스토리에서 버튼을 쉽게 만들기
티스토리에서는 워드프레스와 달리 버튼을 패턴으로 만들어 활용하기가 쉽지 않습니다. 보통 HTML 코드를 수정하는 방식으로 가능합니다. 아래 글에 소개된 방법을 이용하면 HTML 코드 개입 없이 쉽게 버튼을 만들 수 있습니다.
저는 잘 작동하는 것을 확인했지만, 스킨에 따라 잘 작동하지 않을 수 있습니다. 오디세이 스킨 등 기본 스킨을 사용하는 경우 문제 없이 작동할 것이라 생각됩니다.