# KTheme Post Widget – WordPress 포스트 표시의 완성
들어가며
케이테마 프리미엄 Post Widget은 WordPress 포스트를 다양한 레이아웃으로 표시하는 고급 위젯입니다. 블로그 포스트, 뉴스, 포트폴리오 등을 Grid 또는 List 형태로 표시하며, AJAX 페이지네이션, 필터링, 로딩 애니메이션 등 전문적인 기능을 제공합니다.
주요 기능
- 두 가지 레이아웃: Grid (카드형) / List (목록형)
- 고급 쿼리: 카테고리, 태그, 작성자, 날짜 필터링
- AJAX 페이지네이션: 페이지 새로고침 없이 로딩
- 로딩 애니메이션: 스켈레톤 UI 또는 스피너
- 반응형 Grid: 디바이스별 컬럼 수 조절
- 메타 정보: 날짜, 작성자, 카테고리, 댓글 수
- 발췌문: 자동 또는 수동 발췌문
- Read More 버튼: 커스터마이징 가능
- Featured Image: 썸네일 이미지 지원
레이아웃 옵션
Grid 레이아웃 (카드형)
- 카드 형태로 포스트 표시
- Featured Image 상단 배치
- 제목, 메타, 발췌문, 버튼 순서
- 2, 3, 4, 6열 선택 가능
- 반응형 컬럼 조절
List 레이아웃 (목록형)
- 가로 형태로 포스트 표시
- Featured Image 왼쪽 배치
- 텍스트 콘텐츠 오른쪽 배치
- 1열 세로 스택
- 더 많은 텍스트 표시 가능
쿼리 설정
기본 설정
- 포스트 수: 표시할 포스트 개수 (1 ~ 20개)
- 정렬: 최신순, 인기순, 제목순, 랜덤
- 정렬 방향: 내림차순 (DESC) / 오름차순 (ASC)
필터링
카테고리
- 특정 카테고리만 표시
- 여러 카테고리 선택 가능
- 카테고리 제외도 가능
태그
- 특정 태그 포함/제외
- 여러 태그 조합
작성자
- 특정 작성자 포스트만
- 여러 작성자 선택
날짜
- 특정 기간 포스트
- 최근 30일, 1년 등
포스트 제외
- 현재 포스트 제외
- 특정 포스트 ID 제외
- Sticky 포스트 제외
표시 옵션
Featured Image
- 표시/숨김: 썸네일 이미지
- 크기: Thumbnail, Medium, Large, Full
- 비율: 16:9, 4:3, 1:1 (정사각형)
- 호버 효과: Zoom, Grayscale, Overlay
- 링크: 이미지 클릭 시 포스트로 이동
제목
- 표시/숨김: 포스트 제목
- 글자 수 제한: 긴 제목 자르기
- HTML 태그: H2, H3, H4 등 선택
- 링크: 제목 클릭 시 포스트로 이동
메타 정보
- 날짜: 발행일 표시
- 작성자: 글쓴이 이름
- 카테고리: 포스트 카테고리
- 댓글 수: 댓글 개수
- 조회수: 플러그인 연동 시
- 아이콘: 각 메타에 FontAwesome 아이콘
발췌문
- 표시/숨김: 포스트 요약
- 글자 수: 50 ~ 300자 (기본: 150자)
- 소스: 자동 발췌 / 수동 발췌문
- 말줄임: “…” 또는 커스텀 텍스트
Read More 버튼
- 표시/숨김: 더보기 버튼
- 텍스트: “Read More”, “자세히 보기” 등
- 스타일: 버튼, 링크, 화살표
- 아이콘: 버튼에 아이콘 추가
페이지네이션
타입
- None: 페이지네이션 없음
- Numbers: 1, 2, 3… 숫자 페이지
- Load More: “더보기” 버튼
- Infinite Scroll: 무한 스크롤
AJAX 로딩
- 페이지 새로고침 없이 콘텐츠 로딩
- 부드러운 사용자 경험
- 로딩 애니메이션 표시
로딩 애니메이션
- Skeleton: 스켈레톤 UI (카드 모양)
- Spinner: 회전 스피너
- Dots: 점 애니메이션
- Custom: 커스텀 로딩 이미지
스타일 옵션
1. 카드/아이템 스타일
배경
- 단색, 그라디언트
테두리
- 스타일, 굵기, 색상
- Border Radius
그림자
- Box Shadow
- 호버 시 그림자 강화
패딩
- 내부 여백
호버 효과
- Lift (위로 이동)
- Shadow Grow
- Scale
2. Featured Image 스타일
- 크기: Width, Height
- Object Fit: Cover, Contain
- Border Radius: 이미지 모서리
- 호버 효과: Zoom, Grayscale, Brightness
- Overlay: 호버 시 오버레이
3. 제목 스타일
- Typography: 폰트, 크기, 굵기
- 색상: 텍스트 색상
- 호버 색상: 링크 호버 시
- 간격: Margin
4. 메타 정보 스타일
- Typography: 작은 폰트 (12px ~ 14px)
- 색상: 회색 계열
- 아이콘 색상: 메타 아이콘
- 구분자: 메타 사이 구분 (|, •, 공백)
5. 발췌문 스타일
- Typography: 폰트, 크기
- 색상: 텍스트 색상
- 줄 높이: 가독성 (1.6 ~ 1.8)
6. Read More 버튼 스타일
- Typography: 버튼 텍스트
- 배경색: 버튼 배경
- 텍스트 색상: 버튼 텍스트
- 호버 효과: 색상 변화
- Border: 테두리
- Border Radius: 둥근 모서리
- 패딩: 버튼 크기
7. 페이지네이션 스타일
- 숫자 색상: 페이지 번호
- 활성 색상: 현재 페이지
- 배경색: 페이지 버튼 배경
- 호버 색상: 마우스 오버 시
- Load More 버튼: 더보기 버튼 스타일
실전 활용 예제
예제 1: 블로그 메인 페이지 (Grid 3열)
설정:
- 레이아웃: Grid
- 컬럼: 3열 (데스크톱), 2열 (태블릿), 1열 (모바일)
- 포스트 수: 9개
- 정렬: 최신순
- Featured Image: 16:9 비율, Medium 크기
- 제목: H3, 2줄 제한
- 메타: 날짜, 카테고리, 댓글 수
- 발췌문: 120자
- Read More: “자세히 보기” 버튼
- 페이지네이션: Numbers (AJAX)
- 카드: 흰색, 그림자, Border Radius 10px
- 호버: Lift + Shadow Grow
예제 2: 뉴스 섹션 (List 레이아웃)
설정:
- 레이아웃: List
- 포스트 수: 5개
- 정렬: 최신순
- 카테고리: “뉴스” 카테고리만
- Featured Image: 4:3 비율, 왼쪽 배치
- 제목: H4, 1줄 제한
- 메타: 날짜, 작성자
- 발췌문: 200자
- Read More: 화살표 링크
- 페이지네이션: Load More
- 구분선: 아이템 사이 1px 선
예제 3: 포트폴리오 갤러리 (Grid 4열)
설정:
- 레이아웃: Grid
- 컬럼: 4열 (데스크톱), 2열 (모바일)
- 포스트 수: 12개
- 정렬: 랜덤
- 카테고리: “포트폴리오” 카테고리
- Featured Image: 1:1 정사각형, 호버 Zoom
- 제목: H4, 중앙 정렬
- 메타: 숨김
- 발췌문: 숨김
- Read More: 숨김 (이미지 클릭으로 이동)
- 페이지네이션: Infinite Scroll
- 카드: 이미지만, Border Radius 15px
성능 최적화
- 이미지 최적화: WebP 포맷, 적절한 크기
- Lazy Loading: 이미지 지연 로딩
- AJAX 캐싱: 로딩된 콘텐츠 캐시
- 쿼리 최적화: 필요한 필드만 로드
- 페이지네이션: 한 번에 너무 많은 포스트 로드 금지
SEO 최적화
- 시맨틱 HTML: article, header, time 태그 사용
- Schema Markup: BlogPosting 구조화 데이터
- 제목 태그: H2, H3 등 적절한 계층
- Alt 텍스트: Featured Image에 자동 추가
- Internal Linking: 포스트 간 연결
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
- jQuery 3.0+
- 모든 최신 브라우저 지원
마무리
KTheme Post Widget은 WordPress 포스트를 전문적이고 매력적으로 표시하는 완벽한 솔루션입니다. Grid와 List 레이아웃, AJAX 페이지네이션, 고급 필터링 기능으로 블로그, 뉴스 사이트, 포트폴리오 등 어떤 용도로든 활용할 수 있습니다. 성능과 SEO까지 고려한 최적화된 코드로 사용자 경험과 검색 엔진 최적화를 동시에 달성하세요!