워드프레스로 매거진 스타일의 웹사이트를 만들 때 흔히 사용되는 UI 중 하나가 카드 목록입니다. 가로세로 그리드 속에 콘텐츠를 카드 모양으로 해서 일렬로 배치하는 방식이죠. 아래처럼.
워드프레스에서 이와 같은 스타일의 목록을 만들려면 어떻게 하면 될까요?
여러 가지 방법이 있습니다. 언뜻 떠오르는 대로 몇 가지만 적어 보면,
- 카드 목록을 지원하는 테마. 테마 자체에서 이 유형의 목록을 지원하면 테마를 설치하는 것만으로 끝입니다. 할일은 그저 적합한 테마를 고르는 게 전부겠죠.
- 페이지 빌더. 대부분의 페이지 빌더에는 카드 목록 스타일로 글 목록을 만들 수 있는 기능을 지원합니다.
- 그리드 플러그인. 시중에 나와 있는 그리드 전용 플러그인들을 써도 되겠죠. 예를 들면 에센셜 그리드 같은.
- 테마 커스터마이징. 테마를 다룰 줄 안다면 테마를 직접 수정해서 카드 목록을 구현해 넣으면 됩니다.
그 밖에 또 어떤 방법이 있을까요?
이 글에서 소개할 내용은 워드프레스의 블록 편집기를 사용하여 카드 목록 스타일의 글 목록을 구현하는 방법입니다.
워드프레스 플러그인들 중에는 블록 편집기에서 사용할 수 있는 다양한 블록들을 제공하는 블록 확장 플러그인들이 이미 많이 나와 있습니다.
여기서는 그 중 하나인 Atomic Blocks를 사용해 보기로 합니다. Atomic Blocks는 Genesis 프레임워크로 유명한 워드프레스 개발사 StudioPress에서 제공하는 무료 플러그인이죠.
Atomic Blocks 사용하기
먼저 Atomic Blocks 플러그인을 찾아 설치합니다. 워드프레스 플러그인 디렉터리에서 검색하여 설치하고 활성화시키면 되기에 자세한 설명은 생략합니다.
설치가 완료되면 워드프레스 관리자 대시보드 상에 “Atomic Blocks”라는 메뉴가 추가되며 사용 방법을 소개한 간단한 도움말 페이지도 제공됩니다.
테마는 워드프레스 기본 테마인 Twenty Nineteen 테마를 사용하기로 하겠습니다.
이제 새로 페이지를 하나 만들어 보기로 하겠습니다. 페이지 제목을 아무렇게나 주셔도 상관없습니다. 블록 편집기가 보이면 블록 검색 버튼을 눌러 보세요! Atomic Blocks 섹션이 보이나요?
보다시피 Atomic Blocks에서는 워드프레스 블록 에디터에서 기본으로 제공하지 않는 다양한 유형의 블록들을 추가로 제공합니다. 아래는 현재 Atomic Blocks에서 제공하는 블록들의 유형입니다.
- Section & Layout Block
- Advanced Columns Block
- Newsletter Block
- Pricing Block
- Post Grid Block
- Container Block
- Testimonial Block
- Inline Notice Block
- Accordion Block
- Share Icons Block
- Call-To-Action Block
- Customizable Button Block
- Spacer & Divider Block
- Author Profile Block
- Drop Cap Block
여기서는 그 중 하나인 Post Grid Block을 사용해 보겠습니다. 이 블록은 이름 그대로 글 목록을 그리드 형태로 표시해 주는 블록입니다.
그리드 블록을 추가하는 방법은 간단합니다. 블록 편집기에서 블록 추가 버튼을 클릭한 다음 “AB Post and Page Grid” 블록을 찾아 클릭하면 됩니다.
그러면 아래와 같이 그리드 스타일의 글 목록이 자동으로 블록 편집기에 표시됩니다.
※ 참고로, 여기 표시된 글 목록은 설명의 편의를 위해 최신 IT뉴스 사이트에서 임의로 몇 개의 글을 뽑아 가져온 것이며 어디까지나 설명 용도로만 사용하는 것임을 밝힙니다.
그리드 설정하기
그리드 글 목록에 대한 설정은 편집기 상단과 우측 블록 설정 메뉴를 통해 할 수 있습니다.
편집기 상단 메뉴에서는 그리드 정렬 방식을 지정할 수 있고, 우측 메뉴에서는 그리드 블록 내부 콘텐츠의 표시 개수와 표시 방법 등을 변경할 수 있습니다.
이 부분은 별다른 설명이 필요 없을 만큼 메뉴가 직관적이기 때문에 별 어려움 없이 그리드를 자신의 입맛에 맞춰 변경할 수 있을 것입니다.
여기서는 임의로 섹션 제목(Section Title)을 “IT 새소식”이라 주고 이미지 크기를 “AB Grid Landscape”로 맞춘 다음, 저작자 표시를 껐습니다만, 여러분은 여러분 사이트에 맞게 조정하면 될 것입니다.
설정이 완료되었으면 페이지를 “업데이트”하고 실제로 화면에 어떻게 표시되는지 한번 확인해 볼까요?
글 목록이 카드 형식으로 예쁘게(?) 잘 보이네요.
만약 여러 개의 글 목록을 추가하고 싶다면 현재 글 목록 아래에 새로 블록을 추가해 주면 되니, 이런 식으로 각 카테고리별 글 목록도 손쉽게 표시할 수 있을 것입니다.
또한 이렇게 만든 페이지를 웹사이트의 메인페이지로 설정하면 별로 힘들이지 않고 근사한 매거진 스타일의 사이트를 만들 수도 있을 거구요.
이 상태에서 좀 더 디자인 수정이 필요하면 CSS를 수정하면 됩니다. CSS 편집은 통상적인 워드프레스 사용법이기에 여기서는 생략합니다.
만약 좀더 Atomic Blocks에 최적화된 사이트를 만들고 싶다면 Atomic Blocks에서 함께 제공하는 무료 테마인 Atomic Blocks 테마를 사용해도 좋구요.
물론 Atomic Blocks의 그리드 블록만 놓고 봤을 때는 아직은 그 기능이 미약합니다. 시중에 나와 있는 유료 페이지 빌더들이나 에션설 그리드 같은 그리드 전용 플러그인들에 비하면 말이죠. 하지만 내 웹사이트에 간단하게 매거진 스타일의 카드 그리드 글 목록을 추가해 넣고 싶은 분들이라면 이 방법도 한번 고려해 보세요!
0 thoughts on “블록 편집기로 매거진 스타일 글 목록 만들기”