다른 모든 웹 작업과 마찬가지로 워드프레스 사이트에서도 CSS를 다룰 일이 많습니다. 테마를 설치한 후에 이런 저런 디자인 요소를 커스터마이징할 일이 있을 때마다 CSS를 추가하거나 수정하게 되죠.
물론 워드프레스에서는 테마 디자인을 별도 CSS 편집 없이 관리자 대시보드 상에서 바로 보며 바로 수정할 수 있는 “사용자 정의하기(Customize)” 기능을 제공하기에, 이 메뉴를 통해 왠만한 디자인 요소는 수정할 수 있지만 그래도 종종 CSS를 직접 다룰 일이 생기곤 합니다.
이 글에서는 워드프레스에서 CSS를 다루는 여러 방법들을 소개하고 어떤 때 어떤 방법을 사용하는 게 좋은지도 알아보도록 하겠습니다.
전통적인 방법: styles.css 파일
워드프레스에서 CSS를 다루는 전통적인 방법은 워드프레스 테마 속에 포함된 styles.css 파일을 직접 편집하는 것입니다. 워드프레스에서 이 styles.css 파일은 모든 테마에 공통으로 존재하는 필수 파일이기 때문에 모든 워드프레스 테마는 이 파일을 보유하고 있습니다. 이 방법은 워드프레스에 “사용자 정의하기” 기능이 추가되기 전부터 사용되어 온 오래된 방법이지만 여전히 유효한 방법입니다.
styles.css 파일 편집은 FTP 등을 통해 테마 폴더에서 직접 styles.css 파일을 수정하거나 아니면 관리자 대시보드 “테마 디자인 > 테마 편집기”에서 styles.css 파일을 찾아 수정할 수 있습니다.
단, 이렇게 직접 테마의 styles.css 파일을 수정할 경우, 해당 테마가 업데이트되면 수정된 내용이 모두 사라질 수 있기 때문에, 반드시 자식 테마를 만들어 자식 테마에서 styles.css 파일을 수정할 것을 권합니다.
또한, 일부 테마에 따라서는 이 styles.css 파일을 로드하지 않고 대신 자체적으로 다른 스타일 파일을 로드하는 경우도 있기 때문에 종종 styles.css 파일 자체를 수정하는 것이 제대로 작동하지 않는 경우도 있다는 점 유의 하세요!
워드프레스 내장 CSS 편집기
워드프레스 4.7 버전부터는 워드프레스 내에서 자체적으로 커스텀 CSS를 추가할 수 있는 메뉴를 제공합니다. 따라서 사이트 수정에 필요한 커스텀 CSS를 별도 플러그인 없이도 간단하게 처리할 수 있습니다.
추가 CSS(Additional CSS)라고 이름 붙은 이 기능은 “테마 디자인 > CSS 편집” 메뉴에서 접근 가능하며, 사용자 정의하기 속에 결합되어 사이트 디자인을 바로 보면서 편집할 수 있는 기능을 제공합니다.
젯팩 Custom CSS
젯팩(Jetpack)을 설치한 경우라면, 젯팩에서 제공하는 커스텀 CSS 향상 기능을 사용할 수 있습니다. 이 기능은 앞서 소개한, 워드프레스의 기본 CSS 편집기의 기능을 더 강력하게 만들어 주는 여러 기능들을 가지고 있습니다. 예를 들면, CSS 편집기에서 Sass(SCSS 구문만 가능)나 LESS와 같은 전처리기를 쓸 수 있게 해주고, 기기별 설정이나 변경이력(CSS History) 같은 유용한 기능들을 제공합니다.
이 기능은 젯팩의 “설정 > 쓰기” 메뉴에서 다음과 같이 끄고 켤 수 있습니다.
여기까지가 워드프레스에서 기본적으로 제공하는 CSS 관련 기능들이며, 왠만한 경우라면 이 정도면 모든 것을 해결할 수가 있을 것입니다.
하지만 이 밖에도 다른 옵션들이 여럿 있습니다. 하나하나 알아 볼까요?
테마에서 제공하는 CSS 편집 기능
일부 테마들, 특히 상용 테마나 페이지 빌더를 내장한 테마들은 테마 내에서 자체적으로 CSS를 다룰 수 있는 기능을 제공합니다. 이 기능은 테마마다 다르기 때문에 일률로 설명할 수는 없겠지만, 예를 들어 인기있는 프리미엄 테마 중 하나인 Divi 테마 같은 경우, 테마 옵션 메뉴에서 “사용자 맞춤 CSS”를 입력할 수 있도록 하고 있고,
또 Divi 페이지 빌더에서도 각각의 디자인 모듈마다 “사용자 맞춤 CSS”를 정의해 넣을 수 있는 입력 폼을 제공합니다.
그 밖의 다른 테마들도 방법과 위치만 다를 뿐, 마찬가지입니다.
따라서 이들 테마를 사용한다면, 테마가 제공하는 커스텀 CSS 기능을 이용하는 것도 좋은 방법이겠죠.
커스텀 CSS 플러그인
그 밖에도 워드프레스 테마 디렉터리에서 “custom css”로 검색하면 많은 플러그인들이 나와 있는 것을 알 수 있습니다.
앞서 소개한 여러 방법들만으로도 왠만한 CSS 처리는 다 해결되는데 굳이 또 다른 플러그인이 필요할까요? 이들 플러그인은 언제 어디서 사용할까요?
테마에 상관 없이 CSS 적용하기
한 가지 용도는, 테마와 무관하게 CSS를 적용할 필요가 있는 경우입니다. 예를 들면, 앞서 소개한 styles.css 파일이나 워드프레스 내장 CSS 편집기의 경우 테마 단위로 CSS가 적용됩니다. 따라서 테마를 변경하게 되면 당연히 CSS 적용도 사라지게 되죠.
하지만 경우에 따라선 테마가 변경되어도 CSS는 그대로 유지하도록 하고픈 때도 있습니다. 잘은 없겠지만, 예를 들어, 특정 플러그인에서 필요한 CSS 같은 경우라면 말이죠.
이 때는 아래 플러그인들 중 하나를 사용하면 됩니다.
- Simple Custom CSS 이 플러그인은 테마를 변경해도 CSS가 그대로 따라 붙습니다.
- WP Add Custom CSS 다양한 설정 옵션을 제공합니다.
개별 콘텐츠 단위로 CSS 적용하기
종종 CSS를 특정 페이지나 포스트 단위로 적용할 일들도 있습니다. 예를 들어, 이벤트용 랜딩 페이지를 하나 만들었다면, 여기 필요한 CSS는 이 페이지 내에서만 적용되면 되지 굳이 워드프레스 사이트 전체에 적용할 필요가 없습니다. 이럴 땐 페이지 단위로 CSS를 적용할 수 있다면 좋을 것입니다.
그럴 때는 아래 플러그인들 중 하나를 골라 쓰면 됩니다.
- Simple CSS 이 플러그인은 사이트 단위와 특정 콘텐츠 단위의 CSS 편집을 지원합니다.
- WP Add Custom CSS 사이트 단위와 특정 콘텐츠 단위의 CSS 편집을 지원하며 콘텐츠 단위 CSS 편집을 적용한 콘텐츠 유형을 선택할 수 있습니다.
- Post/Page specific custom CSS 제목 그대로 포스트와 페이지 단위로 커스텀 CSS를 다룰 수 있습니다.
이 밖에도 물론 다양한 플러그인들이 존재합니다. 사용자마다, 그리고 사이트마다 각각 필요한 요건들이 다르기 때문에 자신의 필요에 맞는 플러그인을 찾아 적재적소에 사용하는 것이 중요하겠죠!
0 thoughts on “워드프레스에 커스텀 CSS 추가하기”