워드프레스 테마 만들기 준비과정

Posted on by pkchan

워드프레스는 CMS(contents management system)입니다. 만능 홈페이지가 아니에요. 인터페이스를 구성하는 테마와 기능을 구현하는 플러그인이 없다면 워드프레스는 아무것도 보여주지 않습니다. 설치와 동시에 기본 테마가 포함되는 이유죠. 그러나 이 콘텐츠를 관리하는 코어는 상당히 매력적입니다. 개인 블로그부터 대형 언론사까지 사용이 가능할 정도니까요.
워드프레스 테마를 구축하는 일은 생각보다 지루하고 어렵습니다. 처음 접한다면 더더욱 어렵다고 느껴집니다. 내가 만들어서 지정한 함수보다 워드프레스에서 기본으로 제공하는 함수가 많이 쓰이기 때문에 낯설게 느껴집니다. 되도록 쉽게 풀어서 이야기할 생각이니 차근차근 만들어 봅시다!! 생각보다 쉬워요!

어떤 테마를 만들것인가?

어떤 테마를 만들까. 단순하지만 재일 먼저 결정해야 할 일입니다. 내가 사용할 나만을 위한 테마를 만든다거나.. 내 친구들에게 배포할 테마를 만든다거나 국제적으로 배포할 수 있는 테마를 만들 수도 있습니다. 많은 사람들에게 공개될수록 새로운 기능에 대한 사용자 측 인터페이스도 생각해야 합니다. 열심히 만든 새로운 기능은 처음 접하는 사람에게는 어려운 기능일 테니까요.
BUILD WORDPRESS THEME 카테고리에서 만들 테마는,

1. 최신 버전 (4.7)을 지원하며, 향후 워드프레스 코어 업데이트 또한 무리 없이 가능해야 합니다.
2. 데스크톱, 모바일, 태블릿을 가리지 않는 반응형 디자인을 지향합니다.
3. 기본 테마인 2017(TWENTY SEVENTEEN)의 기능을 공유합니다. 분석해 봅시다.
4. 언어의 국제화를 지원합니다.

무엇이 필요한가?

일단 워드프레스는 설치가 되어있어야 합니다. 워드프레스는 설치형 CMS입니다. 워드프레스를 설치할 서버가 필요하고, 되도록이면 최신 버전이 설치되어 있으면 좋겠습니다.
기본적으로 HTML, CSS는 필수로 알아야 합니다. PHP, JAVA SCRIPT는 기초적인 지식이 있다면 수월합니다. 몰라도 상관없습니다. 차근차근 따라하다보면 알게됩니다. 중간중간 필요한 java script, ajax도 최대한 자세히 적을 생각입니다.
아, FTP로 접속하여 파일을 생성할 수 있는 프로그램이 필요합니다. 그리고 코드를 적을 수 있는 에디터도 필요하고요. 브라우져는 크롬 쓰시면 좋겠습니다. 크롬 개발자 도구가 엄청 유용합니다.

템플릿 계층구조(Template Hierarchy)

테마를 만들기 전에 계층구조를 이해할 필요가 있습니다. 계층구조, 하이어라키. 말이 어렵지만 쉬운 개념입니다. 워드프레스에서 사용자에게 보여주는 페이지(단락)는 생각보다 많지 않습니다. 이 페이지들의 역할만 정확히 이해한다면 계층구조는 쉽게 이해됩니다.

1. site front page
2. archive page
3. singular page
4. blog posts index page
5. search result page
6. comments popup page
7. error 404 page

1. site front page
단어 그대로 앞 페이지 입니다. 메인 페이지죠. 메인 페이지는 여러가지 정보를 담고 있습니다. 단순한 개인 블로그라면 카테고리별로 분류하지 않은 전체 포스트들이 인덱스되어 나오겠죠. 이는 4. blog posts index page와 같습니다. 또한 어떤 정적인 페이지가 메인이 될 수도 있겠네요. 정적인 페이지 안에 특정 키워드로 분류된 포스트를 넣을 수도 있습니다. 일반적인 홈페이지라면 첫페이지는 index.php 혹은 index.html입니다. 이는 워드프레스도 마찬가지죠. 그러나 워드프레스 계층구조는 다릅니다. 첫 페이지로 index.php를 선택하지만 사이트의 얼굴인 메인 페이지를 보여주기위해 front-page.php를 먼저 찾습니다. front-page.php 파일이 없다면, 다음으로 home.php 파일을 찾습니다. 또 없다면 마지막으로 index.php로 돌아옵니다. 그리고 index.php에 적힌 코드들을 브라우져에 띄우겠죠.

2. archive page
아카이브 페이지의 역할은 분류된 포스트를 정렬하는 페이지입니다. 워드프레스에서 분류(taxonomy)의 역할은 상당히 중요합니다. 모두가 알고있는 대표적인 분류로는 카테고리가 있겠네요. 외에 태그, 발행자, 날짜 등으로 분류가 가능합니다. 블로그 포스트를 보던 중에 어떤 태그를 클릭하면 그 태그에 해당하는 포스트 목록이 뜨는 페이지로 이동합니다. 이 페이지가 바로 아카이브 페이지 입니다. 워드프레스 계층구조는 분류별로 다른 페이지를 만들 수 있습니다. 태그를 클릭하면 처음으로 찾는 페이지는 해당 태그가 가지고 있는 슬러그를 기반으로 독자적인 페이지를 찾습니다. (tag-$slug.php) 두 번째는 아이디로 독자적인 페이지를 찾습니다. (tag-$id.php) 이 독자적인 페이지는 해당 태그만을 위한 페이지입니다. 다음으로 찾는 페이지는 tag.php입니다. 태그를 기준으로 분류하는 아카이브 페이지입니다. 태그들의 공통 페이지겠네요. 네 번째로 찾는 페이지는 archive.php입니다. 모든 분류들의 공통 페이지입니다. archive.php도 없다면, index.php로 이동합니다.

3. singular page
싱글러 페이지는 정적인 페이지, 혹은 하나의 포스트를 보여주는 역할을 합니다. 워드프레스에서는 어떤 분류를 기준으로 정렬되는 포스트와 이와는 별개로 독자적인 페이지를 만들 수 있습니다. 예를 들면 포스트와는 별개로 회사를 소개하는 페이지라든지 나에게 연락할 수 있는 contact 페이지 등이 정적인 페이지입니다. 이 정적인 페이지는 최소한의 분류는 가질 수 있지만 정렬할 수는 없습니다. 워드프레스는 특정 분류로 정렬되는 루프 안에 있는 포스트와 별개의 정적인 페이지로 이루어졌다고 해도 과언이 아닙니다.
이 하나의 특정 페이지 혹은 포스트를 보여주기 위해서도 계층구조는 존재합니다. 예를 들면 보여주고자 하는 포스트가 사진을 첨부한 포스트인지 아닌지 구별해서 서로 다른 페이지를 띄울 수도 있습니다. 하지만 아무런 페이지도 없다면 마찬가지로 마지막은 index.php입니다.

4. blog posts index page
전체 블로그를 정렬하여 보여주는 역할을 하는 페이지. home.php > index.php

5. search result page
검색결과를 정렬하여 보여주는 역할을 하는 페이지. search.php > index.php

6. comments popup page

7. error 404 page
에러화면을 보여주는 역할을 하는 페이지 404.php > index.php

참조 : https://wphierarchy.com/

 

기초 파일 생성

워드프레스가 설치되어있다면 wp-content 폴더가 생성되어있습니다. 이 폴더 안에는 테마, 플러그인 폴더가 있습니다. 테마 폴더로 들어가면 기본으로 설치된 테마들이 보입니다. 폴더와 파일 형태로 존재하죠. 기본 테마 중에 twentyseventeen 테마가 없다면, 곧 twentyseventeen 폴더가 없다면 새로 설치하시기 바랍니다. 필수는 아닙니다. 따로 분석해 보고 싶으신 분만 설치하시면 됩니다. twentyseventeen 테마를 참조하여 만들 예정입니다. 기본 테마는 첫 설치 시에 테마의 공백도 채워주지만 다른 역할은 레퍼런스의 역할도 있습니다. 새로운 기능을 추가하여 사용법을 직접 보여주는 역할도 가능하다는 이야기입니다. twentyseventeen 테마에는 site front page에 비디오 백그라운드를 새로 지원합니다. 새로 만들 테마에도 적용시킬 예정입니다.
twentyseventeen 테마도 설치하셨으면 새로 만들 테마의 이름으로 폴더를 하나 만들어줍니다. 폴더안에 index.php / function.php / style.css 3개의 파일을 만들어줍니다. 윗 단락의 계층구조에서도 설명했듯이 모든 페이지는 끝으로 index.php를 찾습니다. 이는 index.php / function.php / style.css 3개의 파일만으로도 테마는 만들어진다는 의미입니다.

Leave a Reply