목차
워드프레스 버튼 만들기, 아이콘 추가 CSS 클래스
플러그인을 사용하지 않고 단순히 워드프레스의 기본 버튼 메뉴와 CSS만을 사용하여 수십, 수백 가지의 다양한 버튼을 만드는 방법을 소개한다.
수십, 수백 가지의 버튼을 만들 수 있지만 실제 글을 작성하다 보면 5가지 미만의 특정 버튼만 사용하게 된다. 따라서 자신이 사용할 버튼을 미리 완벽하게 만들어 놓으면 편하게 글을 작성할 수 있다. 편집화면에선 버튼 모양이 보이지 않기 때문에 글 작성 시 미리보기 화면으로 버튼 모양을 확인해야 한다.
플러그인을 사용하지 않는 이유는 단순히 여러 가지 플러그인을 설치하기 귀찮고 싫기 때문이다. 플러그인이 많아지면 사이트 속도에 영향을 미친다는데, 아직 그건 잘 모르겠다.
아무래도 CSS를 사용하기에 CSS를 공부하면 더욱 쉽게 이해할 수 있다.
01
of 04
버튼 결과물 보기
우선 아래 gif 이미지를 보면 실제 버튼 결과물을 확인 할 수 있다.
![버튼 워드프레스 버튼 만들기](https://www.wpcom.co.kr/wp-content/uploads/2023/03/버튼.gif)
기본적으로 약간의 라운드가 있는 버튼으로 현재는 녹색과 빨강, 다운로드 아이콘과 링크 아이콘만 적용했다. 마우스가 버튼 위로 올라왔을 때 버튼 모양이 살짝 변경되게 해뒀다.
추가 CSS 클래스를 이용하여 다양한 색상과 아이콘으로 변경할 수 있게 만들었고, 기본 CSS를 수정하여 버튼 모양이나 크기, 글자 크기 등을 변경할 수 있게 만들었다.
02
of 04
워드프레스 버튼 CSS 코드
아래 코드를 본인의 취향에 맞게 살짝 수정 한 후 CSS코드에 복사하여 붙여 넣기 하면 된다. 알아보기 쉽게 주석을 달아 놨기에 그 부분을 본인의 취향에 맞게 수정하면 된다.
※ 본인이 사용하는 테마에 따라서 버튼 모양이 약간 다르게 표시될 수 있다. 이럴 땐 본인 테마에 맞게 적절히 CSS 코드를 수정해야 한다.
/* 버튼에 들어갈 글자 색, 사이즈 설정 */
.wp-block-button__link {
display: inline;
background-color: transparent;
padding: 0;
color: white !important; /* 버튼 글자 색 */
font-size: 1rem !important; /* 버튼 글자 사이즈 */
}
/* 버튼 모양 및 기본색 설정 */
.wp-block-buttons>.wp-block-button {
cursor: pointer;
padding: 15px 20px 15px 20px; /* 버튼 안쪽 여백 */
display: inline-block;
margin-bottom: 10px; /* 버튼 바깥쪽 아래 여백 */
font-weight: normal;
outline: none;
position: relative;
text-decoration: none !important;
background-color: #1b8415; /* 버튼 기본색 : 본인이 가장 많이 사용하는 버튼색으로 변경 (현재 녹색) */
min-width: 80px;
line-height: 1.5;
overflow: hidden;
text-align: center;
border-radius: 4px; /* 버튼 라운드 설정 */
opacity: 0.85; /* 버튼 투명도 설정 */
transition: all .5s;
color: white;
}
/* 버튼에 들어갈 아이콘 설정 */
.wp-block-buttons>.wp-block-button:before {
font: normal normal normal 22px/1 FontAwesome;
margin-right: 10px;
color: white; /* 아이콘 색상 설정 */
content: "\F019"; /* 본인이 가장 많이 사용하는 아이콘으로 작성 (기본은 다운로드 아이콘) */
}
/* 버튼에 마우스가 올라 갔을때 변경 설정 */
.wp-block-buttons>.wp-block-button:hover {
outline-width: 0;
opacity: 1;
box-shadow: 0px 5px 10px -5px #000000; /* 마우스가 올라가면 그림자가 생김 */
}
/* 여기서 부터는 추가 CSS 클래스. (본인이 원하는 아이콘, 버튼색을 이런식으로 추가해서 만들면 된다.) */
/* 버튼 아이콘을 링크 아이콘으로 변경 */
.button-link:before {
content: "\f0c1" !important;
}
/* 버튼 아이콘 삭제 (아이콘이 없는 버튼) */
.no-icon:before {
margin-right: 0px !important;
content: "" !important;
}
/* 버튼 색상 빨간색으로 변경 */
.button-red {
background-color: #CF2E2E !important;
}
/* 더 많은 색상이나 아이콘을 추가 하고 싶다면 위 코드를 그대로 복사해서 색상코드와 아이콘 코드만 바꿔서 작성 */
Code language: CSS (css)
※ 위 코드를 그대로 복사 붙여넣기 한 후 버튼을 삽입하면 위 GIF 이미지의 맨 첫 번째 버튼으로 표시된다.
03
of 04
워드프레스 버튼 만들기
① 워드프레스 기본 메뉴인 버튼을 삽입하고, 아무것도 설정하지 않고 기본 그대로 놔둔다.
② 버튼에 필요한 글을 작성하거나 링크를 삽입한다.
③ 글 중간을 클릭하고 워드프레스 오른쪽 메뉴 하단부 고급 – 추가 CSS 클래스에 아래 글자를 입력한다.
① button-link : 기본 아이콘인 다운로드 아이콘 대신 링크 아이콘으로 변경한다. ② no-icon : 기본 아이콘인 다운로드 아이콘을 삭제한다. ③ button-red : 버튼 색상인 녹색을 빨강색으로 변경한다. ④ 위 ①, ②와 ③을 중복하여 사용할 수 있다.
※ 추가 CSS 클래스는 현재 링크 아이콘으로 변경, 빨간색으로 변경, 아이콘 삭제 3개를 만들어 뒀다. 다양한 색상이나 아이콘이 필요하다면 CSS를 추가하여 작성하면 된다.
04
of 04
워드프레스 버튼 만들기 예시
위 gif 이미지에 표시된 버튼 6개를 예시로 추가 CSS 클래스 작성 방법을 알아본다.
① 첫 번째 버튼 : 기본 버튼으로 추가 CSS 클래스에 아무것도 작성하지 않는다. (가장 많이 사용하는 버튼을 이 모양으로 만들어 두면 된다.)
② 두 번째 버튼 : 기본 녹색을 빨간색으로 변경한다.
![추가 CSS 클래스 2 e1678566045279 추가 CSS 클래스 2](https://www.wpcom.co.kr/wp-content/uploads/2023/03/추가-CSS-클래스-2-e1678566045279.png)
③ 세 번째 버튼 : 기본 다운로드 아이콘을 링크 아이콘으로 변경한다.
![추가 CSS 클래스 3 추가 CSS 클래스 3](https://www.wpcom.co.kr/wp-content/uploads/2023/03/추가-CSS-클래스-3.png)
④ 네 번째 버튼 : 기본 다운로드 아이콘을 링크 아이콘으로 변경하고, 기본 녹색을 빨간색으로 변경한다.
![추가 CSS 클래스 4 추가 CSS 클래스 4](https://www.wpcom.co.kr/wp-content/uploads/2023/03/추가-CSS-클래스-4.png)
⑤ 다섯번째 버튼 : 기본 다운로드 아이콘을 삭제한다.
![추가 CSS 클래스 5 추가 CSS 클래스 5](https://www.wpcom.co.kr/wp-content/uploads/2023/03/추가-CSS-클래스-5.png)
⑥ 여섯번째 버튼 : 기본 다운로드 아이콘을 삭제하고, 기본 녹색을 빨간색으로 변경한다.
![추가 CSS 클래스 6 e1678566027372 추가 CSS 클래스 6](https://www.wpcom.co.kr/wp-content/uploads/2023/03/추가-CSS-클래스-6-e1678566027372.png)
※ 이런식으로 원하는 아이콘과 색상을 여러가지 추가해서 사용하면 된다.
※ 기본적으로 아이콘을 사용하려면 Font Awesome 아이콘 사용 방법을 숙지해야 한다. 가장 쉬운 방법은 Font Awesome 플러그인을 사용하면 된다. (혹은 본인이 사용하는 테마에서 지원 여부를 확인한다.)