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

워드프레스 버튼 만들기에 대해서 설명한다. 플러그인을 사용하지 않고 추가 CSS 클래스를 이용하여 간단한 코드로 버튼을 만드는 방법이다.

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

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

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

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

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

02
of 05
버튼 결과물 보기

우선 아래 gif 이미지를 보면 실제 버튼 결과물을 확인 할 수 있다.

기본적으로 약간의 라운드가 있는 버튼으로 현재는 녹색과 빨강, 다운로드 아이콘과 링크 아이콘만 적용했다. 마우스가 버튼 위로 올라왔을 때 버튼 모양이 살짝 변경되게 해뒀다.

추가 CSS 클래스를 이용하여 다양한 색상과 아이콘으로 변경할 수 있게 만들었고, 기본 CSS를 수정하여 버튼 모양이나 크기, 글자 크기 등을 변경할 수 있게 만들었다.

03
of 05
워드프레스 버튼 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 이미지의 맨 첫 번째 버튼으로 표시된다.

04
of 05
워드프레스 버튼 만들기

① 워드프레스 기본 메뉴인 버튼을 삽입하고, 아무것도 설정하지 않고 기본 그대로 놔둔다.

② 버튼에 필요한 글을 작성하거나 링크를 삽입한다.

③ 글 중간을 클릭하고 워드프레스 오른쪽 메뉴 하단부 고급 – 추가 CSS 클래스에 아래 글자를 입력한다.

① button-link : 기본 아이콘인 다운로드 아이콘 대신 링크 아이콘으로 변경한다.

② no-icon : 기본 아이콘인 다운로드 아이콘을 삭제한다.

③ button-red : 버튼 색상인 녹색을 빨강색으로 변경한다.

④ 위 ①, ②와 ③을 중복하여 사용할 수 있다.

※ 추가 CSS 클래스는 현재 링크 아이콘으로 변경, 빨간색으로 변경, 아이콘 삭제 3개를 만들어 뒀다. 다양한 색상이나 아이콘이 필요하다면 CSS를 추가하여 작성하면 된다.