워드프레스 버튼 만들기(+블록 에디터 & 사용자 정의 버튼)

티스토리에서는 HTML을 사용하여 버튼을 삽입하지만 워드프레스에서는 기본 편집기인 블록 에디터(구텐베르크)에서 제공하는 버튼 블록을 사용하여 쉽게 버튼을 만들 수 있습니다. 또한, HTML로 버튼을 추가할 수도 있지만, 이 경우에도 CSS 클래스를 사용하여 맞춤형 버튼(사용자 정의 버튼)을 만들 수 있습니다.

엘리멘터 등의 페이지 빌더를 사용하는 경우 페이지 빌더에서 제공하는 버튼 요소를 사용하여 버튼을 추가할 수 있습니다. Elementor의 경우 마우스 오버 시 효과(텍스트 색상, 배경색 등)를 설정할 수 있고 아이콘을 추가할 수 있습니다.

워드프레스 버튼 만들기: 블록 에디터의 버튼 블록 사용하기

워드프레스의 기본 편집기인 블록 에디터에서 제공하는 버튼 블럭을 사용하여 다양한 스타일의 버튼을 만들 수 있습니다.

다음은 몇 가지 예시입니다:

아래 영상에서 워드프레스 구텐베르크 편집기에서 버튼 블록을 추가하는 방법을 살펴볼 수 있습니다.

마우스 오버 효과는 현재 버튼 블록에서 지원되지 않습니다. 마우스 오버 효과를 넣고 싶은 경우 "워드프레스 버튼 호버 효과 적용하기 (구텐베르크 버튼 블록)"를 참고해보세요.

워드프레스가 업데이트되면서 버튼에 마우스를 올리면 버튼 텍스트 색상이 빨간색으로 바뀌는 경우가 많아졌습니다. 이 경우 CSS 클래스를 하나 지정하고 hover color를 지정할 수 있습니다. 예시:

.b-hover a:hover { color: white; }

블록 에디터에서 블록을 추가할 때 블록 삽입 아이콘을 사용해도 되지만 "/버튼"과 같이 "/블럭 이름"을 입력하여 쉽게 블럭을 선택하여 삽입할 수 있습니다. 구텐베르크 키보드 단축키에 대한 다음 글을 참고해보세요:

시간과 능률을 향상시키는 워드프레스 구텐베르크 키보드 단축키

사용자 정의 HTML 버튼 사용하기

온라인 버튼 생성기 사이트에서 버튼을 생성하여 워드프레스에 적용하는 것도 가능합니다.

예를 들어, Button Generator라는 무료 버튼 생성기 사이트에서 마음에 드는 버튼을 생성하여 HTML 코드와 CSS 코드를 워드프레스에 적용할 수 있습니다.

버튼 스타일을 선택하고, 원하는 경우 색상 등을 적절히 변경한 다음, Get Code(코드 가져오기) 버튼을 클릭하면 아래 그림과 같이 버튼 코드가 생성됩니다.

가령, 기본적으로 표시되는 녹색 버튼을 선택하면 다음과 같은 코드가 생성됩니다.

<a href="#" class="myButton">green</a>

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

위의 코드에서 첫 라인은 HTML 파트이고 나머지는 CSS 파트입니다. 여러 가지 스타일을 사용한다면 CSS 클래스(위에서는 "myButton")는 적절히 변경하는 것이 좋습니다. CSS 클래스를 변경한다면 HTML 파트와 CSS 파트 모두에서 일괄 변경하면 됩니다.

CSS 파트는 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가합니다. CSS 코드는 한 번만 추가하면 됩니다.

그리고 HTML 파트는 블록 에디터에서 사용자 정의 HTML 블록에 추가하시면 됩니다. 물론 텍스트와 링크는 적절히 수정하세요. 스타일이 버튼 생성기 사이트에서와 달리 표시되는 경우에는 CSS를 적절히 수정해야 합니다.

이 방법은 버튼을 추가할 때마다 사용자 정의 HTML 블록을 사용해야 하므로 그다지 추천하지 않습니다.

다음과 같은 방법으로 시도해볼 수 있습니다.

사용자 정의 CSS 코드를 추가합니다.
버튼 블록에 CSS 클래스를 지정합니다.

위에서 언급했듯이 사용자 정의 CSS는 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 입력합니다. 버튼 생성기에서 제시하는 코드가 잘 작동하지 않는 경우에는 CSS 코드를 조금 수정해야 할 수도 있습니다. 기본적인 CSS를 익히시면 쉽게 가능할 것입니다.

블록 에디터에서 버튼을 추가하고 추가 CSS 클래스 부분에 CSS 클래스(예: myButton)를 입력합니다.

고전 편집기를 사용하는 경우에는 HTML로 버튼을 추가하고 CSS로 스타일을 잡아주는 작업이 필요할 것 같습니다. 워드프레스 5.0 이상에서 블록 에디터가 기본 편집기로 통합되었습니다. 고전 편집기 플러그인은 2022년 말까지 지원 및 유지관리되고 이후에는 필요에 따라 지원이 연장될 수 있습니다. 지금은 블록 에디터 기능이 좋아졌으므로 가급적 블록 에디터를 이용하시기 바랍니다.

워드프레스 버튼 만들기: 블록 에디터의 버튼 블록 사용하기

사용자 정의 HTML 버튼 사용하기

참고

3 개 댓글

Leave a Comment 응답 취소