Skip to content

v1.2.0 - Shortcode Design Settings

Choose a tag to compare

View all tags
@github-actions github-actions released this 19 Apr 03:48
· 6 commits to main since this release
v1.2.0
d198756

v1.2.0 — 숏코드 디자인 커스터마이징

관리자에서 폰트, 컬러, 레이아웃을 설정하면 모든 숏코드에 즉시 반영.
CSS 수정 없이 드래그 & 드롭 만으로 디자인 변경.

설정 위치

WordPress 관리자 > DW Catalog > Shortcode Design

커스터마이징 가능한 항목

Grid & Carousel — Card

  • 폰트 패밀리 (전체 공통)
  • 제목 크기, 굵기, 색상
  • 필드 라벨 크기/색상
  • 필드 값 크기/색상
  • 카드 배경색, 테두리 색/두께, radius
  • 카드 그림자 (none/sm/md/lg)
  • Grid 간격

Carousel — Navigation Buttons

  • 버튼 배경색, 아이콘 색상
  • 호버 시 배경색, 아이콘 색상

Magazine (Detail View)

  • 제목 크기, 굵기, 색상
  • 필드 라벨/값 크기/색상
  • Dark 오버레이 배경 (rgba(0,0,0,0.7) 등)
  • Light 오버레이 배경/텍스트 색상
  • 오버레이 박스 radius/padding

기술 아키텍처

패턴: Admin 설정 → wp_options → 숏코드 렌더링 시 inline CSS 변수 주입

관리자 페이지 (wp-color-picker)
    ↓ AJAX/form 저장
wp_options → dwcat_design_settings
    ↓
DWCAT_Design_Settings::get_inline_style()
    ↓
숏코드 root element style="--dwcat-title-size:16px; --dwcat-card-bg:#fff; ..."
    ↓
CSS: color: var(--dwcat-title-color, #1f2937) !important;

장점

  • 테마 CSS와 독립: !important와 CSS 변수로 테마 오버라이드 방지
  • 숏코드 속성 단순화: 디자인은 관리자에서 관리, 숏코드는 데이터만
  • 즉시 반영: 한 번 설정하면 모든 숏코드에 자동 적용
  • 라이센스 독립: 라이선스 없어도 디자인 기능 사용 가능

Tests

PASS: 119 / FAIL: 0 (+13 new design checks)

Reference (DW-MCP)

이 기능은 Smart Branch Locator Pro의 "Shortcode Design Settings Pattern"을 참고해 구현되었습니다.

Assets 3
Loading