본문 바로가기

워드프레스에서 사용자 CSS 코드 추가하기 - Enfold 테마

2019.08.27 댓글 3

워드프레스에서 CSS 코드를 추가하는 방법은 다양합니다. 크게 다음과 같은 방법으로 사용자 CSS를 추가할 수 있습니다.

  1. 워드프레스 자체 기능 사용하기 - 사용자 정의하기
  2. 테마 내의 기능 사용하기 (CSS 코드를 추가하는 옵션을 제공하는 경우)
  3. 차일드 테마의 스타일시트에 추가하기

사용자 정의하기 내의 추가 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 미적용 문제

마치며

워드프레스에서는 여러 가지 방법으로 커스텀 CSS를 추가할 수 있습니다. 이 글에서 소개한 방법 중에서 편한 것을 선택하면 됩니다. 만약 차일드 테마 내의 스타일시트 파일에 코드를 추가해도 제대로 적용되지 않으면 다른 방법(테마 옵션 내의 기능)으로 시도해볼 수 있습니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글3