Simple Custom CSS 워드프레스 스타일 수정 플러그인

테마 혹은 플러그인의 스타일을 수정하기 위해서는 해당 테마나 플러그인 폴더에 있는 스타일 시트 파일(예: style.css 등)을 직접 수정하는 방법을 많이 사용합니다.

하지만 이 방법의 단점은 테마나 플러그인이 업데이트 되는 경우 따로 백업을 하지 않아 놓았다면 지금껏 수정한 내용이 날아가 버린다는 것입니다. 물론 테마의 경우는 '자식 테마'를 사용하여 이런 문제를 피할 수도 있지만 플러그인은 그렇지 못하죠. 자식 플러그인은 (제가 알기로는)없기 때문입니다.

그렇기 때문에 테마, 플러그인의 업데이트에 영향을 받지 않는 스타일 기능을 구현하면 매우 편리하게 사용할 수 있으리라 보여지며 당연히도 이런 스타일만을 추가해 수정할 수 있는 플러그인이 존재하고 있습니다.

워드프레스 스타일 커스터마이징 플러그인은 여러 종류가 있는데 제가 주로 사용하는 플러그인은 'Simple Custom CSS'입니다.

아래의 링크에서 다운로드 받을 수 있으며, 워드프레스 테마 추가 기능을 통해서도 쉽게 검색하여 바로 설치할 수 있습니다.

https://wordpress.org/plugins/simple-custom-css/

simple custom css 플러그인

이 플러그인은 설치 & 활성화 하는 것만으로 특별한 설정없이 사용자가 직접 입력한 스타일을 워드프레스 홈페이지에 적용시킬 수 있습니다.

아래는 임시로 제작한 '커피와 홈카페 정보'를 제공하는 컨셉의 워드프레스 홈페이지 입니다.

임시 제작 워드프레스 홈페이지

알림판 - 외모 항목에 'Custom CSS'를 클릭하면 커스텀 스타일 입력란이 있습니다. 처음에는 당연히 비어 있습니다.

커스텀 스타일 입력창

커스텀 스타일을 넣어 봅니다.

홈페이지의 폰트를 '나눔고딕' 웹폰트로 바꾸고, 배경 이미지의 크기 속성을 'cover'로 설정합니다. 또한 블록 요소의 float 속성을 초기화 하는 클래스 'clearfix'도 작성합니다.

@import  'http://fonts.googleapis.com/earlyaccess/nanumgothic.css';
body {
  font-family: 'Nanum Gothic';
}

body {
  background-size: cover;
}

.clearfix {
  clear: both;
}

커스텀 스타일 작성

스타일을 추가한 후 하단 혹은 우측의 [Update Custom CSS] 버튼을 클릭하여 적용합니다.

적용된 모습을 웹브라우저에서 확인해 봅니다.

수정된 스타일이 반영된 홈페이지

개발자 모드(F12)를 통해 'body' 요소를 검토해 보면 아래와 같이 배경 크기 속성과 폰트 속성이 수정된 것을 확인할 수 있습니다.

개발자 모드에서 확인

이처럼 'Simple Custom CSS' 등의 플러그인을 사용하여 워드프레스 홈페이지를 자식 테마를 사용하지 않고도 커스터마이징을 간단히 할 수 있습니다.