워드프레스에 커스텀 CSS 코드를 추가하는 몇 가지 방법이 있습니다. 보통 사용자 정의하기의 추가 CSS 페이지에 커스텀 CSS 코드를 추가하거나 차일드 테마 내의 스타일시트(style.css) 파일에 추가할 수 있습니다. 이외에 엘리멘터 프로를 사용하는 경우 페이지 편집 화면에서 직접 커스텀 CSS 코드를 추가할 수 있습니다.
사용자 정의하기의 추가 CSS 섹션에 CSS 코드를 넣으면 실시간으로 스타일이 바뀌는 것을 확인할 수 있어 편리합니다. 하지만 드물지만 추가 CSS 섹션에 추가한 커스텀 CSS가 사라지는 경우가 있습니다.
워드프레스 사용자 정의 CSS 코드가 사라지는 문제가 발생하는 경우 대처 방법
제가 처음 워드프레스를 시작할 당시에는 사용자 지정 CSS 코드를 추가하려면 추가적인 플러그인을 설치하거나 젯팩(JetPack) 플러그인의 커스텀 CSS 기능을 사용하거나, 차일드 테마 내의 스타일시트 파일에 코드를 입력했습니다. 그리고 (지금도 마찬가지이지만) 아바다 등 일부 테마에서는 자체적으로 커스텀 CSS를 추가할 수 있는 옵션을 제공했습니다.
워드프레스에서 외모 » 사용자 정의하기 » 추가 CSS 섹션을 추가하면서 별도의 플러그인이나 테마의 기능을 사용하지 않고 맞춤형 CSS 코드를 쉽게 입력할 수 있게 되었습니다.
사용자 정의하기(Customize)를 통해 CSS 코드를 추가하면 실시간으로 스타일 변경을 확인할 수 있어 편리합니다. 그러나 추가 CSS 섹션을 통해 입력한 CSS 코드가 매우 드물지만 입력된 코드가 사라지는 경우가 있습니다.
얼만 전, 이 워드프레스 블로그에서 갑자기 코드 블록의 스타일이 이상하게 표시되는 현상이 발생했습니다.
살펴보니 외모 » 사용자 정의하기 » 추가 CSS 페이지에 추가한 CSS 코드가 모두 사라져서 사이트의 일부 레이아웃이 이상하게 표시되고 있었습니다.
이러한 문제가 발생한다면 백업본을 사용하여 사이트를 복원해야 사용자 정의하기 페이지에 추가한 사용자 CSS 코드를 복구할 수 있습니다.
사용자 정의하기 페이지에 추가 CSS를 입력하고 있다면 정기적으로 DB를 백업하거나 CSS 코드만을 별도로 백업하는 것이 안전한 것 같습니다. PC에 텍스트 파일로 저장하여 보관하거나 이메일로 CSS 코드를 전송하는 것도 생각할 수 있습니다.
사용자 정의 CSS 코드가 사라지는 문제의 원인?
입력한 CSS 코드 자체 문제로 인해 이런 현상이 발생할 가능성도 있어 보입니다. 가끔 웹사이트의 CSS 코드를 복사하여 사용자 정의하기의 추가 CSS 섹션에 붙여넣기 하면 선행 공백(Leading Space)을 제대로 인식하지 못하면서 오류가 발생하는 경우를 경험한 적이 있습니다.
저는 이 점이 의심되어 CSS 코드에서 선행 공백/후행 공백을 모두 삭제하여 다시 코드를 입력했습니다. 선행 공백을 삭제하여 코드를 재입력한 후에는 아직 문제가 발생하지 않았지만, 이 방법이 효과가 있는지 지켜봐야 할 것 같습니다. 선행/후행 공백 삭제 도구를 사용하여 선행 공백을 빠르게 삭제할 수 있습니다.
요약하면, 알림판의 외모 » 사용자 정의하기 » 추가 CSS 섹션에 커스텀 CSS 코드를 추가하는 경우:
- 정기적으로 DB(데이터베이스)를 백업하고
- 커스텀 CSS 코드를 별도의 텍스트 파일로 저장하여 PC에 보관하고
- 추가 CSS 코드가 사라지는 경우 백업본을 사용하여 복구하도록 합니다.
- 또한, 선행/후행 공백 제거 툴을 사용하여 선행 공백을 삭제하는 것을 고려할 수 있습니다.
백업본이 없는 경우
백업한 데이터베이스(DB) 파일이 없거나 사용자 정의 CSS 코드를 별도의 파일로 저장하지 않았다면 추가 CSS 섹션의 코드가 사라진 경우 복구할 수 없습니다.
카페24나 클라우드웨이즈 등 일부 웹호스팅에서는 호스팅 레벨에서 백업본을 제공합니다. 백업본이 없다면 웹호스팅 업체에 문의하여 과거 백업본이 있는지 확인해 보시기 바랍니다. 하지만 에러가 가장 오래된 백업본이 저장된 시점보다 이전에 발생한 경우에는 복원할 수가 없습니다.
운이 좋을 경우 Wayback Machine과 같은 인터넷 아카이브 사이트에서 내 사이트 URL을 검색하면 과거 버전이 저장되어 있을 수도 있습니다. 그러면 해당 시점의 커스텀 CSS를 확인하는 것이 가능할 수도 있습니다.
마치며
워드프레스에서는 테마나 플러그인의 스타일시트 파일을 직접 수정하는 대신, 커스텀 CSS를 추가하여 스타일을 변경할 수 있습니다. 이 방법으로 CSS 스타일을 변경하면 추후에 테마나 플러그인이 업데이트가 되더라도 사용자 정의 스타일이 유지됩니다.
사용자 정의하기의 추가 CSS 섹션에 커스텀 CSS 코드를 추가하는 경우, 드물지만 코드가 사라지는 버그가 있을 수 있으므로 DB를 정기적으로 백업하고 추가 CSS 코드만을 별도의 텍스트 파일로 저장하는 것이 안전할 수 있습니다.
자식 테마 내의 스타일시트 파일(style.css)에 커스텀 CSS 코드를 추가하는 경우에는 이런 현상이 발생하지 않습니다.
댓글 남기기