자체 호스팅 WordPress 사이트를 연결해 WordPress REST API로 글·페이지·미디어·사용자를 읽고 관리합니다.
WordPress(자체 호스팅)에 앱 연결하기
자체 호스팅 WordPress 사이트를 연결해 WordPress REST API로 글, 페이지, 미디어, 사용자를 읽고 관리하세요.
WordPress는 자체 도메인이나 서버에 직접 호스팅하는 오픈소스 CMS 소프트웨어입니다. WordPress (self-hosted) 커넥터는 Lovable 앱이 WordPress REST API로 해당 사이트의 글, 페이지, 미디어, 사용자를 읽고 관리할 수 있게 해줍니다. 헤드리스 CMS 앱, 에디토리얼 대시보드, 직접 운영하는 WordPress 설치 기반 콘텐츠 워크플로를 위해 설계되었습니다.
WordPress (self-hosted)를 연결하면 앱은 다음 작업이 가능합니다:
- 글, 페이지, 커스텀 포스트 타입 조회 및 표시
- 미디어 라이브러리 자산 업로드 및 관리
- 사이트 설정, 카테고리, 태그, 사용자 프로필 읽기
- 자체 호스팅 WordPress 기반 헤드리스 CMS 경험 구축
이 커넥터는 자체 호스팅 WordPress 사이트 전용입니다. WordPress.com 호스팅 사이트라면 WordPress.com 커넥터를 대신 사용하세요.
주요 활용 사례 및 예시 앱
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 마케팅/랜딩 페이지 | WordPress(자체 호스팅)를 사용해서 홈페이지와 주요 섹션이 내 WordPress 사이트의 제목, 본문, 이미지를 불러오는 마케팅 사이트를 만들어줘. | CMS 콘텐츠 기반 페이지 출시. 앱이 WordPress에서 글이나 페이지를 가져와 컴포넌트로 렌더링하므로, 편집자가 앱 코드 수정 없이 텍스트와 미디어를 업데이트할 수 있습니다. |
| 블로그/에디토리얼 사이트 | WordPress(자체 호스팅)를 사용해서 최근 글 목록과 각 글의 본문, 대표 이미지, 요약을 보여주는 블로그를 만들어줘. | WordPress 기반 블로그 운영. 앱이 API로 글 목록과 상세 뷰를 로드하며, WordPress 대시보드의 새 발행이 반영됩니다. |
| 리소스/헬프 센터 | WordPress(자체 호스팅)를 사용해서 각 문서가 WordPress 페이지이며 검색과 카테고리가 있는 헬프 센터를 만들어줘. | 문서를 WordPress에 집중. 앱이 페이지나 글을 조회하여 CMS 구조에 맞는 내비게이션과 문서 뷰를 구성합니다. |
| 미디어 라이브러리 브라우저 | WordPress(자체 호스팅)를 사용해서 내 WordPress 라이브러리의 미디어를 검색·업로드와 함께 나열하는 관리 페이지를 만들어줘. | 커스텀 인터페이스로 미디어 관리. 앱이 연결된 사용자의 권한에 따라 WordPress REST API로 미디어를 읽고 업로드합니다. |
| 편집/발행 워크플로 | WordPress(자체 호스팅)를 사용해서 누군가 제출하면 내 WordPress 사이트에 초안 글을 만드는 폼을 만들어줘. | 제출을 초안으로 변환. 앱이 API로 콘텐츠를 생성/업데이트하여 편집자가 WordPress에서 마무리할 수 있게 합니다. |
| 콘텐츠 대시보드 | WordPress(자체 호스팅)를 사용해서 내 사이트의 최근 글, 카테고리, 태그를 보여주는 대시보드를 만들어줘. | 운영자에게 콘텐츠 요약 뷰 제공. 앱이 글, 카테고리, 태그를 읽어 WordPress 관리자 밖의 한 화면에 표시합니다. |
WordPress(자체 호스팅) 연결하기
워크스페이스 admin 또는 owner가 WordPress (self-hosted)를 연결할 수 있습니다.
서로 다른 사이트나 Application Password를 사용해 여러 WordPress 연결을 만들 수 있습니다. 환경을 분리하거나(예: 스테이징과 프로덕션) 여러 자체 호스팅 사이트를 연결할 때 유용합니다.
연결이 생성되면 해당 워크스페이스의 모든 프로젝트에서 WordPress (self-hosted)를 사용할 수 있습니다. 프로젝트에서 빌드하는 누구나 채팅으로 Lovable에게 프로젝트를 연결해달라고 요청할 수 있습니다.
사전 준비
WordPress (self-hosted)를 연결하기 전에 다음을 준비하세요:
- HTTPS가 활성화된 자체 호스팅 WordPress 사이트
- WordPress 5.6 이상(Application Passwords에 필요)
- REST API 라우트를 위해 Plain이 아닌 WordPress 퍼머링크 설정
- 앱에 필요한 권한을 가진 WordPress 사용자 계정
- 해당 사용자의 WordPress Application Password
- Lovable 워크스페이스 owner 또는 admin 역할
이 커넥터로 이루어지는 모든 API 요청은 사용자의 WordPress 사이트에서 실행됩니다. 호스팅, 플러그인, 사이트 관련 비용은 Lovable 외부에서 처리됩니다.
1단계: WordPress Application Password 발급
WordPress Application Password는 Lovable 앱이 HTTP Basic 인증으로 WordPress REST API에 인증하게 해줍니다. 연결된 WordPress 사용자의 역할이 이 연결이 읽거나 변경할 수 있는 범위를 결정합니다.
WordPress Application Password 발급 방법:
WordPress 관리자 대시보드 열기
연결하려는 사이트의 WordPress 관리자로 로그인합니다.
사용자 프로필 열기
본인 계정용 비밀번호를 만든다면 Users → Profile로 이동합니다. 다른 사용자용으로 만들려면 Users → All Users에서 해당 사용자를 열어 프로필을 편집합니다.
Application Password 생성
Application Passwords로 스크롤합니다. 애플리케이션 이름(예: Lovable integration)을 입력한 뒤 Add New Application Password를 클릭합니다.
비밀번호 복사
생성된 비밀번호를 복사해 안전하게 보관합니다. WordPress는 한 번만 표시합니다. 공백을 포함하거나 제거해 붙여넣어도 됩니다.
사이트 URL과 사용자명 기록
WordPress 사이트의 HTTPS URL(예: https://blog.example.com)과 사용한 계정의 WordPress 사용자명을 기록합니다.
Application Password는 비밀번호처럼 동작합니다. 안전하게 보관하고 절대 공개적으로 공유하지 마세요. 다음 단계에서 필요합니다.
자세한 내용은 WordPress 문서 Application Passwords와 WordPress REST API handbook를 참고하세요.
2단계: WordPress (self-hosted)를 Lovable에 연결
서로 다른 사이트나 Application Password를 사용해 여러 연결을 만들 수 있습니다.
Connectors에서 WordPress (self-hosted) 열기
Connectors → App connectors에서 **WordPress (self-hosted)**를 선택합니다.
연결 추가
Add connection을 클릭합니다.
연결 구성
- Display name: 연결 이름을 지정합니다(예:
WordPress Prod). - Site URL: WordPress 사이트의 HTTPS URL을 입력합니다(예:
https://blog.example.com). 사이트 루트 또는https://blog.example.com/wp-json같은 REST 디스커버리 URL을 입력할 수 있습니다. - Username: Application Password에 해당하는 WordPress 사용자명을 입력합니다.
- Application password: WordPress에서 생성한 Application Password를 붙여넣습니다.
이 연결에 접근할 사람 선택
Who can access this connection에서 워크스페이스의 누가 이 연결을 사용할 수 있는지 결정합니다:
- Only you(기본값): 연결을 만든 사람만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite specific people: 본인과 명시적으로 추가된 워크스페이스 멤버만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite entire workspace: Invite entire workspace를 클릭하면 Lovable 워크스페이스의 모든 사람이 연결을 사용할 수 있습니다.
자세한 내용은 연결 수준 접근을 참고하세요.
연결
Connect를 클릭합니다.
연결되면 프로젝트에서 빌드하는 누구나(구성된 연결 수준 접근에 따라) 채팅으로 Lovable에게 프로젝트를 WordPress (self-hosted)에 연결해달라고 요청할 수 있습니다. 이후 Lovable 앱은 연결된 사용자의 권한에 따라 WordPress 콘텐츠를 읽고 관리할 수 있습니다.
WordPress 퍼머링크 및 REST API 라우트 다루기
WordPress REST API 라우트는 Plain이 아닌 퍼머링크를 요구합니다. rest_no_route 같은 라우트 오류로 검증이 실패하면 WordPress 관리자의 Settings → Permalinks에서 예쁜 퍼머링크가 활성화돼 있는지 확인하세요.
Lovable은 사이트 루트 URL 또는 REST 디스커버리 URL을 받아 WordPress REST API v2 경로(/wp-json/wp/v2)에 연결합니다. Site URL 필드에는 반드시 HTTPS를 사용해야 합니다.
커넥터는 WordPress users/me 엔드포인트를 호출해 자격 증명을 검증합니다. 검증이 실패하면 사용자명과 Application Password가 일치하는지, 사용자가 여전히 존재하는지, WordPress에서 비밀번호가 취소되지 않았는지 확인하세요.
제한 사항
WordPress (self-hosted) 커넥터는 다음을 할 수 없습니다:
- WordPress.com 호스팅 사이트에 연결. 해당 사이트는 WordPress.com 커넥터를 사용하세요.
- Application Password 생성이나 WordPress 사용자 역할 변경. WordPress 관리자에서 먼저 구성하세요.
- 연결된 WordPress 사용자 계정의 권한을 우회.
- WordPress 퍼머링크, 호스팅, SSL, 플러그인, 사이트 설정 구성.
- WooCommerce 스토어 API 호출. 스토어 작업은 WooCommerce 커넥터를 사용하세요.
- Application Password 자동 갱신이나 회전. 자격 증명을 회전하려면 WordPress에서 새 Application Password를 만들고 Lovable 연결을 업데이트하세요.
- 최종 사용자별 WordPress 로그인 지원. 각 연결은 그 연결에 링크된 모든 프로젝트가 공유하는 단일 WordPress 계정을 나타냅니다.
WordPress에서 Application Password가 취소되면, API 호출이 다시 성공하려면 Lovable에서 연결을 업데이트하거나 다시 생성해야 합니다.
WordPress (self-hosted) 연결에서 프로젝트 연결 해제
Editor 이상 권한을 가진 사용자는 연결 자체를 삭제하지 않고 특정 프로젝트만 연결 해제할 수 있습니다. 연결은 다른 프로젝트에서 계속 사용할 수 있습니다.
연결 해제 방법:
Connectors 열기
Connectors → App connectors에서 **WordPress (self-hosted)**를 선택합니다.
연결 열기
관리할 연결을 엽니다.
프로젝트 선택
Linked projects에서 연결 해제할 프로젝트를 선택합니다.
확인
Unlink projects를 클릭하고 확인합니다.
연결 해제 후 해당 프로젝트는 이 연결을 통해 WordPress (self-hosted)에 접근할 수 없습니다. 필요하면 다른 연결로 다시 연결할 수 있습니다.
WordPress (self-hosted) 연결 삭제
워크스페이스 admin 또는 owner가 WordPress (self-hosted) 연결을 삭제할 수 있습니다. 다른 멤버는 자신이 만들었거나 명시적으로 접근 권한을 부여받은 연결을 삭제할 수 있습니다.
연결 삭제는 영구적이며 되돌릴 수 없습니다. 연결된 모든 프로젝트에서 자격 증명이 제거되며, 새 연결을 만들기 전까지 이 연결을 사용하던 앱은 동작을 멈춥니다.
삭제 전에 Linked projects 섹션에서 현재 이 연결을 사용 중인 프로젝트를 먼저 확인하세요.
삭제 방법:
Connectors 열기
Connectors → App connectors에서 **WordPress (self-hosted)**를 선택합니다.
연결 열기
삭제할 연결을 엽니다.
연결된 프로젝트 확인
Linked projects 섹션을 확인합니다.
삭제
Delete this connection에서 Delete를 클릭하고 확인합니다.