워드프레스 테마 디자인 변경하기 카테고리 페이지에서 글의 제목만을 표시하는 방법 코드 예제

1. 글 제목만 표시하기
워드프레스 Twenty Thirteen 테마
를 수정한다.
테마 http://wordpresscoop.co.kr 1

2. 목록
1. 사용자정의 파트 템플릿 작성
2. 사용자정의 파트 템플릿 로딩
3. 제목 표시하기
4. 작성 연월일 표시하기
5. 전체를 <ul>로 마크업하기
6. 제목의 목록 디자인하기
테마 http://wordpresscoop.co.kr 2

3. 사용자정의 파트 템플릿 작성
카테고리 페이지에 출력하는 글은
content.php로 지정한다. 이 템플릿을 편집하
면 다른 페이지에도 영향을 미친다. 제목만을
표시하기 위해, content-title.php라는 새로운
사용자정의 파트 템플릿을 작성한다.이것은
비어 있는 상태로 자식 테마 디렉토리로 업로
드한다.
테마 http://wordpresscoop.co.kr 3

4. 사용자정의 파트템플릿 로딩하기
카테고리 페이지를 생성하는 category.php를 열고
content.php 대신에 content-title.php를 로딩한다.
<?php get_template_part(~); ?>의 파라미터에 title
을 추가해서 ‘content’,,’title’이라도 지정하면
content-title.php가 로딩된다.
테마 http://wordpresscoop.co.kr 4

5. 제목 표시하기
content-title.php를 열고 기사의 제목을 표시하도록
지정한다. 기사의 제목은 <?php the_title(); ?>로 출
력하고 <?php the_permalink(); ?>는 기사의 개별
페이지로 이동하는 링크를 지정한다. 또한 리스트
형식으로 표시하기 위해 <li>~</li>로 마크업한다.
테마 http://wordpresscoop.co.kr 5

6. 작성연월일 표시
테마 http://wordpresscoop.co.kr 6
제목 옆에 작성 연월일을 표시한다. 작성 연
월일은 <?php echo get_the_date(); ?>로 출
력하고 <span>으로 마크업해서 스타일 시트
에서 디자인을 지정한다.

7. 전체를 <ul>로 마크업하기
리스트 형식으로 입력한 제목의 목록은 전체를 <ul>로 마크
업한다. 그러나 content-title.php로 입력하면 각 기사가 <ul>
로 마크업된다. 따라서 date.php를 열고 기사에 관한 처리를
실행하는 루프의 바깥쪽을 <ul>~</ul>로 마크업한다. 또한
스타일시트에서 디자인하기 쉽도록 클래스 이름을 post라고
디자인한다.
테마 http://wordpresscoop.co.kr 7

8. 제목의 목록 디자인하기
style.css를 열고 목록으로 작성한 아래와 같
은 제목의 디자인을 변경한다. 여기서는 각
제목을 회색 점선으로 구분해서 표시한다. 제
목 앞에는 마크 이미지(chip.png)를 표시한다.
테마 http://wordpresscoop.co.kr 8