워드프레스에서 CSS 코드를 추가하는 방법은 다양합니다. 크게 다음과 같은 방법으로 사용자 CSS를 추가할 수 있습니다.
- 워드프레스 자체 기능 사용하기 - 사용자 정의하기
- 테마 내의 기능 사용하기 (CSS 코드를 추가하는 옵션을 제공하는 경우)
- 차일드 테마의 스타일시트에 추가하기
사용자 정의하기 내의 추가 CSS 기능 사용하기
워드프레스에서는 자체적으로 커스텀 CSS를 추가할 수 있는 옵션을 사용자 정의하기에서 제공합니다. 워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > 추가 CSS를 클릭하면 사용자 정의 CSS를 추가할 수 있습니다.
테마에서 제공하는 옵션 사용 (테마에 따라 제공되지 않을 수 있음)
두 번째 방법으로 테마에서 커스텀 CSS를 추가할 수 있는 옵션을 제공하는 경우가 있습니다. 유료 테마에서는 이 기능을 제공하는 경우가 많습니다. 엔폴드 테마에서는 Enfold > General Styling 아래에 이 옵션이 제공됩니다.
General Styling을 클릭한 후에 아래로 이동하여 "Quick CSS" 부분을 찾도록 합니다.
아바다, 뉴스페이퍼 등의 테마에서도 비슷한 기능이 제공됩니다.
차일드 테마의 스타일시트 파일에 추가하기
세 번째 방법으로 차일드 테마의 스타일시트 파일에 사용자 정의 CSS 코드를 추가할 수 있습니다. 스타일시트 파일의 경로는 다음과 같습니다:
- /wp-content/themes/차일드테마폴더/style.css
FTP에 접속하여 작업할 수 있습니다. 테마 편집기에서도 작업이 가능하지만, 보안을 위해 테마 편집기는 비활성화하는 것을 고려할 수 있습니다.
※ Enfold 테마에서 차일드 테마의 스타일시트에 추가한 CSS가 제대로 작동하지 않으면 CSS 파일 병합 및 압축(CSS file merging and compress all theme CSS files) 옵션을 비활성화하면 문제가 해결될 수 있습니다.
마치며
워드프레스에서는 여러 가지 방법으로 커스텀 CSS를 추가할 수 있습니다. 이 글에서 소개한 방법 중에서 편한 것을 선택하면 됩니다. 만약 차일드 테마 내의 스타일시트 파일에 코드를 추가해도 제대로 적용되지 않으면 다른 방법(테마 옵션 내의 기능)으로 시도해볼 수 있습니다.