워드프레스 블로그에 에세이 글을 올리면서 각 시리즈를 모아 둔 Index 페이지를 만들었다. 페이지에는 Grid 기능을 활용해서 시리즈별 카드형 아이콘을 만든 뒤 클릭하면 해당 에세이 카테고리로 이동하는 방식을 적용했다.

* GeneratePress 프리미엄 버전과 GenerateBlock 플러그인 설치가 필요합니다.

대시보드 – Pages에서 새 페이지를 만든 뒤 빈 공간에 Container를 만들고 +를 누른 뒤 파란색 Grid를 선택하자.

생성한 그리드를 클릭한 상태로 화면 오른쪽 Block의 톱니바퀴 세팅으로 오면 가로 아이템 개수를 정할 수 있다.

이 블로그에는 가로 2개를 배열했는데, Grid 아래로 빈 컨테이너가 2개 생긴 것을 알 수 있다. 시리즈 글이 하나만 있는 상태라면 카드는 1개만 필요하니 두 번째 컨테이너는 삭제하면 된다.

컨테이너의 +를 눌러서 파란색 Image를 불러 왔다면 업로드할 이미지를 선택하자.

이미지를 불러온 뒤, 아래로 원하는 텍스트나 H 제목, 버튼을 넣고 화면 오른쪽 block – styles에서 스타일을 정하면 된다. 여기서 버튼은 해당 에세이가 몇 편인지 나타내려고 만들었는데 필요없다면 생략해도 상관없다.

버튼 클릭 후 화면 오른쪽 block – settings – Icon Open Library를 클릭하면 원하는 아이콘을 고를 수 있다.

아이콘과 문구를 추가한 다음, Block – Styles에서 Padding 간격과 글씨 크기를 조정하고 Main(기본)/Hover(클릭 시)/Icon 색깔을 변경하면 위처럼 만들 수 있다.

그 외 이미지는 네 변에 Border Radius를 약간 넣었고 요소별 간격이나 글자색 등은 원하는 대로 진행하면 된다. 여기까지 왔다면 해당 에세이 카테고리 링크를 걸어주어야 한다.

* 시리즈 글이 늘어날 때마다 화면 빈 곳 컨테이너에 완성한 양식을 복사 후 붙여 넣고 이미지와 제목, 글 수, 링크를 변경하면 된다.

먼저 이미지에 링크를 건다면 List View의 이미지 블록 클릭 – 화면 오른쪽 Block – Settings로 온 다음, LINK란에 카테고리 url을 넣자.

이어서 제목 헤딩 글자 블록 클릭 후 링크 아이콘을 눌러서 카테고리 url을 넣고 엔터 키를 누르면 된다. 그러면 전체 url이 나올 텐데, url 영역 안에서 원하는 제목을 넣고 불필요한 문자는 삭제하자.

마지막으로 화면 오른쪽에서 해당 페이지의 Slug(퍼머링크) 문자를 정한 뒤 저장하면 페이지 생성이 완료된다.

이후 블로그 내 원하는 곳에 해당 페이지 메뉴를 만들면 방문자가 접근할 수 있다. 위는 상단바에 페이지를 추가하는 방법인데 자세한 내용은 이 글을 참고해 보자.

완성된 에세이 페이지 모습
워드프레스 마스터 가이드