워드프레스 최신 글 위젯에 썸네일을 추가해주는 Recent Posts Widget With Thumbnails

Last Updated: 2023년 11월 30일 | | 19개 댓글

워드프레스에서 제공하는 기본 "최신 글(Recent Posts)" 위젯에는 썸네일 없이 단순한 글 목록을 표시해주는 데 그칩니다. 최신 글 목록에서 썸네일과 요약글을 표시하고 싶은 경우 Recent Posts Widget With Thumbnails이라는 플러그인을 사용할 수 있습니다.

[ 이 글은 2023년 11월 30일에 마지막으로 업데이트되었습니다. ]

워드프레스 최신 글에 썸네일을 추가해주는 Recent Posts Widget With Thumbnails

Recent Posts Widget With Thumbnails는 포스트 제목, 썸네일, 요약글, 작성자, 카테고리, 날짜 등의 정보로 최신 글을 나열하는 워드프레스 플러그인입니다. 이 플러그인은 2023년 11월 현재 20만 개가 넘는 사이트에 설치되어 사용되고 있습니다.

비슷한 플러그인으로 Recent Posts Widget Extended라는 플러그인이 있습니다. 이 플러그인은 숏코드를 지원하므로 단축코드를 사용하여 최신 글을 표시하고 싶은 경우에 유용하게 사용할 수 있을 것입니다.

Recent Posts Widget With Thumbnails 플러그인 설치 및 설정 방법

워드프레스 관리자 페이지에서 플러그인 > 플러그인 추가하기로 이동하여 "Recent Posts Widget With Thumbnails"로 검색하여 이 플러그인을 설치할 수 있습니다.

설치하고 활성화했다면 외모 > 위젯으로 이동하여 "Recent Posts Widget With Thumbnails" 위젯을 사이드바나 원하는 위젯 영역에 추가할 수 있습니다.

최신 워드프레스 버전을 사용하는 경우 상단의 블록 삽입기 토글 아이콘을 클릭합니다.

워드프레스 위젯 추가

아래로 스크롤하여 Recent Posts With Thumbnails 위젯을 원하는 곳으로 끌어도 높습니다.

또는, 간단히 검색 상자에 "recent"를 입력하여 이 위젯을 검색한 다음, 이 위젯을 끌어다 원하는 곳에 배치할 수 있습니다.

워드프레스 위젯 추가

이제 Recent Posts With Thumbnails 위젯에 표시할 항목 등을 설정할 수 있습니다.

최신글 위젯 설정

표시할 글 개수 외에 제목 최대 길이, 요약문 표시 여부, 요약물 길이, 썸네일 표시 여부, 썸네일 크기(너비와 높이), 표시할 카테고리 선택 등 다양한 설정을 세부적으로 할 수 있습니다.

최신 글 위젯 날짜, 요약글 설정
요약글 길이 설정.
최신글 목록 위젯 썸네일 크기 설정
썸네일 크기 설정.

참고로 Autoptimize 등의 최적화 플러그인이 설치되어 있는 경우 최적화 플러그인의 설정이 잘못되면 최신 글 위젯의 요약글 등 일부 요소가 표시되지 않을 수도 있습니다. 요약문이나 썸네일 등이 표시되지 않으면 캐시 플러그인이나 최적화 플러그인을 비활성화하여 문제가 해결되는지 체크해보시기 바랍니다.

워드프레스 최신 글 위젯

실제 사이트에서 제대로 작동하는지 확인합니다.

아스트라 테마 최신 글 목록

아스트라 테마에서 테스트해보았습니다. 대부분의 테마에서 문제 없이 작동할 것입니다. 요약글 등의 부분이 마음에 안 들면 설정을 변경하도록 합니다.

원하는 경우 CSS를 통해 레이아웃을 조정할 수 있습니다.

블록 위젯 vs. 클래식 위젯

워드프레스 5.8 버전에서 블록 위젯이 도입되었습니다. 이 글을 처음 작성할 당시에는 클래식 위젯(고전 위젯) 환경이었지만 현재는 블록 위젯이 기본 위젯 형식입니다. 이 플러그인은 고전 위젯과 블록 위젯 모두에서 잘 작동할 것입니다.

하지만 고전 위젯을 사용하려면 별도의 플러그인을 설치해야 합니다.

고전 위젯을 사용하신다면 가급적 블록 위젯으로 전환하는 것을 고려해보시기 바랍니다.

참고


19 개 댓글

Leave a Comment

  1. 혹시나 개발자 모드에 나와있는 CSS 코드를 수정하면 될까 싶어 추가해 봤는데 이 역시 적용이 안되네요.

    .rpwwt-widget ul li img {
    width: 90px;
    height: 60px;
    }

    응답
  2. Read More는 해결 했습니다! 아래 페이지 레이아웃 변경하는 코드에서 끝에 } 이게 하나 지워져 있어서 추가 했더니 다시 정상적으로 나오네요.

    /* 메인 페이지 레이아웃 변경 */

    @media (min-width: 1025px) {
    .wp-post-image {
    display: inline-block;
    width: 300px; /* 이미지 너비 */
    height: 200px; /* 이미지 높이 */
    object-fit: cover;
    margin-right: 15px; /* 이미지와 요약문 사이 간격 */
    float: left;
    }.entry-summary {
    overflow: hidden;
    }
    }

    응답
  3. 플러그인을 설치하니까 아래 CSS 코드 역시 PC에서만 적용되고 태블릿과 모바일에서는 갑자기 적용이 안돼네요 ㅠㅠ

    /* GeneratePress 테마의 Read More 문구를 버튼으로 표시하기 */

    .read-more {
    color: white; background-color: #4f4f4f;
    padding: 5px 7px;
    border-radius: 10px;
    margin-top: 10px; margin-left: auto;
    margin-right: auto; width: 100%; display : block;
    text-align: center; font-weight: bold;
    text-decoration: none;
    &:hover{color:#eee; background-color: darkgray;}
    $:active{position:relative; top:2px;}
    }

    응답
  4. 그리고 플러그인을 설치하고 활성화 하니까 PC에서는 되는데 태블릿에서 사이드바 고정이 안돼요. 밑에 있는 CSS 코드를 사용중입니다.

    /* GeneratePress 테마 사이드바 고정 */
    /* Make the sidebar sticky in GeneratePress */

    @media (min-width: 769px) {
    .site-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    }

    #right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 2rem; /* Change this value as you wish */
    align-self: flex-end;
    }
    }

    응답
    • 해당 CSS는 해상도가 769px 이상인 기기에서 작동합니다.
      태블릿 화면 해상도가 769px 이상인 상황에서 작동하지 않나요?
      이 플러그인을 비활성화하면 제대로 작동하나요?

      응답
      • 플러그인을 비활성화 해도 태블릿에서는 고정이 안되길래

        @media (min-width: 769px) {

        이 부분을 지워봤는데 그래도 PC에서만 고정이 되고 태블릿에서 갑자기 고정이안되네요.

  5. Thumbnail Settings 에서 Show thumbnail 을 체크하고 Size of thumbnail 을 Specified width and height 로 설정 후 밑에 Width of thumbnail 과 Height of thumbnail 크기를 지정해도 왜 적용이 안될까요?

    응답
할인 소식
아스트라 테마 최대 40% 할인!
Limited Time Offer
You This Coupon Code in Checkout
Click the code to Copy