워드프레스 5.0 버전부터 블록 에디터(구텐베르크)가 기본 편집기로 통합되었습니다. 블록 에디터를 사용하는 경우 "최신 글" 블록을 사용하여 최신 게시글 목록을 표시할 수 있습니다. 블로그 게시글 본문에 최근 발행한 글 리스트를 목차 상자처럼 표시하는 것에 대해 궁금해 하시는 분이 계셔서 블록 에디터의 "최신 글" 블록을 사용하여 목차 플러그인에서 목차 항목을 표시하는 것과 비슷한 스타일로 최신 블로그 글 목록을 표시하는 방법에 대하여 살펴보겠습니다.
워드프레스 블로그 본문에 최신 글 목록 표시하기
워드프레스에서 블록 편집기로 글을 작성할 때 /블록-이름을 입력하여 원하는 블록을 빠르게 선택하여 삽입할 수 있습니다. 최신 글 블록을 삽입하려면 /최신을 입력하고 최신 글 블록을 선택하도록 합니다.
블록 편집기의 키보드 단축키를 활용하면 마우스 사용을 최소화하면서 빠르게 블록을 삽입하거나 이전 글 링크를 삽입할 수 있습니다. 마우스 사용을 줄임으로써 컴퓨터를 많이 사용하는 사람들의 직업병이라 할 수 있는 손목터널증후군 증상을 완화할 수도 있습니다.😄
블록을 삽입하면 그림과 같이 최근 공개된 글 리스트가 표시되고, 오른쪽의 블록 설정에서 여러 가지 설정을 할 수 있습니다.
오른쪽 블록 설정에서 게시물 요약글, 글 메타(글쓴이 이름, 발행일) , 특성 이미지(썸네일) 등을 표시할지 여부를 지정할 수 있고, 글 개수, 카테고리 등도 설정할 수 있습니다.
"특성 이미지 보이기" 옵션을 활성화하여 썸네일을 표시하도록 설정하면 위의 그림과 같이 글 제목 위에 썸네일이 표시됩니다.
최종적으로 다음 그림과 같이 썸네일은 왼쪽에, 글 제목을 오른쪽에 표시하고 목차처럼 라벨을 표시하고 상자에 배경색을 설정하기를 원합니다.
이를 위해서는 CSS에 대한 지식이 조금 있어야 합니다. 요즘은 챗GPT나 Perplexity를 활용하여 코드를 물어볼 수 있습니다. 하지만 CSS에 대하여 조금이라도 아는 상태에서 이러한 AI를 활용하면 효과적일 것이라 생각됩니다.
워드프레스 알림판 » 모양 » 사용자 정의 » 추가 CSS에 다음과 같은 커스텀 CSS 코드를 추가하면 위의 그림과 비슷하게 최신 글 리스트가 표시됩니다.
/* 최신 글 */
.wp-block-latest-posts {
background-color: #f9f9f9; /* 밝은 배경색 */
border: 1px solid #ddd; /* 부드러운 테두리 */
border-radius: 8px; /* 모서리 둥글게 */
padding: 1rem !important; /* 내부 여백 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
margin-bottom: 2rem; /* 박스 간 간격 */
}
.wp-block-latest-posts::before {
content: "최신 글";
display: block;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: #333; /* 제목 색상 */
text-align: left;
}
.wp-block-latest-posts__list {
list-style: none;
padding: 0;
margin: 0;
}
.wp-block-latest-posts__list li {
display: flex; /* 썸네일과 제목 나란히 배치 */
align-items: center;
margin-bottom: 1rem;
gap: 10px; /* 썸네일과 제목 간 간격 */
}
.wp-block-latest-posts__featured-image {
flex-shrink: 0; /* 썸네일 크기 유지 */
max-width: 60px;
max-height: 60px;
}
.wp-block-latest-posts__featured-image img {
width: 60px;
height: 60px;
object-fit: cover; /* 이미지 비율 유지 */
border-radius: 4px; /* 썸네일 모서리 둥글게 */
}
.wp-block-latest-posts__post-title {
font-size: 1rem;
color: #0073aa; /* 제목 색상 */
text-decoration: none;
line-height: 1.2;
}
.wp-block-latest-posts__post-title:hover {
color: #005b8f; /* 제목 호버 색상 */
text-decoration: underline;
} 위의 스타일이 마음에 안 들면 ChatGPT에 위의 코드를 넣고 원하는 스타일에 맞게 코드를 변경할 것을 요청할 수 있습니다.
GeneratePress 테마에서 테스트하였습니다. 테마에 따라 레이아웃은 조금 다를 수 있습니다.
클래식 편집기(고전 편집기)를 아직 사용하시는 분들도 계실 것입니다. 클래식 편집기 플러그인은 현재 1,000만 개가 넘는 사이트에 활성화되어 있습니다. (현재 1000만 개가 넘는 사이트에 설치되어 활성화된 플러그인으로 클래식 편집기 외에 Elementor, Yoast SEO, Contact Form 7 정도가 있습니다.)
워드프레스가 버전 5.0으로 업데이트되면서 블록 에디터(구텐베르크)로 전환될 당시 많은 반발이 있었습니다. 초기에는 블록 에디터가 안정적이지 못했고 기능도 미흡한 점이 많았습니다. 지금은 블록 에디터가 많이 안정화되었고 기능도 지속적으로 개선되고 있으므로 클래식 편집기를 사용하는 경우 블록 편집기로 바꾸는 것을 고려하시기 바랍니다.
댓글 남기기