워드프레스 테마 만들기 3편. Loop 구현하기.

 

본 글은 "워드프레스 테마 만들기" 시리즈 글 3편이며, 2편에 연결된 내용임. 2편을 보고 이 글을 봐야함.   워드프레스 테마 만들기 2편. index.php수정,템플릿추가. 보기 -> http://igotit.tistory.com/122

 

 

 

	개요.
	본 글에서는 테마(이름 : Skeleton) 의 index.php 파일에 Loop 코드 영역을 구현하고 작성한 포스트 리스트가 표현되도록 한다.   이전 2편 글 (http://igotit.tistory.com/122 ) 이후부터의 코드 수정사항이 적용되므로 2편을 숙지한 상태에서 본 글을 봐야 함.   본 글에서 다루는 내용은 Loop에 대한 기본 이해를 바탕으로 하므로, 아래 Loop 에 대한 기본 이해사항 숙지하고 있어야 함.   워드프레스 루프(Loop) 이해하기. 웹페이지에 정보표현하는 코드부. - 템플릿파일(php) 내에서 실제 웹페이지에 정보를 표현하는 것은 Loop 코드부에서 이뤄진다. 보기 -> http://igotit.tistory.com/124

 

 

 

	1. 테마 Skeleton 의 index.php 에 루프 코드 구현하기.
	테마만들기 2편에서의 최종 index.php 의 코드 상태는 아래와 같았다.   <?php get_header(); ?> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p>이미지 추가시험</p> <img src = "이미지URL기록"> <?php get_footer(); ?>     위의 코드의 header 와 footer 사이의 영역이 Content 영역이며, 이 자리에서 웹에 정보를 표현하는 처리를 해야한다. 현재의 위 코드에서는 고정적으로 글자와 이미지만을 출력하고 있으나, 본 코드에서는 이 자리에서 포스트를 출력하는 것을 추가한다. 본 코드에 대한 상세한 설명은 이미 별도 정리 글 (보기 -> http://igotit.tistory.com/124 ) 에서 설명이 되어있기에, 본 테마 만들기에서는 코드 추가하고 결과를 확인해 본다.   index.php 코드를 아래처럼 수정하자. 파란색 부분이 새롭게 추가된 코드.   <?php get_header(); ?> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p>이미지 추가시험</p> <img src = "이미지URL기록">   <hr> <?php if (have_posts()) :    while (have_posts()) :       the_post();          the_content();    endwhile; endif; ?>   <?php get_footer(); ?>   위 수정된 index.php 가 적용된 웹페이지의 모습(아래그림). 아래 붉은 박스 속이 포스트(총 4개 ) 의 내용부분이 모두 순차적으로 표현되어있다.       포스트 아이디와 제목만 표현해보기. 위의 Loop 내에서 the_content() 라는 함수에 의하여 포스트의 내용이 표현된다. 이 함수 대신 포스트의 제목을 표현하는 함수를 호출하면 제목이 보이게 된다. 제목을 표현하는 함수는 the_title() 이며 포스트의 아이디를 표현하는 함수는 the_ID() 이다.   Tip : Template Tags the_content(), the_title(), the_ID() 와 같은 함수들을 Template Tags 라고 하며 워드프레스에서 정의된 함수들이다. Template Tags 의 모든 함수들 보기 -> http://codex.wordpress.org/Template_Tags   위 주소에서 필요한 기능의 함수들을 찾아서 적용하게된다.   index.php 코드 수정. 포스트의 아이디와 제목만 표현하기 위하여, 우리의 코드를 아래 처럼 수정한다. php 코드임을 나타내는 <?php ?> 태그를 분리하였음. html 표현하기 위하여 분리한것임.   <?php get_header(); ?> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p>이미지 추가시험</p> <img src = "이미지URL기록"> <hr>  <?php if (have_posts()) :    while (have_posts()) :       the_post();          the_ID();?> :          <?php the_title(); ?>          <br> <?php    endwhile; endif; ?>   <?php get_footer(); ?>   위와 같이 수정된 index.php 를 테마폴더에 올리고 웹에서 보이는 모습을 보면 아래와 같다. 파란색 부분에 포스트의 아이디가 표현되었고, 주황색 부분에 포스트의 제목만 보이고 있다.     포스트제목에 링크 걸어보기. 이제 위 글 제목에 포스트의 주소를 링크 걸어보자. Loop 내에서 포스트의 주소를 가져오는 Tempate Tag는 the_permalink(); 이다. 이를 이용하여 <a href=주소> 제목 </a>  형식으로 처리한 것이 아래 코드 파란색 부분이다.   <?php get_header(); ?> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p>이미지 추가시험</p> <img src = "이미지URL기록"> <hr>  <?php if (have_posts()) :    while (have_posts()) :       the_post();          the_ID();?> :           <a href=<?php the_permalink();?>><?php the_title();?> </a> <br> <?php    endwhile; endif; ?>   <?php get_footer(); ?>   위 수정된 코드를 웹에서 확인하면 아래처럼 링크가 잘 걸려있다.       글 제목 클릭해보자.   이제 위 사이트에서 "안녕하세요!" 에 걸려있는 링크를 클릭해보자.  아마 해당 글의 내용이 보이길 기대하겠지만, 결과는 아래 처럼 보이게된다. 주소창을 보면 포스트 1개로 접근하는 중이다. 그럼에도 화면에서 보이는 영역은 포스트1개의 내용을 보이지 못하고 있다. 현재 보고 있는 화면은 index.php 를 이용하여 화면에 보이기 처리를 하고 있기 때문이다. 왜냐하면 우리의 테마에는 아직 포스트를 표현하는 템플릿파일을 만들지 않았기 때문이고 워드프레스는 포스트를 표현하는 템플릿이 없는 경우 자동으로 index.php 를 표현하기 때문에 아래처럼 보이는 것이 현재의 테마에서는 정상적인 상황이다.      필수이해사항. 워드프레스에서 템플릿 파일들 처리방식은 필수 이해 해야만 한다. 아래 글에 정리가 잘 되어있다.  포스트 1개 요청된 경우 워드프레스의 처리방식에 대해서는 아래 글의 2번 내용에서 정리하고 있다.   워드프레스 웹페이지 구조와 테마의 템플릿 파일들. - 워드프레스를 이용한 정보표현시 사용되는 미리 지정된 템플릿파일(php) 이해하기. 보기 -> http://igotit.tistory.com/123          위  테마를 시험 운영 중인 워드프레스 사이트 보기 -> http://igotit.kr/theme-skeleton/

 

 

본 글은 "워드프레스 테마만들기" 시리즈 글 3편이며, 3편에 연결된 4편 보기.   워드프레스 테마만들기 4편. 테마에 single.php 추가하여 포스트1개 표현하기. 보기 -> http://igotit.tistory.com/126

 

 

 

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

 

 

 

///125.