워드프레스 테마 만들기 4편. 포스트 표현용 템플릿 single.php 추가하기

본 글은 "워드프레스 테마 만들기" 시리즈 글 4편이며, 3편에 연결된 내용임. 3편을 보고 이 글을 봐야함.   워드프레스 테마 만들기 3편. index.php에 Loop 구현하기. 보기 -> http://igotit.tistory.com/125

 

 

 

 

	개요
	본 글에서는 테마(이름 : Skeleton) 에 포스트 표현용 템플릿 single.php 를 추가하여 웹페이지에서 포스트 1개를 볼 수 있는 기능을 구현한다.   테마만들기 3편(http://igotit.tistory.com/125 ) 의 코드상태에서 추가되는 부분만 정리됨.

 

 

	1.테마에서 포스트 표현용 템플릿 single.php
	워드프레스는 항상 기본포스트와 기본 페이지를 작성할 수 있는 상태로 되어있다. 워드프레스 관리자 메뉴에 보이는 포스트와 페이지 가 그것이다. 우리가 이것을 추가한 것은 아니었다. 어떤 테마를 사용하든 기본 포스트와 페이지는 항상 있다.   현재 제작중 인 테마역시 기본 포스트와 페이지가 있으며, 지난 3편글에서는 기본 포스트 들의 리스트를 화면에 출력했었다. (아래 그림 붉은 박스)   지난 3편에서 제작된 것에서는 위 포스트를 개별적으로 보기 위하여 링크를 클릭해도 (예 : 안녕하세요 를 클릭해보면) 아래처럼 해당 글의 내용은 보여주지 않고, index.php 를 보여주고 있는 상태다.     위와 같이 포스트 1개를 보려고 시도했으나, index.php 가 보이는 이유는 우리 테마에 single.php 를 만들어 두지 않았기 때문이며, 워드프레스는 기본포스트에 대해서 항상 single.php 를 이용하여 표현하도록 지정되어있다. 만일 single.php 파일이 없다면 index.php 를 이용하여 화면에 보이는 처리를 하게된다. 따라서, 우리의 테마에도 single.php 를 추가하자. 필수 : 위 내용에 해당하는 일반적인 워드프레스의 처리방식에 대해서는 필수 이해하고 있어야만한다. 보기 -> http://igotit.tistory.com/123 .     single.php 추가하기.   메모장 같은걸로 single.php 파일만들고 (저장시 UTF-8 로 할것 방법 보기 -> ) 내용은 아래처럼 작성한다. header와 footer 를 포함하는 것은 index.php 와 동일하다. 우리가 single.php에서 추가할것은 1개의 포스트 정보를 표현하도록 content 영역만 코딩하면 된다.   index.php 의 loop 처리와 크게 다른 건 없다. if 문 while 문 동일하다. while 문이 있다해도 포스트 1개 볼 때는 포스트 리스트에 1개만 들어와있는 상태가 되기 때문에 1개의 포스트만 보이게된다.   <?php get_header(); ?> <p>현재 페이지는 single.php 로 표현되는 중임</p> <?php if (have_posts()) :    while (have_posts()) : the_post(); ?>          <p>제목 : <?php the_title();?> </p>          <?php the_content();?>          <br> <?php    endwhile; endif; ?> <?php get_footer(); ?>   위 코드대로 작성된 single.php 를 테마 폴더에 업로드하면 첫페이지에서 글 하나를 클릭하면 해당 포스트의 제목과 내용이 보이게 된다. 아래 그림.
	끝. - 테마에 single.php 추가하여 워드프레스의 기본 포스트 1개를 표현하게 함.

 

 

위  테마를 시험 운영 중인 워드프레스 사이트 보기 -> http://igotit.kr/theme-skeleton/

 

 

본 글은 "워드프레스 테마만들기" 시리즈 글 4편이며, 4편에 연결된 5편 보기.   워드프레스 테마만들기 5편. header.php정리,메뉴추가,functions.php, page.php 추가하기.보기 -> http://igotit.tistory.com/129

 

 

 

 

본 글이 포함된 통합 정리 글   WordPress 활용정보 정리 : http://igotit.tistory.com/23