WordPress 테마에서 사용자 정의 페이지 템플릿 만들기
게시 됨: 2020-03-01
WordPress의 가장 중요한 판매 포인트 중 하나는 테마 아이디어입니다. 단일 테마는 웹사이트의 디자인과 기능에 큰 가치를 더합니다. 그러나 페이지마다 디자인이 다른 웹 사이트가 있습니다.
불행히도 여러 WordPress 테마는 사용자가 계층 구조의 다른 페이지에 대한 레이아웃과 기능을 변경하는 것을 제한합니다. WordPress 사용자 정의 페이지 템플릿을 사용하면 사용자가 특정 페이지의 오른쪽/왼쪽 사이드바, 추가 클릭 유도문안 기능 또는 특정 방문 페이지의 고유 헤더와 같은 사용자 정의 요구 사항을 통합할 수 있습니다. WordPress 사용자 정의 페이지 템플릿이 다양한 유형의 콘텐츠를 표시하는 방법을 자세히 살펴보겠습니다.
사용자 정의 WordPress 페이지 템플릿은 다양한 목적으로 사용될 수 있습니다. 몇 가지 아이디어는 다음과 같습니다.
- 각 카테고리의 최근 게시물 표시
- Google 지도 또는 스크립트 포함
- 모든 저자의 목록입니다.
- 최근에 업로드한 이미지
- 포트폴리오용 맞춤형 디자인 페이지
- 연락처 페이지
WordPress 웹사이트에서 생성되는 모든 페이지와 게시물의 모양은 page.php 라는 템플릿 파일에 의해 처리됩니다. WordPress에서 사용자 정의 페이지 템플릿을 만들거나 편집하려면 HTML, CSS 및 PHP에 대한 기본 지식이 필요합니다.
사용자 정의 페이지 템플릿을 만드는 데 어려움이 있습니까?
걱정 마. Cloudways Expert가 맞춤형 페이지 템플릿 생성을 도와드립니다.
텍스트 편집기를 열고 다음 코드를 붙여넣기만 하면 됩니다.
<?php /* 템플릿 이름: PageWithoutSidebar */ ?>
위의 코드 줄은 WordPress에 PageWithoutSidebar 라는 템플릿 파일임을 알려줍니다. 원하는 이름을 사용할 수 있습니다. 이제 이 파일을 PageWithoutSidebar.php 로 저장합니다. 다시 파일에 다른 이름을 사용할 수 있습니다. 그러나 확장자를 .php 로 유지하는 것을 잊지 마십시오.
이제 새로 생성된 템플릿 파일을 테스트할 것입니다.
호스팅 패널에 로그인합니다. 이 예에서는 가장 빠른 관리형 WordPress 호스팅인 Cloudways를 사용하고 있습니다. Cloudways는 AWS, DigitalOcean, GCP, Linode 및 Vultr에 대한 공급자 옵션으로 WordPress 애플리케이션을 지원합니다. /wp-content/themes 폴더 로 이동합니다. 현재 테마 폴더를 열고 거기에 PageWithoutSidebar.php 파일을 업로드하십시오.
WordPress 관리자 패널 > 페이지 > 새로 추가로 이동합니다 . 오른쪽에 나열된 새 사용자 정의 페이지 템플릿을 볼 수 있습니다.
새 페이지를 만들고 템플릿을 PageWithoutSidebar로 설정합니다 . 완료되면 게시 하십시오.
새로 만든 페이지를 엽니다. 아직 템플릿에 디자인 요소가 없으므로 아래 이미지와 같은 빈 페이지 가 표시됩니다.
이것은 WordPress의 사용자 정의 페이지 템플릿이 성공적으로 구현되었음을 보여주므로 사용자 정의 반응형 WordPress 테마를 만들 수 있습니다.
이제 페이지의 내용을 표시하기 위해 몇 줄의 코드를 추가할 차례입니다.
이 데모에서는 기본 Twenty Sixteen 페이지 템플릿을 사용자 지정하는 방법에 대해 설명합니다.
페이지의 기본 모양은 /wp-contents/themes/YOUR THEME/ 폴더에 있는 page.php 파일에 의해 생성됩니다. page.php를 열고 이 코드를 복사하십시오.
<?php get_header(); ?>
<div class="콘텐츠 영역">
<메인 클래스="사이트-메인" 역할="메인">
<?php
// 루프를 시작합니다.
동안 ( have_posts() ) : the_post();
// 페이지 콘텐츠 템플릿을 포함합니다.
get_template_part( '템플릿 부품/내용', '페이지' );
// 주석이 열려 있거나 최소한 하나의 주석이 있는 경우 주석 템플릿을 로드합니다.
if ( comment_open() || get_comments_number() ) {
주석_템플릿();
}
// 루프의 끝.
그 동안;
?>
</main><!-- .site-main -->
<?php get_sidebar( '콘텐츠 바닥' ); ?>
</div><!-- .콘텐츠 영역 -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>이 코드를 이 코드 줄 바로 아래에 있는 PageWithoutSidebar.php에 붙여넣습니다.
<?php /* 템플릿 이름: PageWithoutSidebar */ ?>
저장해!
전체 PageWithoutSidebar.php 파일은 아래와 같습니다.
<?php /* 템플릿 이름: PageWithoutSidebar */ ?>
<?php get_header(); ?>
<div class="콘텐츠 영역">
<메인 클래스="사이트-메인" 역할="메인">
<?php
// 루프를 시작합니다.
동안 ( have_posts() ) : the_post();
// 페이지 콘텐츠 템플릿을 포함합니다.
get_template_part( '템플릿 부품/내용', '페이지' );
// 주석이 열려 있거나 최소한 하나의 주석이 있는 경우 주석 템플릿을 로드합니다.
if ( comment_open() || get_comments_number() ) {
주석_템플릿();
}
// 루프의 끝.
그 동안;
?>
</main><!-- .site-main -->
<?php get_sidebar( '콘텐츠 바닥' ); ?>
</div><!-- .콘텐츠 영역 -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>페이지로 돌아가서 새로고침하세요. 모든 것이 기본 WordPress Twenty Sixteen 테마에서 작동하는 방식으로 작동하는 것을 볼 수 있습니다.
이제 사용자 지정해 보겠습니다. 보시다시피 오른쪽에 사이드바가 있습니다. 이 페이지에서만 제거하겠습니다. 다른 모든 페이지는 Twenty Sixteen 테마의 기본 모양을 갖습니다.
PageWithoutSidebar.php 파일을 엽니다. 파일이 끝날 때까지 아래로 스크롤하여 다음을 제거합니다 .
<?php get_sidebar(); ?>
이것은 페이지의 사이드바를 가져오는 코드 라인입니다. 줄을 제거한 후 저장합니다 . 페이지의 URL을 열면 사이드바가 더 이상 없습니다!
보시다시피 이 페이지에서 사이드바가 성공적으로 제거되었습니다. 그러나 텍스트 정렬이 좋지 않습니다. 오른쪽에 빈 공간이 있습니다. 수정 사항은 화면을 채우도록 텍스트를 양쪽 정렬하고 확장하는 것입니다.
PageWithoutSidebar.php 로 돌아가서 다음 을 찾으십시오.
<div class="콘텐츠 영역">
" content-area "를 " site-content-fullwidth "로 변경하기만 하면 됩니다. 페이지를 새로 고치면 콘텐츠가 전체 너비가 됩니다.
WordPress 테마는 Cloudways에서 더 빠르게 수행됩니다.
300배 더 빠른 WordPress 웹사이트 – 직접 확인하세요
page.php 파일을 쉽게 편집할 수 있었는데 사용자 지정 페이지 템플릿을 만든 이유가 여전히 궁금하십니까? page.php 파일을 수정하면 웹사이트의 모든 페이지에 변경 사항이 표시될 것이 분명합니다. 특정 페이지에 사용자 정의 모양을 적용하려면 WordPress의 사용자 정의 페이지 템플릿이 유용합니다. 사용자에게 다른 권한을 할당하기 위해 WordPress에서 사용자 정의 사용자 역할을 정의할 수도 있습니다.
질문이 있는 경우 아래의 댓글 섹션에 게시하여 자유롭게 질문하세요.