WP 부분 수정 도구 마커 / CSS 셀렉터 / 정규식
1) 원본 HTML 가져오기
TIP: 가장 안전한 방법은 이 도구 페이지를 같은 사이트의 관리자로 열고, 편집할 페이지의 HTML을 복사해 붙여넣는 것입니다.
마커 도우미 — 선택한 영역을 마커로 감싸기
선택한 텍스트를 <!– GPT:BEGIN hero –> … <!– GPT:END hero –>로 감쌉니다.
2) 편집할 부분 선택 & 편집
마커
CSS 셀렉터
정규식
원본에 <!– GPT:BEGIN ID –> … <!– GPT:END ID –> 주석이 있어야 합니다.
DOMParser로 파싱 후 querySelectorAll[index]의 outerHTML을 대상으로 합니다.
주의: 정규식 변경은 위험할 수 있습니다. 먼저 마커 또는 셀렉터 모드를 권장합니다.
원본 + 적용된 부분을 iframe으로 렌더링합니다.
3) 결과물 내보내기 / 패치 스니펫
JS 패치 스니펫이란?
선택한 모드에 맞춰, 브라우저 콘솔에서 실행하면 현재 페이지의 해당 영역을 즉시 교체하는 스니펫을 생성합니다. (영구 저장은 되지 않으므로, 최종적으로는 편집기/테마 파일에 반영하세요.)
사용 가이드 (요약)
- 편집 대상 페이지의 HTML을 왼쪽 상단에 붙여넣습니다. (또는 같은 출처 URL을 입력 후 URL 불러오기)
- 가급적 마커 모드를 사용하세요. 처음 한 번은 마커 도우미로 영역을 감싼 뒤 저장해두면, 다음부터는 ID만으로 바로 불러옵니다.
- 선택된 부분을 수정하고 미리보기로 확인 → 원본에 적용 → 전체 HTML 복사하여 WP 편집기에 붙여넣고 저장하면 끝.
추가: CSS 셀렉터 모드는 querySelectorAll로 특정 요소를 정확히 집을 수 있을 때 편리합니다.