웹템플릿으로 테마 만들기
워드프레스 활용 이야기
워드프레스 테마?
제가 워드프레스를 처음 접하고 했던 것들을 잠시 떠올려 보면, 여러 테마를 설치해 보고 데모대로 화면을 꾸며 보고 하면서 흥미를 더했던 기억이 납니다. (초기에는 원클릭 데모 설치 이런 게 아니어서 데모대로 표시하는 것도 일이었던 적이 있습니다;) 그렇지만 이걸 대체 왜 설치를 해야 하는 것이고 어떤 원리로 표시가 되는 것이며, 어떻게 구성이 되는 것인지는 한참이 지나 테마를 만드는 과정을 직접 해 보고 알게 됐던 것 같습니다.
지난번 다뤄본 글을 통해 알게 된 템플릿들 중 원페이지 형식이 아닌 글이 쌓이는 구조의 것이 보여서 이번에는 이 템플릿을 활용해서 워드프레스 테마를 만드는 과정을 소개하면 좋을 것 같아 준비해 봤습니다.
> https://www.styleshout.com/free-templates/spurgeon/ (페이지, 글 조합)
워드프레스 사이트를 만드는 방법에는 여러 가지가 있습니다. 그중에 이번에 다룰 내용은 맞춤형 테마 제작의 아주 간단한 예에 해당이 될 듯합니다.
맞춤형 워드프레스 웹이 제작되는 과정을 제 나름대로 정리를 해 보면,
1. 기획과 디자인을 통해 psd나 기타 방법을 통해 디자인 결과물이 나옵니다.
2. 이걸 퍼블리셔가 디자인대로 웹 화면 구성이나 동작 표현을 위해 퍼블리싱을 하게 됩니다. (html, css, js 조합)
>> 여기까지 해서 나올 수 있는 것이 오늘 이용할 '웹 템플릿 팩'이라 보면 될 듯합니다. 화면의 구성 및 동작 구현까지는 이미 완료가 된 상황인 것이죠.
3. 이제 퍼블리싱된 결과물을 워드프레스 테마 형태로 전환을 하는 과정이 필요합니다. (어드민에서 페이지나 글들을 관리하기 위함)
그럼 이제 3번을 위해 했던 내용을 시간 순으로 한 번 정리를 해 보겠습니다.
1-1. 템플릿의 다운로드 및 화면 구성, 동작 확인
Spurgeon 템플릿을 다운로드한 다음 웹 호스팅이나 로컬 웹 환경에서 테스트를 해 봅니다. (했던 과정을 다시 진행해 보려고 저는 xampp를 통한 로컬 웹 환경에서 확인했습니다.)
파일을 복사해서 열어 보니 전체적으로 에러 없이 화면 구성 및 동작이 잘 이뤄지는 것을 확인할 수 있었습니다. 호스팅 서버 공간에서 가장 먼저 index.html 파일이 열리고 이 파일에서 연결된 css나 js 파일들도 모두 연동이 되어 웹 화면이 돌아가는 원리입니다.
1-2. (템플릿 파일들을 지우고) 워드프레스를 설치합니다.
웹 호스팅에 1번에서 올려본 파일들은 이후에 테마 형태로 전환이 되어야 합니다. 이걸 지우고 이 공간에 워드프레스 설치를 위한 파일들을 업로드한 다음 우선 워드프레스를 설치합니다. 워드프레스 설치 파일도 잘 보면 index.php 파일이 보입니다. 연결 연결되어서 화면을 표시하는 것은 wp-content 폴더 내에 있는 테마가 담당을 하게 될 겁니다. 우선 이곳에 템플릿 폴더를 복사합니다.
어드민에서 확인을 해 보면, 테마 형태가 아닌 게 있다는 메시지가 표시됩니다. 아직 테마의 구조를 갖추질 못 한 채 테마들이 있어야 할 폴더에 복사가 됐기 때문입니다.
1-3. 템플릿을 테마로 인식시키기
워드프레스의 테마가 되기 위해서는 최소한 style.css와 index.php 파일이 있어야 합니다. 폴더에 style.css 파일을 만들고 테마의 기본 정보를 적어 줍니다. index.html은 확장자를 .php로 변경합니다.
이제 외모> 테마에서 테마를 활성화(active) 한 후 주소를 열어 보면, html 태그들로만 이뤄진 화면이 나오는 걸 볼 수 있습니다. 왜냐하면 기존에 index.html에 연결된 css 파일들과 js 파일들이 아직 제대로 연결이 안 된 상황이기 때문입니다. (루트에 있던 때와 경로가 달라짐. 조치 필요)
1-4. css, js 파일 연결 수정
style.css, index.php 외에 테마에 필요한 각종 php 코드들을 작성할 파일이 필요합니다. 워드프레스에서는 functions.php라는 이름의 파일을 만들면 코드가 작동되도록 약속이 돼 있습니다. 이 파일을 하나 만들고 워드프레스에 맞게 css 파일들과 js 파일들을 연결하는 내용을 적습니다. 이때 index.php에 link, script로 연결한 파일들은 주석처리를 한 다음, wp_head() / wp_footer() 연결고리를 적어 놓습니다.
이제 사이트를 열어 보면 스타일과 스크립트가 연결되어 기존 템플릿의 구조와 같이 표시되는 걸 볼 수 있습니다. 하지만 이미지는 기존에 루트에 있는 것을 기준으로 경로를 작성했기에 제대로 표시가 되지 않네요. 경로를 테마 폴더까지 연결되도록 수정해 주면 메인 화면은 정상적으로 표시가 되는 게 확인됩니다.
( 'images/'로 적혀 있는 이미지 경로들을 '<?php echo get_stylesheet_directory_uri(); ?>/images/'로 변경)
여기까지가 템플릿 팩을 가지고 워드프레스 테마 폴더에서 웹 화면이 나오도록 하는 기본 작업이 되겠습니다.
워드프레스 사이트의 화면은 테마 폴더에 위치한 테마 중 외모 > 테마에서 active 한 테마의 폴더 내 파일들을 통해 화면을 구성한다로 이해하시면 되겠습니다.
다음으로 해야 할 부분들을 정리해 봅니다. 어드민을 활용하는 테마로 변경이 되는 과정이 되겠습니다.
1) index.php 파일에서 헤더, 푸터 부분을 분리해서 header.php, footer.php로 복사하고 index.php를 간소화
2) 헤더의 html 리스트로 구성된 메뉴를 워드프레스 외모 > 메뉴에서 관리하도록 수정
3) 메인 페이지에 워드프레스의 글(post)이 표시되도록 수정
4) 카테고리별 목록이 나오는 템플릿 파일 추가
5) 페이지를 어드민 편집기에서 작성한 내용이 나오도록 템플릿 파일 추가
6) 글이 표시되는 화면을 위한 템플릿 파일 추가
7) 검색 결과를 위한 템플릿 파일 추가
2-1. index.php에서 헤더, 푸터 부분을 분리
이후 index.php 파일을 정리 및 완료한 다음 여기서부터 여러 템플릿 파일들을 만들게 될 것인데 그전에 헤더와 푸터는 한 곳에서 관리할 수 있게 분리를 합니다.
주 콘텐츠가 나오기 전까지의 html 코드를 잘라낸 다음, header.php라는 파일을 만들고 여기에 붙여 넣습니다. 그다음 헤더가 연결되도록 '<?php get_header(); ?>'라는 코드를 적어주면 두 템플릿이 연결됩니다.
푸터 부분은 footer 태그가 시작되는 부분부터 끝까지를 잘라내어 footer.php에 붙여 넣고, 원래 있던 자리에는 '<?php get_footer(); ?>'라는 코드를 적어주면 됩니다.
이제 index.php에는 <section>으로 시작해서 </section>으로 끝나는 본문 내용만 남게 됩니다.
2-2. 헤더 메뉴를 워드프레스 어드민에서 관리하도록 변경
header.php를 열어 보면 ul, li로 구성된 리스트 태그들로 코드로 구성된 내비게이션 메뉴들이 있습니다. 이걸 워드프레스 어드민에서 '외모 > 메뉴'에서 관리를 하도록 수정하는 과정입니다. 우선 메뉴를 만들어야 표시를 할 수 있으므로 어드민을 들어가 봅니다. 그런데 메뉴가 아직 보이질 않습니다. 아직 이 테마에서 메뉴를 쓰겠다 등록을 해 주지 않아서인데 간단한 코드를 functions.php에 추가하면 메뉴가 표시되는 게 확인될 것입니다.
아직 페이지나 카테고리 링크들은 만들어진 게 없으므로 사용자 정의 링크로 임시로 메뉴들을 구성한 다음, 보이는 위치로 Main Menu를 체크하고 저장합니다. 이제 메뉴의 목록이 어드민에서 만들어진 것이고 이걸 표시하기 위해서 header.php에 아까 확인했던 ul 리스트 대신 wp_nav_menu()를 이용해서 교체해줍니다.
외모 > 메뉴에서 구성한 그대로 표시가 되면 성공입니다.
2-3. 반복 콘텐츠 부분을 워드프레스 글을 표시하는 것으로 변경
메인 페이지를 보면 상단에 슬라이드가 되는 글들과, 그 아래 12개의 페이지네이션(페이지 네비)이 있는 목록 화면으로 퍼블리싱이 된 것을 볼 수 있습니다. 크게 보면 2개의 목록 화면이 준비가 되면 되는 구조입니다. 대신 아래에 있는 글의 목록을 주로 하고, 위에 슬라이드가 되는 것은 운영자가 직접 지정을 할 수 있도록 붙박이 글(stiky post)로 지정해서 표시하는 것으로 가정을 해 봤습니다.
먼저 주요 목록으로 볼 수 있는 아래쪽 목록부터 제작을 해 봅니다. 1개의 글은 html상 <article> 태그부터 </article> 태그까지이고 이게 반복이 되어 표시가 되고 있습니다. 즉, 어드민에서 작성된 글(post)들이 이 구조 내에서 표시가 되는 반복문이 준비가 되면 되는 것입니다. 워드프레스에는 데이터베이스에 저장된 콘텐츠를 불러오는 가장 기본적인 코드가 있습니다. Loop라고 하는데요 이 안에 1개의 arcicle 태그 안의 구조를 이용해서 어드민에서 작성될 콘텐츠와 매치될 내용들을 불러오는 탬플릿 태그들로 교체하면 글들이 같은 구조로 순서대로(기본:최신 글부터) 불러와지게 됩니다.
article 12개 중 1개만 남기고, 루프 내에서 내용은 template tags로 교체목록이 제대로 표시가 되는지 확인을 위해서 우선 콘텐츠가 있어야 합니다. 템플릿 완성본에서 12개의 글을 post로 똑같이 만들어 봅니다. 이때 특성 이미지 등록 및 사용을 위해서는 functions.php에 아래 코드를 추가해 줘야 합니다.
/**
* 특성 이미지 사용
*/
add_theme_support( 'post-thumbnails' );
글 12개를 등록 후 사이트를 열어 보면 이 중 10개의 글만 나오지만 퍼블리싱했던 대로 잘 표시가 되는 걸 볼 수 있습니다. (퍼블리싱 및 화면 구성은 이미 템플릿 제작 단계에서 완료가 된 것이라 가능. 태그와 class만 맞추면 됨) 글이 10개만 표시가 되는 이유는 '설정 > 읽기 > 페이지당 보여줄 글 수' 옵션이 관여를 하기 때문입니다. 아래쪽 페이지네이션도 체크를 해 봐야 하므로 8개씩 표시로 변경을 해서 저장했습니다.
템플릿에서 표시한 페이지네이션대로 페이지 번호 및 전, 후 버튼을 표시하려면 워드프레스 기본 페이지네이션으론 다소 어렵고, functions.php에 커스텀 페이지네이션을 하나 만들어 사용했습니다. index.php에서 html 코드로 돼 있던 페이지 번호들을 새로 만든 구조로 대체합니다.
이제 2페이지에서는 4개의 글, 1페이지에서는 읽기에서 설정한 대로 8개의 글이 표시됩니다. (워드프레스는 주소가 곧 보일 콘텐츠를 좌우합니다)
상단의 전체 화면으로 슬라이드가 되는 것도 이제 포스트로 작성하는 것으로 변경할 차례입니다. 마찬가지로 article 태그로 감싸진 3개의 글이 임시로 만들어져 있는데, 이 중 1개를 기준으로 반복문을 작성하면 되겠습니다. 이때 추가로 루프를 사용하게 되는데요, 워드프레스에서는 커스텀 루프를 한 페이지에서도 여러 개 사용을 할 수 있습니다. 부분별로 특정 글들을 모아서 보여주는 경우가 이를 이용한 것인데, 차이가 있다면 구문이 살짝 다르다는 것, 그리고 끝에 페이지의 기본 루프에 영향을 주지 않도록 작성하는 reset 문을 써줘야 하는 것 정도가 되겠습니다.
테스트를 위해 4개의 붙박이 글(sticky post) 4개를 만들고 사이트 주소를 열어 보면 총 4개의 글이 슬라이드 되는 것을 볼 수 있습니다.
2-4. 카테고리별 목록이 나오는 템플릿 파일 추가
홈에서 본 모양과 같은 디자인의 리스트가 나오되 상단에 카테고리 제목이 나오는 구조입니다. 이미 목록 화면은 index.php에서 만들어 놨기 때문에 이를 이용하면 되는데, 테마 폴더에 category.php 파일을 만들고 index.php 내용을 복사합니다. (category.php가 테마 폴더 내에 있으면 이걸 먼저 읽게 되는 기본 규칙이 있습니다. 워드프레스 템플릿 계층)
홈 화면의 슬라이드 부분은 지우고 카테고리 화면으로 퍼블리싱된 구조대로 현재의 카테고리 이름을 표시하는 코드를 추가합니다.
2-5. 페이지를 표시하는 템플릿 파일 추가
페이지는 제목 아래로 워드프레스 편집 화면을 통해 작성한 내용 그대로를 표시하도록 하는 템플릿 파일을 만들어 주겠습니다.
2-6. 글 내용을 표시하는 템플릿 파일 추가
페이지 템플릿 파일을 복사하여 single.php 파일을 만듭니다. 제목 아래 글의 작성자, 작성일, 카테고리와 같은 메타 정보들이 추가가 되고, 페이지 하단에는 이전글, 다음글로 이어질 수 있는 글 내비게이션을 추가했습니다. (※ 댓글 부분은 시간 관계상 생략했습니다.)
2-7. 검색 결과를 보여주는 템플릿 파일 추가
헤더 부분에 돋보기 아이콘을 클릭하면 검색을 할 수 있는 폼이 있습니다. 여기에 키워드를 입력 후 검색을 하게 되면 index.php를 이용해서 목록을 보여주게 되는데, 어떤 단어를 찾은 것이지와 불필요한 검색 결과(페이지도 포함)를 빼면 더 나을 듯합니다. 이럴 때엔 index.php를 복사해서 search.php 파일을 만들어서 화면을 구성하면 됩니다. 검색 제한은 functions.php에 코드를 추가하면 제어 가능합니다.
여기까지 완료를 하면 템플릿을 워드프레스 CMS로 제어 가능한 테마 형태로 변환하기가 완료됩니다.
> 테스트 사이트 : https://oks-dev.tk/themebasic/
아주 기초적인 코드 작업만 한 것이다 보니 아직 고려해서 다듬을 부분들이 많지만, 테마가 작동하는 방법이나 어떤 유료 테마를 이용하지 않고 퍼블리싱 후 테마로 전환을 하는 맞춤형 테마 제작 방식이 이런 거구나 참고 정도는 될 수 있을 듯합니다.
오래간만에 템플릿 파일들을 가지고 구조를 만들고 관련 코드를 살피다 보니 시간 가는 줄도 모르고 정리를 한 듯한데요, 위의 방식과 유료 테마를 설치한 다음 사이트를 제작하는 것과의 가장 큰 차이점이 있다면 페이지나 기타 화면을 제작 시 페이지 빌더가 있고 없고인 듯합니다. 결국은 웹 화면은 html과 css, js 조합으로 방문자에게 표시가 될 것인데, 처음 제작 후 사이트의 수정이나 리뉴얼할 부분이 많은 경우에는 이 맞춤형 제작 방식은 다소 불편할 수도 있습니다. 이건 만들어준 사람이 제일 잘 알 수밖에 없는 구조이니까요. (맞춤형 테마에 대한 추가 커스텀 의뢰를 받아 본 경험상) 확장성이나 이후 직접 여러 가지로 웹을 활용하려면 가볍지만 빌더가 있는 테마를 이용하는 것을 개인적으로는 더 추천하고 싶습니다.
너무 많은 양을 하나의 글에 담으려다 보니 욕심이 과했나 싶기도 한데요, 테마에 대한 이해를 하는데 조금이나마 도움이 되었기를 바랍니다.
끝.
