Twenty Seventeen 테마 전면 페이지 수정

Front Page Customizing of Twenty Seventeen Theme

전면 페이지란?

홈페이지에 접속했을 때 처음 출력되는 페이지를 '전면 페이지(Front Page)'라고 합니다.

워드프레스는 전면 페이지를 출력하는 방식이 2가지가 있는데, 하나는 동적 콘텐츠인 글 목록 출력 방식이며 하나는 정적 콘텐츠인 페이지를 출력하는 방식입니다. 이는 '설정 - 읽기'에서 지정할 수 있습니다.

<읽기-설정 항목>

물론 커스터마이징 방식에 따라서 동적 콘텐츠(최신 글 출력 방식)로 설정이 되어 있는 상태에서도 home.php 혹은 index.php 파일을 수정하여 전면 페이지를 마치 정적 페이지처럼 보이게도 할 수 있지만 일반적으로 사용되는 방식은 아닙니다.

이렇게 정적 페이지를 전면 페이지로 설정을 하는 경우 워드프레스는 테마의 템플릿 파일 중에서 front-page.php 파일을 먼저 찾습니다. 그래서 파일이 존재한다면 출력을 하고, 파일이 없다면 그 차선으로 다른 템플릿 파일(page.php, index.php 등)을 찾아서 전면 페이지를 출력합니다. 

이렇게 출력 순서와 관련된 파일 구조를 (테마) 템플릿 계층구조(Template Hierarchy)라고 하며 워드프레스 코덱스 사이트에서 볼 수 있습니다.

워드프레스 (테마) 템플릿 계층구조 링크

<전면 페이지 수정 예>

- 페이지 제목 없음 : 플러그인 Hide Title 사용 (참조 포스트)

- 사이드바 없음

- 콘텐츠 영역의 가로 크기 전체 사용 (width 100%)

<Twenty Seventeen 테마 전면 페이지 수정>

Twenty Seventeen은 front-page.php 템플릿 파일이 있습니다. 아래의 파인더 창을 보면 개발자 부분에 front-page.php 가 보입니다.

front-page.php 템플릿 파일을 열고 코드를 확인해 보면 'template-part/page/content-front-page.php'가 전면 페이지를 출력하는 최종 파일임을 알 수 있습니다.

이는 get_template_part(); 템플릿 태그의 경우 괄호 안에 인자가 2개 들어가는데, 만일 ('A', 'B'); 라고 한다면 불러오는 PHP 파일 이름은 A-B.php 이기 때문입니다.

주의할 점은 'A' 부분에 테마 루트 폴더(index.php가 있는 폴더)를 기준으로 하는 위치 경로까지 들어가야 한다는 점입니다.

content-front-page.php 파일의 33~38행에 페이지 헤더 부분이 있고,

그 아래 쪽 40~48행에 콘텐츠(페이지 내용)이 출력되는 부분이 있습니다.

웹 브라우저에서 검사를 통해 해당 요소들의 스타일을 확인해 봅니다.

클래스 '.entry-header'는 속성 'float: left'와 'width: 30%'로 인해 좌측에 위치하고 가로 크기가 30% 임을 알 수 있으며,

클래스 '.entry-content'는 속성 'float: right'와 'width: 58%'로 인해 우측에 위치하고 가로 크기가 58% 임을 알 수 있습니다. 

이렇게 템플릿 파일과 웹 브라우저의 요소 검사를 통해서 웹 문서의 구조를 알 수 있고 이를 통해 수정 작업의 방향을 가늠할 수 있으며, 여기에서는 간단하게 해당 요소에 새로운 클래스를 추가하고 스타일을 새롭게 적용하는 방법으로 콘텐츠를 가로 크기 전체에 출력할 수 있습니다.

content-front-page.php 파일 내용 중에서

33행에 <div class="entry-header front-header">처럼 새로운 클래스 'front-header'를 추가합니다.

40행에 <div class="entry-content front-content">처럼 새로운 클래스 'front-content'를 추가합니다.

대시보드에서 '외모 - 사용자 정의하기'에 있는 '추가 CSS'에 새롭게 추가된 클래스 '.front-header'와 '.front-content'의 속성을 정의합니다.

스타일을 적용하여 제목 요소를 보이지 않게(플러그인 사용) 하고 가로 크기(width), 간격(마진: margin)을 삭제할 수 있으며, 콘텐츠 요소의 플로트 속성을 제거하고 가로 크기를 100%로 만들 수 있습니다.

.front-header {
  width: 0%;
  margin: 0 !important;
  line-height: 0;
}

.front-content {
  float: none;
  width: 100% !important;
}