플러그인 없이 WordPress에서 열을 만드는 방법

콘텐츠를 열로 구성하는 것은 WordPress 열 블록 덕분에 식은 죽 먹기입니다. 이 블록은 모든 WP 테마에서 사용될 수 있는 핵심 블록에 속합니다. 열 블록은 최대 6개의 열을 가질 수 있습니다. 따라서 6개의 서로 다른 콘텐츠를 나란히 가질 수 있습니다.

오늘은 Columns 블록을 사용하여 플러그인 없이 WordPress에서 열을 만드는 방법을 보여드리겠습니다. 우리는 또한 당신에게 요약을 제공합니다 WP 5.3 버전의 최신 기능 업데이트.

이 자습서에서는 다음에 대한 정보를 찾을 수 있습니다.

• 열의 목적은 무엇입니까
• 이전 편집기에서 열이 작동하는 방식
• 플러그인 없이 WordPress에서 열을 만드는 방법(블록 편집기에서)
• 기본 기둥 블록 설정
• WordPress 열 블록으로 작업하는 방법
• 중첩된 블록을 편집하는 방법
• 컬럼 블록의 장점

열의 목적은 무엇입니까

웹 사이트의 열은 여러 응용 프로그램을 가질 수 있습니다. 무엇보다도 그들은 콘텐츠를 잘 정리하고, 더 읽기 쉽고, 브라우징하기 쉽게 만들 수 있습니다. 콘텐츠를 열로 구성하면 중요한 정보나 매개변수를 강조표시할 수 있습니다.

예를 들어 다중 열 레이아웃을 사용하여 서비스를 표시할 수 있습니다. 설명 이미지, 설명 또는 버튼을 추가합니다. 물론 이미지를 클릭 가능하게 만들 수 있습니다.

서비스와 마찬가지로 WordPress의 열을 사용하여 제품 또는 제품 범주를 표시할 수 있습니다. 간단한 비즈니스 웹 사이트가 있는 경우 이상적입니다.

블로그 게시물에서 열을 사용하여 콘텐츠를 구분할 수 있습니다. 텍스트, 글머리 기호 또는 이미지를 나란히 배치할 수 있습니다.

이전 편집기에서 열이 작동하는 방식

워드프레스 5+ 이전에는 다중 열 콘텐츠를 만들려면 테이블을 사용해야 했습니다. 최신 편집기보다 훨씬 더 어려웠습니다. 게다가 일반적으로 스타일과 모바일 장치의 테이블 표시에 문제가 있었습니다. 어떻게 작동 했습니까?

WordPress 웹 사이트에서 열을 만드는 방법에 대한 여러 옵션이 있습니다.

1. HTML 코드를 텍스트 편집기에 수동으로 삽입

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

이 접근 방식은 요구 사항에 따라 테이블이나 열을 신속하게 생성할 수 있는 개발자가 주로 사용했습니다. 단점은 모든 WordPress 테마가 열을 잘 처리할 수 있는 것은 아니라는 것입니다. 테이블은 일반적으로 완벽하지 않았으며 일반 사용자는 가능한 모든 문제를 쉽게 해결할 수 없었습니다.

2. WordPress 편집기에서 테이블 허용

워드프레스는 TinyMCE 편집기를 사용했기 때문에 테이블을 편집하는 기능을 허용할 수 있었습니다. 더 자세히 알아보고 싶다면 모든 세부 정보를 찾을 수 있습니다. 이 포럼에서. AIT 테마에 대해 동일한 작업을 수행하는 경우 테이블이 올바르게 작동합니다.

3. AIT 테마에서 Columns 요소 사용

이전 WordPress 테마 중 하나를 사용하는 경우 Columns 요소를 확실히 알고 있습니다. 이 요소는 페이지 내부에 열을 추가하는 데 사용할 수 있습니다. 주문 가능한 요소이므로 필요한 곳에 배치할 수 있습니다. 장점은 페이지 내부의 가변성입니다.

4. 타사 플러그인을 다운로드하여 테이블 관리

WordPress 게시물 및 페이지에서 열을 만드는 방법에 대한 또 다른 솔루션은 테이블을 만드는 데 사용할 수 있는 플러그인 중 하나를 다운로드하는 것이었습니다. 이 플러그인을 사용하면 코딩 없이 몇 번의 클릭만으로 열/테이블을 추가할 수 있습니다. 경험이 적은 사용자도 이것을 사용할 수 있었습니다.

플러그인 없이 WordPress에서 열을 만드는 방법(블록 편집기에서)

새로운 블록 편집기 덕분에 열 생성이 매우 쉬워졌습니다. 여전히 이전 WordPress를 사용하고 있다면 지금이 최신 버전으로 업데이트할 적기입니다. 열 블록을 사용하여 몇 번의 클릭만으로 간단하게 열을 추가하고 관리할 수 있습니다.

이 블록은 다중 열 콘텐츠 작업, 제품 발표 또는 블로그 작성을 원하지만 프로그래밍 경험이 없는 모든 사람에게 환영받는 변화입니다.

Columns 블록을 추가하는 방법과 WordPress에서 플러그인 없이 열을 만드는 방법을 살펴보겠습니다.

• 첫 번째 옵션은 상단 표시줄에서 "+"를 클릭하고 사용 가능한 블록에서 열 블록을 선택하는 것입니다.
• 두 번째 옵션은 편집기 내부의 아무 곳에서나 "+"를 클릭하는 것입니다.

WordPress Columns 블록의 미리 정의된 레이아웃(WP 5.3의 새로운 기능)

최신 버전에서는 열 설정이 크게 개선되었습니다. 우선 사용 가능한 기본 레이아웃 스타일이 있습니다. 무슨 뜻이에요?

사용자는 콘텐츠 영역에 새 블록을 추가하는 과정에서 레이아웃 및 정렬 스타일을 선택할 수 있습니다. 사전 정의된 레이아웃은 특히 고급 WordPress 기술이 없는 사용자에게 매우 유용할 수 있습니다. 이 기능은 WordPress에서 (플러그인이나 다른 애드온 없이) 열을 만드는 방법을 상상하는 방법을 나타냅니다.

 

WordPress Columns 블록에서 미리 정의된 레이아웃을 선택하지 않으려면 건너뛰세요. 이 단계를 건너뛰면 콘텐츠가 2개의 동일한 부분/편집 가능한 2개의 개별 열로 분리됩니다.

열 블록 기본 설정

WordPress Columns 블록 자체에는 많은 옵션이 없습니다. 왜 그런건지 나중에 설명드리겠습니다. 상단 표시줄에서 정렬을 너비 또는 전체 너비로 변경할 수 있습니다. 활성 테마에서 지원하는 경우 이 정렬을 변경할 수 있습니다.

가장 중요한 열 블록 설정은 오른쪽에 있는 검사기 사이드바의 열 수입니다. 기본적으로 2개의 열이 있지만 이 수를 6으로 늘릴 수 있습니다. 마우스를 사용하거나 숫자를 입력하여 변경할 수 있습니다. 열을 늘리거나 줄이면 바로 볼 수 있습니다. 블록은 슬라이더에 따라 동적으로 변경됩니다.

설정이나 코딩에 대한 어려운 변경 없이 문자 그대로 몇 초 만에 열 수를 변경하기 때문에 매우 실용적입니다.

WordPress 편집기의 다른 블록과 마찬가지로 Columns 블록에도 Custom CSS Class를 삽입할 수 있습니다.

원활한 블록 작업을 위한 블록 어펜더

Columns 블록은 여러 블록을 만들 수 있기 때문에 특별합니다. 새 버전이 출시되기 전까지는 개별 블록으로 작업하는 것이 꽤 어려웠습니다. 블록을 추가하고 싶을 때 정확히 어디를 클릭해야 할지 몰랐습니다. Block appender(및 배경색에 따른 차별화) 덕분에 콘텐츠를 적절한 열에 삽입하기가 더 쉬워졌습니다.

WordPress 열 블록으로 작업하는 방법

열 블록의 장점은 각 열이 다른 블록을 중첩할 수 있다는 것입니다. 단락, 이미지 블록 또는 버튼 블록이 될 수 있습니다. 최대 열 수는 6개이므로 필요에 따라 다중 열 콘텐츠를 만들 수 있습니다. 앞에서 언급한 것처럼 제품을 표시하려면 제품 이미지, 이름, 가격 및 버튼을 나란히 추가할 수 있습니다.

또한 그리드를 생성하기 위해 여러 개의 기둥 블록을 서로 아래에 사용할 수 있습니다. 서비스를 제공하거나 중요한 기능을 홍보하는 데 사용할 수 있습니다.

중첩된 블록 편집

이미 언급했듯이 열 안에 다른 블록을 중첩할 수 있습니다. 중첩된 각 블록에는 사용 가능한 모든 설정이 있습니다. 즉, 이미지 블록을 열에 추가하면 독립 실행형에서와 똑같은 방식으로 편집할 수 있습니다. 이미지 블록.

결론: 열 차단 이점

WordPress 블록 편집기를 출시하고 페이지 및 게시물에서 열을 사용할 수 있게 되면서 사용자가 콘텐츠로 작업할 수 있는 방식이 크게 간소화되었습니다. WordPress Columns 블록 덕분에 타사 솔루션을 사용하거나 HTML 코드를 작성하는 것이 더 이상 중요하지 않습니다. 몇 번의 클릭만으로 열을 추가하거나 삭제할 수 있습니다. 기술자가 적은 사용자에게도 모든 것이 매우 직관적이고 빠릅니다.

다중 열 레이아웃의 콘텐츠는 그리드에 잘 정렬됩니다. 반응 형 버전에서도 바로 좋아 보일 것입니다.

우리는 WordPress 블록 편집기를 위해 특별히 개발된 새로운 Citadela WordPress 테마를 열심히 작업하고 있었습니다. Citadela 테마 및 사용 가능한 레이아웃 팩에 대해 자세히 알아보세요.