Twenty Twenty-One: 새로운 기본 WordPress 테마를 먼저 살펴보세요

Twenty Twenty-One은 WordPress 5.6과 함께 제공되는 새로운 WordPress 기본 테마입니다. 이전 버전의 경우와 마찬가지로 Twenty Twenty-One WordPress 테마는 미니멀리스트 테마 디자인을 계속합니다. 자신의 기반이 될 훌륭한 테마를 찾고 있다면 운이 좋은 것입니다.

이 기사에서는 Twenty Twenty-One 테마의 기능을 살펴보고 추가 작업 없이 모양을 사용자 정의하는 방법을 보여줍니다. 뛰어들어봅시다.

Twenty Twenty-One은 2020년 12월 8일에 출시될 예정인 WordPress 5.6과 함께 제공됩니다. 그러나 지금 테마를 설치하려면 Github에서 Twenty Twenty-One zip 파일을 가져와서 다른 것과 마찬가지로 설치할 수 있습니다. 다른 테마.

이전의 다른 모든 기본 테마와 마찬가지로 Twenty Twenty-One은 잘 문서화되어 있을 뿐만 아니라 테마 개발의 현재 모범 사례를 많이 갖추고 있습니다. Twenty Twenty-One은 WordPress 블록 편집기를 염두에 두고 만들어졌습니다.

설치하면 이 테마가 얼마나 멋진지 즉시 알 수 있습니다. 사실, 나는 기본 테마의 열렬한 팬이 아닙니다. 제가 자주 사용하는 몇 가지 테마가 있습니다. 그러나 이 테마를 가지고 놀고 나면, 사용자 정의 테마로 사이트를 구축하는 경우 Twenty Twenty-One을 메인 테마로 사용하는 것을 정말로 볼 수 있을 것이라고 의심 없이 말할 수 있습니다.

더 알고 싶으십니까? 1월에 있을 예정인 프리미엄 교육 이벤트에서 블록 편집기를 사용하여 테마 구축을 훨씬 더 자세히 다룰 것입니다. 지금 WordPress 블록 편집기를 사용하여 테마 구축을 위한 자리를 잡으세요.

좋습니다. 나머지 게시물과 함께 자세히 살펴보고 싶은 기능이 많이 있으므로 테마 기능 중 일부를 살펴보겠습니다.

Twenty Twenty-One 테마 및 블록 기능

Twenty Twenty-One은 WordPress 테마 구축의 모범 사례를 배우기 위한 훌륭한 시작 테마입니다. 따라서 테마가 활용할 수 있는 여러 기능을 지원하고 포함한다는 사실은 누구도 놀라지 않을 것입니다.

Twenty Twenty-One을 사용한 페이지 구축을 위해 Gutenberg Editor에 대한 의존도가 높기 때문에 게시물 썸네일 및 탐색과 같은 테마 기능을 지원할 뿐만 아니라 WordPress 블록과 관련된 여러 기능도 지원해야 합니다.

Twenty Twenty-One에 대해 깊이 파고들 때 가장 좋아하는 것은 요즘 테마를 구축하는 것이 어떤 것인지 보는 것입니다. 페이지 빌더와 코드 없는 솔루션의 시대에는 WordPress 자체 내에서 테마 시스템의 뿌리를 잊어버리기 쉽습니다.

HTML, CSS 및 JS 라이브러리의 일부 발전 사항을 사용하기 시작하면서 앞으로 몇 년 동안 테마 시스템이 어떻게 될 것인지 정말 기대됩니다. 그리고 Twenty Twenty-One에 구축된 블록 스타일과 패턴 중 일부를 확인하게 되어 매우 기쁩니다. 잠시 후에 고급 기능에 대해 살펴보겠지만 먼저 몇 가지 기본 사항을 살펴보겠습니다.

테마 기능

• 제목 태그
• 게시물 형식
• 미리보기 이미지 게시
• HTML5 요소
• 사용자 정의 헤더 로고
• 사용자 정의 배경
• 두 개의 탐색 메뉴(YAY!)
• 단일 사이드바

차단 기능

• 기본 스타일
• 편집기 스타일
• 어두운 편집기 스타일(어두운 모드일 때)
• 넓게 정렬
• 글꼴 크기
• 색상 팔레트
• 그라디언트 사전 설정
• 스타터 콘텐츠
• 반응형 임베드

일부 누락된 부분이 있다고 확신하지만, 이것은 Twenty Twenty-One에서 기본적으로 사용할 수 있는 기능에 대한 아이디어를 제공할 것입니다. 다음 목록에는 내가 가장 흥미롭고 좀 더 자세히 살펴보고 싶은 기능이 포함되어 있습니다.

두 가지 메뉴

기본 테마가 마침내 여러 메뉴를 지원한다는 사실 때문에 이것이 아마도 제가 가장 기대하는 기능이라고 생각합니다. 메뉴는 웹사이트에서 없어서는 안 될 중요한 부분이며, 항상 기본적으로 사용할 수 있는 단일 메뉴만 지원하는 것이 너무 제한적이라고 느꼈습니다.

고맙게도 Twenty Twenty-One을 사용하면 이제 두 가지 메뉴를 추가할 수 있습니다. 머리글에 하나, 바닥글에 하나가 있습니다.

Cover Block의 흥미로운 기능

코어 커버 블록을 사용한 적이 없습니다. 그러나 Twenty Twenty-One을 테스트하는 동안 우연히 두 개의 표지 블록을 3열 레이아웃에 드롭하고 고정된 배경 이미지를 추가했습니다. 모든 커버 블록으로 이 작업을 수행하면 상자 효과가 적용된다는 사실을 알고 계셨습니까? 이것 좀 봐.

다양한 방식으로 사용되는 것을 볼 수 있는데, 이미 사용하기 시작한 사람이 있는지 궁금합니다. 의견에 알려주십시오.

게시물 형식

포스트 형식이 WordPress 코어와 함께 처음 제공되었을 때를 기억합니다. 그것은 그들이 가지고 놀았던 아이디어였고 나는 그들이 표준이 되는 것을 보고 정말 기뻤습니다. 물론 테마가 지원되기까지 시간이 좀 걸렸지만, 그럼에도 불구하고 여전히 Twenty Twenty-One에서 사용하고 있다는 사실은 여전히 ​​사랑을 받아야 함을 보여줍니다.

Twenty Twenty-One은 9가지 포스트 형식을 지원합니다.

• 연결
• 제쳐두고
• 갤러리
• 이미지
• 인용 부호
• 상태
• 비디오
• 오디오
• 채팅

편집기 설정의 상태 및 가시성 패널에서 사용할 수 있습니다. 내가 정말 좋아하는 것은 블로그 게시물, 오디오 파일 및 비디오 파일과 같은 여러 유형의 콘텐츠를 만드는 블로그 콘텐츠입니다.

편집기 글꼴 크기

페이지 빌더를 보기 시작하면 사이트의 스타일이 변경될 것이라는 우려가 항상 있습니다. 저는 수년 동안 많은 고객과 함께 일했으며 수년 동안 여러 페이지 빌더와 함께 일했습니다. 내가 가질 수 있는 가장 큰 우려는 클라이언트가 페이지를 최신 Geocities로 빠르게 전환할 것이라는 점입니다.

이것이 Editor Font 크기가 필요한 곳입니다. 테마가 테마의 스타일시트에서 크기를 설정하면 블록과 함께 사용하기가 매우 쉽습니다. Twenty Twenty-One은 다음 글꼴 크기를 지원합니다.

• 초소형 – 16
• 소형 – 18
• 보통/중간 – 20
• 대형 – 24
• 초대형 – 40
• 거대한 – 96
• 자이언트 – 144

색상 설정

페이지 빌더와 관련된 또 다른 관심사는 색상입니다. 나는 항상 클라이언트가 스스로 일을 할 수 있는지 확인하고 싶습니다. 그 중 일부는 페이지 등에 올바른 색 구성표를 적용할 수 있는지 확인하는 것입니다. 저는 이것이 최소한 기본적으로는 Twenty Twenty-One 테마에서 가장 큰 미스라고 생각합니다.

사용자 정의 도구에는 두 가지 옵션만 포함하는 색상 및 어두운 모드(후자는 더 아래에 있음) 패널이 있습니다.

• 10개의 미리 정의된 색상 팔레트가 있는 간단한 색상 선택기.
• 다크 모드를 켜고 끄는 확인란입니다.

여기에는 배경색을 변경하는 옵션만 있습니다. 파스텔 그린에서 여러 다른 배경색 대안으로 변경할 수 있습니다. 이러한 동일한 색상은 편집기의 블록 설정에서 블록 색상 팔레트로 사용할 수 있습니다.

잠시 다크 모드 옵션에 대해 알아보겠습니다.

다크 모드 지원

저는 Mac을 사용 중이고 그들이 UI에 다크 모드 옵션을 도입한 이후로 저는 그곳으로 이사했습니다. 나는 당신이 말하려는 것이 다크 모드가 개발자를 위한 것이라고 확신합니다. 다크 모드가 눈에 좋은지 아닌지에 대한 많은 믿음이 있습니다. 그건 당신이 스스로 결정하도록 할게요.

Twenty Twenty-One을 사용하면 사이트에서 다크 모드를 활성화할 수 있습니다. 방법은 다음과 같습니다.

• 다크 모드 지원은 사이트 소유자를 위한 옵트인 기능으로 사용할 수 있습니다.
• 토글 버튼은 편집기 인터페이스에서 제거되었으며 사용자 지정 프로그램에서만 사용할 수 있습니다.
• 다크 모드 토글 버튼은 오른쪽 하단(왼쪽 또는 RTL)에 있으며 사이트 뷰어가 페이지를 아래로 스크롤하면 사라집니다.
• 다크 모드가 활성화되면 사이트 뷰어는 OS/브라우저 설정에 관계없이 개인 기본 설정에 따라 켜거나 끌 수 있습니다.

결국, 다크 모드는 여전히 약간의 참신함을 느낍니다. 이것이 계속해서 더 유용한 것으로 발전할지, 아니면 폐기된다면 Twenty Twenty-Two 테마가 나올지 지켜보는 것도 흥미로울 것이라고 생각합니다.

블록 패턴

WordPress 블록 패턴은 WordPress 5.5와 함께 도입되었으며 Twenty Twenty-One에서는 전체 블록 패턴 세트를 볼 수 있습니다.

우리는 이전에 블록 패턴을 다루었지만 TL;DR; 블록 패턴의 경우 사용자가 몇 개의 버튼만 클릭하여 복잡한 레이아웃을 원하는 수만큼 생성할 수 있도록 하는 사전 정의된 레이아웃입니다.

코드를 조금 더 자세히 살펴보고 싶다면 inc/block-patterns.php를 확인하세요. 여기에서 Twenty Twenty-One이 정의하는 모든 블록 패턴을 볼 수 있습니다.

테스트 당시 테마가 정의한 블록 패턴은 다음과 같습니다.

• 큰 텍스트
• 링크 영역
• 미디어 및 텍스트 기사 제목
• 겹치는 이미지
• 두 개의 이미지 쇼케이스
• 이미지와 텍스트 겹침
• 포트폴리오 목록
• 연락처 정보

블록 패턴이 너무 많다는 사실은 우리가 어떻게 생성되는지 볼 수 있고 실제로 직접 생성할 수 있기 때문에 개발자인 우리에게 매우 좋습니다. 사용자로서 우리는 블로그 게시물과 페이지에 새롭고 흥미로운 레이아웃을 빠르고 쉽게 추가할 수 있는 일련의 블록 패턴을 가지고 있습니다.

스타일 지정 및 CSS 사용자 정의 속성

Twenty Twenty-One의 흥미로운 점 중 하나는 개발자를 위해 내장된 기능 세트입니다. 훌륭한 기능 중 일부를 끌어내기 위해 코드를 파헤쳐야 하므로 사용 가능한 CSS 사용자 정의 속성에 대해 이야기해 보겠습니다.

CSS 전처리기의 정말 훌륭한 기능은 CSS 내부에 변수를 포함할 수 있는 옵션입니다. 이렇게 하면 색상과 같은 것을 변수로 추가한 다음 CSS의 나머지 부분에서 사용할 수 있습니다. 이것이 CSS 사용자 정의 속성과 같은 것입니다.

CSS 사용자 정의 속성(일명 CSS 변수)은 스타일시트 전체에서 사용할 수 있는 특정 값을 포함하는 항목입니다.

이것이 어떻게 작동하는지 이야기해 봅시다.

이러한 CSS 사용자 정의 속성을 사용하려면 CSS의 :root 블록 내에서 속성 값을 설정해야 합니다. 다음은 Twenty Twenty-One 테마의 :root 블록에 대한 간단한 스크린샷입니다.

다음은 이를 사용하여 수행할 수 있는 작업의 예입니다. 이미지 주위에 테두리 색상을 추가하고 싶다고 가정해 보겠습니다. 이 약간의 코드로 할 수 있습니다.

:root {
  --global--color-red: #ff0000;
}

img {
  border: 1px solid var(--global--color-red);
}

첫 번째 섹션은 :root 블록에서 선언하는 것입니다. 그런 다음 테두리 선언에 var를 추가합니다.

그러나 이전 브라우저를 지원해야 하는 경우 CSS 사용자 정의 속성을 사용할 때 주의해야 합니다. 좋은 소식은 모든 주요 브라우저에서 지원되기 때문에 사이트를 보는 대부분의 사람들에게 작동할 것이라는 확신을 가질 수 있다는 것입니다.

마무리: Twenty Twenty-One, 확고한 주제

Twenty Twenty-One은 확고한 주제입니다. 기본 테마로 테마 개발의 기본을 배우거나 사용자 지정 하위 테마를 구축하려는 경우 훌륭한 출발점을 제공합니다.

모든 기본 WordPress 테마는 WordPress 코딩 표준을 따르므로 더 자세히 살펴보면 테마 개발을 위한 모범 사례를 배우고 볼 수 있습니다.

물론, 다음 웹 프로젝트를 위한 좋은 출발점을 원하신다면 그것도 가능합니다.

AJ 모리스

AJ는 다양한 고객과 함께 회원 사이트를 개발하고 개발한 20년 이상의 경험을 제공합니다.