홈페이지로 돌아왔습니다. 메인 이미지 아래에 "최신 게시물" 섹션을 추가해 보겠습니다.
시작하기 전에: 샘플 게시물
이 섹션에는 최소 3개의 블로그 게시글이 게시되어 있어야 쿼리 루프에 표시할 내용이 생깁니다. 이 단계를 건너뛰면 Bricks에서 모든 설정을 올바르게 했더라도 그리드가 비어 있거나 제대로 표시되지 않을 수 있습니다.
먼저 테스트 게시물 3개를 작성하세요:
- 워드프레스 대시보드에서 게시물 > 새 게시물 추가 로 이동하세요.
- 각 게시물에 제목 과 간단한 요약을 입력하세요 . (화면에 요약 입력란이 보이면 해당 필드를 사용하고, 없으면 본문에 몇 줄을 추가하여 워드프레스에서 자동으로 요약을 생성하도록 하세요.)
- 각 게시물에 대표 이미지를 설정하세요 ( 사이드바의 대표 이미지 ).
- '게시'를 클릭하고 최소 3개의 게시물이 게시될 때까지 이 과정을 반복하세요.
블로그 게시물 템플릿 관련 글 에서도 동일한 단계를 사용할 수 있습니다 . 여기서 작성한 게시물이 해당 템플릿에 표시될 내용입니다.
클릭을 시작하기 전에 두 가지 핵심 개념, 즉 쿼리 루프 와 동적 데이터에 대해 알아야 합니다 .
쿼리 루프란 무엇인가요?
워드프레스에서 "쿼리"는 다음과 같은 질문을 의미합니다.
- "최근 게시물 3개를 보여주세요."
- "이 카테고리의 모든 게시물을 주세요"
쿼리 루프는 해당 질문에 대한 답변(게시물 목록)을 가져와 각 항목에 대해 디자인을 한 번씩 반복합니다.
이미지, 제목, 발췌문, 버튼으로 구성된 단일 카드를 디자인합니다 . 루프는 게시물을 순회하며 게시물당 하나의 카드를 출력합니다. 쿼리 규칙을 변경하면 동일한 디자인으로 다른 게시물이 표시됩니다.
동적 데이터란 무엇인가요?
지금까지는 제목이나 텍스트 요소를 추가할 때 내용을 직접 입력했습니다. 즉, 고정된 텍스트였습니다.
동적 데이터를 사용하면 요소를 WordPress 필드에 연결합니다.
- 제목은 게시물 제목을 가져옵니다.
- Image는 추천 이미지를 가져옵니다.
- 텍스트는 게시물 발췌문을 가져옵니다.
반복문 안에서 각 카드는 목록에 있는 현재 게시물의 필드 값을 보여줍니다.
{post_title}Bricks에서 또는 와 같은 옵션으로 표시됩니다 {featured_image}. 이것들은 실제 WordPress 필드를 나타내는 시각적 자리 표시자일 뿐입니다.
콘텐츠를 준비하세요
게시글을 최소 3개 이상 작성하셨고 , 각 게시글에는 대표 이미지가 있어야 합니다 ( 위의 ' 시작하기 전에' 참조 ). 확인 방법: 게시글 > 모든 게시글 - 게시됨 상태 의 게시글이 3개 이상 표시되어야 합니다 .
해당 섹션을 빌드하세요
- 새 섹션을 추가하세요
- 컨테이너 안에 "최신 게시물"이라는 제목을 추가하세요.
- 제목 아래에 블록 요소를 추가하세요
그리드를 구성하세요
저희는 게시물을 3열 그리드 형식으로 표시하고 싶습니다.
이전 글에서 간단한 행 레이아웃(왼쪽에 텍스트, 오른쪽에 이미지)을 위해 flexbox를 사용했습니다. CSS Grid 는 또 다른 유명한 레이아웃 시스템입니다. 카드 그리드처럼 행과 열을 동시에 고려해야 하는 2차원 레이아웃에 이상적입니다.
블록에 그리드 사용을 설정하면 브라우저에게 해당 블록의 자식 요소를 그리드에 배치하도록 지시하는 것입니다.
- 그리드 템플릿 열 컨트롤은 원하는 열의 개수와 너비를 지정합니다.
1fr 1fr 1fr이는 "사용 가능한 너비의 일부를 각각 차지하는 세 개의 동일한 열"을 의미합니다.
- 간격 조절 기능을 사용 하면 열과 행 사이의 간격을 설정하여 카드가 모든 방향으로 고르게 배치되도록 할 수 있습니다.
카드를 추가하면 Grid가 자동으로 해당 열에 카드를 배치하고 필요에 따라 새 행으로 줄 바꿈합니다. 각 카드의 위치를 수동으로 지정할 필요가 없습니다.
- 블록을 선택하세요
- 표시하다 :
Grid - 그리드 템플릿 열 :
1fr 1fr 1fr(세 개의 동일한 열) - 간격 :
24
카드(루프 항목)를 생성합니다.
그리드 블록 안에 블록을 하나 더 추가합니다 (이 블록이 반복 카드가 됩니다).
이 카드 블록 안에 다음을 추가하세요:
- 이미지 (대표 이미지)
- 제목 (게시글 제목, H3)
- 기본 텍스트 (게시물 발췌)
- 텍스트 링크 ("더 보기")
쿼리 루프 활성화
- 카드 블록 (안쪽 블록) 을 선택하세요.
- 쿼리 루프 사용 여부 전환
- 쿼리 설정 :
- 게시물 유형: 게시물
- 페이지당 게시물 수: 3
이제 엽서 3장이 보이실 겁니다!