워드프레스에 사용자 CSS 코드를 추가하는 간단한 방법

워드프레스 정보를 제공하는 블로그 Avada 2018. 8. 5. 05:39 • 댓글:

워드프레스에서 CSS 코드를 추가하고 싶은 경우 여러 가지 방법으로 추가할 수 있습니다.

  1. 테마에서 제공하는 옵션 사용하기
  2. 워드프레스 내의 기능 사용하기
  3. 차일드 테마 사용하기

테마 내의 기능 제공

아바다, Enfold, Jupiter, Newspaper, Divi 등 대부분의 유료 테마에서는 자체적으로 CSS 코드를 추가할 수 있는 옵션을 제공합니다.

예를 들어, Avada 테마의 경우 워드프레스 알림판 > Avada > Theme Options > Custom CSS에서 코드를 추가할 수 있습니다.

Jupiter(주피터) 테마의 경우 Jupiter >Theme Options > Advanced > Custom CSS 섹션에서 사용자 정의 CSS를 삽입할 수 있습니다.

인기 매거진 테마인 Newspaper(뉴스페이퍼)에서는 Newspaper > Theme panel > Custom Code 아래의 Custom CSS 섹션을 이용할 수 있습니다.

Enfold(엔폴드) 테마의 경우 약간 찾기가 쉽지 않을 수 있습니다. Enfold > General Styling 아래에 있습니다.

맨 아래에 보면 Quick CSS 섹션이 있습니다.

Elegant Themes의 Divi 테마에서는 Divi > 테마 옵션 > General > 사용자 맞춤 CSS(영문: Divi > Theme Options > General > Custom CSS)에 추가할 수 있습니다.

워드프레스 내의 기능 사용하기

사용 중인 워드프레스 테마에서 사용자 CSS를 추가하는 옵션을 제공하지 않으면 워드프레스에서 제공하는 기능을 사용할 수 있습니다.

외모 > 사용자 정의하기 > 추가 CSS에 CSS 코드를 넣으면 됩니다.

CSS 코드를 쉽게 작성할 수 있는 기능이 내장되어 있습니다. 문법이 틀리면 왼쪽에 x 표시가 됩니다. 코드를 입력할 때 미리 완성하여 코드를 제시합니다. 예를 들어, font-s...를 입력하면 font-size, font-size-adjust 같은 코드를 제시합니다.

이 기능을 사용하면 수월하게 코드를 추가할 수 있습니다. 하지만 테마를 변경할 경우 코드가 사라질 가능성이 있으므로 여기에 입력하는 내용은 별도의 텍스트 파일에 저장해놓는 것이 안전합니다.

실제로 여기에 코드를 입력했다가 추후에 어떤 이유로 코드가 사라져서 낭패를 보는 경우를 목격합니다.

마치며

여기에서 제시하는 방법을 사용하면 FTP에 접속하지 않고 워드프레스 대시보드에서 CSS를 추가할 수 있습니다.

저는 주로 차일드 테마를 사용하여 코드를 넣는 편입니다. 아바다 등 대부분의 유료 테마에서는 차일드 테마를 제공하므로 차일드 테마를 함께 설치하여 활성화하고, 수정 사항은 자식 테마에 넣으면 됩니다.