워드프레스 테마 커스텀의 첫 발
워드프레스 활용 이야기
어떤 웹사이트도 운영을 하다 보면 수정을 하고 싶은 부분들이 있기 마련입니다. 또는 구축 단계에서도 테마에서 제공하는 요소 외의 것들을 추가해야 하는 경우도 있고요. 이런 상황을 대비하여 워드프레스에는 커스텀을 할 수 있는 여러 방법들이 준비가 돼 있습니다.
그중에서도 가장 작업이 쉬운 방법 하나가 이번에 소개할 자식 테마(child theme)를 이용하는 방법입니다.
시작에 앞서 간략히 웹의 구조에 대해 알면 접근이 쉬울 수 있습니다. 웹은 브라우저를 통해 보이는 프런트 앤드가 있고, 인터넷의 어느 공간에 콘텐츠가 저장된 백앤드가 있습니다. 그럼 워드프레스와 테마는 웹에서 어떤 역할을 하는가? 이걸 설명하려고 순서도를 그리다 보니 가로로 펼쳐서 이렇게 하면 어느 정도 제가 이해를 하고 있는 그림이 되었습니다.
서버에 저장된 콘텐츠를 불러다가 조합을 해서, 방문자가 브라우저에서 보는 화면을 만들어 내는 중간 역할을 워드프레스와 테마가 담당을 하고, 이 중에서도 테마가 프런트 앤드에 가깝다고 볼 수 있을 듯합니다. 그럼 테마를 수정을 하면 프런트 앤드에 대한 수정 내용들은 적용을 할 수 있다는 얘기입니다.
워드프레스의 기본 테마 twenty-twenty의 구조를 한 번 보겠습니다. 익숙한 폴더와 파일로 구성돼 있고, css도 보이고, js 폴더도 있고, header footer 등도 보이고... 이 파일들을 열어서 조금씩 수정을 하면 보이는 프런트 앤드 화면을 바꾸는 결과물은 나올 수 있습니다.
그런데 테마는 이후에 버전 업데이트를 해야 할 상황이 발생할 수 있습니다. 수정돼야 할 버그가 있을 수도 있고, 워드프레스 버전도 변하고 서버의 php 버전도 변하고... 이때 워드프레스의 테마 업데이트 방식은 기존에 있던 같은 이름의 파일을 모두 덮어쓰기를 하는 것입니다. 혹여 백업이라도 못 하고 잘못 업데이트를 해 버리는 순간 수정을 했던 내용들이 모두 사라질 수 있는 것이죠.
이걸 대비하기 위해서 워드프레스에 있는 자식 테마(child-theme)의 구조를 이용할 수 있습니다. 부모의 테마의 영향을 받되 내가 수정을 한 내용들만 따로 모아 놓은 작업노트 같은 테마입니다. 개념은 일단 됐고, 그럼 이걸 대체 어떻게 만들 것인가? 걱정을 할 필요가 없는 것이 대부분의 테마 개발자들이 이미 [테마 + 자식 테마]를 패키지처럼 함께 제공합니다. 테마를 설치 시 항상 부모, 자식 두 가지를 모두 설치하고 자식 테마로 시작만 하면 준비는 끝입니다.
준비는 끝. 이제 뭘 할 수 있나?
사이트를 구축 시 주로 사용하는 방법들 몇 가지를 정리해 보았습니다.
1. CSS 스타일의 수정
CSS는 "cascading style sheets"의 약자로, 위에서 아래로 정의가 되는 방식이라 테마에 정의돼 있는 것을 내가 다시 정의를 하면 적용이 될 수 있다는 특징이 있습니다. (부모 테마 스타일 > 자식 테마 스타일)
아래 화면에서 이 메뉴의 스타일을 수정하고 싶은 경우가 있을 때, 맨 오른쪽에 있는 스타일을 정의한 부분 중 추가할 내용이나, 또는 기존 것을 변경하고 싶은 것을 자식 테마의 style.css 파일에 다시 정의를 합니다.
이 외에 css 수정만으로도 다양한 애니메이션 효과 추가라든지, 미디어 쿼리를 이용해서 모바일 화면을 좀 더 정리한다든지 하는 작업들을 할 수 있습니다.
2. PHP 코드의 추가 (워드프레스의 각종 Hook 이용)
워드프레스는 Hook이라는 연결 고리를 이용하면 다양한 기능 추가나 수정이 가능합니다. 예를 들어 사이트 마무리 단계에서 추가하는 각종 검색 엔진의 연결 스크립트를 헤더나 푸터에 추가를 하고자 할 때, functions.php 파일에다가 코드만 추가하면 적용이 됩니다. wp_head는 헤드 태그 안에 뭔가를 추가할 때 쓰는 대표적인 워드프레스 훅입니다.
3. 테마 템플릿의 수정
테마의 템플릿 파일 중 구조나 레이아웃을 크게 수정을 하고 싶은 경우, 부모 테마에서 직접 파일을 수정하지 않고 자식 테마의 폴더로 파일을 복사한 다음 복사한 파일을 수정하는 방법입니다. 워드프레스에서 만약 자식 테마에 같은 파일이 있는 경우 이것을 먼저 인식을 합니다. 차후 부모 테마가 업데이트되더라도 작업 내용은 유지될 수 있게 됩니다.
4. 스크립트의 추가 (jQuery 애드온 설치)
특정 페이지에서 작동하는 간단한 스크립트 추가가 필요할 때에도 자식 테마를 이용하면 편리합니다. 워드프레스에는 현재 열린 페이지가 어떤 것인가 체크할 수 있는 방법(conditional tags)이 있어서 이와 같이 활용하면 됩니다.
스크립트는 wp_enqueue_script라는 워드프레스 함수를 이용해서 파일을 통째로 연결을 할 수도 있습니다.
이 방법을 이용하면 다양한 jQuery 플러그인들도 이용을 할 수 있는 등 테마에서 기본 제공하는 효과나 동작 외에 내가 추가한 것들이 적용될 수 있습니다.
자식 테마는 워드프레스 사이트 구축 시 매우 유용한 커스텀 방식을 제공합니다. 여기에 워드프레스의 훅을 이용한 개발 방식은 기본적인 if 조건문만 파악할 수 있을 정도면 처음 시작 단계에서도 쉽게 적용할 수 있는 것들이 매우 많습니다. 오픈소스이며 전 세계의 개발자들이 다양한 커뮤니티를 통해 최대한 간단한 해법들을 제시해 주고 있으니까요.
아 커스텀이란 게 이렇게 하면 되는구나 알게 된 후라면, 이후에는 과연 어떤 테마를 선택해야 하는지 생각을 해 볼 수 있습니다. 외모만 보고 판단을 하는 것보다는 커스텀 시 얼마나 유연한가도 꼭 체크를 해 보실 것을 바랍니다. 추가로 테마는 워드프레스가 아니고 초반에 말한 것처럼 프런트 엔드를 보이게 하는 역할을 담당하는 워드프레스 웹사이트의 한 부분입니다. 부디 첫 시작 테마가 잘못된 만남이 되어 워드프레스까지 잘못 오해를 하는 일은 없으시기를 바랍니다.
끝.
