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

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


add_action ( 'init', function () {

register_pattern ( 'NAME', [
'title'=> __ ( 'TITLE'),
'content'=>
'무늬'
]);
});

이틀 전에 비디오를 만들었고 블로그 패턴이라는 워드 프레스에이 개념을 소개했습니다. 그것은 지금 실험적인 것입니다. 정말 흥분된 것입니다. 그리고 만약 당신이 블록 패턴의 가능성에 대해 당신의 마음을 감싸면, 당신이 클라이언트가 있다면 더 빨리 웹 사이트를 제공하고, 그들이 그들과 더 많은 것을 할 수 있도록 웹 사이트를 더 빨리 제공 할 수 있도록 그 잠재력을 볼 수 있다고 생각합니다 웹 사이트.

보여 드리겠습니다. 이 비디오에서 블록 패턴을 만드는 방법. 이제 우리는 기술 측면에서 약간의 일을 할 것입니다. 이것이 비 기술자들을위한 WordPress 채널이라는 것을 알고 있습니다. 가능한 한 간단하게 만들려고 노력할 것입니다. 실제로 이러한 블록 패턴 중 하나를 생성하는 것이 얼마나 간단한지를 실제로 보게 될 것입니다..

계속해서 살펴 보겠습니다. 다음은이 기능의 새로운 릴리스에 대해 설명하는 페이지입니다. 평범한 사람들이 블록 패턴을 만들 수 있습니다. 따라서 아래로 스크롤하면 템플릿의 종류가 나타납니다. 그래서 관련된 모든 것은 커스텀 함수라는 것을 만드는 것입니다..

그러나 걱정하지 마십시오. 모든 사람들이 쉽게 할 수 있도록 만들 것입니다. 그러나 이것은 작은 코드 스 니펫이있는 곳입니다. 이제 아래 비디오 설명에 링크가 있습니다. 내 웹 사이트로 이동합니다. 뿐만 아니라이 작업을 수행하는 방법에 대한 지침이 제공됩니다. 이 웹 사이트에 복사하여 붙여 넣을 수있는이 작은 코드 조각.

자, 여기 우리가 필요로하는 것이 있습니다. 이것은 Gutenberg의 새로운 기능이며 Gutenberg 플러그인이 활성화되어 있어야하므로 최소 7.8 버전이 필요하며 이것이 최근에 나온 것입니다. 이제는 4 ~ 6 개월 후가 될 것입니다. 2020 년 여름 말까지는 기본적으로 WordPress에 포함되지만 지금은 시도해보고 싶을 것입니다. Gutenberg 플러그인을 설치해야합니다..

다음으로 할 수있는 일은 선택적입니다. 자식 테마에 맞춤 기능을 추가하는 방법을 모르고 더 이상 자식 테마를 사용하지 않는 경우이 무료 플러그인을 사용하고 싶을 수도 있습니다. 그리고 이것은 최고의 무료 플러그인 중 하나입니다. 내가 본 적이 있는데 코드 스 니펫이라고합니다. 그리고 이것은 우리가이 커스텀 기능과 사용하기 쉬운 방식, 관리하기 쉬운 방식을 추가 할 수있게 해줄 것입니다..

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

괜찮아. 이제 제 웹 사이트로 넘어 갑시다. 여기 웹 사이트가 있습니다. 이제 모두 설정되었습니다. 플러그인을 설치하는 방법을 모른다면, 다른 날에 플러그인과 비디오를 설치하는 방법을 보여주지 않아 누군가 나에게 화를 냈습니다. 플러그인으로 이동하여 새 항목 추가를 클릭 한 다음 바로 여기에서 해당 플러그인의 이름을 검색 한 다음.

다운로드 또는 죄송합니다. 지금 설치를 클릭 한 다음 활성화하십시오. 매우 간단한 과정입니다. 설치된 플러그인을 클릭하겠습니다. 구텐베르크가 설치되어 있고 선택적 케이던스 블록이라는 것을 알 수 있습니다. 여기에 코드 스 니펫이 있습니다. 계속해서 코드 스 니펫을 활성화하고 여기에서 활성화 된 것을 볼 수 있습니다..

계속해서 코드 스 니펫을 클릭하면 코드 스 니펫이 함께 제공됩니다. 여기이 토글 스위치가 있고 토글되어 있습니다. 그것들은 모두 꺼져있어서 실제로 기본적으로 제공되는 것을 유지할 필요는 없습니다. 바로 여기를 클릭하면 모두 삭제할 수 있지만, 이미 진행하여 여기에 블록 패턴 템플릿이라는 하나를 추가했습니다..

그래서 당신은 무엇을 할 것입니다. 새로 추가를 클릭하면 여기에 표시된 작은 코드 스 니펫 으로이 블록 패턴 템플릿의 이름을 지정할 수 있지만 내 웹 사이트에서 수정 된 버전을 제공 할 것입니다. 바로 여기에 복사하여 붙여 넣은 다음 변경 사항 저장을 클릭합니다..

저장 및 활성화를 클릭하지 않고 변경 사항을 저장하기 위해 클릭을 할 것입니다. 그리고 잠시 이유를 보여 드리겠습니다. 괜찮아. 이제 원하는 것은이 블록 패턴을 만드는 것입니다. 그리고 블록 패턴은 단순히 저장된 섹션입니다. 따라서 페이지 빌더를 사용하면 섹션을 저장할 수 있고 그 중 일부는 사전 디자인 된 섹션과 함께 제공되지만 사용자 경험은 Gutenberg에서 훨씬 낫다고 생각합니다.

그래서 당신이하고 싶은 것은 페이지로 이동하는 것입니다. 새 항목 추가를 클릭하면 이름을 지정할 수 있습니다. 음, 실제로이 투어를 제거하겠습니다. 이 블록 패턴의 이름을 지정하려고합니다.이 블록 패턴을 만들 곳입니다. 지금은 블록 패턴을 만들지 않겠습니다..

내가 이미 만든 것을 보여 드리려고합니다. 바로 여기에. 여기 제가 만든 블록 패턴이 있습니다. 이 섹션임을 알 수 있습니다. 이 화려한 배경이 있습니다. 여기에는 제목, 일부 소제목 및 몇 개의 버튼이 있으며 비디오를 넣습니다. 따라서이 블록 패턴을 만들어 마우스 클릭 두 번으로 웹 사이트의 어느 곳에 나 추가 할 수 있습니다.

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

괜찮아? 여기를 클릭 한 다음 컴퓨터에서 control a 또는 command a를 클릭하여 모두 강조 표시합니다. 그리고 그들은 새해입니다. 클립 보드에 넣으십시오. C를 제어하겠습니다. 이제 클립 보드에 있습니다. 이제 제가하려고하는 것은 여기서 나가겠습니다. 사실,이 뷰에서 벗어나려면 여기에 종료 코드 편집기라고하는 작은 X가 있습니다. 이제 정상적으로 여기에있는 방식을 보여줍니다..

괜찮아. 원하는 경우이 파일을 초안으로 저장할 수 있지만 필요하지는 않습니다. 이것은 당신이이 블록 패턴을 만들기위한 것이며, 어떤 블록 패턴도 만들 수 있으며, 하나의 블록 일 필요는 없습니다. 예를 들어 블로그 게시물의 전체 템플릿 일 수 있습니다. 자 이제 블록 에디터에서 w를 얻는 위치를 클릭하겠습니다..

이제 코드 스 니펫으로 돌아가겠습니다. 바로 여기이 블록 패턴 템플릿을 생성 한 곳이 있습니다. 복제본을 클릭하고 복제본을 만든 다음 제목을 클릭하여 편집을 시작합니다. 제목에 대해서는 제목을 관리하기에 적합한 제목으로 변경하겠습니다..

그래서 저는 그냥 이름을 지정할 것입니다. 비디오를 가진 영웅. 이제 저는 앞으로 목록을 볼 때 이것이 무엇인지 알고 있습니다. 자, 여기 편집해야 할 몇 가지 사항이 있습니다. 세개. 매우 간단합니다. 첫 번째는 이름입니다. 이 이름은 이름이 될 수 있습니다. 모두 소문자이거나 공백이나 펑키 문자가 없어야합니다..

계속해서 이름을 입력하겠습니다. 당신은 내가 비디오와 함께 영웅이라는 이름을 볼 수 있습니다. 다음으로 여기에 제목을 입력해야합니다. 그래서 우리는이 단어 제목을 대체하고 있습니다. 이것이 보여 질 것입니다. 블로그 블록 패턴이 아닌 블로그 패턴 목록을보고 있습니다. 알다시피,이 이름은 친숙한 이름이므로 공백이있을 수 있습니다..

어, 나는 거기에 펑키 캐릭터를 넣지 않을 것입니다. 공백은 괜찮습니다. 이것이이리스트 a에서 보여 질 것입니다. 그리고 여기서 바로 패턴 a라고 표시되어 있습니다. 클립 보드에 방금 복사 한 내용을 붙여 넣기 만하면됩니다. 이제 한 가지만 기록해 두십시오. 이들 각각에 대해. 앞뒤에 작은 아포스트로피를 남겼습니다.

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

그리고 거기에 있습니다. 이제 아래로 스크롤하고 이번에는 변경 사항 저장 및 활성화를 클릭합니다. 이제 스 니펫이 업데이트되어 활성화되었다고 표시됩니다. 모든 스 니펫을 클릭하면 이제 비디오를 가진이 한 영웅이 켜져 있음을 알 수 있습니다. 나중에 추가 블록 패턴에 대해서는 블록 패턴 템플릿으로 이동하여 복제를 클릭하고 해당 블록 패턴 템플릿을 그런 식으로 만듭니다..

그렇게하면 항상 템플릿이 있습니다. 이제 이미 알고 있고 사용자 정의 함수를 추가하는 고유 한 방법이 있다면 코드 스 니펫이 필요 없으며 이러한 모든 종류의 항목을 원하는 곳에 넣을 수 있습니다. 이것은 당신이 나에게 요청하면 그것을 관리하는 훨씬 쉬운 방법입니다. 좋아요, 이제 새 항목 추가를 클릭 할 때 페이지로 이동합니다..

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

그리고 이것은 동적으로 수행됩니다. 이 작업을 수행하지 않는 페이지 작성 도구가 있습니다. 어, 그리고 블록 패턴 관리가 훨씬 쉬워졌습니다. 여기 보시다시피 템플릿이있는 영웅입니다. 이제 웹 사이트 어디에서나 이것을 사용하려면 마우스 클릭 한 번입니다. 그리고 거기에 있습니다. 그리고 그 시점에서 텍스트를 바꾸기 시작하고 링크를 버튼으로 변경하기 위해해야 ​​할 모든 것.

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

구매할 것이 없으며 코드 팽창이 없습니다. 이런 것들은없고 더 나아가 야 할 것은 무엇입니까? 자신 만의 블록 패턴을 만드는 것이 얼마나 쉬운 지 알 수 있으며 목록에서 쉽게 볼 수 있습니다. 버튼을 클릭하면 거기에 놓입니다. 이제 자신 만의 블록 패턴 라이브러리가있을 때 웹 사이트를 구축하는 것이 얼마나 쉬운 지 생각해 볼 수 있습니다..

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

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

그리고 정말 쉽습니다. 한 번의 클릭으로 사용할 수 있습니다. 실제로 전체 블로그 게시물 템플릿. 따라서 블로그 게시물의 섹션에 따라 수식을 작성하는 경우 전체 블로그 게시물을 블록 템플릿으로 만들 수 있습니다. 클릭 한 번이 적용되면 포인트, 클릭 및 편집 만하면됩니다..

우리가 여기서 마무리하기 전에 마지막으로, 이것은 새로운 개념이며 앞으로 몇 개월 동안 생각할 것입니다. 지금 실험 해보십시오. 설인은 아니에요 글쎄요, 내가 본 유일한 부정적인 점은 블로그를 볼 때뿐이기 때문입니다. 다시 간다.

블록 패턴을 살펴보면 스크롤해야하는 더 높은 기사 목록이므로 분류 및 구성 프로세스를 개선해야합니다. 더 시각적이고 작업하기 쉬운 인터페이스가있을 수 있습니다. 50 개의 다른 블록을 가지려면.

패턴. 그래서 그들은 그것을 개선하기 만하면됩니다. 코드의 일부 구문이 약간 변경 될 수 있습니다. 이게 언제 나오는지 누가 알 겠어요? 그러나이 비디오의 요점은 바로 시작될 수 있도록 가능한 일을 매우 빨리 보여주기위한 것입니다. 워크 플로에 적용 할 수있는 방법과 웹 사이트 빌더로 수행중인 작업.

어쨌든, 그것은이 포스트에서 당신을 위해 가지고있는 전부입니다. 이처럼 WordPress의 미래에 대한 고급 모습을 감상하게 되길 바랍니다.이 비디오에 감사하거나 가치를 발견 한 경우 사람들이 모퉁이에서 무슨 일이 일어나고 있는지 볼 수 있도록 엄지 손가락을 올리고 비디오를 공유하십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector