워드프레스로 구축된 사이트는 템플릿 파일(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 문법상의 인클루드 구문으로 해당파일을 포함시켜도 되는데 워드프레스에서 정의된 함수가 있다. 워드프레스에서 제공되는 함수를 활용하는 것이 타당하다.
<?php get_header(); ?> // header.php 파일을 인클루드한다.(실행시킨다.)
<?php get_footer(); ?> // footer.php 템플릿 파일을 인클루드 한다.(실행시킨다.)
|
위와 같이 index.php 에 header와 footer 파일을 인클루드 시키면 테마폴더속에 있는 header.php, footer.php 가 인클루드 된다.
그런데 위 코드에서는 content 를 표현하는 부분이 안보인다. 이를 처리하는 루틴인 WordPress Loop 로 처리되게 코드 추가되어야 한다. 즉, header 와 footer 사이에 "루프"가 배치되어야한다. WordPress Loop 에 대한 codex 설명 -> http://codex.wordpress.org/The_Loop
<?php get_header(); ?> // header.php 파일을 인클루드한다.(실행시킨다.)
이 자리에 WordPress Loop 가 배치되어 포스트, 페이지 등의 모든 정보를 표현하는 처리가 이뤄짐.
<?php get_footer(); ?> // footer.php 파일을 인클루드 한다.(실행시킨다.)
|
위와 같이 hear, content, footer 만 표현되었는데, 만일 sidebar도 표현하고 싶다면 아래처럼 sidebar 를 인클루드 하면된다.
<?php get_header(); ?> // header.php 파일을 인클루드한다.(실행시킨다.)
이 자리에 WordPress Loop 가 배치되어 포스트, 페이지 등의 모든 정보를 표현하는 처리가 이뤄짐.
<?php get_sidebar(); ?> // sidebar.php 파일을 인클루드 한다.(실행시킨다)
<?php get_footer(); ?> // footer.php 파일을 인클루드 한다.(실행시킨다.)
|
템플릿 파일속에서 템플릿 호출.
예를들어, sidebar 에서 검색창을 넣고 싶다면, sidebar.php 파일내에서 검색창을 담당하는 템플릿 파일을 호출하면된다.(아래코드)
<?php get_search_form(); ?>
|
테마폴더에 템플릿 파일이 없다면?
앞의 글에 설명에서 get_header() 함수 호출하게 되면 워드프레스는 우리가 선택한 테마 폴더속에서 header.php 파일을 인클루드 시키게 되는데, 만일 테마 폴더에 header.php가 없다면 워드프레스 설치시 같이 설치되어 있는 "기본 템플릿"이 호출되게 된다. 이들 기본 템플릿 파일이 있는 경로는 워드프레스 설치 폴더 -> wp-include -> theme-compat 속에 있으며 아래 그림처럼 총 5개의 기본 템플릿 파일이 있다. 즉, 이들 파일에 대해서는 테마 폴더에 해당파일이 없는 경우 이 파일들이 인클루드 된다.
|