바이브코딩으로 워드프레스 테마 만들기

워드프레스로 이전하자

기존 블로그는 프로그래밍 중심이었으나, 개인일상사를 포스팅하던 다른 계정과 합치면서 블로그의 성격이 모호해졌습니다.
그래서, 고민 끝에 일부 카테고리(라이프로그, 여행, 북리뷰)를 워드프레스로 옮기기로 했습니다.

---

제미나이로 워드프레스 테마 만들기

처음엔 티스토리 스킨을 포팅하면 되지 않을까 하고 제미나이에게 현재 쓰고 있는 스킨 파일을 던져주고 워드프레스 테마를 만들어달라고 했는데 생각보다 잘 못만들더군요.
(요새 제미나이가 멍청해졌다는데 잘 못느꼈는데 답답함을 느꼈습니다.)

---

결국, 챗GPT 유료결제하다

제미나이도 AI PRO로 사용하고 있었는데, 이상하게 티스토리 스킨은 잘 만들면서 워드프레스 테마는 왜 잘 못만드는지 답답함을 느껴 챗GPT 무료버전에서 시켜봤더니 그럭저럭 잘 만들었습니다.

하지만 두어번의 결과물을 내놓더니 무료버전은 끝.
결국 제일 저렴한 챗GPT GO 버전을 결제하고 말았네요.

---

티스토리 스킨 포팅이 성공적으로 끝나다

다행히도 챗GPT로 여러 번의 시행착오 끝에 티스토리와 거의 동일한 테마를 만들었습니다.

---

📁 주요 파일 구성

파일/디렉터리	설명
front-page.php	인터랙티브 데스크 일러스트 & 모니터 링크 & 커피 스팀 애니메이션 프론트 페이지
style.css	테마 메타 정보, 반응형 스타일시트, 모니터 글로우 및 스팀 애니메이션 정의
functions.php	테마 셋업, 위젯/메뉴 등록, 헬퍼 함수, 카테고리 자동 매핑 로직
header.php / footer.php	헤더(로고, 검색, GNB, 메인 배너) 및 푸터 구조
sidebar.php	프로필 카드, 계층형 카테고리 트리, 사이드바 위젯 컨테이너
index.php / archive.php	블로그 카드형 글 목록 및 카테고리/태그 아카이브 템플릿
single.php / page.php	글 상세 페이지(슬림 배너, 카테고리 최신글 사이드바) 및 고정 페이지
comments.php	반응형 댓글 목록 및 작성 폼
images/frontpage.webp	프론트 페이지용 고해상도 데스크 일러스트 (1536×1024)
images/main-banner.jpg	메인 헤더 및 모바일 서랍 프로필 배경용 배너 이미지
inc/class-tistory-style-nav-walker.php	2-Depth 메가메뉴 마크업 전용 커스텀 내비게이션 워커
js/theme.js	모바일 서랍 사이드바 토글 및 메가메뉴 높이 계산 스크립트
CHANGELOG.md	버전별 상세 변경 이력 기록 문서

 

---

워드프레스 테마 다운받기

 

메인페이지(주야간 이미지 교체)

 

 

서브 카테고리

 

 

깃허브에서 다운받기

GitHub - ethanjoh/wisdom-desk-theme