Dynamic Post 기능 이미지로 WordPress 블록 테마 표지 템플릿을 사용자 정의하는 방법-CSS 튜토리얼-php.cn

WordPress 테마의 동적 표지 템플릿 : 특집 이미지 블록을 사용하여 사용자 경험을 향상시킵니다.

많은 WordPress 테마에는 인기있는 기능인 커버 이미지가 특징입니다. 이 추세는 블록 테마 카탈로그의 스크린 샷에서도 분명합니다.

220 테마를 예로 들어, 단일 기사와 페이지에 사용할 수있는 표지 템플릿이 포함되어 있습니다. 기사의 주요 이미지는 전체 브라우저 화면에 걸쳐있는 상단에 표시됩니다. 기사 제목 및 기타 메타 데이터가 아래에 있습니다. 커버 템플릿을 사용하면 컨텐츠를 표시하는 전통적인 방식과 다른 컨텐츠를 생성 할 수 있습니다. How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images 현재, 표지 템플릿을 작성하려면 20 개의 기본 테마에 대한 표지 템플릿과 같은 PHP 코드를 작성해야합니다. 파일에는 커버 템플릿을 사용할 때 컨텐츠를 표시하는 코드가 포함되어 있습니다.

PHP에 능숙하지 않은 일반 WordPress 사용자의 경우 비디오와 같이 Custom Post 유형 UI와 같은 플러그인을 사용하는 것입니다.

블록 테마의 커버 블록

WordPress 5.8에서 시작하여 주제 저자는 블록 편집기의 표지 블록을 사용하여 사용자 정의 템플릿 (예 : 단일 게시물, 저자, 카테고리 등)을 작성하고 소량의 코드를 작성하지 않고 주제에 포함시킬 수 있습니다. </press></block></p> <into> 블록 테마 템플릿에서 대형 커버 블록을 만드는 방법으로 다이빙하기 전에 Rich Tabor의 22 개의 22-2와 WABI를 간략하게 살펴 보겠습니다. <p> <enty> 2122는 섹션의 스키마 저장소로 숨겨진 이미지를 추가하여 큰 제목을 구현합니다. WABI 테마에서는 단일 기사의 대형 배경색이 배경색 및 50px 높이 간격 블록을 강조하여 달성됩니다. 색상을 강조하는 것은 </enty></p> 파일에 의해 관리됩니다. <p> <es> 다른 많은 테마는 커버 블록을 사용하여 상단 커버 블록을 생성하기로 선택하므로 사용자가 배경색을 변경하고 코드를 쓰지 않고 정적 이미지를 추가 할 수 있습니다. 이러한 방식으로 기사의 특집 이미지를 단일 기사의 배경 이미지로 사용하려면 각 단일 기사에 이미지를 수동으로 추가해야합니다. <code>template-parts/content-cover.php</code> <dyn dyn> 동적 기사가 포함 된 커버 블록에는 그림 </dyn></es></p>가 있습니다 WordPress 6.0은 커버 블록의 배경 이미지로 모든 기사 나 페이지의 주요 사진을 사용할 수있는 멋진 주요 그림 커버 블록 기능을 제공합니다. <p> <video> 아래의 짧은 비디오에서 Automattic Engineers는 커버 블록에 특집 이미지를 추가하는 방법에 대해 논의하고 예를 들어 Archeo 테마로 시연했습니다. <s> 기사의 특수 이미지를 포함하는 그림 블록은 의 2 톤 색상을 사용하여 추가로 사용자 정의 할 수 있습니다. </s></video></p> <h3> 사용자 케이스 (Wei, Bright Mode) </h3> <ing> 블록 테마 디렉토리에서 썸네일 이미지를 브라우징 할 때 대부분의 이미지에는 큰 표지 제목 블록이 포함되어 있음을 알 수 있습니다. 템플릿 파일을 더 깊이 파고 들으면 정적 이미지 배경이있는 커버 블록을 사용하는 것을 볼 수 있습니다. <p><top> 최근에 개발 된 일부 주제는 다이나믹 기사 특집 이미지 (예 : Archeo, Wei, Frost, Bright Mode 등)와 함께 커버 블록을 사용합니다. 이 새로운 기능에 대한 간단한 개요는 Github 비디오에서 찾을 수 있습니다. <p> <comb> Rich Tabor는 WABI 테마의 동적 악센트 색상 기능과 표지 및 게시 된 이미지 블록을 결합하여 새로운 주제에서 창의성을 더 확장하여 단일 게시물에서 동적 표지 이미지를 표시합니다. </comb></p> <i> 그의 Wei 발표 기사에서 Rich Tabor는 다음과 같이 썼습니다. "배경 장면, </i><p> 템플릿은 기사의 주요 이미지를 이용하는 커버 블록을 사용합니다. 그러면 2 톤은 기사에 할당 된 색 구성표를 통해 적용됩니다 <to> Wei 테마의 제목 커버 블록을 더 깊이보고 자신만의 커버 블록을 만드는 방법을 배우려면 Fränk Klein (WP Development Courses)의 짧은 비디오가 단계별로 설명합니다. </to></p> <i> Wei 테마와 유사한 Brian Gardner는 최근 Bright Mode 테마에 게시 된 이미지 블록이있는 커버 블록을 사용하여 매력적인 콘텐츠와 밝은 색상을 보여줍니다. </i><p> <w> Brian은 Wptavern에게 다음과 같이 말했습니다 : "그의 가장 좋아하는 테마는 표지 블록이 단일 페이지에서 사용되는 방법입니다. 특집 이미지를 커버 블록으로 끌어 당기고 그림자 및 전체 높이 옵션을위한 맞춤형 블록 스타일을 제공합니다.… 이것이 현대적인 WordPress의 가능성을 실제로 보여줍니다."<code>single.html</code>>. 자세한 내용은 데모 웹 사이트와 Brian의 Bright Mode 테마에 대한 전체 리뷰를 방문하십시오. </w></p> <out> 블록 편집기를 사용하여 복잡한 레이아웃을 설계합니다 최근 WordPress는 로그인 홈페이지 및 다운로드 페이지를 디자인하기위한 새로운 블록 편집기를 발표했습니다. 이 발표는 Automatic의 Matt Mullenweg를 포함하여 독자들로부터 다양한 반응을 일으켰으며, "간단한 페이지"를 디자인하고 게시하는 데 걸리는 33 일 동안 언급했습니다. 여기에서 다른 비하인드 토론을 찾을 수 있습니다. <p> 이에 대한 응답으로 Pootlepress의 Jamie Marsland는이 YouTube 비디오를 만들었고 거의 20 분 안에 거의 동일한 홈페이지를 재현했습니다. </p> <ver> WP Travern의 Sarah Gooding은 Marsland의 비디오에 대해 다음과 같이 언급했습니다. "그는 블록 편집기의 베테랑 사용자라고 할 수 있습니다. 그는 줄, 열 및 그룹을 신속하게 조정하고 필요에 따라 패드 및 마진을 조정할 수 있으며 각 블록에 해당 디자인 색상을 할당 할 수 있습니다. 현재 대부분의 일반적인 Wordpress 사용자는이를 수행 할 수 없습니다. <has> 블록 편집기가 큰 진전을 이루었지만 대부분의 테마 개발자와 일반 사용자를위한 복잡한 레이아웃을 만들고 설계하는 데 여전히 어려움이 있습니다. <p> <ements> TT2 Gopher 블록에 향상된 기능을 추가하십시오 이 섹션에서는 이전 게시물에서 언급 한 TT2 Gopher 블록 테마에 향상된 방법을 추가하는 방법을 안내해 드리겠습니다. 앞에서 설명한 테마의 커버 블록에서 영감을 얻은 3 개의 커버 템플릿 (저자, 카테고리 및 단일 페이지 표지)을 테마에 추가하고 싶었습니다. </ements></p> <ing> 웹 사이트를 탐색 할 때 두 가지 유형의 표지 제목이 나타납니다. 가장 일반적인 제목은 커버 블록이 웹 사이트 제목 (사이트 제목 및 최고 탐색)이 커버 블록 (예 : 20, 20, 2222-2, Wei, Wabi, Frost, Bright Mode 등)에 융합된다는 것입니다. 또한 제목 커버 블록이 웹 사이트 제목과 혼합되지는 않지만 BBC Future 웹 사이트와 같이 바로 아래에 있습니다. TT2 Gopher Blocks 테마의 경우 후자를 선택했습니다. <p> <mode> 표지 제목 모드 생성 먼저, 저자, 단일 기사 및 표지 블록을 사용하여 기타 (카테고리, 레이블) 템플릿에 대한 표지 제목 패턴을 만들어 봅시다. 그런 다음 패턴으로 변환하고 해당 제목 커버 패턴을 템플릿으로 호출합니다. <h3> <familiar> 블록 편집기에 익숙한 경우 사이트 편집기의 표지 블록으로 제목 블록을 디자인하고 표지 제목 코드를 패턴으로 변환하십시오. 그러나 FSE 편집기에 익숙하지 않은 경우 가장 쉬운 방법은 기사의 패턴 디렉토리에서 패턴을 복사 한 다음 필요한 수정을 한 다음 패턴으로 변환하는 것입니다. </familiar> </h3> <c> 이전 CSS- 트릭 기사에서 블록 패턴의 생성 및 사용에 대해 자세히 논의했습니다. 다음은 단일 기사 표지 제목 패턴을 만들기위한 워크 플로에 대한 개요입니다. <p> 단일 기사 표지 제목 모드 </p> <p> 1 단계 : FSE 인터페이스를 사용하여 새 빈 파일을 만들고 왼쪽 패널에 표시된 블록 구조를 구축하기 시작하겠습니다. </p> <p> 또는 기사 나 페이지에서 먼저 수행 한 다음 마크 업을 스키마 파일에 복사하여 붙여 넣을 수 있습니다. </p> 2 단계 <p> : 다음으로 위의 마크를 모드로 변환하려면 먼저 코드 마크를 복사하여 코드 편집기의 새 <strong> 파일에 붙여 넣어야합니다. 또한 필요한 스키마 파일 제목 태그 (예 : 제목, 슬러그, 카테고리, 삽입기 등)를 추가해야합니다. <em> <the> 다음은 </the></em> 파일의 완전한 코드입니다 : </strong> </p> 3 단계 :이 데모의 경우 사진 디렉토리 에서이 이미지를 채우기 배경 이미지로 사용하고 Midnight 2 톤 색상을 적용했습니다. 기사가 특징 이미지를 동적으로 사용하려면 위에서 언급 한 채우기 링크를 교체하여 </c></mode></p> <p>>를 추가하여 10 행은 다음과 같이 보이도록 추가해야합니다. </p> 또는 를 클릭하고 <p>를 선택하여 채우기 이미지를 변경할 수도 있습니다. <cover> 이제 제목 표지 모드는 모드 삽입 패널에 표시되어야하며 템플릿, 기사 및 페이지의 어느 곳에서나 사용할 수 있습니다. <em> </em> <code>/patterns/header-single-cover.php</code> 아카이브 표지 제목 </cover></p> <this>이 WP 선술집 기사와 저자 템플릿 제목을 만드는 단계별 연습으로 유사한 표지 제목을 만들어 TT2 Gopher 주제에 추가하고 싶었습니다. <p> 먼저, 위의 워크 플로에 따라 템플릿에 대한 아카이브 표지 제목 패턴을 만들어 봅시다. 이 경우 블록을 추가하여 새 빈 페이지에서 작성합니다 (아래 목록보기에 표시된대로) : . <of> 표지의 배경에서, 나는 단일 포스트 제목의 표지에 사용 된 것과 동일한 이미지를 사용했습니다. <p> <to> 저자 블록에 짧은 저자 프로필을 표시하려면 사용자 프로필 페이지에 전기 진술을 추가해야합니다. 그렇지 않으면 프론트 엔드에 빈 공간이 표시됩니다. <code>author.html</code> <the> 다음은 패턴으로 사용할 </the></to></p>의 태그 코드입니다. <p> <tag> 태그를 </tag></p> 모드로 변환하려면 앞에서 설명한대로 필요한 패턴 파일 제목 태그를 추가해야합니다. 모드를 편집하면 레이블, 분류 및 기타 사용자 정의 템플릿에 대한 유사한 표지 제목을 만들 수 있습니다. <p> </p> 모드는 템플릿의 github에서 사용할 수 있습니다. <p> <ates> 커버 블록을 사용하여 템플릿을 만듭니다 WordPress 6.0 및 가장 최근에 Gutenberg 13.7 템플릿 생성 기능을 블록 편집기로 확장하므로 많은 WordPress 사용자가 심층 코딩 지식 없이도 사용자 정의 템플릿을 만들 수 있습니다. <code>header-author-cover</code> 자세한 내용 및 사용 사례는 Justin Tadlock의 포괄적 인 사용자 정의 지침을 참조하십시오. </ates></p> <allows> 블록 편집기를 사용하면 커버 템플릿을 포함한 다양한 유형의 템플릿을 생성 할 수 있습니다. 커버 블록과 게시 된 이미지 블록을 새로운 템플릿 UI와 결합하여 소량의 코딩 기술없이 다양한 유형의 커버 사용자 정의 템플릿을 쉽게 만들 수있는 방법을 간략하게 설명해 봅시다. <pre class="brush:php;toolbar:false"><?php /** * Title: Header cover single * Slug: tt2gopher/header-cover-single * Categories: tt2gopher-header * Block Types: core/template-part/header * inserter: yes */ ?> <div style="margin-top:0px;margin-bottom:0px;min-height:50vh"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%" style="max-width:90%"> <div> <div> <div> <p>|</p> </div> </div> </div> </div>

로그인 후 복사

Gutenberg 13.7에서는 템플릿을 만드는 것이 훨씬 쉽습니다. 코드 및 사이트 편집기에서 블록 템플릿을 만드는 방법은

주제 설명서 header-author-cover 및 이전 게시물에 설명되어 있습니다. header-author-cover.php

표지 블록이있는 저자 템플릿 header-category-cover.php category.html 템플릿의 상단 (제목 블록) 마크는 다음과 같습니다 (6 행) :

다음은