WordPress 테마를 업데이트할 때 사용자 정의 CSS를 유지하는 방법
게시 됨: 2022-05-05테마는 WordPress 웹 사이트의 레이아웃과 모양을 결정합니다. 어떤 테마를 사용하든 특정 요구 사항에 맞게 약간 사용자 정의해야 할 수 있습니다.
테마를 사용자 정의하는 한 가지 방법은 CSS(Cascading Style Sheets)를 사용하는 것입니다. 이 인기 있는 스타일 시트 언어를 사용하면 테마의 거의 모든 요소를 변경할 수 있습니다. 테마에 사용자 정의 CSS를 추가하여 배경색을 지정하고, 글꼴 크기를 변경하고, 콘텐츠 사이의 간격을 만들고, 메뉴를 재배치하는 등의 작업을 수행할 수 있습니다. 그러나 사용자 정의 CSS는 다음에 테마를 업데이트할 때 삭제될 수 있습니다.
테마 업데이트가 사용자 정의 CSS를 중단하는 이유
모든 테마에는 style.css 파일이 있습니다. 테마 폴더에서 사용할 수 있으며 CSS가 포함되어 있습니다. 테마를 업데이트하면 기존 버전을 대체할 새 버전을 다운로드하게 됩니다.
테마를 업데이트하면 기존 style.css 파일이 삭제되고 새로운 style.css 파일로 교체됩니다. 새 style.css 파일에는 이전에 추가했을 수 있는 사용자 정의 CSS가 포함되지 않습니다. 삭제된 사용자 정의 CSS를 언제든지 다시 추가할 수 있지만 각 테마 업데이트 후에 다시 추가하는 것은 지루할 수 있습니다.
커스터마이저에 추가
테마를 사용자 정의 프로그램에 추가하여 업데이트할 때 사용자 정의 CSS를 유지할 수 있습니다. 사용자 지정 도구는 WordPress 대시보드의 테마 사용자 지정 도구입니다. "추가 CSS" 필드가 있습니다. 사용자 정의 CSS를 테마의 style.css에 직접 추가하는 대신 이 필드에 추가할 수 있습니다.
"추가 CSS" 필드는 테마 업데이트 중에 사용자 정의 CSS가 삭제되는 것을 방지하기 위해 WordPress 버전 4.7에 도입되었습니다. style.css 파일에 영향을 주지 않으며 테마 폴더의 다른 파일에도 영향을 주지 않습니다. 이 필드를 통해 사용자 정의 CSS를 사용자 정의 도구에 추가하면 웹 사이트의 데이터베이스에 저장됩니다. 그런 다음 사용자 정의 CSS를 유지하면서 테마를 업데이트할 수 있습니다.
사용자 지정 도구에 액세스하려면 WordPress 대시보드에서 "모양"을 클릭하고 "사용자 지정"을 선택합니다. "추가 CSS" 탭은 하단 근처에 있습니다. 이 탭을 클릭하면 사용자 정의 CSS를 입력할 수 있는 필드가 표시됩니다. 테마를 업데이트하면 테마 폴더의 파일만 대체됩니다. 웹 사이트의 데이터베이스를 대체하거나 영향을 미치지 않으므로 사용자 정의 CSS가 유지됩니다.
사용자 정의 CSS를 사용자 정의 도구에 추가하면 미리 볼 수 있습니다. 커스터마이저에는 모든 변경 사항에 대한 미리보기 기능이 내장되어 있습니다. 새 위젯을 설정하든 사용자 정의 CSS를 추가하든 상관없이 사용자 정의 프로그램은 웹사이트가 어떻게 생겼는지 보여줍니다. 그런 다음 "게시"를 클릭하여 사용자 지정을 계속하도록 선택할 수 있습니다. 웹 사이트가 올바르지 않은 경우 라이브로 만들기 전에 사용자 지정 옵션을 변경할 수 있습니다. 그럼에도 불구하고 사용자 정의 도구는 사용자 정의 CSS를 사용하여 웹 사이트의 미리보기를 표시합니다.
하위 테마 만들기
또 다른 해결책은 자식 테마를 만드는 것입니다. 하위 테마는 기본적으로 변경 내용을 잃을 염려 없이 사용자 지정할 수 있는 다른 테마의 복사본입니다. 그것들은 완전한 사본이 아닙니다. 오히려 대부분의 자식 테마는 style.css 파일과 functions.php 파일을 포함한 몇 가지 기본 파일로 구성됩니다.
자식 테마는 부모 테마의 속성을 상속하도록 설계되었습니다. 테마를 상위 테마로 사용할 수 있습니다. 하위 테마에는 고유한 style.css 파일과 functions.php 파일이 포함된 고유한 폴더가 있습니다. 그러나 자식 테마에는 index.php 파일, page.php 파일, single.php 파일 또는 기타 표준 테마 파일이 포함되지 않습니다. 이러한 속성에 대한 상위 테마를 활용합니다.
자식 테마에는 고유한 style.css 파일이 있으므로 사용자 지정 CSS를 지원합니다. 더 중요한 것은 하위 테마는 상위 테마가 업데이트될 때 모든 사용자 정의 CSS를 유지한다는 것입니다. 상위 테마를 업데이트해도 하위 테마의 style.css 파일에는 영향을 미치지 않습니다. 하위 테마를 만드는 방법에 대한 지침을 보려면 developer.wordpress.org/themes/advanced-topics/child-theme를 방문하세요. 또는 일부 프리미엄 테마에는 하위 테마가 함께 제공됩니다.
몇 줄의 사용자 정의 CSS에 대해 사용자 정의 도구에 추가할 수 있습니다. 더 많은 양의 사용자 정의 CSS의 경우 자식 테마를 만드는 것이 노력할만한 가치가 있습니다. 하위 테마는 사용자 정의할 수 있는 별도의 style.css 파일을 제공합니다.
하위 테마의 style.css 파일을 오프라인으로 작업할 수도 있으며 별도의 파일이기 때문에 사용자 정의 CSS를 위한 충분한 공간이 있습니다. 사용자 정의 CSS를 사용자 정의 도구에 추가하면 온라인에서만 액세스할 수 있는 작은 필드로 제한됩니다. 사용자 지정 프로그램은 미리 보기 모드의 이점을 제공하는 반면 하위 테마는 별도의 style.css 파일의 이점을 제공합니다.
사용자 정의 CSS 플러그인 사용
사용자 정의 CSS 플러그인을 사용할 수 있습니다. 예를 들어 Simple Custom CSS 플러그인은 사용자 정의 CSS를 테마에 쉽게 추가할 수 있도록 합니다. 플러그인에 추가된 사용자 정의 CSS는 테마 자체 CSS를 재정의합니다.
Simple Custom CSS 플러그인을 활성화하면 WordPress 대시보드의 "모양" 아래에 새로운 "Custom CSS" 탭이 표시되어야 합니다. 여기에서 사용자 정의 CSS를 추가할 수 있습니다. 테마를 업데이트하면 사용자 정의 CSS가 유지됩니다. 테마를 업데이트하면 테마의 style.css 파일이 대체되지만 플러그인은 새 style.css 파일을 사용자 정의 CSS로 재정의합니다.
사용자 정의 CSS와 사용자 정의 JavaScript를 모두 지원하는 Simple Custom CSS 및 JS 플러그인도 있습니다. 이를 사용하여 테마 자체 CSS를 재정의하는 사용자 정의 CSS를 만들 수 있습니다. 하위 테마를 만드는 데 어려움을 겪고 싶지 않다면 사용자 정의 CSS 플러그인을 사용할 수 있습니다. 사용자 정의 CSS 플러그인을 다운로드하는 것은 테마 업데이트 중에 사용자 정의 CSS를 보존하는 쉬운 방법입니다.
결론
테마를 업데이트한 후 맞춤 CSS를 잃어버리면 답답합니다. 사용자 지정 CSS를 컴퓨터에 로컬로 저장한 경우에도 다시 돌아가서 추가해야 합니다. WordPress 대시보드의 사용자 지정 도구를 사용하거나, 자식 테마를 만들거나, 사용자 지정 CSS 플러그인을 사용하여 테마의 사용자 지정 CSS를 유지할 수 있습니다.
