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

진정으로 전문적인 WordPress 웹 사이트에는 거의 확실하게 사용자 정의 페이지 템플릿이 포함됩니다. 실제로 가장 일반적인 웹 사이트 중 상당수는 템플릿에 의존합니다. 부동산 웹사이트에는 주택용 템플릿, 제품용 전자상거래 웹사이트, 회원용 회원 사이트 등이 필요합니다.

템플릿은 페이지와 게시물이 프런트 엔드에서 어떻게 보이는지 정의합니다. 청사진에는 각 게시물의 모든 콘텐츠를 표시하는 방법과 위치가 나와 있습니다. 예를 들어 요리 웹사이트에서 레시피 템플릿을 변경하면 모든 레시피가 프런트 엔드에 표시되는 방식에 영향을 미칩니다.

두 가지 유형의 사용자 정의 WordPress 페이지 템플릿이 있습니다.

1. 일반 페이지용 템플릿
2. 단일 게시물 페이지용 템플릿

일반 페이지에 맞춤형 WordPress 템플릿이 필요한 이유

템플릿은 유사한 페이지가 동일한 구조를 따르도록 하기 쉽습니다. 각 페이지에 대한 레이아웃을 개별적으로 만드는 대신 템플릿을 한 번만 만들고 원하는 페이지에 할당할 수 있습니다. 그런 다음 해당 페이지는 템플릿을 따릅니다.

예를 상상해 봅시다. 요리 웹사이트에는 "완벽한 파스타를 만드는 방법", "계란 요리 방법" 등과 같은 요리 팁이 있는 페이지가 많이 있을 수 있습니다.

이 모든 페이지에 표시하고 싶은 요리에 관한 전자책이 있습니다. 동일한 내용으로 각 페이지를 편집하는 대신(많은 시간이 소요됨) 템플릿을 한 번만 만들고 페이지에 템플릿을 할당할 수 있습니다. 그렇게 하면 각 페이지에 내 eBook을 다운로드하기 위한 클릭 유도문안이 포함됩니다.

위의 두 페이지에서 오른쪽에 클릭 유도문안을 볼 수 있습니다. 두 페이지에 동일한 템플릿을 할당했기 때문입니다.

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

사용자 정의 WordPress 페이지 템플릿을 만드는 방법에는 두 가지가 있습니다.

• 어려운 방법 . 테마는 WordPress에서 템플릿을 정의하는 PHP 파일을 자동으로 제공합니다. 사용자 정의 게시물 유형(예: 레시피)을 생성할 때 이러한 PHP 필드를 편집하거나 웹사이트에 게시물이 표시되도록 새 필드를 생성해야 합니다.
• 쉬운 방법. Toolset과 같은 WordPress 플러그인을 사용하여 템플릿을 만들 수 있습니다. Toolset은 코딩 없이 몇 분 안에 템플릿을 생성합니다. 또한 도구 집합 블록을 사용하면 동적 콘텐츠가 포함된 WordPress Gutenberg 편집기에 블록을 추가할 수 있습니다.

아래에서 쉬운 방법을 알려 드리겠습니다.

먼저 오른쪽에 클릭 유도문안이 포함될 일반 페이지용 템플릿을 생성하겠습니다.

둘째, 내 레시피 사용자 정의 게시물 유형에 대한 템플릿을 생성합니다.

일반 페이지용 맞춤 WordPress 페이지 템플릿을 만드는 방법

1단계: 콘텐츠 템플릿 구조 만들기

먼저 페이지에 대한 콘텐츠 템플릿을 만들어야 합니다. Toolset을 설치하면 새 콘텐츠 템플릿을 열고 블록을 추가할 수 있습니다.

먼저 템플릿의 구조를 정렬합니다. 아래에서 내가 템플릿을 섹션으로 분할할 수 있도록 Toolset의 그리드 블록을 추가한 것을 볼 수 있습니다. 템플릿을 두 개로 나누고 페이지의 75%를 차지하도록 왼쪽 섹션을 확장했습니다.

2단계: 템플릿에 콘텐츠 추가

이제 구조가 있으므로 표시하려는 내용이 포함된 블록을 삽입해야 합니다. 왼쪽에는 게시물 내용을 추가합니다. 내가 해야 할 일은 내가 콘텐츠에 대해 원하는 소스를 선택할 수 있도록 하는 Toolset의 단일 필드 블록을 삽입하는 것뿐입니다.

아래에서 오른쪽에 있는 게시물 콘텐츠를 블록 소스로 선택합니다.

템플릿 오른쪽에 클릭 유도문안을 추가하겠습니다. 콘텐츠에 따라 원하는 블록을 선택하기만 하면 됩니다. 아래에서는 제목 블록과 도구 집합의 버튼 블록을 사용했습니다. 버튼 블록의 경우 책에 대한 링크도 포함합니다.

3단계: 블록 스타일 지정

WordPress와 Toolset을 결합하면 템플릿에 추가하는 블록의 스타일을 지정할 수 있습니다. "어려운 방법"으로 블록을 만들기로 선택한 경우 좋은 스타일링을 위해 코딩 기술에 의존해야 합니다.

블록을 클릭하면 오른쪽에 템플릿의 스타일을 지정하고 향상시킬 수 있는 많은 옵션이 표시됩니다.

"타이포그래피"에서 다음을 변경할 수 있습니다.

• 폰트
• 글꼴 크기
• 간격
• 스타일
• 텍스트 색상

그게 다가 아니다. "스타일 설정"에서 다음을 변경할 수도 있습니다.

• 배경색
• 여백/패딩
• 국경
• 상자 그림자

아래에서 클릭 유도문안을 위한 새로운 배경색을 추가했습니다. 변경 사항을 코딩할 필요가 없으며 원하는 색상과 기타 스타일을 선택하기만 하면 됩니다.

4단계: 다양한 화면 크기에 맞게 템플릿 조정

노트북이나 데스크탑에서 템플릿을 구축할 가능성이 가장 높지만 사용자가 동일한 화면 크기에서 웹사이트를 보고 있지 않을 수 있다는 점을 기억하는 것이 중요합니다. 점점 더 많은 사람들이 태블릿이나 모바일 기기를 사용하게 될 것입니다.

따라서 각 화면 크기에 맞게 템플릿을 조정해야 할 수 있습니다. 이것은 툴셋과 워드프레스로 충분히 할 수 있습니다.

각 스타일 요소 옆의 오른쪽 사이드바에는 데스크톱, 태블릿, 모바일 간에 전환할 수 있는 옵션이 있습니다.

보시다시피 옵션 사이를 전환하면 템플릿이 자동으로 조정되므로 각 장치에서 템플릿이 어떻게 보이는지 확인할 수 있습니다.

5단계: 페이지에 템플릿 할당

이제 템플릿이 있으므로 올바른 페이지에 할당하기만 하면 됩니다. 이 작업을 수행하면 각 페이지에 동일한 템플릿이 표시됩니다.

각 페이지를 편집하고 올바른 콘텐츠 템플릿을 선택하기만 하면 됩니다.

프론트 엔드에서 이제 내가 할당한 페이지에 템플릿이 표시됩니다.

단일 게시물에 맞춤형 WordPress 페이지 템플릿이 필요한 이유

일반 게시물에 대한 템플릿을 만드는 것 외에도 사용자 정의 게시물 유형의 각 게시물에 대한 템플릿이 필요할 가능성이 큽니다.

내 요리 웹사이트를 위해 내 요리법에 대한 사용자 정의 게시물 유형을 만들었습니다. 아래에서 백엔드에서 제 레시피 중 하나를 볼 수 있습니다. 준비 시간, 요리 시간 및 레시피 이미지와 같이 내가 생성한 모든 사용자 정의 필드를 확인하십시오.

아직 레시피에 템플릿을 할당하지 않았습니다. 프론트엔드에 템플릿이 없는 레시피를 보면 어떤 일이 일어나는지 보십시오.

보시다시피 사용자 정의 필드는 프런트 엔드에 표시되지 않습니다. 게시물 제목 및 게시물 본문과 같은 주요 게시물 내용만 볼 수 있습니다. 이것이 템플릿을 사용하면 사용자 정의 필드를 포함한 모든 콘텐츠를 표시할 수 있기 때문에 단일 게시물에 매우 중요합니다.

아래에서 프론트 엔드에서 두 가지 레시피를 볼 수 있습니다. 템플릿을 할당했기 때문에 이제 사용자 정의 필드를 볼 수 있습니다.

아래에서 내 레시피에 대한 이 템플릿을 만든 방법을 보여 드리겠습니다.

1단계: 템플릿 만들기

가장 먼저 해야 할 일은 콘텐츠를 추가할 템플릿을 만드는 것입니다. WordPress 백엔드의 도구 집합 대시보드에서 이 작업을 수행할 수 있습니다.

이렇게 템플릿을 선택하여 내가 만든 모든 레시피에 템플릿을 자동으로 할당합니다. 따라서 각 레시피로 돌아가 수동으로 템플릿을 할당할 필요가 없습니다.

2단계: 템플릿에 콘텐츠 추가

이제 콘텐츠 템플릿에서 이전 일반 게시물 템플릿에서 했던 것처럼 콘텐츠를 추가하고 구성할 수 있습니다.

다시 한 번 Toolset Grid 블록을 추가하여 템플릿의 구조를 생성할 수 있습니다.

이제 내 콘텐츠에 대한 블록을 추가할 수 있습니다. 예를 들어, 제 레시피의 왼쪽 열에 이미지가 있습니다. Gutenberg의 블록 세트에서 Toolset의 이미지 블록을 추가할 수 있습니다. 동적 콘텐츠를 추가할 수 있기 때문에 Toolset 버전의 블록이 필요합니다.

동적 콘텐츠는 이미지와 같은 요소를 생성할 수 있고 각 게시물에 대해 해당 특정 게시물에 대한 올바른 콘텐츠를 그릴 수 있음을 의미합니다. 예를 들어 동적 콘텐츠는 바나나 케이크에 대한 제 레시피가 바나나 케이크에 표시된다는 것을 의미합니다. 그렇지 않으면 콘텐츠가 고정되고 바나나 케이크 대신 템플릿에서 생성할 때 삽입한 이미지가 무엇이든 볼 수 있습니다.

Toolset과 WordPress를 사용하여 각 블록의 동적 소스를 선택하여 표시할 항목을 지정할 수 있습니다.

예를 들어, 사용자 정의 필드 중 하나인 Prep Time을 추가하기 위해 새 블록을 만들었습니다. 블록을 추가하면 오른쪽에 있는 블록의 소스로 준비 시간 필드를 선택할 수 있습니다. 레시피 요구 사항에 따라 준비 시간이 달라지므로 이 블록도 동적입니다.

여러 항목을 추가하기 위한 반복 필드 블록(예: 레시피의 여러 줄), 이미지 슬라이더 블록 및 YouTube 블록을 포함하여 다양한 유형의 블록을 추가할 수 있습니다.

3단계: 블록 스타일 지정

일반 게시물의 첫 번째 템플릿과 마찬가지로 각 블록에 스타일을 지정할 수 있습니다.

4단계: 다양한 화면 크기에 맞게 템플릿 조정

다시 말하지만, 이전 템플릿과 유사하게 다양한 화면 크기에 맞게 구조를 조정할 수 있습니다.

5단계: 각 게시물에서 템플릿이 어떻게 보이는지 확인

마지막으로 템플릿에서 볼 레시피를 선택하여 모든 레시피에 맞는지 확인할 수도 있습니다. 페이지 상단의 드롭다운 메뉴를 사용하여 게시물 간에 전환할 수 있습니다.

준비가 되면 프런트 엔드에서 템플릿을 확인할 수 있습니다.

그리고 마찬가지로 제 레시피에 대한 템플릿이 있습니다. 새로운 레시피를 생성하면 즉시 템플릿 구조를 따릅니다.

지금 나만의 맞춤형 WordPress 페이지 템플릿 만들기 시작

이제 WordPress 페이지 템플릿을 구축하는 것이 얼마나 쉬운지 확인할 차례입니다. 툴셋을 다운로드하고 문서를 확인하여 코딩 없이 게시물용 템플릿을 얼마나 빨리 만들 수 있는지 확인하기만 하면 됩니다.