우리가 탐색하면 워드 프레스 테마 디렉토리, 대부분의 테마는 표지 이미지를 보여줍니다. 대중적인 수요가 있는 기능입니다. 표지 트렌드는 블록 테마 디렉토리 스크린샷도.
다음 예를 살펴보겠습니다. 스물 스물 (클래식 테마) 표지 템플릿 단일 게시물과 페이지 모두에 표시하는 데 사용할 수 있습니다. 여기서 게시물의 추천 이미지는 브라우저 화면 전체에 걸쳐 맨 위에 표시되고 게시물 제목 및 기타 원하는 메타 데이터는 아래에 표시됩니다. 표지 템플릿을 사용하면 콘텐츠 표시의 기존 제약 조건에서 눈에 띄는 콘텐츠를 만들 수 있습니다.
표지 템플릿을 만들려면 현재 여기에서 캡처한 대로 PHP 코드를 작성해야 합니다. Twenty Twenty 기본 테마의 표지 템플릿. 우리가 보면 template-parts/content-cover.php 파일에 포함되어 있습니다. 암호 콘텐츠를 표시하기 위해 cover-template 사용.
따라서 PHP에 대한 깊은 지식이 없으면 맞춤형 표지를 만드는 것이 불가능합니다. 많은 일반 WordPress 사용자의 경우 유일한 옵션은 다음과 같은 플러그인을 사용하는 것입니다. Custom Post Type UI 에 설명 된대로 이 짧은 비디오.
블록 테마의 커버 섹션
이후 워드 프레스 5.8, 테마 작성자는 다음을 사용하여 상위 영웅 섹션으로 사용자 정의 템플릿(단일 게시물, 작성자, 카테고리 등)을 만들 수 있습니다. 블록 편집기 최소한의 코드로 또는 전혀 없이 블록을 커버하고 테마로 묶습니다.
블록 테마 템플릿에서 가장 큰 표지 섹션을 만드는 방법에 대해 알아보기 전에 두 개의 블록 테마를 간단히 살펴보겠습니다. 스물 스물 둘 과 와비 Rich Tabor 작성(전체 검토 여기에서 지금 확인해 보세요.).
무대 뒤에서 Twenty Twenty-Two는 다음과 같이 큰 헤더를 구현합니다. 패턴으로 저장된 숨겨진 이미지 추가 FBI 증오 범죄 보고서 header-dark-large 부속. 반면 Wabi 테마에서는 단일 게시물의 큰 헤더 배경색이 다음과 같이 구현됩니다. 악센트 배경색 및 50px 높이 스페이서 블록 (줄: 5-9). 악센트 색상은 assets/js/accent-colors.js 파일.
많은 사람들이 다음을 사용하여 상단 표지 섹션을 만들기로 선택했습니다. 커버 블록, 사용자가 코드를 작성하지 않고도 배경색을 변경하고 미디어 라이브러리에서 정적 이미지를 추가하거나 미디어 장치에서 업로드할 수 있습니다. 이 접근 방식을 사용하면 이미지의 추천 이미지 블록 게시 게시물 추천 이미지를 단일 게시물의 배경 이미지로 사용하려면 각 단일 게시물에 수동으로 추가해야 했습니다.
동적 게시물 추천 이미지가 있는 커버 블록
WordPress 6.0은 또 다른 멋진 기능을 제공합니다. 추천 이미지 커버 블록 어떤 게시물이나 페이지의 추천 이미지를 표지 블록의 배경 이미지로 사용할 수 있는 기능입니다.
다음에서 간략한 비디오, Automattic 엔지니어는 Archaeo 주제 :
포스트 추천 이미지 블록을 포함하는 이미지 블록은 다음을 사용하여 추가로 사용자 정의할 수 있습니다. duotone 에 색 theme.json 이 짧은 글에서 논의된 것처럼 점들을 잇는 YouTube 비디오(Automattic의 Anne McCarthy).
사용 사례(Wei, 밝은 모드)
썸네일 이미지를 찾아보면 블록 테마 디렉토리, 대부분이 큰 표지 헤더 섹션을 포함합니다. 템플릿 파일을 살펴보면 정적 이미지 배경이 있는 표지 블록을 사용합니다.
최근에 개발된 일부 테마는 동적 포스트 기능 이미지 배경(예: Archeo, Wei, Frost, Bright Mode 등)과 함께 표지 블록을 사용하고 있습니다. 새 기능에 대한 간략한 개요는 다음에서 확인할 수 있습니다. 이 짧은 GitHub 비디오.
역동적인 악센트 색상 기능을 결합 와비 표지와 포스트 특집 이미지 블록이 있는 테마로, Rich Tabor는 그의 새로운 웨이 테마(전체 검토 가능 여기에서 지금 확인해 보세요.) 단일 게시물의 동적 표지 이미지를 표시합니다.
그의 Wei 발표 게시물에서, 리치 타보르 씁니다: “비하인드 스토리, single.html 템플릿은 게시물의 추천 이미지를 활용하는 Cover 블록을 사용하고 있습니다. 그런 다음 포스트에 할당된 색 구성표에 따라 이중톤이 적용됩니다. 이렇게 하면 거의 모든 이미지가 잘 보일 것입니다."
Wei 테마의 헤더 커버 블록에 대해 더 자세히 알아보고 자신만의 블록을 만드는 방법을 배우고 싶다면 여기를 참조하십시오. 간략한 비디오 에 프랭크 클라인 (WP 개발 과정)이 어떻게 만들어 졌는지 단계별로 설명합니다.
Wei 테마와 유사하게, 브라이언 가드너 또한 최근에 포스트 특집 이미지 블록과 함께 표지 블록을 사용합니다. 밝은 모드 눈에 띄는 콘텐츠를 표시하는 테마 생생한 색상.
Brian은 WPTavern에 말했습니다.: “그는 테마에 대해 가장 좋아하는 것은 Cover Block이 사용되는 방식입니다. 단일 페이지. 추천 이미지를 Cover 블록으로 가져오고 그림자 및 전체 높이 옵션에 대한 사용자 정의 블록 스타일도 제공합니다. [… ] 이것이 현대 워드프레스에서 가능한 것을 실제로 보여주는 것처럼 느껴집니다.”
자세한 내용은 다음과 같습니다. 데모 사이트 과 Brian의 밝은 모드 테마에 대한 전체 검토.
블록 편집기로 복잡한 레이아웃 디자인하기
최근 WordPress는 설계된 새로운 블록 편집기를 출시했습니다. 방문 홈페이지 및 다운로드 페이지로. 발표 엇갈린 반응을 얻었다 를 포함하여 독자들로부터 맷 뮬렌웨그 (Automattic) 그런 "간단한 페이지"를 디자인하고 출시하는 데 걸린 33일에 대해 언급했습니다. 당신은 찾을 수 있습니다 여기에 추가 비하인드 스토리 토론.
이에 대한 응답으로 Pootlepress의 Jamie Marsland는 이 YouTube 동영상 거의 20분 만에 거의 동일한 홈페이지를 재현합니다.
Marsland 비디오에 대한 논평, WP Travern의 Sarah Gooding은 다음과 같이 씁니다.: “그는 블록 편집기를 사용하는 고급 사용자라고 할 수 있습니다. 그는 행, 열 및 그룹을 빠르게 섞고 필요에 따라 패딩과 여백을 조정하고 각 섹션에 디자인에 해당하는 색상을 할당할 수 있습니다. 현시점에서 이것은 보통의 워드프레스 사용자들이 할 수 있는 일이 아닙니다.”
블록 편집기가 먼 길을 왔음에도 불구하고 대부분의 테마 개발자와 일반 사용자는 여전히 복잡한 레이아웃을 만들고 디자인하는 데 어려움을 겪고 있습니다.
TT2 Gopher 블록에 개선 사항 추가
이 섹션에서는 에 개선 사항을 추가한 방법을 안내해 드리겠습니다. TT2 고퍼 블록 테마 내 이전 기사에서 참조한 것입니다. 앞서 설명한 테마의 표지 블록에서 영감을 받아 테마에 세 가지 표지 템플릿(저자, 카테고리 및 단일 표지)을 추가하고 싶었습니다.
웹사이트를 탐색하는 동안 두 가지 유형의 표지 헤더를 발견합니다. 가장 많이 관찰되는 헤더는 표지 섹션(예: Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode 등)으로 사이트 헤더(사이트 제목 및 상단 탐색)와 혼합된 표지 섹션입니다. 또한 다음과 같이 사이트 헤더와 혼합되지 않고 바로 아래에 위치한 헤더 커버 섹션을 찾습니다. BBC 미래 웹사이트. TT2 Gopher 블록 테마의 경우 후자를 선택했습니다.
표지 헤더 패턴 만들기
먼저 표지 블록을 사용하여 작성자, 단일 및 기타(카테고리, 태그) 템플릿에 대한 표지 헤더 패턴을 생성해 보겠습니다. 그런 다음 패턴으로 변환합니다(설명된 대로 여기 이전에) 각 헤더 표지 패턴을 템플릿으로 호출합니다.
블록 편집기 작업에 익숙하다면 사이트 편집기에서 표지 블록을 사용하여 헤더 섹션을 디자인한 다음 표지 헤더 코드를 패턴으로 변환합니다. 그러나 FSE 편집기에 익숙하지 않은 경우 가장 쉬운 방법은 패턴 디렉토리 게시물에서 필요한 수정을 하고 패턴으로 변환합니다.
내에서 이전 CSS 트릭 기사, 블록 패턴 생성 및 사용에 대해 자세히 설명했습니다. 다음은 단일 게시물 표지 헤더 패턴을 만드는 데 사용하는 워크플로에 대한 간략한 개요입니다.
단일 포스트 표지 헤더 패턴
1단계: FSE 인터페이스를 사용하여 새 빈 파일을 만들고 왼쪽 패널과 같이 빌딩 블록 구조를 시작합니다.
또는 게시물이나 페이지에서 먼저 수행한 다음 나중에 마크업을 복사하여 패턴 파일에 붙여넣을 수 있습니다.
2단계: 다음으로 위의 마크업을 패턴으로 변환하려면 먼저 코드 마크업을 복사하여 새 마크업에 붙여넣어야 합니다. /patterns/header-single-cover.php 우리의 코드 편집기에서. 또한 필수 패턴 파일 헤더 마크업(예: 제목, 슬러그, 카테고리, 삽입기 등)을 추가해야 합니다.
다음은 전체 코드입니다. /patterns/header-single-cover.php 파일 :
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
3단계: 이 데모에서는 사진 디렉토리의 이 이미지 필러 배경 이미지로 적용하여 한밤중 이중톤 색상. 게시물 추천 이미지를 동적으로 사용하려면 다음을 추가해야 합니다. "useFeaturedImage":true 바로 앞의 필러 이미지 링크를 교체하여 커버 블록에서 "dimRatio":50 10번째 줄은 다음과 같아야 합니다.
또는 필러 이미지를 클릭하여 변경할 수도 있습니다. 교체 및 추천 이미지 사용 옵션 :
이제 템플릿, 게시물, 페이지 어디에서나 사용할 수 있도록 헤더 표지 패턴이 패턴 삽입기 패널에 표시되어야 합니다.
아카이브 표지 헤더
에 의해 영감을 이 WP 선술집 게시물 작성자 템플릿 헤더를 만드는 단계별 연습에서 비슷한 표지 헤더를 만들고 TT2 Gopher 테마에도 추가하고 싶었습니다.
먼저 아카이브 표지 헤더 패턴을 생성해 보겠습니다. author.html 템플릿도 위의 워크플로를 따릅니다. 이 경우 블록을 추가하여 새 빈 페이지에 이것을 생성합니다(아래 목록 보기 참조).
표지 배경은 싱글 포스트 헤더 표지에 사용한 것과 동일한 이미지를 사용했습니다.
저자 블록에 짧은 저자 약력을 표시하고 싶기 때문에 사용자 프로필 페이지에도 약력을 추가해야 합니다. 그렇지 않으면 프런트 엔드에 공백이 표시됩니다.
다음은 마크업 코드입니다. header-author-cover, 다음 단계에서 패턴을 사용할 것입니다.
Published by:
마크업을 header-author-cover 패턴을 사용하려면 앞에서 설명한 대로 필수 패턴 파일 헤더 마크업을 추가해야 합니다. 편집하여 header-author-cover.php 패턴을 사용하면 태그, 분류 및 기타 사용자 정의 템플릿에 대해 유사한 헤더 표지를 만들 수 있습니다.
header-category-cover.php 내 패턴 category.html 템플릿은 GitHub에서 사용할 수 있습니다..
헤더 커버 블록으로 템플릿 생성
워드 프레스 6.0 그리고 최근의를 구텐베르크 13.7 확장된 템플릿 생성 기능을 블록 편집기에 추가하여 코딩에 대한 깊은 지식 없이도 많은 WordPress 사용자가 맞춤형 템플릿을 생성할 수 있습니다.
자세한 정보 및 사용 사례는 다음을 참조하십시오. Justin Tadlock의 철저한 사용자 정의 노트.
블록 편집기 표지 템플릿을 포함하여 다양한 유형의 템플릿을 만들 수 있습니다. 결합하는 방법을 간략하게 살펴보겠습니다. 커버 블록 과 추천 이미지 블록 게시 새로운 템플릿 UI를 사용하면 코딩 기술이 없거나 부족한 경우에도 다양한 유형의 표지 사용자 정의 템플릿을 쉽게 만들 수 있습니다.
Gutenberg 13.7에서는 템플릿 생성이 훨씬 쉬워졌습니다. 블록 템플릿을 만드는 방법 코드 포함 과 사이트 편집기에서 에 설명되어 있습니다 테마 핸드북 으로 혹은 나의 이전 기사.
표지 블록이 있는 작성자 템플릿
상단(머리글 섹션) 마크업 author.html 템플릿은 아래와 같습니다(6행).
...
...
...
... 다음은 표지 헤더의 스크린샷입니다. author.html 과 category.html 템플릿 :
전체 두 템플릿의 코드는 GitHub에서 사용할 수 있습니다..
커버 블록이 있는 단일 포스트
단일 게시물에 표지 블록을 표시하려면 다음을 호출해야 합니다. header-cover-single pattern 헤더 섹션 아래(라인 3):
....
....
....다음은 헤더 커버 섹션이 있는 단일 게시물의 프런트 엔드 보기를 보여주는 화면 캡처입니다.
전체 single-cover.html 템플릿은 GitHub에서 사용할 수 있습니다..
만들기에 대한 추가 단계별 연습 자습서를 찾을 수 있습니다. 영웅 헤더 포스트 섹션 과 게시물 추천 이미지 배경 커버 블록 사용 on WP 선술집 과 전체 사이트 편집 웹 사이트를 방문 하십시오.
거기 있군!
유용한 자료
추천 이미지 커버 블록
Blog Posts
블록 테마는 일반적으로 WordPress 커뮤니티 회원으로부터 많은 푸시백 받기, 내 생각에, 그들은 WordPress의 미래입니다, 도. 블록 테마를 사용하면 PHP 및 JavaScript 언어에 대한 깊은 코딩 기술과 숙달이 없는 아마추어 테마 작성자가 이제 이 기사에서 설명한 대로 다음과 결합된 영웅 표지 섹션이 있는 복잡한 레이아웃의 테마를 만들 수 있습니다. 패턴 과 스타일 변형.
초기 Gutenberg 사용자로서, 블록 테마 만들기 테마 작성자가 코드를 작성하지 않고 블록 편집기 UI에서 직접 다음을 달성할 수 있는 플러그인 및 기타:
- 은 (i) 만들
- (ii) 테마 파일 덮어쓰기 및 내보내기
- (iii) 공백 또는 하위 테마를 생성하고,
- (iv) 현재 테마의 스타일 변형 수정 및 저장
또한 Gutenberg 플러그인의 최근 반복을 통해 유체 타이포그래피 과 레이아웃 정렬 및 기타 스타일 컨트롤만을 사용하여 theme.json JavaScript 및 CSS 규칙 행이 없는 파일입니다.
읽어주셔서 감사합니다. 아래의 의견과 생각을 공유해 주세요!
