WordPress 개발자를 위한 EmDash

EmDash는 게시물, 페이지, 택소노미, 메뉴, 미디어, 리비전 등 익숙한 콘텐츠 개념을 유지합니다. Astro가 테마 레이어를 제공합니다: 라우트, 레이아웃, 컴포넌트, 서버 렌더링.

익숙한 부분

편집자는 여전히 이름이 지정된 콘텐츠 유형, 구조화된 필드, 초안 및 게시 상태, 계층적 카테고리, 플랫 태그, 중첩 메뉴, 미디어, 리비전 이력으로 작업합니다. 이러한 개념은 EmDash 컬렉션과 관리 화면으로 이동합니다.

개발 워크플로가 변경됩니다. PHP 템플릿 선택은 명시적인 Astro 라우트가 되고, 템플릿 파트는 가져온 컴포넌트가 되며, 코드는 데이터베이스 콘텐츠와 별도로 배포됩니다. 공개 사이트를 구축하는 데 React가 필요하지 않습니다. .astro 컴포넌트는 서버 사이드 TypeScript와 HTML 유사 템플릿을 결합합니다.

개념 매핑

콘텐츠 모델

EmDash 관리자의 콘텐츠 유형에서 컬렉션을 만들고 편집합니다. 컬렉션에는 명시적으로 타입이 지정된 필드가 있으며 초안, 리비전, 예약, 검색, SEO 또는 댓글을 활성화할 수 있습니다.

쿼리는 Astro 라이브 컬렉션 항목을 반환합니다. entry.id는 라우트 식별자이며 일반적으로 슬러그입니다. entry.data.id는 데이터베이스 콘텐츠 ID입니다.

다음 아카이브는 게시 순서로 게시물을 쿼리합니다:

---
import { getEmDashCollection } from "emdash";

const { entries: posts, error } = await getEmDashCollection("posts", {
  orderBy: { published_at: "desc" },
  limit: 10,
});

if (error) return new Response("게시물을 불러올 수 없습니다", { status: 500 });
---

{posts.map((post) => (
  <article>
    <h2><a href={`/posts/${post.id}`}>{post.data.title}</a></h2>
    {post.data.excerpt && <p>{post.data.excerpt}</p>}
  </article>
))}

테마 파일

Astro 라우트가 WordPress 템플릿 계층 구조를 대체합니다. 템플릿은 매직 파일 이름에 의존하는 대신 자체 URL 구조를 선택합니다.

EmDash 템플릿에서 사용되는 프로젝트 구조, 컴포넌트 구문, props, 슬롯, 레이아웃, 라우팅, 서버 렌더링 쿼리 흐름에 대해서는 WordPress 개발자를 위한 Astro를 참조하세요.

메뉴와 위젯 영역

메뉴와 위젯 영역은 데이터베이스에 존재하며 설정 후에도 편집 가능합니다. 템플릿은 요청 시 이를 쿼리합니다:

---
import { getMenu } from "emdash";
import { WidgetArea } from "emdash/ui";

const primary = await getMenu("primary");
---

<nav>
  {primary?.items.map((item) => <a href={item.url}>{item.label}</a>)}
</nav>

<aside><WidgetArea name="sidebar" /></aside>

사이트 설정과 택소노미

커스터마이저 스타일의 사이트 아이덴티티는 EmDash 설정에 있습니다. 설정을 한 번 가져오고 로고 URL이 있을 때 사용합니다:

---
import { getSiteSettings } from "emdash";

const settings = await getSiteSettings();
---

<a href="/">
  {settings.logo?.url
    ? <img src={settings.logo.url} alt={settings.logo.alt || settings.title} />
    : settings.title}
</a>

택소노미 용어는 entry.data에 직접 저장된 값이 아닌 별도의 레코드입니다. 용어를 확인한 다음 슬러그를 컬렉션 필터에 사용합니다:

import { getEmDashCollection, getTerm } from "emdash";

const news = await getTerm("category", "news", { includeCounts: false });
const { entries: posts } = news
  ? await getEmDashCollection("posts", { where: { category: news.slug } })
  : { entries: [] };

플러그인 형식

EmDash에는 두 가지 플러그인 형식이 있습니다:

• 샌드박스 플러그인은 아이덴티티와 신뢰 계약에 emdash-plugin.jsonc를 사용하고, SandboxedPlugin 타입의 기본 내보내기된 src/plugin.ts 객체를 추가합니다. 격리된 런타임에서 실행할 수 있으며 관리 UI에 Block Kit를 사용할 수 있습니다.
• 네이티브 플러그인은 빌드 시 디스크립터 팩토리와 definePlugin()으로 구축된 런타임 createPlugin() 함수를 내보냅니다. React 관리 컴포넌트, 공개 Astro 컴포넌트 또는 페이지 프래그먼트에 이 형식을 사용하세요.

플러그인 형식 선택부터 시작하세요. 훅 이름과 PluginContext API는 공유되지만 패키지와 핸들러 형태는 호환되지 않습니다.

WordPress 콘텐츠 가져오기

관리 사이드바에서 WordPress 가져오기를 열거나 직접 /_emdash/admin/import/wordpress를 방문하세요. EmDash는 두 가지 가져오기 경로를 지원합니다:

1. 도구 → 내보내기에서 내보낸 WordPress eXtended RSS(WXR) 파일을 업로드합니다.
2. WordPress 사이트에 EmDash Exporter 플러그인을 설치하고 WordPress 애플리케이션 비밀번호로 연결합니다. 이 경로는 일반 공개 REST API가 노출하지 않는 콘텐츠를 포함할 수 있습니다.

익스포터 없이 WordPress URL을 입력하면 사이트를 감지하고 공개 게시물, 페이지, 미디어를 카운트할 수 있습니다. 그 REST 프로브는 콘텐츠를 가져오지 않습니다.

임포터는 WordPress의 publish를 EmDash의 published로 매핑합니다. 초안, 대기 중, 비공개, 예약, 휴지통, 알 수 없는 상태는 초안이 됩니다. DNS를 변경하거나 WordPress를 폐기하기 전에 가져온 권한과 게시 상태를 확인하세요.

전체 절차와 재시도 동작은 WordPress에서 마이그레이션을 따르세요.

편집자 워크플로

EmDash 관리자는 컬렉션 목록, Portable Text 편집기, 미디어 관리, 메뉴 편집, 택소노미 관리, 리비전, 미리보기 링크를 제공합니다. wp-admin의 시각적 복사본이 아닙니다: Gutenberg 블록은 Portable Text가 되며 사용 가능한 화면은 사이트에 구성된 컬렉션과 기능에 따라 달라집니다.

다음 단계