블록 편집기를 사용하여 웹 사이트를 만든 방법

눈치채지 못한 경우를 대비하여 웹사이트의 모양이 약간 변경되었습니다 . 우리는 글꼴, 스타일, 색상 팔레트를 업데이트하고 웹사이트의 스타일을 변경했습니다.

이에:

그러나 이러한 변경 사항에서 가장 흥미로운 것은 모양이 아니라 완전히 블록 기반 사이트가 될 수 있도록 웹 사이트를 처음부터 다시 만들기로 결정했습니다. 오늘 저는 페이지 템플릿을 기반으로 한 맞춤형 테마 에서 모든 것을 위해 WordPress 블록에 의존하는 완전히 개인화된 또 다른 테마로 전환하는 방법을 설명하고 싶습니다.

우리는 어디에서 왔는지

3년 전 Nelio Content를 출시했을 때 모든 웹사이트를 완전히 재구성하고 단일 도메인 및 브랜드인 neliosoftware.com 하에 온라인 입지를 중앙 집중화하기로 결정했습니다. 논리적으로 우리가 한 작업 중 하나는 Silo Creativo에 연락하여 새 웹사이트의 이미지를 디자인하는 데 도움을 주는 것이었습니다. 여기에서 그들이 만든 첫 번째 제안 중 하나를 볼 수 있습니다.

초기 디자인을 승인하고 요청에 따라 Ricardo와 Veronica는 작업에 착수하여 웹사이트의 다양한 부분에 필요한 모든 템플릿(메인 페이지, 블로그 , 게시물, 도움말)을 사용하여 맞춤형 테마를 구현했습니다. 페이지, ... 그들은 모든 것을 디자인했고 모든 단일 디자인은 페이지 템플릿으로 구현되었습니다. 편집하기 힘든 빠른 페이지가 있었습니다.

그리고 구텐베르크가 도착했습니다.

당사 웹사이트의 내용 이해

새로운 WordPress 블록 편집기인 Gutenberg 는 WordPress 에서 콘텐츠 생성에 대한 패러다임 전환입니다. 지금까지 페이지 작성은 페이지 빌더를 사용하지 않는 한 사용자에게 지루하고 비우호적인 프로세스였습니다. 그러나 Gutenberg 는 자신의 팔 아래에 약속을 했습니다 . WordPress 에서 시각적으로 매력적인 콘텐츠 를 만드는 것은 누구나 손이 닿을 수 있어야 합니다. 그리고 우리는 이 주장을 테스트하고 Gutenberg에만 의존하는 아름다운 웹사이트를 정말로 만들 수 있는지 확인하고 싶었습니다.

이전에 웹을 본 적이 있다면 다음과 같은 요소를 포함하여 단순하고 우아한 디자인 을 가지고 있다는 것을 알 수 있습니다.

• 첫 번째로 접힌 추천 이미지가 있는 페이지
• 설명 텍스트와 이미지 및/또는 비디오가 포함된 블록
• 문의 양식
• 법률 페이지
• 가격표
• 사용자의 평가
• 기능 목록

너무 화려하지는 않지만 그럼에도 불구하고 흥미 롭습니다. 이 모든 것을 구텐베르크 에서 만들 수 있습니까? 우리는 그렇게 생각했고 노력했습니다. 이것이 우리가 한 일과 우리가 찾은 일입니다.

우리의 새로운 테마

새 웹사이트를 디자인하기 위해 가장 먼저 한 일은 처음부터 테마를 만드는 것이었습니다. 이를 위해 우리는 잘 알려진 스타터 테마 "밑줄"에서 시작하기로 결정했습니다. WordPress 테마를 운영하는 데 필요한 최소한의 템플릿과 함께 제공되는 매우 기본적인 테마이며 잘 문서화되고 잘 정리되어 있습니다.

밑줄 적용

모든 WordPress 테마에는 모든 WordPress 설치에 공통적이며 웹사이트에서 생성하는 콘텐츠와는 별개인 페이지 세트가 있습니다. 예를 들어 마지막 게시물이 표시되는 블로그 페이지, 단일 게시물의 레이아웃, 404 오류 페이지, 검색 결과 페이지 등에 대해 이야기 하고 있습니다. 따라서 WordPress 블록을 사용하여 테마를 만드는 첫 번째 단계는 이러한 "일반"이 원하는 모양과 느낌을 갖도록 밑줄 을 우리 자신의 스타일에 적용합니다. 그리고 그것이 우리가 한 일입니다.

이전 스크린샷을 보면 _sassify! 로 테마를 다운로드한 것을 알 수 있습니다. 옵션이 활성화되어 있으므로 테마가 SASS 형식의 스타일로 다운로드되고 여러 파일로 구성되어 매우 쉽게 편집할 수 있습니다. CSS 작성과 functions.php 의 일부 PHP 사용자 정의 작업에 몇 시간이 걸렸지만 테마를 바로 잡을 수 있었습니다.

빌딩 블록으로서의 WordPress 블록

일단 우리가 편안하다고 느끼는 초기 테마를 갖게 되면(저희의 경우 밑줄로 만든 테마이지만 귀하의 경우에는 wordpress.org 에서 찾은 테마일 수 있습니다. 시간이 지나면 구입한 프리미엄 테마) 전에 또는 우리와 같은 맞춤형 테마) WordPress 블록 을 사용하여 모든 페이지를 레이아웃할 때 입니다.

따라서 더 이상 고민하지 않고 이 단계에서 직면한 모든 "도전"과 WordPress 블록을 사용하여 모든 것을 구현한 방법을 살펴보겠습니다.

기본 블록

WordPress 에 기본적으로 포함되는 블록은 약간 제한적입니다. 단락, 이미지, 갤러리... 너무 화려하지 않습니다. 모두 페이지 레이아웃보다 블로그 게시물 작성에 더 집중하는 것 같습니다.

하지만 괜찮습니다.

처음에는 블로그 게시물처럼 보이는 웹사이트 페이지가 많기 때문에 괜찮습니다. 예를 들어 법률 정보나 개인 정보 보호 정책 및 쿠키가 있는 페이지는 처음 생각했던 것보다 블로그 게시물에 더 가깝습니다.

그러나 매우 간단한 구성 요소로 아름다운 페이지를 만들 수 있기 때문에 괜찮습니다. 예를 들어 텍스트와 비디오를 결합할 수 있습니다. 이것은 미디어 및 텍스트 블록으로 쉽게 달성할 수 있는 것입니다.

꽤 가깝죠?

기본 블록 결합

단순한 블록은 결합될 때 매우 강력할 수 있습니다. 예를 들어 기능 목록이 있는 다음 스크린샷을 생각해 보세요.

어떻게 해결할까요? 글쎄요, 논리적으로 주의 깊게 살펴보면 각 기능이 이미지와 일부 텍스트의 조합이라는 것을 알 수 있습니다(이것이 친숙하게 들립니까?). 그러면 분명히 세 개의 열이 있는 것을 볼 수 있습니다. 미디어 및 텍스트 블록을 열 블록과 결합하면 어떻게 될까요?

나쁘지 않아, 우리는 꽤 가깝다! 블록을 결합할 때는 똑똑해야 합니다. 단일 열 블록을 사용하면 각 열이 서로 독립적으로 구성되기 때문에 기능이 수평으로 제대로 정렬되지 않을 수 있습니다. 이 문제를 해결하려면 약간 교활해야 합니다. 각 열에 여러 기능이 있는 단일 열 블록을 추가하는 대신 여러 열 블록을 만들어 각 열에 하나의 기능만 있는지 확인합니다.

그리고 붐! 이제 제대로 정렬된 행이 있는 3개의 열이 있습니다.

스테로이드가 포함된 기본 블록

기본 블록이 우리가 원하는 것에 충분히 가깝지만 제대로 보이지 않는 경우가 있습니다. 시각적 문제에 직면했다면 CSS를 사용하여 해결할 수 있을 가능성이 매우 높으며 가장 좋은 점은 Gutenberg 가 CSS 클래스와 매우 잘 작동한다는 점입니다.

예를 들어 이미지 블록에 그림자(선택 사항)가 포함되도록 하려면 이미지에 그림자를 추가하는 간단한 CSS 클래스를 만든 다음 이미지 블록의 고급 섹션을 사용하여 해당 클래스를 적용할 수 있습니다.

이 솔루션의 문제는 사용자 인터페이스와 구현 세부 정보(CSS 클래스 이름)를 혼합하고 있다는 것입니다. 이미지에 shadow 를 추가하는 shadow라는 클래스가 있다는 것을 도대체 왜 알아야 합니까? 글쎄, 이것은 또한 간단한 해결책을 가지고 있습니다.

WordPress 블록 편집기의 프로그래밍 인터페이스는 이름에서 알 수 있듯이 registerBlockStyle 이라는 함수를 등록 블록 스타일에 노출합니다. 다음과 같이 간단합니다.

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

Shadow 라는 이미지 블록( core/image )에 대한 새 스타일을 등록할 수 있습니다. 이 스타일을 적용하면 has-style-image-with-shadow 클래스가 있는 이미지 블록이 생성됩니다.

사용자 정의 블록

마지막으로 기본 블록이 절단되지 않는 경우 고유한 블록을 생성할 수 있습니다(또는 이미 존재하는 타사 블록 사용). 우리는 이 솔루션을 여러 경우에 구현했습니다. Nelio Content 및 Nelio A/B Testing 가격표, 연락처 페이지에 표시되는 맵(그런데 블록 생성 방법에 대한 게시물에서 자세히 표시됨), 사용성 측면에서 다음과 같은 결과가 인상적입니다.

자신의 블록을 만드는 방법을 모르거나 원하지 않는 경우 여러 가지에 대한 추가 블록이 포함된 플러그인을 남겨 드리겠습니다.

• 고스트킷
• 원자 블록
• 코블록
• 케이던스 블록

우리의 경험

몇 달 전에 우리는 웹사이트를 약간 개조하고 Gutenberg를 사용하여 구현해야 한다고 결정했습니다. 우리의 목표는 두 가지였습니다. 한편으로는 웹사이트를 약간 업데이트하고 신선한 공기를 제공하고 싶었습니다. 반면에 우리는 사용자 수준과 개발자 수준 모두에서 Gutenberg에 대해 더 많이 배우고 싶었습니다. 결국 우리는 전체 웹을 Gutenberg로 마이그레이션했고 그 결과는 절대적인 성공을 거두었습니다. 우리는 당신이 그것을 할 것을 권장하며 질문이 있는 경우 주저하지 말고 댓글에 남겨주세요.

그건 그렇고, 오늘의 포스트는 제가 WordCamp Lisbon 2019에서 했던 강연에서 영감을 받았습니다. 여기 제 슬라이드가 있습니다:

Unsplash 에 있는 Samuel Zeller 의 추천 이미지 .