DE{CODE}: 최신 테마 및 WordPress의 미래: 전체 사이트 편집 및 그 이상 작업

WordPress 5.9는 전체 사이트 편집을 코어에 도입하여 WordPress로 웹 사이트를 구축하는 방식에 큰 변화를 가져왔습니다. 이 DE{CODE} 세션에서 WP Engine Developer Advocate Nick Diego와 함께 이러한 변경 사항과 이를 활용하여 더 나은 웹사이트를 구축할 수 있는 몇 가지 방법(최신 WordPress 방식)에 대해 알아보세요.

세션 슬라이드

전체 텍스트 성적 증명서

NICK DIEGO : 안녕하세요. "WordPress에서 전체 사이트 편집 및 최신 테마의 미래"에 오신 것을 환영합니다. 제 이름은 Nick Diego이고 여기 WP Engine의 개발자 옹호자입니다. 그래서 나에 대해 조금 – 그래서 저는 2012년에 WordPress로 작업을 시작했습니다. 저는 주로 플러그인 개발자였으며 ​​그 이후로 블록 테마로 많은 작업을 수행하도록 전환했습니다. 저는 사실 2021년 11월에 WP Engine에 합류했기 때문에 이것은 저에게 일종의 새로운 공연입니다. 저는 블록과 패턴, 모든 전체 사이트 편집에 열정을 가지고 있습니다. 그래서 오늘 이 프레젠테이션을 하게 되어 매우 기쁩니다.

전체 사이트 편집이란 무엇입니까? 우리는 지난 몇 년 동안 그것에 대해 많이 들었습니다. 따라서 실제로는 "단지 게시물과 페이지가 아닌 사이트의 모든 부분에 블록의 친숙한 경험과 확장성을 제공하는 기능 모음"입니다. 따라서 실제로 사이트 편집기, 전역 스타일, 테마 블록, 템플릿 및 물론 블록 테마와 같은 기능을 포함하는 기능의 우산입니다.

그래서 오늘 우리의 대화에서 우리는 몇 가지 다른 것들을 다룰 것입니다. 기본부터 시작하겠습니다. 특히 용어의 관점에서 우리 모두가 같은 페이지에 있는지 확인하고 싶습니다. 그런 다음 블록 테마의 해부학적 구조, 전역 스타일, theme.json 파일을 포함하는 설정에 대해 이야기할 것입니다. 마지막으로 모던 테마에 대한 제 생각과 그것이 어떤 모습일지 공유하겠습니다.

그래서 오늘 프레젠테이션에서는 다양한 예를 사용할 예정이며, 2022년 1월 워드프레스 5.9에 포함된 2022 테마에서 가져온 것입니다. 이것은 코어에서 개발한 블록 테마입니다. WordPress 팀은 시작하기 좋은 곳이며 플러그인 리포지토리에서 사용할 수 있으므로 예제에 사용하기에 더 좋은 테마는 없습니다.

오늘 시작하면서 다시 기본부터 시작하겠습니다. 그리고 블록보다 더 기본적인 것은 없습니다. 따라서 지난 몇 년 동안 WordPress를 사용해 왔다면 아마도 블록에 매우 익숙할 것입니다. WordPress의 기본 콘텐츠 단위입니다. 이미지 갤러리의 텍스트 단락이 될 수 있습니다. 거의 모든 형태를 취할 수 있습니다. 그리고 전체 사이트 편집의 기본 아이디어는 조만간 웹사이트의 모든 것이 블록이 될 것이라는 것입니다. 그것이 어떻게 작동하는지에 대해 더 논의할 것입니다.

이제 여기에 현재 WordPress에 있는 다양한 블록의 예가 있습니다. 왼쪽 두 열은 잘 알고 있어야 합니다. 단락과 제목, 표지 블록 등이 있습니다. 올해 출시된 5.9에서는 이제 테마 블록이라는 것이 있습니다. 이들은 전통적으로 WordPress 내에서 직접 편집할 수 없는 콘텐츠인 블록입니다.

여기에는 사이트 로고, 쿼리 루프, 게시물 발췌, 게시물 작성자 등이 포함됩니다. 이것들은 PHP 기반 템플릿 파일과 코드를 직접 살펴보거나 이러한 영역을 편집하는 데 도움이 되는 타사 플러그인을 사용해야 하는 모든 유형의 콘텐츠입니다. 그리고 이것들은 모두 WordPress에 제공되거나 제공되었으며 사용자가 직접 편집할 수 있으며 모두 블록의 형태를 취합니다.

다음으로 패턴에 대해 이야기하고 싶습니다. 패턴은 전체 사이트 편집 경험의 초석과 같습니다. 패턴은 그 자체로 전체 대화가 될 수 있지만 익숙하지 않은 경우 패턴에 대한 약간의 미리보기를 제공할 것입니다. 따라서 패턴은 특정 레이아웃을 형성하는 사전 정의된 블록 모음일 뿐입니다. 패턴은 일부 스타일이 있는 단일 블록일 수 있습니다. 여러 블록이 될 수 있습니다.

패턴을 사용하면 한 번에 한 블록씩 수동으로 디자인을 작성하지 않고 클릭 한 번으로 전체 디자인을 사이트에 바로 삽입할 수 있어 사이트 개발 속도를 높일 수 있습니다. 또한 이 아름다운 웹사이트 데모를 기억한다면 정말 유용합니다. 여기에는 이 모든 콘텐츠가 포함되어 있습니다. 그리고 당신은 테마를 설치하고, 음, 어떻게 그 데모를 얻을 수 있습니까? 패턴은 테마 작성자가 클릭 한 번으로 사용자가 테마를 고를 때 보았고 마음에 들었던 데모를 삽입하고 가져올 수 있는 전체 페이지 레이아웃 또는 개별 디자인을 제공할 수 있기 때문에 문제를 해결합니다.

여기서 패턴을 간단히 살펴보겠습니다. 간단한 제목, 일부 텍스트 및 일부 버튼만 있습니다. 이것은 페이지에 한 번의 클릭으로 삽입될 수 있으며 여기에서 제목 블록, 단락 블록 및 단추 블록의 세 가지 다른 블록으로 구성되어 있음을 알 수 있습니다.

올해 출시된 5.9에서는 패턴 탐색기가 도입되었습니다. 그래서 앞서 언급한 2022년 테마는 우리의 모든 예에서 사용하고 있는 부화장 테마(많은 새)라고 합니다. 여기 패턴 탐색기에서 볼 수 있듯이 테마 작성자가 만든 다양한 디자인이 있습니다.

그래서 사용자로서 저는 이 중 아무거나 사이트에 직접 삽입할 수 있고 테마 작성자가 테마를 디자인한 것과 동일한 미학을 얻습니다. 그래서 스피커 시리즈, 새 몇 마리가 나란히 있습니다. 패턴, 테마와 함께 제공되는 패턴은 전체 사이트 편집 경험에 매우 중요합니다.

다음으로 에디터가 있습니다. 에디터에 대해 이야기하지 않을 수 없습니다. 워드프레스를 사용해 본 적이 있다면 매우 익숙할 것입니다. 그러나 에디터는 과거에 Block Editor, Gutenberg, The Gutenberg Editor 등 다양한 이름으로 불렸기 때문에 이 점을 언급하고 싶습니다. 이 토론의 목적을 위해 Editor를 호출할 것입니다. 이것이 공식 명칭이며 여기에서 보게 될 것입니다. 다시 말하지만 이것은 2018년 말 WordPress 5.0에서 다시 도입되었습니다.

따라서 Editor 내에서 Insertor를 클릭하기만 하면 블록과 패턴을 삽입할 수 있습니다. 이제 사이트 편집기에 대해 이야기해야 하므로 화면을 보여드리고자 합니다. 결국에는 Site Editor의 사이트 접두어가 사라지고 Editor만 남게 될 것입니다. 그러나 사이트 편집기는 다양한 템플릿, 템플릿 부분, 스타일 지정 옵션 등을 직접 편집하고 탐색할 수 있는 응집력 있는 환경입니다.

따라서 기본적으로 사이트 편집기는 지난 몇 년 동안 익숙해진 표준 편집기를 사용하여 사용자가 이제 모두 블록으로 구동되는 웹 사이트의 추가 영역을 편집할 수 있도록 하여 다음 단계로 끌어 올립니다. 그래서 WordPress 5.9는 전체 사이트 편집과 함께 사이트 편집기를 도입했습니다. 그리고 5월에 출시될 6.0에서는 이에 대한 많은 개선 사항을 보게 될 것입니다. 이는 매우 흥미로운 일입니다.

따라서 2022와 같은 블록 테마를 사용하는 경우 사이트 편집기에 액세스할 수 있습니다. 두 가지 방법이 있습니다. 상단 사이드바와 모양 섹션 아래에 있습니다. 이제 사이트 편집기는 매우 강력하고 관리자만 사용할 수 있는 기능의 일부이기 때문입니다. 편집자 여러분, 걱정하지 마십시오. 그들은 사이트 편집기에 액세스할 수 없습니다. 사이트 편집기에 액세스하려면 관리자여야 합니다.

여기로 들어가면 표준 편집기와 매우 유사해 보이지만 약간 다른 점이 있음을 알 수 있습니다. 여기 맨 위에 홈이 있습니다. 이것은 우리가 실제로 home.HTML 템플릿을 편집하고 있으며 페이지에서 개별적으로 편집할 수 있는 몇 가지 다른 영역이 있음을 알려줍니다. 여기에서 볼 수 있듯이 머리글과 바닥글이 있습니다.

그래서 이것은 당신이 전에는 결코 할 수 없었던 일입니다. home.PHP는 절대 편집할 수 없지만 이제는 다른 타사 확장 없이 인터페이스에서 직접 HTML 템플릿을 편집할 수 있습니다.

페이지와 목록 보기를 클릭하면 쿼리 루프가 있음을 알 수 있습니다. 다시 말하지만, 친숙한 빌딩 테마는 테마 템플릿 내에서 루프를 구축하는 데 매우, 매우, 매우 친숙할 수 있지만 여기서는 쿼리 루프를 사용하는 블록으로 모든 작업을 수행할 수 있습니다. 또한 게시물 제목, 추천 이미지, 게시물 발췌 및 게시물 날짜와 같은 다른 테마 블록도 볼 수 있습니다. 이 모든 것은 코딩이 필요 없이 인터페이스에서 사용자가 이동하고 수정할 수 있습니다.

이제 작은 WordPress 아이콘이나 사이트 아이콘을 클릭하면 이 사이드바를 얻을 수 있습니다. 그런 다음 모든 템플릿과 템플릿 부분에 액세스할 수 있음을 알 수 있습니다. 이제 흐름에 주목하고 싶습니다. 이 모든 화면은 완전히 개발 중입니다. 전체 사이트 편집은 아직 베타 버전이며 많은 개선과 개선이 이루어질 것입니다. 따라서 오늘 우리가 보고 있는 것이 6개월 후에는 같지 않을 수도 있지만 환상적인 시작입니다.

따라서 템플릿으로 이동하면 2022에 포함된 모든 템플릿을 볼 수 있습니다. Page, Index, Home 및 404와 같은 친숙한 템플릿이 표시되어야 합니다. 그런 다음 템플릿 부분으로 이동하면 일부 사용자 지정을 볼 수 있습니다. 테마 작성자가 포함시킨 템플릿 부분. 그래서 우리는 몇 가지 다른 머리글과 바닥글을 가지고 있습니다.

다시 말하지만 이 모든 항목은 사용자가 편집할 수 있습니다. 그래서 여기 이 작은 점이 보이면 이 헤더 템플릿 부분이 제가 편집했음을 알 수 있습니다. 이제 템플릿 부분이나 템플릿을 편집할 때 해당 변경 사항이 데이터베이스에 저장됩니다. 그들은 실제로 테마 템플릿을 수정하지 않습니다. 이는 항상 테마 템플릿 또는 템플릿 부분으로 되돌릴 수 있기 때문에 좋습니다.

그러나 다시 여기를 클릭하면 해당 헤더 템플릿 부분을 편집할 수 있으며 이 모든 것이 블록으로 구성되어 있음을 알 수 있습니다. 따라서 게시물이나 페이지를 편집할 때 편집기에서 사용하는 것과 동일한 환경입니다. 이제 모든 템플릿 및 템플릿 부분에 대해 사이트 편집기 내에서 이 작업을 수행할 수 있습니다.

여기까지 사이트 편집기와 작동 방식에 대한 간단한 설명이었습니다. 이제 전체 사이트 편집의 주요 기본 구성 요소인 블록 테마의 구조에 대해 이야기하고자 합니다. 그렇다면 블록 테마의 구조는 어떻게 작동할까요? 글쎄, 그것은 실제로 몇 가지 다른 범주로 나뉩니다. 그래서 블록 테마가 있습니다. 전체 사이트 편집을 완전히 수용합니다. 테마 템플릿은 전체 블록으로 구성됩니다. 템플릿과 템플릿 부분은 PHP가 아닌 HTML입니다.

그런 다음 블록 테마가 매우 간단할 수 있다는 점에 주목하고 싶습니다. style.CSS 파일과 index.html 파일, 그리고 index.PHP 파일만 있으면 됩니다. 이 PHP 파일은 전통적인 WordPress 테마 개발의 잔재이며 향후 사라질 가능성이 높습니다.

마지막으로 대부분의 블록 테마에는 theme.JSON 파일이 포함되어 있습니다. 이에 대해서는 별도로 이야기하겠습니다. 전역 설정 및 스타일에 관한 매우 중요한 주제입니다. 테마 파일 구조를 살펴보겠습니다. 그래서 이것은 2022년 내부의 파일 구조의 요약 버전인 2022입니다. 그리고 우리는 바로 여기에서 필요한 파일을 볼 수 있습니다.

그런 다음 일부 폴더, 즉 Templates 및 Template Parts가 있음을 알 수 있습니다. 이러한 각 폴더에는 각 템플릿 및 템플릿 부분에 대한 모든 HTML 파일이 있습니다. 여기에 보이지 않는 것은 실제로 정말 흥미롭기 때문에 이것을 몰래 들어가고 싶었습니다. Gutenberg, 구텐베르크 플러그인, 이 모든 향후 개발 전체 사이트 편집이 수행되고 있는 곳은 실제로 최근 Patterns라는 새 폴더를 도입했습니다. 따라서 패턴 파일을 Pattern 폴더 안에 실제로 배치하면 WordPress에서 자동으로 패턴 파일을 등록합니다. 살짝 엿보기. Gutenberg와 모든 새로운 기능을 확인해 보시기 바랍니다.

그러나 여기 슬라이드로 돌아갑니다. 템플릿과 템플릿 부분이 있습니다. 그리고 각각에 대한 개별 HTML 파일을 볼 수 있습니다. 이제 이것이 어떻게 작동하는지 좀 더 이해하기 위해 404.HTML 파일을 살펴보겠습니다. 이것은 코드에 뛰어들거나 이 템플릿을 편집할 수 있는 타사 리소스를 사용하지 않는 한 직접 편집할 수 없는 사이트의 파일 또는 페이지입니다.

사이트 편집기로 돌아가서 404 페이지가 바로 여기에 있음을 알 수 있습니다. 클릭하면 사용자는 이제 해당 템플릿의 다른 구성 요소를 편집할 수 있습니다. 그러나 실제로 테마에 있는 코드인 이 템플릿을 구성하는 실제 HTML 코드를 살펴보겠습니다.

여기에서 404.HTML 파일이 있고 많은 마크업이 있음을 알 수 있습니다. 상단과 하단에서 시작하여 템플릿 부품 블록에 대한 사양이 있음을 알 수 있습니다. 이것이 하는 일은 등록된 템플릿 부분을 참조하고 템플릿으로 가져오는 것입니다. 따라서 여기로 돌아가면 footer.HTML 부분과 header.HTML 부분이 있는 것을 볼 수 있습니다. 그리고 그것이 여기서 언급되고 있는 것입니다.

따라서 이것은 다른 블록으로 구성된 템플릿을 가져올 수 있는 고유한 블록입니다. 물론 이제는 머리글을 구성하는 모든 블록과 바닥글을 구성하는 모든 블록을 포함할 수 있지만 템플릿 부분을 참조하여 한 곳에서 모두 수행한 다음 동일한 템플릿 부분을 적용할 수 있습니다. 모든 템플릿에서 PHP를 사용하는 기존 WordPress에서 수행하는 작업과 유사합니다.

이제 좀 더 살펴보면 몇 가지 마크업, 몇 가지 기본 마크업, 그리고 div가 있습니다. 나는 이것에 너무 깊이 들어가지 않을 것입니다. 여기에서 진행되는 몇 가지 흥미로운 일이 있습니다. 즉, 여기의 레이아웃은 일부 레이아웃 설정을 수행하지만 이것은 페이지에 대한 일반적인 마크업인 404 패턴입니다.

이제 패턴을 언급했습니다. 이 테마의 404는 실제로 패턴으로 묶여 있습니다. 따라서 404 콘텐츠를 구성하는 모든 블록은 패턴에 있습니다. 그런 다음 실제로 해당 패턴을 참조하고 해당 블록을 가져오는 패턴 블록이 있습니다. 물론 다시 말하지만 여기에 404 페이지를 구성하는 모든 블록을 포함할 수 있지만 패턴에 넣은 다음 참조하면 관리하기가 조금 더 쉬워집니다.

따라서 사이트 편집기로 돌아가면 콘텐츠가 있고 다른 섹션을 볼 수 있습니다. 그래서 맨 위 부분은 끌어오는 헤더 템플릿 부분입니다. 그리고 분명히 주요 부분은 끌어오는 404 패턴입니다. 이제 이것들이 모두 블록이기 때문에 평소처럼 편집하기만 하면 됩니다. . 대담하게 만들 수 있습니다. 색상을 변경할 수 있습니다. 블록을 제거하고 블록을 추가하는 등의 작업을 할 수 있습니다.

매우 쉬웠고 코드를 전혀 편집할 필요가 없었습니다. 우리는 코드가 어떻게 작동하는지 이해해야 했지만 어떤 코드도 건드릴 필요가 없었습니다. 그런 다음 만족스러우면 저장을 클릭합니다. 다시 말하지만 이러한 변경 사항은 데이터베이스에 저장되므로 실제로 테마 파일을 수정하는 것은 아닙니다. 따라서 변경 사항을 되돌리려면 테마가 제공하는 모든 항목으로 되돌아갑니다.

사이트 편집기의 장점 중 하나는 아직 개발 중이며 새 템플릿 부분을 추가할 수 있다는 것입니다. 다시 말하지만, 이 테마는 다양한 머리글과 바닥글을 추가하지만 더 추가하려면 어떻게 해야 할까요? 사이드바를 원했을 수도 있습니다. 다른 콘텐츠 섹션을 원했을 수도 있습니다. Site Editor 내에서 바로 할 수 있습니다.

그리고 다시, 이 흐름은 더 많은 기능, 더 많은 기능으로 개선될 것입니다. 하지만 현재 작동 중이며 여기에서 모든 것을 추가할 수 있습니다. 한 가지 유의할 점은 사이트 편집기 내에서 아직 템플릿을 추가할 수 없다는 것입니다. WordPress 편집기 내부의 다른 인터페이스 내에서 가능하지만 아직 사이트 편집기에서는 불가능합니다. 그러나 그것은 올 것입니다.

그래서 이것의 마지막 부분은 우리가 이러한 모든 변화를 만드는 것에 대해 이야기했다는 것입니다. 모든 변경 사항을 실제로 제공되는 단일 테마로 내보낼 수 있고 이것이 테마 개발에 어떤 영향을 미칠지 보는 것은 실제로 정말 흥미로울 것입니다. 따라서 Gutenberg의 최신 릴리스를 사용하면 이제 모든 변경 사항과 원래 테마를 내보낼 수 있습니다.

병합되고 테마 내의 파일에 적용된 모든 변경 사항과 함께 완전히 새로운 테마로 내보낼 수 있습니다. 따라서 2022년을 상상할 수 있습니다. 업로드합니다. 모든 변경 사항을 적용합니다. 일부 템플릿을 수정한 다음 전체 테마를 내보낼 수 있습니다. 향후 테마 개발에 매우 ​​흥미로운 영향을 미칩니다.

이제 전역 설정 및 스타일에 대해 이야기해야 합니다. 이것은 theme.JSON 파일입니다. 이것은 WordPress의 새로운 기능이며 까다로울 만큼 흥미진진합니다. 따라서 2022 테마를 되돌아보면 해당 파일이 맨 위에 있는 것을 볼 수 있습니다. 그리고 theme.JSON 파일로 이동하면 실제로는 5개 섹션으로 구성되며 그 중 하나는 버전 번호입니다.

그리고 커스텀 템플릿과 템플릿 부분에 대해 간략히 말씀드리겠습니다. 따라서 사용자 정의 템플릿이 있는 경우 WordPress가 자연스럽게 인식하지 못하는 완전한 사용자 정의 템플릿을 여기에서 등록할 수 있습니다. 머리글 및 바닥글과 같은 모든 템플릿 부분을 등록하는 곳이기도 합니다. Index, Page, Post와 같은 기존 템플릿(WordPress에서 일반적으로 인식하는 템플릿)은 여기에 넣을 필요가 없으며 사용자 지정 템플릿과 자신만의 템플릿 부분만 입력하면 됩니다.

그러나 theme.JSON의 핵심은 설정 및 스타일 섹션입니다. 먼저 설정을 살펴보면 여기에서 많은 일이 진행되고 있습니다. 그리고 다시 말하지만 이것은 매우 요약된 것입니다. 그러나 상단 부분은 전역 설정입니다. 전체 사이트에서 사이트 편집기 및 편집기에 영향을 미치는 설정입니다. 여기에는 테두리, 색상, 타이포그래피 등이 포함됩니다. 여기에서 테마의 색상 팔레트, 테마의 타이포그래피 설정, 글꼴 등을 설정할 수 있습니다.

그런 다음 블록 수준 설정도 있습니다. 예를 들어 전체 사이트에 대한 색상 팔레트를 설정한 다음 단락 블록이나 버튼 블록과 같이 더 작은 색상 팔레트와 완전히 다른 색상 팔레트를 설정할 수 있습니다. 따라서 엄청난 유연성을 제공하지만 설정은 편집기 내에서 또는 블록 내에서 사용자가 사용할 수 있는 기능입니다.

따라서 다시 색상을 보면 여기에서 팔레트를 정의했습니다. 전경색, 배경색, 그리고 원색인 검은색, 흰색, 일종의 포레스트 그린이 있습니다. 그런 다음 Editor로 이동하면 색상 선택기가 팝업될 때 사용자가 선택할 수 있도록 정의된 색상이 있음을 볼 수 있습니다.

이제 스타일로 들어가 볼까요? 따라서 스타일은 기본적으로 CSS와 같습니다. 그래서 전통적으로 모든 CSS를 styles.CSS 파일이나 다른 설정에 추가했습니다. 그러나 theme.JSON의 스타일 섹션을 사용하면 전체 테마에서 블록 수준과 전역 수준에서 스타일을 설정할 수 있습니다. Editor는 사용자가 거기에 들어가서 수정 및 변경을 시작하고 블록을 사용하여 원하는 대로 사이트를 디자인할 수 있기 때문입니다.

하지만 기본값이 있어야 하며 theme.JSON의 스타일 섹션에 설정된 값이 기본값입니다. 다시 말하지만, 우리는 전역 색상, 전역 타이포그래피와 같은 전역 스타일을 가지고 있으며 블록 수준에서 스타일을 설정할 수도 있습니다. 전역 스타일에 대한 것은 테마의 배경색을 설정하는 곳입니다. 여기에서 제목의 글꼴 크기, 링크, 텍스트, 제목 등의 다양한 타이포그래피 옵션을 설정할 수 있습니다. 그리고 블록 수준에서 우리는 동일하지만 특히 블록에 대해 수행할 수 있습니다.

이제 방금 이야기한 설정 섹션의 멋진 점 중 하나는 설정을 만들 때마다 WordPress가 변수를 정의한다는 것입니다. 그래서 해당 색상 팔레트를 볼 때 배경, 전경 및 기본을 정의했습니다. WordPress는 기본, 전경, 배경에 대해 설정된 16진수 코드가 무엇이든 실제로 해당 16진수 코드에 매핑되는 변수를 생성할 것입니다.

스타일에서 이러한 변수를 사용하여 전역 및 블록 수준 스타일 모두에 대한 스타일을 정의할 수 있습니다. 이것의 이점은 사용자가 배경색이 무엇이든 변경하는 경우 theme.JSON의 스타일 사양을 통해 흐르게 된다는 것입니다. 이제 블록 섹션을 살펴보면 여기에 버튼 블록이 있고 테마 디자이너가 제공한 것입니다.

내 버튼이 흰색 텍스트가 있는 기본 색상인 녹색을 갖기를 원했습니다. 버튼 블록의 색상 섹션에서 배경색을 기본 색상인 숲 녹색으로 정의하고 텍스트가 흰색인 배경색으로 정의한 것을 볼 수 있습니다. 따라서 theme.JSON 전체에서 이러한 변수를 사용하여 블록 및 사이트 자체에 대한 스타일을 정의할 수 있습니다.

이제 이것은 앞서 언급한 전역 스타일과 연결됩니다. 사이트 편집기로 돌아가 상단에 있는 이 작은 투톤 원을 클릭하면 전역 스타일 패널이 열립니다. 이제 여기에서 많은 일이 진행되고 있으므로 어떻게 작동하는지 간략하게 시연하겠습니다. 하지만 2022 테마 또는 다른 블록 테마를 다운로드하고 진정으로 글로벌 스타일을 탐색하는 것이 좋습니다.

여기로 이동하여 색상을 보면 클릭하면 테마에서 제공하는 색상 팔레트와 배경, 텍스트 및 링크와 같은 몇 가지 다른 요소가 있음을 알 수 있습니다. . 이제 우리가 보고 있는 이 패널에서 사이트의 전역 요소를 편집하고 있습니다. 예를 들어 사이트의 배경에 대해 이야기했습니다. 지금은 흰색입니다. 배경을 클릭하면 여기로 들어올 수 있고 흰색으로 선택되어 있는 것을 볼 수 있습니다. theme.JSON에서 설정한 색상입니다.

하지만 내가 이 복숭아 색을 정말 좋아한다면? 클릭 한 번으로 클릭할 수 있습니다. 우리 사이트의 배경색은 이제 복숭아색입니다. 따라서 이것은 사용자에게 필요에 맞게 사이트를 완전히 수정할 수 있는 전례 없는 제어 기능을 제공합니다. 그러나 다시 theme.JSON은 테마 개발자로서 사용자에게 제공하는 기본값을 제공하고 있으며 사용자는 거기서 이를 가져갈 수 있습니다.

지금까지 전체 사이트 편집과 사이트 편집기 및 블록 테마에 대한 간략한 개요였습니다. 하지만 시간을 갖고 모던 테마의 미래에 대한 내 생각에 대해 이야기하고 싶습니다. 따라서 현대적인 테마에 대해 생각할 때 현대적인 테마는 개발보다 디자인을 강조할 것이라고 믿습니다. 이제 테마 디자인은 항상 디자인에 관한 것이라고 생각할 수 있습니다.

하지만 기존의 테마 개발을 다시 생각해 보면 실제로 수행해야 할 코딩이 많았습니다. 모든 템플릿 파일은 PHP였으며, 이를 제대로 수행하려면 WordPress 및 PHP 개발에 대한 상당한 지식이 필요했습니다. 글쎄, 그것은 일종의 변화입니다. 이제 편집기를 사용하면 사이트 편집기 및 기존 편집기의 UI 내에서 직접 테마를 디자인할 수 있습니다.

그리고 그것은 우리가 테마를 디자인하는 방식에서 중요한 역할을 할 것입니다. 그래서 저는 WP Engine의 개발자 옹호자이며 우리 팀에서는 Frost라는 실험적인 테마를 구축하고 있습니다. 그리고 새로운 패턴을 만들거나 템플릿을 수정하고 싶을 때 파일에 들어가 파일을 수정하지 않습니다. 사이트 편집기로 이동하거나 편집기로 이동하여 해당 패턴을 수정하거나 패턴을 작성하거나 템플릿을 작성합니다. 그런 다음 만족스러워서 내보낸 다음 테마에 넣습니다.

그래서 우리는 실제로 코딩하지 않습니다. 우리는 실제로 모든 것을 시각적으로 처리하고 있습니다. 그리고 그것의 이점은 사용자, 테마를 사용할 사람들이 거기에서 패턴을 조정하거나 템플릿을 조정한다는 것을 알고 있다는 것입니다. 따라서 우리가 테마를 구축하는 동안 사용자가 테마를 사용하기 위해 수행하는 것과 동일한 프로세스를 수행하는 것이 이치에 맞습니다. 제 생각에는 마법과도 같습니다.

그리고 이것은 로우 코드 또는 심지어 코드가 없는 테마 개발 방법으로 이어질 것입니다. 물론 지금 우리는 개발자 회의에 있습니다. 그래서 우리는 코드가 없고 낮은 코드에 대해 이야기하고 있습니다. 하지만 마지막 요점은 개발이 어디에 있다고 생각하는지에 대해 이야기하겠습니다. 하지만 저는 이것이 정말 흥미진진하다고 생각합니다. 왜냐하면 이것이 새로운 세대의 사용자를 불러들일 것이기 때문입니다. 그들은 자신만의 테마를 만들고, 자신만의 테마를 맞춤화하고 싶어하지만 아마도 PHP를 모르거나 JavaScript를 모를 수도 있습니다. .

그들은 이제 사이트 편집기 내에서 모든 작업을 수행할 수 있습니다. 제 생각에는 일종의 WordPress, 게시 민주화 정신이라고 생각합니다. 그리고 전체 사이트 편집이 실제로 이를 위해 노력하고 있다고 생각합니다. 솔직히 지난 2년 또는 작년에 우리는 전체 사이트 편집에서 이러한 발전을 보았습니다. 상당히 흥미진진해지고 있습니다. 그래서 저는 전체 사이트 편집이 전통적인 WordPress의 미래라고 진심으로 믿습니다.

이제 모든 사람을 위한 것은 아닐 수도 있습니다. 저는 그것을 아주 분명히 하고 싶습니다. 그리고 여전히 필요한 개발이 많이 있습니다. 따라서 WordPress를 사용하는 다양한 유형의 사람들에 대해 이야기할 때 표준 사용자부터 대행사에 이르기까지 모든 것이 있습니다. 그리고 대행사는 클라이언트가 웹 사이트에서 사용하고 작업할 수 있도록 매우 깨끗하고 구조화된 인터페이스를 제공하기를 원할 수 있습니다. 전체 사이트 편집이 아닐 수도 있습니다. 괜찮다고 생각합니다.

그러나 경제에서 볼 수 있듯이 Squarespace, Wix, Element 또는 다른 페이지 빌더가 있습니다. 자신의 사이트를 편집하고 디자인할 수 있는 도구를 원하는 사용자의 웹 커뮤니티가 엄청나게 많습니다. 그리고 저는 워드프레스가 워드프레스, 특히 코어에서 정말 부족하다고 생각합니다. 이것이 전체 사이트 편집의 목표이며 전체 사이트 편집의 약속이라고 생각합니다.

그래서 할 일이 많습니다. 아직도 할 일이 많습니다. 여전히 우리가 알아내야 할 많은 것, 즉 반응형 컨트롤과 같은 것, 그리고 특정 사용자가 디자인을 망치거나 하지 말아야 할 것을 수정하지 않도록 UI의 다양한 구성 요소를 제한하는 방법입니다. 그래서 아직 알아내야 할 것이 많습니다.

하지만 제가 정말 흥미진진하다고 생각하는 영역 중 하나는 전체 사이트 편집을 위해 개발하는 것입니다. 이제 우리는 사용자가 자신의 테마를 디자인하거나 자신의 사이트를 디자인할 수 있는 이 도구를 가지고 있으므로 이를 다음 단계로 가져갈 방법에 대해 생각하기 시작해야 합니다. 개발자로서 우리는 이것을 어떻게 구축할 수 있습니까? 전통적인 WordPress를 다시 생각해 보면 위젯 화면– 일반적으로 위젯을 사용하십시오. WordPress는 매우 기본적인 수준의 위젯과 기능을 제공했으며 개발자는 나가서 모든 종류의 확장 기능을 구축했습니다.

그리고 전체 사이트 편집에도 동일한 아이디어를 적용해야 한다고 생각합니다. 현재 전체 사이트 편집을 실제로 활용하고 다음 단계로 가져가는 확장 기능과 플러그인은 거의 없습니다. WordPress는 전체 사이트 편집을 계속 반복할 것이며 어느 시점에 도달할 것입니다. 하지만 모두가 원하는 모든 것을 할 수는 없을 것입니다. 저는 지금이 전체 사이트 편집에 대해 진지하게 생각하고 개발자로서 그 위에 구축할 수 있는 방법에 대해 생각하기 시작하고 이 경험을 다음으로 가져올 때라고 생각합니다. 수준.

그래서 저는 모두에게 나가서 구텐베르크를 탐험하고 2022 테마를 시도하고 설치하고 블록 개발 학습을 시작하도록 도전합니다. 틈새 블록에 대한 믿을 수 없는 양의 기회가 있습니다. 그리고 나만의 테마를 만들어 보세요. 2022년을 찍어보세요. 수정해 보세요. 기본 테마를 구축해 보세요. 정말 즐겁고, 이 물건에는 많은 잠재력이 있습니다.

그래서 저는 여기서 멈추고 참석해주셔서 감사하다는 말씀을 드리고 싶습니다. 가기 전에 특히 이 프레젠테이션, 전체 사이트 편집이 처음이고 더 배우고 싶은 경우 정말 중요하다고 생각되는 몇 가지 리소스에 대해 이야기하고 싶습니다. 다시 말하지만, 물론 저를 따라오셔도 됩니다. 나는 항상 이것에 대해 트윗합니다.

그러나 몇 가지 리소스가 있습니다. 첫 번째는 Frost입니다. 나는 이것을 일찍이 암시했다. 그래서 이것은 WP Engine 개발자 관계가 구축하고 있는 주제입니다. 그리고 그것은 실험적인 제품입니다. 제품이라고 하면 안됩니다. 블록 테마를 구축하는 방법에 대해 커뮤니티를 교육하는 데 사용하려는 실험입니다. 우리는 그 과정에서 배우고 있습니다. 우리는 WordPress를 최신 상태로 유지하기 위해 많은 변경과 업데이트를 진행하고 있지만 훌륭한 리소스입니다. 또한 2022년 테마는 시작하고 배울 수 있는 환상적인 장소입니다.

다음으로 Learn WordPress를 연결하고 싶습니다. 이것은 learn.wordpress.org입니다. wordpress.org의 교육 팀은 이러한 많은 개념을 대중에게 교육하고 제공하기 위해 많은 노력을 기울이고 있습니다. 따라서 관심이 있고 더 많은 것을 배우고 싶다면 환상적인 곳입니다. 소셜 학습 공간을 포함하여 워크샵과 다양한 콘텐츠가 있습니다. 이들은 매주 개최되며 다양한 주제에 대해 이야기하고 블록을 코딩하는 방법, 블록 테마를 구축하는 방법 등에 대해 자세히 설명합니다.

물론 개발에 관심이 있다면 항상 블록 편집기 핸드북부터 시작하세요. 그것이 제가 시작한 곳이며 훌륭한 리소스가 너무 많습니다. 그리고 마지막으로 구텐베르크입니다. 구텐베르크에 익숙하지 않은 경우, 특히 WordPress 개발에 관심이 있는 경우 구텐베르크에 익숙해지도록 권장합니다. 전체 사이트 편집이 어떻게 구축되고 있는지, 다양한 블록이 어떻게 구축되고 있는지, 그리고 이를 자신의 워크플로에 어떻게 적용할 수 있는지 살펴보고 탐구하기에 좋은 곳입니다.

그럼 많은 참석 부탁드립니다. 이 프레젠테이션에서 많은 것을 얻었기를 바라며 전체 사이트 편집을 계속 탐색하도록 권장됩니다. 정말 고마워.