웹표준과 워드프레스


워드프레스는 웹표준인 HTML과 CSS 기반하에 제작된 시스템 도구입니다. 워드프레스는 코어 부분부터 웹표준을 기반으로 제작된 CMS 툴이기 때문에 워드프레스를 깊이 공부할수록 웹표준에 대한 이해가 있어야 다루기가 수월한 것이 사실입니다.
워드프레스를 이야기 할 때 자주 언급되는 Custom CSS를 이해하는 것도 마찬가지입니다. HTML과 CSS 지식이 있는 만큼 이해도가 높을 것입니다. 웹표준인 HTML5와 CSS3를 공부해두는 것은 자신의 미래 경쟁력을 향상시키는 길입니다.

워드프레스 테마 스타일 화일


워드프레스 코어는 이미 짜여진 동일한 프레임웍 구조 안에서 움직이고 있습니다. 워드프레스 테마 역시 코어 프레임웍 구조 안에서 동작합니다. 워드프레스 4.3.1을 설치하면 현재 포스팅에서 다루고 있는 Twenty Fourteen 테마와 Twenty Thirteen, Twenty Fifteen 테마 총 3개가 기본 제공됩니다.

현재 적용된 워드프레스 테마 스타일 화일을 확인하기 위해서는 외모 > 테마편집기를 클릭하면 확인할 수 있습니다.



테마 편집기 안에서 마우스 스크롤을 내려서 Twenty Fourteen 스타일 시트인 style.css 화일 내용을 볼 수 있습니다. 아래로 조금 내리면 오렌지색 박스가 그려진 부분이 기본적으로 HTML 태그에 대해서 스타일을 일괄 적용한 곳입니다. 그렇지만 테마 스타일 화일인 style.css를 이곳 테마편집기 안에서 수정하는 경우는 거의 없습니다. style.css 의 텍스트 양이 많기 때문에 마우스 스크롤 속도모 무척 느릴뿐 아니라 오타의 확률도 높기 때문입니다.



서브라임 텍스트 Sublime Text


일반적으로 테마 스타일 화일을 수정할 때 권고하는 것은 HTML/CSS 전용 편집기를 사용하는 것입니다. 요즈음 퍼블리셔나 개발자가 가장 선호하는 편집기 중 하나는 서브라임 텍스트 입니다. 서브라임 텍스트는 서브라임텍스트 사이트에서 무료로 다운로드 해서 사용이 가능합니다. 단 무료 버전은 광고가 있습니다. 좋은 툴이기 때문에 많이 사용한다면 유료 구매도 고려해 볼만 합니다. 아직 서브라임 텍스트가 설치되어 있지 않다면 다운로드해서 설치합니다.



Twenty Forteen 테마의 테마의 물리적인 스타일 화일인 style.css 화일은 wp-content/themes/ 안에 존재합니다. 실제 화일은 호스팅을 받고 있는 서버 안에 있으므로 FTP 툴로 접속하면 아래 그림과 같은 폴더 경로가 나올 것입니다. wp-content/themes/twentyfourteen 폴더 안에 style.css 화일이 있고 style.css 화일을 로컬 PC로 다운로드 받거나 바로 클릭해서 서브라임 텍스트 편집기로 열 수 있습니다. 



조금 전 워드프레스의 테마편집기에서 열었던 style.css 화일을 서브라임 텍스트 편집기로 열면 아래와 같습니다. 아래 화면과 같이 일단 코드에 대한 시각적 가독성이 뛰어나고 여러가지 편리한 편집 기능을 제공합니다.




Custom CSS 란?


워드프레스 테마는 wp-content/themes 경로 안에 폴더 형태로 존재하게 됩니다. 그래서 해당 테마의 스타일 화일을 수정하면 테마가 수정됩니다. 그렇지만 그렇게 직접 해당 테마의 스타일 화일을 수정하면 테마가 업데이트 되게되면 자신이 수정했던 내용이 모두 사라지게 됩니다. 그런 황망한 경험을 한 유저도 많을 것입니다. 또한 수정한 화일의 버전관리도 어렵습니다.
그래서 사용하게 되는 것이 Custom CSS 입니다.

Custom CSS는 시간순으로 맨 나중에 작성한 CSS 코드가 시스템에 적용되는 원리를 이용해서 원본 CSS를 수정하지 않고 적용하는 것을 말합니다. 그렇지만 Custom CSS는 워드프레스에서 기본 기능으로 제공하고 있지 않고 별도로 설치한 테마에서 제공을 하거나 테마에서 제공을 하지 않을 때는 플러그인에서 설치하면 됩니다. 플러그인으로는 20만명 이상이 사용하고 있는 Simple Custom CSS이 좋습니다.



좋은 테마 수정 습관


조금 전 원본 테마의 화일을 수정하는 것은 좋지 않은 방법이라 하였습니다. 테마를 변경해야 할 때는 스타일은 Custom CSS를 사용해서 변경하고, 소스 코드 수정을 할 때는 자식 테마를 만들어서 사용하는 방법을 권고합니다.
요즈음에는 유료 테마를 구매해서 설치하면 자식 테마를 샘플이나 XML 화일을 대부분 기본적으로 제공하기 때문에 쉽게 자식테마를 활용해서 테마를 수정할 수 있습니다. 이렇게 테마를 수정하는 것이 향후 시스템 유지보수에도 좋은 방법입니다.

좋은 테마 수정 습관으로, 테마를 수정할 때는 커스텀 CSS와 자식테마(Child Theme) 이 두 가지를 꼭 기억하면 되겠습니다. 


+ Recent posts