워드프레스 페이지를 만들어서 특정 카테고리 글 제목을 나열해 두면 방문자가 한눈에 정보를 찾기가 쉬워진다. 아래는 구텐베르크 블록 에디터에서 썸네일 추가 없이 간단하게 리스트 글 형식으로 만드는 방법을 정리하였다.

대시보드 – Pages – Add Page 버튼을 누르면 페이지 생성 화면으로 올 수 있다. 원하는 제목과 설명 등을 적었다면 본문 영역 빈 곳에(Type / to choose a block) 왼쪽 대괄호 두 개 [[ 입력 후 원하는 글 제목을 선택하면 된다. (제목은 링크 안에서 수정하고 불필요한 글자를 지워도 링크가 유지된다)

괄호 두 개만 입력하면 최신 글 목록이 나오므로, 괄호 뒤에 필요한 제목 키워드를 같이 입력하자. 여기서 글 제목을 불러온 뒤 Shift + enter 키를 누르면 줄 간격을 맞출 수 있는데, 바로 enter 키를 누르면 새 블럭이 생성된다.

이렇게 하면 글 제목 나열은 쉽게 마칠 수 있는데, 모바일 화면에서 긴 제목이 줄 바꿈 되면서 가독성이 떨어지는 문제가 발생한다. 링크 글 제목마다 highlight 형광펜 효과를 넣는 방법도 가능하지만, 이 블로그에는 점(•)을 넣어서 구분했다.

진행 방법은 불러 온 글 제목을 클릭해서 설정 창이 나오면 맨 왼쪽 Paragraph의 약자 P 아이콘 – List를 선택하면 된다.

이제 글 제목 앞에 구분 점이 생겨서 모바일에서도 가독성이 좋아진 느낌이다. 이후 전체 화면 오른쪽 위 발행 버튼을 누르면 페이지 저장이 완료된다.

이어서 Appearance – Customize의 Menu로 와서 원하는 곳에 방금 만든 페이지를 추가하고 저장하면 적용할 수 있다.

.entry-content ul li {
margin-left: -20px;
margin-bottom: 8px;
}

끝으로 실제 페이지에 접속해 보고 리스트 글 간격이나 여백이 맞지 않으면 Additional CSS로 조정하면 된다.

워드프레스 마스터 가이드