워드프레스 버튼 만들기, 아이콘 추가 CSS 클래스

플러그인을 사용하지 않고 단순히 워드프레스의 기본 버튼 메뉴와 CSS만을 사용하여 수십, 수백 가지의 다양한 버튼을 만드는 방법을 소개한다.

수십, 수백 가지의 버튼을 만들 수 있지만 실제 글을 작성하다 보면 5가지 미만의 특정 버튼만 사용하게 된다. 따라서 자신이 사용할 버튼을 미리 완벽하게 만들어 놓으면 편하게 글을 작성할 수 있다. 편집화면에선 버튼 모양이 보이지 않기 때문에 글 작성 시 미리보기 화면으로 버튼 모양을 확인해야 한다.

플러그인을 사용하지 않는 이유는 단순히 여러 가지 플러그인을 설치하기 귀찮고 싫기 때문이다. 플러그인이 많아지면 사이트 속도에 영향을 미친다는데, 아직 그건 잘 모르겠다.

아무래도 CSS를 사용하기에 CSS를 공부하면 더욱 쉽게 이해할 수 있다.

01

of 04

버튼 결과물 보기

우선 아래 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를 추가하여 작성하면 된다.