사용자 정의 WordPress 페이지 템플릿을 만드는 방법

WordPress 테마의 페이지 템플릿은 웹사이트 내의 페이지 레이아웃을 결정하는 데 도움이 됩니다. 그러나 이러한 템플릿을 조정하는 것은 때때로 특히 초보자에게 위협적일 수 있습니다. 운 좋게도 WordPress는 테마에서 사용자 정의 페이지 템플릿을 만들 수 있도록 하여 페이지 템플릿과 관련하여 상당한 유연성을 제공합니다.

사이트에 대한 사용자 정의 페이지 템플릿을 생성하면 사이트의 레이아웃과 디자인을 원하는 대로 쉽게 조정할 수 있습니다. 또한 다른 페이지에 대해 다른 헤더를 활용하는 것과 같은 사용자 정의 요구 사항을 추가할 수 있습니다. 이러한 변경 사항은 실제로 여러 페이지 또는 단일 페이지에 적용될 수 있습니다.

이 기사에서는 사용자 정의 WordPress 페이지 템플릿이 무엇인지, 기본 페이지 템플릿 계층 구조 및 테마에서 사용자 정의 WordPress 페이지 템플릿을 만드는 방법을 살펴볼 것입니다.

목차

사용자 정의 WordPress 페이지 템플릿이란 무엇입니까?

WordPress 페이지 템플릿 계층

사용자 정의 페이지 템플릿 만들기

• 글로벌 사용자 정의 템플릿을 만드는 방법
• 단일 페이지 템플릿 만들기

결론

사용자 정의 WordPress 페이지 템플릿이란 무엇입니까?

사용자 정의 WordPress 페이지 템플릿은 웹 사이트의 별도 디자인과 느낌을 가질 수 있는 템플릿 파일입니다.

예를 들어 사이트에 블로깅 테마가 있는 경우 사이드바나 댓글을 렌더링하지 않는 사이트용 사용자 지정 템플릿을 만들 수 있습니다. 또한 박스형 레이아웃과 전체 너비 레이아웃의 콘텐츠를 렌더링하는 템플릿이 있는 페이지용 템플릿을 생성할 수도 있습니다. 만들 수 있는 페이지 템플릿 수에는 제한이 없습니다.

페이지 렌더링은 WordPress의 page.php 파일에 의해 제어됩니다. 따라서 이 파일은 페이지 콘텐츠를 렌더링하기 위한 기본 기반으로 형성되며 아래 그림과 같이 테마 파일의 루트 내에 있습니다.

더 구체적인 페이지 템플릿이 있으면 템플릿 계층 구조가 시작됩니다.

WordPress 페이지 템플릿 계층

페이지 템플릿 계층 구조는 요청의 특성과 테마 내 존재 여부에 따라 페이지를 표시할 때 WordPress가 선택하는 템플릿 파일을 결정합니다.

기본 WordPress 템플릿 계층 구조는 다음과 같습니다.

페이지 템플릿 : WordPress는 페이지에 할당된 템플릿을 확인하고 페이지 내에서 이 템플릿을 사용합니다.

page-{slug}.php : 페이지에 할당된 템플릿이 없으면 WordPress는 페이지에 슬러그가 있는 템플릿을 확인하고 발견되면 적용합니다.

슬러그는 도메인 이름 뒤의 페이지 URL 내 일부이며 편집할 수 있습니다. 아래는 이에 대한 샘플 그림입니다.

page-{id}.php : 그런 다음 WordPress는 슬러그가 있는 템플릿이 없는 경우 렌더링되는 페이지에 대한 페이지 ID가 있는 페이지 템플릿이 있는지 확인합니다.

page.php : 페이지 ID가 있는 템플릿이 없으면 WordPress는 표준 page.php 템플릿을 사용하여 페이지를 렌더링합니다.

singular.php : page.php 파일을 찾을 수 없는 경우 워드프레스는 게시물 유형에 관계없이 singular.php 파일을 사용합니다.

index.php : 위의 템플릿을 사용할 수 없는 경우 WordPress는 기본적으로 index.php 파일을 사용하여 페이지를 렌더링합니다.

따라서 WordPress 환경 내에서 페이지 렌더링은 위의 페이지 템플릿 중 하나로 수행할 수 있습니다. 따라서 원하는 우선 순위 수준을 결정하는 것은 사용자의 몫입니다.

사용자 정의 페이지 템플릿 만들기

테마에서 사용자 정의 페이지 템플릿을 만드는 것은 매우 쉽습니다. 그러나 페이지 템플릿이 단일 페이지용인지 아니면 모든 페이지용인지 결정해야 합니다.

이 가이드에서는 Stax 테마에서 글로벌 페이지 템플릿과 우리 페이지 중 하나에 대한 단일 페이지 템플릿을 수동으로 만드는 방법을 살펴보겠습니다.

글로벌 사용자 정의 템플릿을 만드는 방법

웹 사이트 내의 모든 페이지에서 전역적으로 사용할 수 있는 페이지 템플릿을 만들고 싶을 때가 있습니다.

그렇게 하려면 먼저 메모장, 메모장 ++, 숭고한 텍스트 또는 선호하는 기타 편집기와 같이 사용할 텍스트 편집기를 식별해야 합니다.

이 작업이 완료되면 다음을 수행하여 템플릿 파일 생성을 시작할 수 있습니다.

1단계: 새 파일을 만들고 다음 코드를 추가합니다 .

 <?php /* Template Name: PageWithNoFooter */ ?>

웹사이트에 있는 다른 페이지 템플릿에는 사용되지 않는 템플릿 이름과 사이트 페이지를 쉽게 식별하고 관련시킬 수 있는 이름을 사용하는 것이 좋습니다.

이 작업이 완료되면 .php 확장자로 새 페이지 템플릿을 저장합니다. 여기서는 템플릿 파일의 이름을 pagewithnofooter.php 로 지정하겠습니다. 원하는 이름을 사용할 수 있지만 템플릿 이름과 유사한 이름을 사용하는 것이 더 좋습니다.

2단계: 파일에 원하는 코드 추가

이 단계에서 PHP 또는 PHP와 HTML 모두에 있는 파일에 원하는 코드를 추가할 수 있습니다.

설명을 위해 여기의 경우 pagewithnofooter.php 파일 내에서 기본 right-sidebar.php 파일의 내용을 사용하지만 이를 사용자 정의하고 코드를 추가하여 사용자 정의 HTML 환영 텍스트를 렌더링하고 바닥글을 비활성화합니다. 다른 WordPress 테마를 사용하는 경우 테마 내에서 page.php의 내용을 복사하거나 테마에 포함될 수 있는 다른 테마 정의 페이지 템플릿을 복사할 수도 있습니다.

따라서 우리의 코드는 다음과 같을 것입니다:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

3단계: 페이지 템플릿을 테마 파일에 업로드합니다 .

Filezilla와 같은 FTP 프로그램의 도움으로 또는 호스팅 패널을 통해 사용자 정의 파일을 테마 파일의 루트에 업로드하십시오. 여기의 경우 다음 디렉토리 경로 중 하나에 있습니다.

i) wp-content > 테마 > Stax

ii) 권장 사항: wp-content > 테마 > stax-child

이는 사이트 내에서 하위 테마를 사용하는 동안 적용되며 stax-child는 하위 테마입니다.

테마 업데이트 중에 사용자 정의 손실을 방지하기 위해 테마 내의 페이지 템플릿 또는 기타 파일 사용자 정의를 사용자 정의하는 동안 하위 테마를 사용하는 것이 좋습니다.

4단계: 새 페이지를 만들고 "PageWithNoFooter" 템플릿 할당

이를 수행하려면 WordPress 대시보드 내에서 페이지 > 새로 추가 섹션으로 이동하여 페이지를 만드십시오.

페이지를 생성했으면 "PageWithNoFooter" 템플릿을 할당하고 변경 사항을 저장합니다.

다음은 이에 대한 예시입니다.

이제 프론트 엔드에서 페이지를 미리 볼 때 페이지 내에서 렌더링된 바닥글이 없습니다. 우리가 추가한 사용자 정의 HTML도 있습니다.

아래는 이에 대한 스크린샷입니다.

레이아웃을 적용하려는 페이지 또는 바닥글을 포함하지 않으려는 페이지 내에서 템플릿을 사용할 수 있습니다.

단일 페이지 템플릿 만들기

단일 페이지에 대한 사용자 정의 페이지 템플릿은 페이지별로 다릅니다. 앞에서 언급했듯이 이러한 템플릿은 "페이지 템플릿"이 페이지에 할당되지 않은 경우 선택을 위해 고려됩니다.

이러한 템플릿의 경우 슬러그 또는 페이지 ID로 페이지를 타겟팅할 수 있습니다. 페이지 슬러그 또는 ID를 사용할지 여부를 결정할 때 웹사이트의 미래 전망을 고려하는 것도 중요합니다. 예를 들어 사이트를 다른 도메인으로 마이그레이션하려는 경우 템플릿 파일을 만들 때 페이지 ID를 사용하는 것은 적절하지 않습니다. 대신 슬러그를 사용하는 것이 더 나은 옵션으로 간주됩니다. 반면에 사이트를 여러 사람이 관리하고 있고 그들이 페이지 슬러그를 변경할 가능성이 있다고 생각한다면 페이지 템플릿을 만들 때 페이지 ID를 사용하는 것이 훨씬 더 나을 것입니다.

여기서는 연락처 페이지에 대한 사용자 지정 페이지 템플릿을 만들고 페이지에서 바닥글을 비활성화합니다. 이러한 템플릿을 만들려면 다음을 수행해야 합니다.

1단계: page.php의 내용 복사

이 단계에서는 먼저 테마 파일 내에서 page.php를 찾아야 합니다.

파일을 찾으면 선택하여 편집하고 내용을 복사합니다.

2단계: 페이지에 새 템플릿 만들기

테마 파일의 루트 내에서 연락처 페이지에 대한 페이지 템플릿을 만듭니다. page-{id}.php 또는 page-{slug}.php 파일을 사용합니다. 여기서는 슬러그를 사용할 것이므로 "contact"가 아래와 같이 페이지 슬러그이므로 템플릿 이름을 page-contact.php로 지정합니다.

아래는 파일 위치에 대한 그림이기도 합니다.

3단계: page.php 파일의 내용 붙여넣기

이제 위의 1단계에서 복사한 page.php 파일의 내용을 새 page-contact.php 파일에 붙여넣어야 합니다. 이렇게 하면 원하는 코드 변경 사항을 통합하고 변경 사항을 저장하도록 파일을 사용자 정의할 수 있습니다. 우리의 경우 최종 코드가 다음과 같이 읽히도록 연락처 페이지에서 바닥글을 비활성화합니다.

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

이제 연락처 페이지를 미리 보면 페이지에 바닥글이 포함되어 있지 않다는 것을 알게 될 것입니다.

아래는 초기 페이지와 새 템플릿이 적용된 후의 스크린샷 비교입니다.

바닥글이 있는 연락처 페이지

바닥글이 없는 연락처 페이지

결론

웹 사이트에 대한 사용자 정의 페이지 템플릿을 만드는 것은 비교적 쉽습니다. 이 가이드에서는 WordPress 테마 내에서 사용자 지정 템플릿을 수동으로 만드는 방법을 구체적으로 살펴보았습니다. 여기서는 무료 Stax 테마를 사용 사례로 사용했습니다. 그러나 WordPress 코딩 표준을 따르는 다른 모든 WordPress 테마에 동일한 기술을 적용할 수 있습니다. 그러나 Elementor와 같은 페이지 빌더를 사용하는 것과 같이 사용자 정의 페이지 템플릿을 만들 수 있는 다른 방법이 있습니다.

이 문서가 사용자 지정 페이지 템플릿을 수동으로 만드는 방법에 대한 필요한 통찰력을 제공하기를 바랍니다. 질문이나 제안이 있는 경우 아래에 자유롭게 의견을 말하십시오.