웹 사이트 구축 속도를 높이기 위해 WordPress 블록 패턴을 만드는 방법

블록 패턴은 모든 WordPress 사용자에게 큰 문제가 될 것이며 이 게시물에서는 자신만의 블록 패턴을 만드는 방법을 정확히 보여 드리겠습니다.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

이틀 전에 저는 비디오를 가지고 나왔고 블로그 패턴이라고 하는 WordPress에 곧 나올 이 개념을 소개했습니다. 지금은 일종의 실험적이며, 저는 그것에 대해 정말 흥분되는 일입니다. 그리고 제 생각에는 블록 패턴이 무엇인지에 대한 가능성을 염두에 둔다면 클라이언트가 있는 경우 웹사이트를 더 빠르게 제공하고 클라이언트가 더 많은 작업을 수행할 수 있도록 하는 데 도움이 될 가능성을 볼 수 있습니다. 웹사이트.

그래서 내가 당신에게 보여줄거야. 이 비디오에서 블록 패턴을 만드는 정확한 방법. 이제 우리는 기술적인 측면에서 약간의 작업을 수행할 것이고 이것이 기술이 아닌 사람들을 위한 WordPress 채널이라는 것을 알고 있으므로 가능한 한 간단하게 만들려고 노력할 것입니다. 하지만 여러분은 이 블록 패턴 중 하나를 생성하는 것이 얼마나 간단한지 마지막에 실제로 보게 될 것입니다.

그럼 일단 살펴보고 넘어가도록 하겠습니다. 여기에서 이 기능의 새 릴리스에 대해 설명하는 페이지가 있습니다. 평범한 사람들만 블록 패턴을 만들 수 있습니다. 그래서 아래로 스크롤하면 일종의 템플릿이 제공됩니다. 따라서 여기에 관련된 모든 것은 사용자 정의 함수라는 것을 만드는 것입니다.

하지만 걱정하지 마세요. 저는 모든 사람이 매우 쉽게 할 수 있도록 만들 것입니다. 하지만 이것이 바로 그 작은 코드 조각이 있는 곳입니다. 이제 아래 비디오 설명에 링크가 있습니다. 내 웹사이트로 이동합니다. 이 작업을 수행하는 방법에 대한 서면 지침도 받게 됩니다. 자신의 웹사이트에 복사하여 붙여넣을 수 있는 이 작은 코드 조각입니다.

자, 여기 우리가 필요로 하는 것이 있습니다. 이것은 구텐베르크의 새로운 기능이며 활성화된 구텐베르크 플러그인이 설치되어 있어야 하므로 최소 버전 7.8이 필요하며 이것이 최근에 나온 것입니다. 이제 4개월에서 6개월 후에 일어날 일은 아마도 2020년 여름이 끝날 때쯤이면 기본적으로 WordPress에 포함될 것입니다. , Gutenberg 플러그인을 설치해야 합니다.

다음으로 할 수 있는 일은 선택 사항입니다. 하위 테마에 사용자 정의 기능을 추가하는 방법을 모르고 더 이상 하위 테마를 사용하지 않는 경우 이 무료 플러그인을 사용하는 것이 좋습니다. 이것은 최고의 무료 플러그인 중 하나입니다. 제가 본 적이 있는 코드 조각이라고 합니다. 그리고 이것은 우리가 이 사용자 정의 기능과 매우 사용하기 쉽고 관리하기 쉬운 방식을 추가할 수 있도록 합니다.

괜찮아? 그래서 당신은 그것이 필요합니다. 그리고 이것은 선택 사항입니다. 이것은 케이던스 블록이라는 무료 플러그인입니다. 그리고 이것이 하는 일은 Gutenberg에 많은 페이지 빌더 기능을 추가한다는 것입니다. 그것은 당신이 할 수있는 일에서 꽤 깔끔합니다. 열을 끌어서 크기를 조정할 수 있습니다. 많은 페이지 빌더 기능을 추가하는 많은 요소가 있지만 Gutenberg에는 완전 무료 플러그인입니다.

괜찮아. 이제 내 웹 사이트로 이동합니다. 여기 웹사이트가 있습니다. 모든 설정이 완료되었습니다. 그리고 플러그인을 설치하는 방법을 모르는 경우 플러그인과 비디오를 설치하는 방법을 보여주지 않는 것에 대해 누군가가 저에게 정말 화를 냈습니다. 플러그인으로 이동하여 새로 추가를 클릭한 다음 바로 여기에서 해당 플러그인의 이름을 검색한 다음 클릭합니다.

다운로드 또는 죄송합니다. 지금 설치를 클릭한 다음 활성화합니다. 아주 간단한 과정입니다. 그래서 제가 설치한 플러그인을 클릭하겠습니다. Gutenberg가 설치되어 있고 이것은 선택적 케이던스 블록이었습니다. 여기에 코드 스니펫이 있습니다. 이제 코드 조각을 활성화하겠습니다. 이제 바로 여기에서 활성화된 것을 볼 수 있습니다.

그런 다음 코드 스니펫을 클릭하면 함께 제공되는 코드를 볼 수 있습니다. 여기 이 토글 스위치가 있고 토글됩니다. 그것들은 모두 꺼짐으로 전환되어 있으며 실제로 기본적으로 함께 제공되는 이러한 항목을 유지할 필요가 없습니다. 여기를 클릭하면 모두 삭제할 수 있지만 이미 블록 패턴 템플릿이라는 이름을 바로 여기에 추가했습니다.

그래서 당신이 할 것입니다. 새로 추가를 클릭하면 제가 보여드린 작은 코드 조각에서 이 블록 패턴 템플릿의 이름을 지정할 수 있지만 제 웹사이트에서 이에 대한 수정된 버전을 제공하겠습니다. 바로 여기에 복사하여 붙여넣은 다음 변경 사항 저장을 클릭합니다.

저장 및 활성화를 클릭하지 않고 을 클릭하여 변경 사항을 저장합니다. 잠시 후에 그 이유를 알려 드리겠습니다. 괜찮아. 이제 여러분이 하려는 것은 이 블록 패턴을 만드는 것입니다. 그리고 블록 패턴은 단순히 저장된 섹션일 뿐입니다. 따라서 페이지 빌더를 사용하는 경우 이제 섹션을 저장할 수 있고 일부는 미리 디자인된 섹션과 함께 제공된다는 것을 알게 되었지만 사용자 경험은 구텐베르그가 훨씬 낫다고 생각합니다.

그래서 당신이하고 싶은 것은 페이지로 이동하는 것입니다. 그리고 새로 추가를 클릭하면 이 이름을 지정하고 싶을 것입니다. 음, 사실 이 여행을 없애도록 하죠. 이 블록 패턴의 이름을 지정하고 싶을 것입니다. 여기에서 이 블록 패턴을 생성할 것입니다. 지금 당장은 블록 패턴을 만드는 과정을 거치지 않겠습니다.

제가 이미 만든 것을 보여드리겠습니다. 바로 여기에. 여기 제가 만든 블록 패턴이 있습니다. 이 부분임을 알 수 있습니다. 이 화려한 배경을 가지고 있습니다. 여기에 제목, 부제목 및 몇 개의 버튼이 있고 비디오를 삽입합니다. 그래서 이것을 내 블록 패턴으로 만들 것이므로 두 번의 마우스 클릭으로 이것을 내 웹사이트의 아무 곳에나 추가할 수 있습니다.

그래서 제가 하려고 하는 것은 오른쪽 상단을 클릭하는 것입니다. 세 개의 점들이 있습니다. 보기가 좀 어렵습니다. 클릭하면 바로 여기에 코드 편집기라는 옵션이 있습니다. 따라서 코드 편집기를 클릭하면 해당 블로그를 블록 패턴 블로그 패턴으로 만드는 것과 관련된 모든 코드가 표시됩니다.

괜찮아? 여기를 클릭한 다음 컴퓨터에서 제어 또는 명령을 클릭하여 모두 강조 표시합니다. 그리고 그들은 새해입니다. 클립보드에 넣습니다. 이제 C를 제어할 것이므로 클립보드에 있습니다. 그래서 지금 내가 할 일은 여기서 나가는 것입니다. 사실, 이 보기에서 벗어나고 싶다면 바로 여기에 종료 코드 편집기라는 작은 X가 있습니다. 이제 여기에서 정상적으로 표시될 것입니다.

괜찮아. 따라서 원하는 경우 초안으로 저장할 수 있지만 필요하지 않습니다. 이것은 단지 여러분이 이 블록 패턴을 생성하기 위한 것입니다. 그리고 여러분은 어떤 것이든 블록 패턴을 생성할 수 있습니다. 그리고 그것은 하나의 블록일 필요가 없습니다. 예를 들어 블로그 게시물의 전체 템플릿이 될 수 있습니다. 자, 이제 블록 편집기에서 나오게 하는 w가 있는 곳을 클릭하겠습니다.

이제 코드 조각으로 돌아가겠습니다. 그래서 바로 여기가 블록 패턴 템플릿을 만든 곳입니다. 클론을 클릭하고 이제 클론이 생성되었습니다. 그런 다음 제목을 클릭하여 편집을 시작하겠습니다. 따라서 제목의 경우 이것을 관리하기에 적합한 제목으로 변경하겠습니다.

그래서 저는 그냥 이름을 짓겠습니다. 영상이 있는 영웅. 그래서 지금은 내가 미래에 목록을 볼 때 이것이 무엇인지 압니다. 자, 여기서 수정해야 할 몇 가지 사항이 있습니다. 세개. 아주 간단합니다. 첫 번째는 이름입니다. 따라서 이것은 이름이 될 수 있으며 공백이나 펑키한 문자가 없어야 하며 모두 소문자여야 합니다.

그래서 지금 바로 이름을 입력하겠습니다. 동영상으로 영웅이라고 명명한 것을 볼 수 있습니다. 다음으로, 바로 여기에 제목을 입력해야 합니다. 그래서 우리는 이 단어 제목을 바꾸고 이것이 표시될 것입니다. 당신은 블로그 패턴의 목록을 보고 있는 것이지, 블로그 차단 패턴이 아닙니다. 그리고 눈치채셨다면 알 수 있습니다. 이것은 친숙한 이름이므로 공백이 있을 수 있습니다.

어, 펑키한 캐릭터는 넣지 않겠습니다. 스페이스는 괜찮습니다. 이것이 바로 이 목록과 바로 여기에 패턴이라고 표시된 곳에서 표시될 것입니다. 방금 복사한 내용을 클립보드에 붙여넣기만 하면 됩니다. 이제 한 가지를 기록해 두시기 바랍니다. 이들 각각에 대해. 앞뒷면에 작은 아포스트로피를 남겼습니다.

거기에 있어야 할 아포스트로피가 있음을 알 수 있습니다. 실수로 제거했다면 바로 다시 넣으십시오. 괜찮아. 우리는 단지 변화하고 있습니다. 우리는 단지 텍스트 자리 표시자를 교체할 뿐입니다. 그래서 여기에서는 모든 것을 교체하고 싶지 않습니다. 그냥 단어 패턴을 바꾸고 싶기 때문에 강조 표시한 다음 복사한 내용을 붙여넣겠습니다.

그리고 거기에 있습니다. 이제 아래로 스크롤하여 이번에는 변경 사항 저장 및 활성화를 클릭하겠습니다. 이제 스니펫이 업데이트되고 활성화되었다고 표시되어야 합니다. 모든 스니펫을 클릭하면 동영상이 있는 이 영웅 한 명이 켜져 있는 것을 볼 수 있습니다. 그래서 앞으로 추가 블록 패턴에 대해 블록 패턴 템플릿이라고 표시된 곳으로 이동하여 복제를 클릭하고 해당 블록 패턴 템플릿을 그렇게 만들고 싶습니다.

그렇게 하면 템플릿이 항상 거기에 있습니다. 이제 이미 알고 있고 사용자 정의 기능을 추가하는 고유한 방법이 있는 경우 코드 조각이 필요하지 않으며 이러한 모든 종류의 항목을 원하는 위치에 넣을 수 있습니다. 이것은 당신이 나에게 묻는다면 그것을 관리하는 훨씬 쉬운 방법입니다. 자, 이제 새로 추가를 클릭하면 페이지로 이동합니다. 보고 싶은 경우.

블록 패턴. 어, 바로 여기에 아이콘이 있습니다. 그리고 그 위로 마우스를 가져가면 블록 패턴이라고 표시됩니다. 클릭하면 현재 실험 중인 블록 패턴 중 일부가 표시됩니다. 그러나 아래로 스크롤하면 내가 만든 블록 패턴이 표시됩니다. 그리고 정말 깔끔한 것은 썸네일 미리보기를 생성한다는 것입니다.

그리고 이를 동적으로 수행합니다. 이 작업도 수행하지 않는 페이지 작성 도구가 있습니다. 어, 블록 패턴을 훨씬 쉽게 관리할 수 있습니다. 여기 템플릿이 있는 영웅이라고 표시된 것을 볼 수 있습니다. 이제 내 웹사이트 어디에서나 이 기능을 사용하려면 마우스를 한 번만 클릭하면 됩니다. 그리고 거기에 있습니다. 그리고 그 시점에서 내가 해야 할 일은 일부 텍스트를 변경하기 시작하고 버튼에 대한 링크를 변경하는 것뿐이었습니다.

여기를 클릭하면 동영상을 변경할 수 있습니다. 그래서. 이것이 블록 패턴을 만드는 방법입니다. 이제 이것은 큰 문제입니다. 왜냐하면 앞으로 일어날 일이 주제이기 때문입니다. 개발자와 플러그인 작성자는 이러한 블록 패턴을 생성할 수 있으므로 WordPress에 이미 포함된 기본 블록 구축 도구를 사용하여 웹 사이트를 훨씬 빠르고 빠르고 쉽게 구축할 수 있습니다.

구입할 것도 없고 코드 부풀림도 없습니다. 이런 것도 없고요. 더 나아가는 것은 무엇입니까? 자신의 블록 패턴을 만드는 것이 얼마나 쉬운지 알 수 있으며 목록에서 보기가 정말 쉽습니다. 버튼을 클릭하면 거기에 삽입됩니다. 따라서 이제 자신만의 블록 패턴 라이브러리가 있을 때 웹 사이트를 구축하는 것이 얼마나 쉬울 수 있는지 생각할 수 있습니다.

따라서 클라이언트용 웹사이트를 만들고 페이지 빌더를 사용하고 싶지 않은 경우. 내장 블록 빌더를 사용하고 싶을 뿐입니다. 자신만의 패턴 라이브러리를 만들 수 있습니다. 당신은 그것이 얼마나 쉬운지 보았습니다. 할 수 있어요. 당신은 할 수 있습니다. 어, 사이트에서 사이트로 이동할 수 있는 블록 패턴의 자체 라이브러리를 생성할 수 있고 클라이언트가 이를 구축하는 방법을 보여줄 수 있습니다.

이제 이것은 페이지용이 아니라 게시물용이며 본 한 섹션에만 국한되지 않습니다. 기본적으로 페이지에서 만들 수 있는 모든 것입니다. 블록 패턴을 만들 수 있습니다. 따라서 블로그 게시물용으로만 블록 빌더를 사용하고 있으며 블로그 게시물의 레이아웃을 향상시키기 위해 블로그 게시물에서 계속해서 사용하려는 특정 요소가 있는 경우 다음을 위한 블록 패턴을 만들 수 있습니다. 그것.

그리고 정말 쉽습니다. 한 번의 클릭으로 사용할 수 있습니다. 사실, 전체 블로그 게시물 템플릿입니다. 따라서 블로그 게시물의 섹션에 대해 따르는 공식이 있는 경우 전체 블로그 게시물을 차단 템플릿으로 만들 수 있습니다. 한 번의 클릭이 적용되면 가리키고 클릭하고 편집하기만 하면 됩니다.

여기에서 마무리하기 전 마지막으로 이것은 새로운 개념이며 앞으로 몇 개월 동안 생각해 볼 문제입니다. 지금 실험해 보세요. 설인이 아니야, 설인. 당신이 알아차렸을 때 음, 내가 본 유일한 부정적인 점은 당신이 블로그를 보고 있을 때이기 때문에 그것은 황금기를 위한 아주 준비가 되지 않았습니다. 거기 봐 내가 다시 간다.

블록 패턴을 보면 스크롤해야 하는 상위 기사 목록일 뿐이므로 분류 및 구성 프로세스를 개선해야 합니다. 어쩌면 그들은 더 시각적이고 작업하기 쉽게 만들기 위한 일종의 인터페이스를 가지고 있을 것입니다. 50개의 다른 블록을 가질 예정이라면.

패턴. 그래서 그들은 그것을 개선하기만 하면 됩니다. 그리고 코드의 일부 구문은 약간 변경될 수 있습니다. 이것이 마침내 언제 나올지 누가 압니까? 하지만 이 비디오의 요점은 단지 여러분이 시작할 수 있도록 아주, 아주 빨리 무엇이 가능할 것인지를 보여주기 위한 것입니다. 워크플로에 적용할 수 있는 방법과 웹사이트 빌더로서 하고 있는 일을 생각합니다.

어쨌든, 그것이 내가 이 포스트에서 당신을 위해 가지고 있는 전부입니다. 이와 같이 WordPress의 미래에 대한 고급 정보에 감사하기를 바랍니다. 이 비디오에 감사하거나 가치를 찾았다면 엄지손가락을 치켜들고 이 비디오를 공유하여 사람들이 곧 다가올 일을 볼 수 있도록 하십시오.