WordPress 레이아웃에 CSS 그리드를 가져옵니다

WordPress 5.0 (2018 년 12 월 6 일에 출시)은 플랫폼에 혁명을 일으켰으며, 그 중 심장은 블록 편집기 (Gutenberg)입니다. 이것은 버전 3.0에서 맞춤 기사 장르를 도입 한 이후 가장 중요한 혁신을 나타냅니다. 블록 편집기는 클래식 편집기를 대체하는데, 이는 디자인 개념에서 너무 간단하여 최신 웹 레이아웃의 요구에 유능합니다.

클래식 편집자는 주로 텍스트 편집에 중점을두고 블록 편집기는 페이지 컨텐츠를 원자 단위 (텍스트 단락, 그림, 임베디드 콘텐츠 등)로 분류하는 기초로 "블록"을 사용합니다. 이 구조화 된 콘텐츠 구성 방식은 블록 편집자의 가장 중요한 이점입니다.

블록 편집기 전 레이아웃 계획

블록 편집기가 나타나기 전에 WordPress 레이아웃은 주로 두 가지 방법에 의존했습니다.

1. 사용자 정의 템플릿 : 코드가 필요하며 대부분의 사용자에게는 임계 값이 높습니다.
2. Page Builder 플러그인 : 시각적 레이아웃 도구를 제공하지만 일반적으로 속도가 느리고 사용자 경험이 좋지 않으며 폐쇄 생태계와 같은 문제가 있습니다.

페이지 빌더 플러그인의 단점은 다음과 같습니다.

1. 성능 문제 : 포괄적 인 기능과 거대한 코드 볼륨을 갖기 위해 웹 사이트의 속도에 영향을 미칩니다.
2. 사용자 경험 : 일부 플러그인 편집 경험이 좋지 않습니다.
3. 에코 로킹 : 다른 플랫폼이나 도구로 마이그레이션하는 것은 어렵습니다.

블록 편집기는 이러한 문제를 해결하고 사용자에게 더 나은 글쓰기 경험을 제공하며 개발자에게 통합 API를 제공하도록 설계되었습니다.

CSS 레이아웃의 간단한 기록

초기 CSS (1996)는 주로 텍스트 스타일과 간단한 요소 조판에 사용되었습니다. Semantic HTML의 개념과 혼합 내용 및 스타일이 없기 때문에 많은 수의 테이블이 레이아웃에 사용되어 코드 중복성 및 유지 관리가 어려워집니다.

그 후, 웹 표준 캠페인은 컨텐츠와 스타일의 분리를 옹호하고 Div 요소와 플로트 속성을 사용하여 레이아웃을 위해 사용합니다. 테이블보다 유연하지만 플로트 속성의 청소 메커니즘은 복잡성을 증가시킵니다.

2012 년에 Flexbox 사양의 릴리스는 많은 레이아웃 문제를 해결했으며 간결한 구문은 코드의 양을 크게 줄였습니다.

CSS 그리드 : 2019 레이아웃 도구

2017 년 CSS 그리드 레이아웃 모듈이 공식적으로 출시되었습니다. Flexbox와 비교할 때 그리드는 2 차원 레이아웃을 지원하므로 HTML 태그 순서에 의존하지 않고 페이지에서 요소 위치를 제어하는 ​​데 더 많은 유연성이 가능합니다.

그리드의 기본 원리는 페이지를 Row-Column Grid로 나누고 그리드의 요소의 위치를 ​​지정하여 배치하는 것입니다. 이것은 코드를 크게 단순화하며 레이아웃을 수정할 때 HTML 구조를 변경할 필요가 없습니다.

다음 예는 그리드의 기본 사용을 보여줍니다.

 <code>.my-container { display: grid; grid-template-columns: repeat( 3, 1fr ); grid-template-rows: repeat( 2, 1fr ); } .element-1 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }</code>

그리드는 또한 레이아웃을 추가로 단순화하기 위해 grid-template-areas 속성을 사용하여 명명 영역을 정의하는 것을 지원합니다.

 <code>.container { display: grid; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }</code>

WordPress에서 CSS 그리드 사용

WordPress에서 CSS 그리드의 응용 프로그램을 단순화하기 위해 그리드 플러그인을 개발했습니다. 이 플러그인은 블록 편집기의 시각적 그리드 레이아웃 도구를 제공하며 12 × 6 그리드를 드래그 앤 드롭 영역과 결합하여 사용자가 시각적 컨트롤을 통해 크기, 배경 및 반응 형 동작을 설정할 수 있습니다.

그리드 플러그인의 장점은 다음과 같습니다.

• 블록 편집기와 통합 : 쉽게 사용하기 위해 블록 편집기를 원활하게 연결합니다.
• Lightweight : 생성 된 HTML 태그는 간결하며 중복 코드를 피합니다.
• 확장 성 : 맞춤형 스타일 및 확장 기능을 지원합니다.

그리드 플러그인으로 생성 된 스타일은 쉬운 캐싱을 위해 페이지 헤더 인라인 스타일에 추가됩니다.

귀하의 의견을 기대합니다!

CSS 그리드의 적용을 홍보하려면 더 자동 레이아웃 도구가 필요합니다. 그리드 플러그인은 WordPress에서 CSS 그리드의 레이아웃을 단순화하도록 설계되었으며 사용자 피드백과 지속적인 개선 및 개선을 기대합니다.

위 내용은 WordPress 레이아웃에 CSS 그리드를 가져옵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!