Beautiful CSS

Managing for contents file

파일을 효과적으로 분할하기

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

사이드바 2

Meta Info:

  • 2014년 6월 19일
  • Hyunhwa Jeong
  • 2,152 Views
  • No comments

Table of Contents

파일을 효과적으로 분할하기

이 게시물은 2016년 8월 8일 수정판입니다.

이야기에 앞서

여러분은 이미 워드프레스 테마를 만들면서, 여러가지의 파일을 분할 한 경험이 있습니다. header.phpsidebar.php가 그런 것입니다. 파일을 분할하는 가장 큰 이유로, 동일한 코드를 여러군데 넣었을 때, 코드 중 단 하나의 부분이라도 수정사항이 생기면 해당 코드가 삽입된 모든 파일을 일일이 찾아다니며 고쳐야하는 수고를 덜기 위함입니다.

이 글에서는 기존에 파일을 분할할 때 사용했던 <?php get_header(); ?>와 같은 템플릿 구문 외에, 특정 폴더와 파일명까지 모두 입맛에 맞게 지정하여 불러올 수 있는 방법에 대해 설명합니다.


헤더, 푸터, 사이드바의 분할과 불러오기

헤더, 푸터, 사이드바는 게시물이나 페이지 등에서 공통적으로 사용하는 경향이 있기 때문에 거의 필수적으로 분할해서 사용합니다. 이것들은 이미 워드프레스 테마 만들기 Part 2에서 경험한 부분입니다.

이 파일들은 모두 비슷한 템플릿 구문을 통해 호출되는데, 다음과 같습니다.

/* header.php를 호출 */
<?php get_header(); ?>

/* header-about.php를 호출 */
<?php get_header('about'); ?>


/* footer.php를 호출 */
<?php get_footer(); ?>

/* footer-about.php를 호출 */
<?php get_footer('about'); ?>


/* sidebar.php를 호출 */
<?php get_sidebar(); ?>

/* sidebar-about.php를 호출 */
<?php get_sidebar('about'); ?>

결국, 괄호 안의 홀따옴표 안에 넣는 문자열이 곧 파일명의 일부분이 됩니다. 위 예문에서는 about이라는 문자열이 -about이라는, 대쉬(-)가 포함된 파일명의 일부분이 되었습니다.

하지만, 이 템플릿 구문에는 제약이 있습니다. 파일명으로 작성한 문자열은 반드시 header, footer, sidebar 문자열이 파일의 맨 처음에 위치해야하며, 테마 폴더의 최상위 계층에 있어야 합니다. 즉, 테마 폴더 안에 parts와 같은 이름의 새로운 폴더를 만들고 그 안에 파일을 위치시키면 불러오지 못합니다. 결국, 많은 분할 파일들이 테마 폴더 안에 너저분하게 쌓일 수 있음을 의미합니다.

그나마 헤더, 푸터, 사이드바는 비교적 어느 페이지에서나 공통분모가 많은 파일이므로, 위에 사용한 템플릿 구문으로더 어느정도 소화가 가능합니다.


get_template_part 구문 활용하기

get_template_part 구문으로 분할하기

테마를 만들다보면 특정 코드를 반복해서 자주 사용하는 경우가 올 수 있습니다. 예를들어, 웹 사이트의 첫 대문 페이지에 특정 카테고리별로 게시물을 뽑아오는 코드를 예문 1과 같은 형식으로 만들었다고 가정합시다.

이 글과 예문의 목적은, 파일을 분할하고, 분할 된 파일을 불러오는 템플릿 구문의 사용방법을 익히는 것입니다. 카테고리를 대문에 출력하는 것은 단순히 상황만 연출한 것일 뿐, 이 글에서 다루고자 하는 주제가 아닙니다.

<section>
    <h1>카테고리 이름을 불러오는 변수</h1>
    <p>카테고리 설명을 불러오는 변수</p>
    <ul>
      <li><a href="#">게시물 제목을 불러오는 변수</a></li>
      <li><a href="#">게시물 제목을 불러오는 변수</a></li>
      <li><a href="#">게시물 제목을 불러오는 변수</a></li>
      <li><a href="#">게시물 제목을 불러오는 변수</a></li>
      <li><a href="#">게시물 제목을 불러오는 변수</a></li>
    </ul>
</section>
예문 2

이 코드는, 1개의 카테고리 제목과 설명, 그리고 해당 카테고리가 포함한 게시물 5개를 뽑아오는 형태입니다. 만일 그림 1905-1과 같이 4개의 카테고리를 출력하려면, 위 코드가 3개나 더 반복해서 이어져야 합니다.

1개의 대표 리스트가 푸른 색 테두리에 둘러 쌓여 강조되고 있고, 이와 같은 형식을 가진 3개의 리스트가 더 나열되어 있습니다.
그림 1

이렇듯, 같은 형식을 가졌음에도 여러번 반복해서 붙여 넣다보면, 코드의 양도 기하급수적으로 많아질 뿐만 아니라, 코드의 일부분이 첨삭되거나 수정되었을 때, 다른 모든 코드들 역시 똑같이 고쳐주어야 합니다. 이것은 정말로 귀찮은 일입니다. 이럴때는, 대표가 되는 1개의 형식(그림 1에서 푸른 색 테두리 부분)을 별도의 파일로 분할해서 저장해 놓고, 템플릿 구문으로 간단히 불러 오는 것이 효과적입니다.

예문 1category-list.php라는 이름으로 테마 폴더에 저장했다고 가정하면, 예문 2처럼 템플릿 구문을 통해 코드를 불러오면 됩니다.

<?php get_template_part( 'category', 'list' ); ?>

<?php get_template_part( 'category', 'list' ); ?>

<?php get_template_part( 'category', 'list' ); ?>

<?php get_template_part( 'category', 'list' ); ?>
예문 2

그림 1과 같이 4개의 카테고리 목록을 표현하기 위해, 4개의 템플릿 구문을 통해 같은 형식의 코드를 불러 온 것입니다. 이렇게하면, 대문 페이지에 너저분하게 40줄이 넘는 코드 대신, 단 4줄만으로 문서를 보다 직관적으로 만들 수 있습니다.


get_template_part 구문으로 폴더와 파일 이름 짓기

get_template_part 구문은 일반적인 헤더, 푸터용 템플릿 구문보다 관리의 용이함이 있습니다. 원하는 폴더 이름과 파일명을 원하는데로 지을 수 있기 때문입니다. 아래의 예문 3을 보면서 분할 할 파일의 위치와 이름을 어떻게 지어 사용할 것인지 참고해 보시기 바랍니다.

/* 테마 폴더의 about.php를 호출합니다 */
<?php get_template_part( 'about' ); ?>

/* 테마 폴더의 category-about.php를 호출합니다 */
<?php get_template_part( 'category', 'about' ); ?>

/* 테마 폴더의 parts 디렉토리 안에 위치한 about.php를 호출합니다 */
<?php get_template_part( 'parts/about' ); ?>

/* 테마 폴더의 parts 디렉토리 안에 위치한 category-about.php를 호출합니다 */
<?php get_template_part( 'parts/category', 'about' ); ?>
예문 3
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments