|
본 글은 "워드프레스 테마 만들기" 시리즈 글 2편이며, 1편에 연결된 내용임. 1편을 보고 이 글을 봐야함.
워드프레스 테마 만들기 1편. 시작점 style.css, index.php 보기 -> http://igotit.tistory.com/85
|
|
개요. | ||
|
본 글은 이전 "워드프레스 테마만들기 시작점" 에서 만들어 뒀던 index.php 파일의 내용을 html 형식에 맞게 온전한 html 문서로 수정해서 html 형식으로 표현된것 맛보기를 하고, index.php 파일을 워드프레스 형식대로 변경하는 작업까지 정리 한다. 이 과정에서 추가의 템플릿 파일 2개 (header.php, footer.php) 가 테마에 추가된다.
1편 글에서는 워드프레스에서 테마로 인식되는 최소한의 파일인 style.css, index.php 2개의 파일만으로 만들어진 초간단 테마였다. index.php 의 내용에는 최소한의 html 형식도 지키지 않은 문구만 아래 처럼 기록했었고,
위 index.php 가 웹에서 보이는 모습은 아래 그림과 같았다.
본 글에서 최종 수정된 Skeleton 테마가 웹에서 보이는 모습. | ||
|
1. index.php 를 html 형식에 맞게 수정하기. | ||
|
index.php 파일 내용을 아래 처럼 수정하자. html 로 웹페이지를 표현하는 가장 기본적인 태그들만 이용했다. 제일 앞의 <!DOCTYPE html>은 없어도 되는데, 본 html 이 html5 임을 표식하는 것이다. head 내에는 meta, title, css 등이 배치되는 장소인데, 우리는 title 만 넣었다. 타이틀에 기록한 내용은 브라우저의 최상단에 보이게 된다. body 에는 글자 표현과 이미지표현 2가지를 표현하고 있다. index.php 는 메모장 등으로 편집해도 된다. (주의사항 : 저장시 UTF-8로 할 것. 방법보기 -> http://igotit.tistory.com/84 )
위와 같이 index.php 를 수정하여 워드프레스 테마 폴더에 업로드하고, 웹에서 보게 되면 아래처럼 보임.
index.php 의 내용을 html 형식에 맞게 구성하였다. 이를 출발점으로 하여 웹페이지를 구축해나가도 된다. 워드프레스 기반구조를 이용하지 않고 사이트를 구축하는 경우에는 이렇게 직접 html 과 php 코드를 이용한 데이터베이스 접속 처리부, 데이터베이스의 데이터 기록, 읽기, 삭제 기능 등의 코드를 직접 추가 하면서 구축해도 된다. 그런데, 이와 같은 직접 코딩 방식으로 구축하기 위하여 워드프레스 기반으로 테마를 만드는건 아니다. 이후, 우리는 본 예의 html 코드 기반으로 테마 만들기는 진행하지 않는다. 워드프레스에서 지정된 형식으로 구현 진행할 것이며, 아래 그 내용을 다룬다.
| ||
|
끝 - 테마의 index.php 파일 html 형식으로 수정 |
|
2. 워드프레스 방식으로 index.php 파일 수정하고 템플릿추가. | ||||||
|
워드프레스 방식으로 index.php 파일을 수정할려면 워드프레스에서 지정된 방법을 알아야 할 것이다.
워드프레스의 웹페이지 구조와 테마의 템플릿 파일에 대한 규칙은 별도로 정리해뒀으며 (보기 -> http://igotit.tistory.com/123 ) 본 글에서 다루는 내용을 위한 사전 필수지식이다.
위 링크의 내용에 따르면 결론적으로 우리는 index.php 내용을 수정하고, 테마폴더에 header.php, footer.php 파일2개를 추가해야한다.
index.php 수정사항. 파일은 아래처럼 수정한다. 앞의 html 로 만든 것에서 body 속의 내용은 동일하고, 앞부분에 <?php get_header(); ?>가 추가되었고, 뒷부분엔 <?php get_footer(); ?> 가 추가된 것이 전부다. 이 코드의 의미는 header.php 를 포함시키고, footer.php 를 포함시킨다는 의미다. 아래 수정한 index.php에서의 header 와 footer사이 부분은 Content 표시하는 부분은 워드프레스의 형식에 맞춘건 아니다. 이 자리에는 Loop 라는 이름으로 불리는 처리부가 들어와야 한다. 이건 지금 하지 않는다.
header.php 새로만들기. 아래 처럼 header.php 새로 만들어서 테마폴더에 넣어둔다. 이 코드는 앞의 html 의 앞부분이다.
footer.php 새로만들기. 아래처럼 footer.php 파일을 새로 만들어서 테마폴더에 넣어둔다. 이 코드 역시 앞의 html 하단부분의 태그 닫아주는 처리가 전부다.
(주의사항 : php파일 메모장으로 저장시 UTF-8로 할 것. 방법보기 -> http://igotit.tistory.com/84 )
위 내용은 사실 앞의 1에서 만든 html 형식을 분리해둔 것이 전부다. 수정된 index.php 가 서버측에서 파싱될때는 앞의 1의 코드와 완전히 동등하므로 웹에서 보이는 모습도 동일하다(아래 그림). 실제 워드프레스의 형식이 이렇다. 각각의 파일마다 세부적인 코드가 확장 추가되면 된다. 이제, index.php, heder.php, footer.php 를 테마폴더에 올리고 웹에서 보이는 모습을 보면 아래 그림이다. (당연히 앞의 1과 동일하다.)
위 보이는 모습으로는 어디까지가 header이고, 어디가 footer 영역인지 모호하므로 아래처럼 header.php 와 footer.php 를 수정하자.
header.php 수정. 아래 파란색 추가됨. <hr> 은 줄긋기임.
footer.php 수정 아래 파란색 추가됨.
웹에서 보이는 모습. header 영역, Content 영역, footer 영역을 확실히 알 수 있다.
위 테마 만들기 시험중인 워드프레스 사이트 보기 -> http://igotit.kr/theme-skeleton/
정리. - index.php 내용을 워드프레스 형식으로 변경하였고, 테마에 2개의 템플릿 header.php, footer.php 추가하였음.
| ||||||
|
끝. - 워드프레스 방식으로 index.php 수정하고, 2개의 템플릿파일 테마에 추가하기. |
|
본 글은 "워드프레스 테마만들기" 시리즈 글 2편이며, 2편에 연결된 3편 보기.
워드프레스 테마만들기 3편. index.php에 Loop 구현하기. 보기 -> http://igotit.tistory.com/125
|
|
본 글이 포함된 통합 정리 글
WordPress 활용정보 정리 : http://igotit.tistory.com/23
|
///122.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
| 워드프레스 테마 만들기 3편. Loop 구현하기. (0) | 2014.10.22 |
|---|---|
| 워드프레스 루프(Loop) 이해하기. - 웹페이지에 정보 표현 하는 코드부 (0) | 2014.10.21 |
| 워드프레스 웹페이지 구조와 구성요소인 템플릿 파일 이해하기. (0) | 2014.10.21 |
| 워드프레스가 테마를 보이게 하는 내부 처리 과정 간략히 살펴보기. (0) | 2014.10.20 |
| WooCommerce Multilingual 플러그인 설치하기. 다국어 플러그인 WPML 환경에서 우커머스 사용시 (0) | 2014.10.19 |
댓글