WordPress 개발자를 위한 EmDash

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

익숙한 부분

편집자는 이름이 지정된 콘텐츠 유형, 구조화된 필드, 초안과 게시됨 상태, 계층형 카테고리, 평면 태그, 중첩 메뉴, 미디어, 리비전 기록을 이전과 같이 사용합니다. 이러한 개념은 EmDash 컬렉션과 관리 화면으로 옮겨집니다.

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

개념 매핑

콘텐츠 모델

컬렉션은 EmDash 관리자의 Content Types에서 만들고 편집합니다. 컬렉션에는 명시적으로 유형이 지정된 필드가 있으며, 초안, 리비전, 예약 게시, 검색, 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("Could not load posts", { 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 콘텐츠 가져오기

관리자 사이드바에서 Import를 선택해 Import from WordPress 페이지를 열거나, /_emdash/admin/import/wordpress로 바로 이동하세요. EmDash는 두 가지 가져오기 경로를 지원합니다.

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

Exporter 없이 WordPress URL을 입력하면 사이트를 감지하고 공개 게시물, 페이지, 미디어의 개수를 셀 수 있습니다. 이 REST 프로브는 콘텐츠를 가져오지 않습니다.

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

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

편집자 워크플로

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

다음 단계