|
개요. | |
|
본 글은 워드프레스에서 웹페이지 표현시의 구조와 이들 구조를 구성하는 모듈화된 워프의 템플릿 파일에 대한 정보들을 정리한다.
용어 : 웹페이지 는 워드프레스로 구축된 사이트를 웹브라우저에 볼 때의 한 화면을 지칭한다. ( 워드프레스 에서의 "포스트"와 "페이지" 라고 표현할때의 "페이지"를 의미하지 않는다. )
본 규칙은 다른 테마를 활용할 때, 혹은 자신이 직접 테마를 만들 때 모두 필요한 기본 개념 이해사항이다.
본 글의 내용은 codex 에서 제공하는 아래 3가지 정보 를 기반으로 요점만 정리한다.
1. Stepping into Template -> http://codex.wordpress.org/Stepping_Into_Templates
2. Template Hierarchy -> http://codex.wordpress.org/Template_Hierarchy
3. Theme Development -> http://codex.wordpress.org/Theme_Development | |
|
1. 워드프레스의 웹페이지 구조와 구성요소인 템플릿 파일들. | |||||
|
워드프레스로 구축된 사이트는 템플릿 파일(php파일임)들 여러 개를 조합하여 웹페이지를 구성하고 있다. 퍼즐같이 짜 맞추는 방식이다. 일부 템플릿 (header, footer 같은것 ) 은 모든 웹페이지에서 공통으로 보이고, 어떤 템플릿은 특정 조건에서만 보이게 된다. 웹페이지는 html 과 css style sheet 2가지 파일에 의하여 보이게 되며, 이들 파일은 테마 폴더에 저장되어있다.
워드프레스에서 많이 사용되는 구조를 보이면서 각 구조에 대한 설명을 한다.
그런데, 여기서 보이는 구조 및 각 테플릿 파일들은 워드프레스에서 많이 사용한다 뿐이지 강제하고 있는 사항은 아니다. 이 구조를 따르지 않아도 워드프레스로 웹페이지 구축가능하다. 특이한 구조의 표현을 해도 된다. 그러나, 표준적인 구조를 기반으로 한다고 해서 웹사이트가 다 동일한 개성없는 것으로 보이는것은 아니다. 표준화 된 구조에서도 창의적이고 인상적인 사이트 표현이 가능하며, 표준적인 구조를 도입했을 때의 장점은 다른 사람들이 만들어둔 리소스(플러그인들)를 도입하기 좋다는 것을 의미하게 된다. 예: 사이드바를 표현하지 않는것으로 구축했다면 사이드 바에 표현하는 위젯, 플러그인등은 전부 사용하지 못하게된다.
워드프레스 웹페이지 구성요소
아래 워드프레스로 구축된 웹사이트의 예를 보자. 브라우저 화면에 보이는 것과 같이 Header, Content, Footer, Sidebar 등으로 구성된다. 이들 요소를 모두 다 표현해야 하는 것은 아니며, 이 보다 더 많은 요소를 표현해도된다. 혹은 일부만 표현해도 된다. 통상적으로 아무리 적어도 header와 content 는 표현하게 된다.
Header 에 포함되는 것들. 1. Header 에는 html 의 <head> 태그내의 모든 사항(<doctype>,<meta>, css 링크 등)이 포함된다. 2. html 의 <body> 태그도 포함한다. </body> 는 포함안됨. 3. 사이트 타이틀, 메뉴,사이트로고 등 헤더에 표현되는 시각적인 요소들이 모두포함된다.
Content 에 포함되는것들. 워드프레스의 포스트와 페이지 의 1개글, 리스트글 등이 표현된다.
footer 에 포함되는 것들. 통상, 카피라이트 같은 것들이 많이 배치된다. html 태그 </body>,</html> 이 마직막에 배치되어있다. 즉, Head에서 열었던 태그를 닫아주는것임.
Sidebar 에 포함되는 것들. 위의 그림에서 사이드 바에 보이는것 처럼 새글 등을 표현해도 되고, 로그인 창이 배치되어도 되고, 임의로 활용가능하다. 사이드바에 배치하기 쉽도록 위젯이라는 모듈을 사용해도 된다.
위 4개의 골격중에 핵심에 해당하는 것은 Header와 Content 임을 알 수 있다. 즉, 최소한 html 규격이 있는 구간이다. 그외 footer와 Sidebar 는 임의로 선택가능하다.
테마폴더에 있는 템플릿 파일들.
위에서 기술한 header, content, footer, Sidebar 는 기능적으로는 저와 같은 식으로 표현 된다는 말이다. 이를 구현하는 방식은 다양한 방법이 가능하다. 하나의 php파일 내에서 모두 구현해도 되고, 모듈화 해서 분리해서 구현해도 된다.
워드프레스에서는 이들은 모듈화 해서 개별적인 php 파일로 다루도록 되어있다. 이를 템플릿 파일이라 부른다. 단, content 를 표현하는 것은 WordPress Loop 라는 코드로 처리되며, 그외 header, footer, sidebar 는 개별적인 php 파일들로 구현해야만 한다. 파일 이름도 지정된 header.php, footer.php, sidebar.php 로 해야만 한다. 각 파일들을 표현하고 싶은 곳에서 인클루드 시키면 된다. (인클루드 시키면 해당 php파일이 실행되는 것으로 생각하면 됨.)
테마 폴더 속에 있는 index,php 를 시작점으로 하여 웹페이지에 표현하는 동작이 시작된다.
테마파일의 index.php 는 2가지의 기능을 실행한다.
1. 다른 템플릿파일들을 호출한다. 2. WordPress Loop 를 실행한다. WordPress Loop 란 정보를 웹에 표현하는 기능을 한다. Loop이 실행되기 전에 이미 요청된 정보(웹브라우저의 주소 치고 엔터 쳤을때 전달되는 요청이라고 생각하면 됨)들은 데이터베이스로부터 가져와서 전역변수에 저장해두는 처리는 수행되어 있는 상태에서 Loop 이 작동되므로, Loop 은 이 변수들의 값을 표현하기만 하면된다.
WordPress Loop 에 대해서는 지금은 개요수준의 개념만 알고 진행하면 된다. 이에 대해서는 별도로 정리할 필요가 있다.
WordPress Loop 에 대한 codex 설명 -> http://codex.wordpress.org/The_Loop WordPress Loop 개념이해 요점 정리 보기 -> http://igotit.tistory.com/124
우리의 index.php 속에서 header 를 표현하기로 했고, footer 를 표현하기로 했다면, 아래처럼 각 php 파일을 인클루드 시키면된다. 통상적인 php 문법상의 인클루드 구문으로 해당파일을 포함시켜도 되는데 워드프레스에서 정의된 함수가 있다. 워드프레스에서 제공되는 함수를 활용하는 것이 타당하다.
위와 같이 index.php 에 header와 footer 파일을 인클루드 시키면 테마폴더속에 있는 header.php, footer.php 가 인클루드 된다.
그런데 위 코드에서는 content 를 표현하는 부분이 안보인다. 이를 처리하는 루틴인 WordPress Loop 로 처리되게 코드 추가되어야 한다. 즉, header 와 footer 사이에 "루프"가 배치되어야한다. WordPress Loop 에 대한 codex 설명 -> http://codex.wordpress.org/The_Loop
위와 같이 hear, content, footer 만 표현되었는데, 만일 sidebar도 표현하고 싶다면 아래처럼 sidebar 를 인클루드 하면된다.
템플릿 파일속에서 템플릿 호출.
예를들어, sidebar 에서 검색창을 넣고 싶다면, sidebar.php 파일내에서 검색창을 담당하는 템플릿 파일을 호출하면된다.(아래코드)
테마폴더에 템플릿 파일이 없다면?
앞의 글에 설명에서 get_header() 함수 호출하게 되면 워드프레스는 우리가 선택한 테마 폴더속에서 header.php 파일을 인클루드 시키게 되는데, 만일 테마 폴더에 header.php가 없다면 워드프레스 설치시 같이 설치되어 있는 "기본 템플릿"이 호출되게 된다. 이들 기본 템플릿 파일이 있는 경로는 워드프레스 설치 폴더 -> wp-include -> theme-compat 속에 있으며 아래 그림처럼 총 5개의 기본 템플릿 파일이 있다. 즉, 이들 파일에 대해서는 테마 폴더에 해당파일이 없는 경우 이 파일들이 인클루드 된다.
| |||||
|
끝. - 1. 워프의 웹페이지 구조와 구성요소(템플릿 파일) |
|
2. 포스트, 페이지, 카테고리, 태그 표현 템플릿. | |
|
앞에서 설명된 템플릿들은 워드프레스로 구축된 모든 웹페이지의 구조적인 전체적인 모습을 결정짓는 요소였다.
본 글에서 워드프레스에서 작성된 포스트와 페이지, 그리고 글들의 리스트를 표현하는 템플릿에 대해서 간략 정리한다.
포스트와 페이지를 표현함에 있어서, 개발자가 이들을 표현할 때 index.php내에서 모두 처리하도록 코딩해도 된다. 그러나, 워드프레스에서는 이를 처리하기 위한 별도의 템플릿 파일들을 준비해둘 것을 요구하고 있으며, 이 구조를 따르는게 편하다.
이 구조에 대한 상세한 설명은 codex -> http://codex.wordpress.org/Template_Hierarchy <- 이 글이 설명하는 요점은 워프로 구축된 특정 웹페이지가 보일 때 어떤 템플릿 파일이 사용되는가? 에 대한 상세한 설명글이다. 본 글에서는 이 링크에 있는 내용을 상세히 다루지는 않는다.
본 글에서는 개념의 골격을 이해하도록 한다.
포스트 1개를 표현하는 것. 브라우저에서 포스트를 1개를 보려고 할때, 워프에서는 아래처럼 처리한다.
워프 설치시 기본 생성된 포스트인 경우. - 워프에서 기본 생성된 포스트는 템플릿 파일을 다른것으로 선택 불가능하다. 포스트 1개를 표현할때 사용되는 템플릿 파일은 single.php 이다. 단, single,php 파일 없다면 index.php 를 이용하여 표현한다. 사용자 정의 포스트인 경우. - single-{post_type}.php 가 있다면 이 파일을 이용하여 먼저 표현 없다면 single.php 이 파일도 없다면, index.php 를 이용하여 표현. 즉, 일반적으로 표현하면 아래 순서. 번호는 우선순위를 의미함.
페이지 1개를 표시하는 것. 브라우저에서 페이지 1개를 보려고 하는 경우, 워프에서의 처리.
페이지는 템플릿을 여러개 만들어 둘 수 있고, 페이지마다 템플릿을 달리 지정을 달리 할 수 있다. 따라서, 워프에서 표현할 때도 먼저 지정된 별도의 템플릿을 먼저 표현하게 된다. 지정된 템플릿이 없다면 page.php 로 표현한다. 이 파일 없다면 index,php 로 표현한다. 일반적인 모든 상황에 대한 페이지 1개 표현할 템플릿의 표현순서는 아래 순서다. 1,2,3 번호는 워프에서 표현시 우선순위. 1이 없다면 2...,
카테고리 표현하는 것.
브라우저에서 카테고리를 클릭하여 볼려는 시도가 있을때, 워프에서는 자동으로 아래 과정으로 처리된다. category.php 로 표현한다. category.php 파일이 없다면 archive.php 을 이용한다. archive.php도 없다면 index.php 를 이용하여 표현한다.
일반적인 모든 상황에 대한 카테고리 표현 순서는 아래다. .
Tag 표현하는것.
브라우저에서 tag 클릭하여 볼려는 시도가 있을때, 워프에서 보이는 처리 수행 tag.php, tag.php 없다면 archive.php, archive.php 없다면 index.php. 일반적인 모든 상황에서 Tag 표현하는 순서.
카테고리, 태그 표현 관련 추가설명.- 리스트 정보 표현의 다양화 가능.
앞의 카테고리와 태그의 표현에서 공통적으로 사용될 수 있는것은 archive.php 이다. 즉, 카테고리나 태그 모두 포스트들의 리스트이며 특정 카테고리를 클릭했을때 포스트리스트를 보이는 것이나 태그를 클릭했을때 포스트리스트나 동일한 표현을 할때는 archive.php 1개로 모두 표현하면된다. 그러나, 만일 카테고리를 표현하는 것과 태그를 표현하는 것을 달리 처리하고 싶다면, 테마에 category.php 를 만들어두면 된다. 한편, 카데고리나 태그 모두 세분화하여 다른 표현이 가능하다. 예를들어 카테고리가 "나의 그림" (카테고리 아이디 2라고 하자.) "수필" (카테고리 아이디 3이라고 하자.)이라는 카테고리가 있는데 "나의 그림" 에는 그림들이 주로 있을것이다. 따라서 나의그림을 클릭했을때 보이는 모습은 이미지 리스트를 보이는게 좋을 것이다. 한편 수필 이라는 카테고리에는 글제목과 요약문위주로 리스팅 하는것이 좋을 것이다. 이들 각각을 표현하는 수단으로 category-{id}.php 이름을 가진 템플릿을 준비해두면 된다. category-2.php는 나의그림 카테고리 표현시 사용할 템플릿이 되고 category-3.php는 수필을 표현하는데 사용할 수 있고 표현방식을 달리 할 수 있다. 이는 태그도 마찬가지다.
| |
|
끝.- 2. 워프에서 포스트, 페이지, 카테고리, 태그 표현 템플릿. |
|
본 글이 포함된 통합 정리 글
WordPress 활용정보 정리 : http://igotit.tistory.com/23
|
///123.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
| 워드프레스 루프(Loop) 이해하기. - 웹페이지에 정보 표현 하는 코드부 (0) | 2014.10.21 |
|---|---|
| 워드프레스 테마 만들기 2편. index.php 수정하고 템플릿 추가하기. (0) | 2014.10.21 |
| 워드프레스가 테마를 보이게 하는 내부 처리 과정 간략히 살펴보기. (0) | 2014.10.20 |
| WooCommerce Multilingual 플러그인 설치하기. 다국어 플러그인 WPML 환경에서 우커머스 사용시 (0) | 2014.10.19 |
| 워드프레스 우커머스 설치, 둘러보기. (0) | 2014.10.19 |
댓글