워드프레스 박스 만들기, 추가 CSS 클래스, 글 상자, 사전 서식화

플러그인을 사용하지 않고 단순히 워드프레스의 사전 서식화 메뉴와 추가 CSS 클래스 만을 사용하여 다양한 워드프레스 박스 만들기 방법을 소개한다.

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

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

01
of 04
박스 결과물 보기

아래 이미지는 실제 다양한 색상과 아이콘이 삽입된 박스의 결과물이다.

02
of 04
워드프레스 박스 CSS 코드

/* 기본 박스 설정 */
.wp-block-preformatted {
  font-family: RIDIBatang; /* 박스 안 폰트 */
  font-size: 1.25rem; /* 박스 안 폰트 사이즈 */
  line-height: 1.5;	
  color: black;
  padding: 20px 20px;
  border: 1px solid #e3e3e3; /* 본인이 가장 많이 사용하는 색상 입력 */
}

/* 박스 색상 설정 */
/* 원하는 색상을 추가하거나 변경 */
.green {
  background-color: #f0fff0;
}

.blue {
  background-color: #f0faff;
}

.red {
  background-color: #fdedec;
}

.brown {
  background-color: #fdf5e6;
}

.purple {
  background-color: #faf5ff;
}

/* 박스 아이콘 설정 */
/* 원하는 아이콘을 추가하거나 수정 */
.icon_i {
   padding: 20px 50px !important;
}

.icon_i:before {
  font: normal normal normal 22px/1 FontAwesome;
  margin-left: -30px;
  margin-right: 10px;
  content: "\f05a";
}

.icon_w {
   padding: 20px 50px !important;
}

.icon_w:before {
  font: normal normal normal 22px/1 FontAwesome;
  margin-left: -30px;
  margin-right: 10px;
  content: "\f071";
}

.icon_c {
   padding: 20px 50px !important;
}

.icon_c:before {
  font: normal normal normal 22px/1 FontAwesome;
  margin-left: -30px;
  margin-right: 10px;
  content: "\f058";
}

.icon_x {
   padding: 20px 50px !important;
}

.icon_x:before {
  font: normal normal normal 22px/1 FontAwesome;
  margin-left: -30px;
  margin-right: 10px;
  content: "\f057";
}
Code language: CSS (css)

03
of 04
워드프레스 박스 만들기 방법

① 워드프레스 기본 메뉴인 사전 서식화를 삽입하고, 아무것도 설정하지 않고 기본 그대로 놔둔다.

② 박스안에 필요한 글을 작성하거나 애드센스 광고를 삽입한다.

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

① 아무것도 입력하지 않는다 : 기본 박스가 표시된다. (위 코드는 기본 박스 색상이 회색이다.)

② green, blue, red, brown, purple : 박스 색상을 설정한 색으로 변경한다.

③ icon_i, icon_w, icon_c, icon_x : 박스에 설정한 아이콘을 추가한다.

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

※ 추가 CSS 클래스는 현재 5가지 색상과 4가지 아이콘을 만들어 뒀다. 다양한 색상이나 아이콘이 필요하다면 CSS를 추가하여 작성하면 된다.