WordPress 5.8의 새로운 기능

WordCamp Europe 2021의 프레젠테이션, 특히 블록 편집기에서 우리에게 제공되는 새로운 기능에 대한 비디오가 포함된 Matt Mullenweg와 Matias Ventura의 대화를 본 후 저는 이 WordPress의 새 버전을 사용해보고 싶었습니다. 7월 중순 출시 예정인 5.8.

그래서 워드프레스 5.8-beta2 버전을 설치하여 앞으로 나올 새로운 기능에 대해 알려드릴 수 있습니다. WordPress.org의 Twenty Twenty-one 테마로 이 버전을 테스트했으며 사이트에 설치한 테마에 따라 언급된 기능 중 일부를 사용하지 못할 수 있습니다.

중첩 블록 및 블록 패턴

WordPress 5.5가 출시되면서 블록 편집기에는 블록 패턴의 개념이 포함되었습니다. 블록 패턴의 개념은 매우 간단합니다. 페이지 및 게시물 생성에 사용할 수 있는 블록 그룹으로 구성된 미리 정의된 섹션 또는 스니펫입니다. 블록 패턴은 두 개의 버튼을 표시하는 섹션이나 눈길을 사로잡는 복잡한 레이아웃이 있는 가격 책정 섹션 또는 전체 페이지의 레이아웃과 같은 단순한 것일 수 있습니다.

블록 및 블록 패턴을 보다 쉽고 편안하게 편집할 수 있도록 많은 작업이 이루어지고 있습니다. 특히 삽입과 이동을 더 빠르게 하기 위함입니다. 먼저 왼쪽 메뉴 모음에 표시된 블록 및 패턴 목록에서 선택하고 페이지 영역으로 끌어서 삽입할 수 있습니다.

최근에는 드래그 아이콘(점 6개 아이콘)도 추가되어 블록이 위치한 컨테이너 내에서 모든 블록을 이동할 수 있습니다.

블록에 있을 때 Esc 키 를 눌러 선택 모드로 전환하고 Enter 키를 눌러 편집 모드로 돌아갑니다.

선택 모드( Esc 키 를 누르는 것을 기억하십시오)에서 블록 구조 간의 탐색이 최적화됩니다. 블록 내에서 마우스를 움직이면 블록에 포함된 각 블록의 경계를 볼 수 있습니다. 이런 식으로 상위 블록 내에서 구조 및 드래그 블록을 이해하기가 더 쉽습니다.

그리고 이제 이 새 버전에서는 편집 모드로 전환( Enter 키 를 누름)할 때 블록을 이동할 때 컨테이너의 경계도 표시되므로 선택, 드래그 및 드롭 프로세스가 훨씬 쉽고 직관적입니다.

이미지 에디션

블록 편집을 개선한다는 아이디어로 계속해서 중요한 블록은 이미지 유형 블록입니다. 이제 이미지, 텍스트 및 미디어 유형 블록 또는 열과 같은 컨테이너 유형 블록으로 이미지를 끌어서 삽입할 수 있음을 이미 보았습니다.

그러나 가장 놀라운 점은 미디어 라이브러리 로 이동하지 않고도 편집기 자체에서 삽입된 이미지를 편집하고 수정할 수 있다는 것입니다.

이미지 링크 를 중앙 에 추가하고 추가하는 아이콘 외에도 WordPress 5.8에는 자르기 , 텍스트 추가 및 이중톤 필터 의 세 가지 새로운 아이콘이 있습니다.

이미지 자르기

자르기 아이콘을 클릭하면 3개의 추가 메뉴 옵션이 나타납니다: 확대/축소 , 종횡비 변경 및 이미지 회전 .

보시다시피 더 이상 미디어 라이브러리로 이동하여 원하는 방식으로 이미지를 표시할 필요가 없습니다.

이중톤 필터

WordPress 5.8과 함께 제공되는 또 다른 새로운 기능은 이중톤으로 이미지를 필터링하는 기능입니다. 이미지에 적용할 필터의 두 가지 색상을 선택하면 이미지가 두 가지 톤만 갖게 됩니다.

텍스트 추가

이미지에 텍스트를 추가하는 이 새로운 아이콘은 이미지를 표지 블록으로 변환하는 것과 같습니다. 그리고 물론, 이번 변경 후에는 이전에 했던 것처럼 표지 블록에 원하는 텍스트를 추가할 수 있습니다.

또한 블록 속성에서 볼 수 있듯이 이제 간격을 수정하고 텍스트에 패딩을 추가하여 텍스트가 이미지에서 원하는 위치에 정확히 오도록 할 수 있습니다. 패딩은 텍스트의 4면 각각에 대해 동일하거나 다르게 정의할 수 있습니다.

개인적으로 미디어 라이브러리로 이동하지 않고 편집기에서 직접 이러한 모든 변환을 추가하고 수행할 수 있다는 점이 좋습니다. 그래도 SEO에 맞게 이미지를 최적화하려면 여전히 라이브러리에 가야 합니다.

블록 변환

블록을 이미지 유형에서 표지 유형으로 변환하는 방법을 보았듯이 블록 편집기는 이제 다른 유형의 변환을 통합합니다. 예를 들어 3개의 단락을 선택하여 머리글, 열, 목록 등으로 변환할 수 있습니다. 그리고 변환을 수행하기 전에 변환의 새로운 모양을 미리 봅니다.

마찬가지로 이미지 유형 블록 세트를 이미지 갤러리 유형 블록 또는 버튼 세트 등으로 변경할 수 있습니다.

커버 블록

이 모든 새로운 기능이 편집기 자체에 포함되어 있어 표지 블록을 통해 지금까지와는 매우 다른 디자인을 만들 수 있습니다. 예를 들어, 이제 두 개의 중첩된 덮개 블록(자식과 부모 사이에 패딩 포함)과 각각 고유한 색상, 텍스트 및 포커스가 있는 덮개 블록을 가질 수 있습니다.

탐색 블록

WordCamp에서 제공되는 비디오에서 블록 편집기 미리보기의 또 다른 멋진 새 기능은 새 탐색 블록입니다. 이 블록은 설치된 베타 버전에 포함되어 있지 않지만 Gutenberg 플러그인의 최신 버전 10.8.1에서 찾을 수 있습니다.

이 블록을 사용하면 방문자가 다른 페이지로 이동할 수 있도록 모든 페이지에 링크 메뉴를 추가할 수 있습니다. 이것은 WordPress에서 이미 알고 있는 탐색 메뉴를 대체하기 위한 것이 아니라 페이지에 추가 메뉴를 삽입하려는 경우에 대한 대안입니다.

메뉴를 가로로 할지 세로로 할지 지정하는 것 외에도 메뉴를 만들 때 몇 가지 옵션이 있습니다.

• 기존 메뉴에서 만들기: 사이트에서 이미 만든 메뉴를 표시하도록 선택할 수 있습니다.
• 비어 있게 만들기: 탐색에 표시하려는 각 링크를 수동으로 추가할 수 있는 빈 메뉴를 만듭니다.
• 모든 최상위 페이지에서 생성 – 사이트의 기존 페이지 각각을 링크로 자동 추가한 다음 편집하고 재정렬할 수 있습니다. 여기에는 최상위 페이지만 추가됩니다.

탐색에 새 링크를 추가하려면 다음 중에서 선택할 수 있는 + 아이콘을 클릭해야 합니다.

• 페이지 링크: 사이트의 페이지입니다.
• 게시물 링크: 사이트의 게시물입니다.
• 카테고리 링크: 특정 카테고리의 모든 게시물.
• 태그 링크: 특정 태그가 있는 모든 게시물.
• 사용자 정의 링크: 외부 URL.
• 소셜 아이콘: 소셜 네트워크용 아이콘.
• 검색: 방문자가 귀하의 콘텐츠를 검색할 수 있는 검색 상자입니다.

메뉴를 만들고 나면 스타일(글꼴, 글꼴 및 배경색)을 변경하고, 하위 메뉴를 추가하고, 항목을 이동하는 등의 옵션도 있습니다.

따라서 이 블록을 사용하면 메뉴 디자인을 매우 쉽게 만들 수 있습니다.

보시다시피, 이 새로운 유형의 블록은 페이지 및 게시물 디자인에 더 많은 가능성을 제공합니다.

템플릿 디자인

이 새 버전의 WordPress 편집기와 함께 제공되는 또 다른 큰 변화는 템플릿 디자인이 블록 편집기에 완전히 통합되었다는 것입니다. 이렇게 하면 생성된 페이지에서 템플릿을 생성할 수 있으며 왼쪽 사이드바에 해당 구조를 나열할 수 있는 옵션도 추가됩니다.

템플릿의 구조를 이동할 수 있고 편집기에서 각 요소가 강조 표시되므로 적절한 위치에서 매우 쉽게 변경할 수 있으며 각 컨테이너 블록에 중첩된 모든 요소를 ​​빠르게 볼 수 있습니다.

그리고 더 많은…

그리고 마지막으로 WordCamp Europe에서 발표된 비디오에서 우리는 또한 블록 편집기에서 테마의 전역 스타일을 직접 정의하여 색상 팔레트, 타이포그래피 등을 변경할 수 있는 옵션을 보여주었습니다. 그래도 의심이 가는 경우 이 새로운 WordPress 5.8 버전에서는 웹사이트 페이지 생성을 위해 다른 페이지 빌더가 필요하지 않다는 목표에 점점 더 가까워지고 있습니다.

Unsplash에 있는 XPS의 추천 이미지 .