WordPress 개발자를 위한 EmDash

EmDash는 익숙한 WordPress 개념들—게시물, 페이지, 분류, 메뉴, 위젯, 미디어 라이브러리—을 현대적인 Astro 스택으로 가져옵니다. 여러분의 콘텐츠 관리 지식이 직접적으로 이전됩니다.

마이그레이션 전 플랫폼을 비교 중이라면, EmDash vs WordPress와 WordPress to Astro with EmDash를 읽어보세요.

익숙하게 유지되는 것들

WordPress에서 알고 계신 개념들이 EmDash에서 일급 기능으로 제공됩니다:

• 컬렉션은 커스텀 포스트 타입처럼 작동합니다—콘텐츠 구조를 정의하고 템플릿에서 쿼리합니다
• 분류는 동일한 방식으로 작동합니다—계층적(카테고리처럼)과 평면적(태그처럼)
• 메뉴는 드래그 앤 드롭 정렬과 중첩 항목을 지원합니다
• 위젯 영역은 사이드바와 동적 콘텐츠 영역을 위한 것입니다
• 미디어 라이브러리는 업로드, 구성, 이미지 관리를 제공합니다
• 관리자 UI는 콘텐츠 편집자가 코드를 건드리지 않고 사용할 수 있습니다

팁

React나 특정 JavaScript 프레임워크를 알 필요가 없습니다. Astro 컴포넌트는 HTML과 간단한 템플릿 표현식을 사용합니다—React보다는 PHP 템플릿에 더 가깝습니다.

달라지는 것들

구현 방식은 변하지만, 사고 모델은 동일하게 유지됩니다:

PHP 대신 TypeScript

템플릿은 Astro 컴포넌트입니다. 구문은 더 깔끔하지만, 개념은 동일합니다: HTML을 출력하는 서버 코드입니다.

WP_Query 대신 콘텐츠 API

getEmDashCollection()과 같은 쿼리 함수가 WP_Query를 대체합니다. SQL 없이, 단지 함수 호출만 있습니다.

파일 기반 라우팅

src/pages/의 파일들이 URL이 됩니다. 기억해야 할 리라이트 규칙이나 템플릿 계층 구조가 없습니다.

템플릿 파트 대신 컴포넌트

컴포넌트를 임포트하고 사용합니다. get_template_part()와 같은 아이디어지만, 더 나은 구성입니다.

빠른 참조

WordPress	EmDash	참고 사항
커스텀 포스트 타입	컬렉션	관리자 UI 또는 API를 통해 정의
WP_Query	getEmDashCollection()	필터, 제한, 분류 쿼리
get_post()	getEmDashEntry()	항목 또는 null 반환
카테고리/태그	분류	계층적 지원 유지
register_nav_menus()	getMenu()	일급 메뉴 지원
register_sidebar()	getWidgetArea()	일급 위젯 영역 지원
bloginfo('name')	getSiteSetting("title")	사이트 설정 API
the_content()	<PortableText />	구조화된 콘텐츠 렌더링
숏코드	Portable Text 블록	커스텀 컴포넌트
add_action/filter()	플러그인 훅	content:beforeSave, 등
wp_options	ctx.kv	키-값 저장소
테마 디렉토리	src/ 디렉토리	컴포넌트, 레이아웃, 페이지
functions.php	astro.config.mjs + EmDash 설정	빌드 및 런타임 설정

콘텐츠 API

컬렉션 쿼리하기

WordPress 쿼리는 WP_Query나 헬퍼 함수를 사용합니다. EmDash는 타입이 지정된 쿼리 함수를 사용합니다.

WordPress

archive.php

<?php
$posts = new WP_Query([
  'post_type' => 'post',
  'posts_per_page' => 10,
  'post_status' => 'publish',
  'category_name' => 'news',
]);

while ($posts->have_posts()) :
$posts->the_post();
?>

  <h2><?php the_title(); ?></h2>
  <?php the_excerpt(); ?>
<?php endwhile; ?>

EmDash

astro title="src/pages/posts/index.astro"
---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts", {
status: "published",
limit: 10,
where: { category: "news" },
});

---

{posts.map((post) => (

  <article>
    <h2>{post.data.title}</h2>
    <p>{post.data.excerpt}</p>
  </article>
))}

단일 항목 가져오기

WordPress

php title="single.php"
<?php
$post = get_post($id);
?>
<article>
  <h1><?php echo $post->post_title; ?></h1>
  <?php echo apply_filters('the_content', $post->post_content); ?>
</article>

EmDash

astro title="src/pages/posts/[slug].astro"
---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";

const { slug } = Astro.params;
const { entry: post } = await getEmDashEntry("posts", slug);

## if (!post) return Astro.redirect("/404");

<article>
  <h1>{post.data.title}</h1>
  <PortableText value={post.data.content} />
</article>

템플릿 계층 구조

WordPress는 어떤 파일이 페이지를 렌더링할지 선택하기 위해 템플릿 계층 구조를 사용합니다. Astro는 명시적인 파일 기반 라우팅을 사용합니다.

WordPress 템플릿	EmDash 대응 항목
index.php	src/pages/index.astro
single.php	src/pages/posts/[slug].astro
single-{type}.php	src/pages/{type}/[slug].astro
page.php	src/pages/pages/[slug].astro
archive.php	src/pages/posts/index.astro
archive-{type}.php	src/pages/{type}/index.astro
category.php	src/pages/categories/[slug].astro
tag.php	src/pages/tags/[slug].astro
search.php	src/pages/search.astro
404.php	src/pages/404.astro
header.php / footer.php	src/layouts/Base.astro
sidebar.php	src/components/Sidebar.astro

팁

Astro의 라우팅은 WordPress의 계층 구조보다 더 명시적입니다. 각 경로는 하나의 파일입니다. 동적 세그먼트는 [param] 구문을 사용합니다.

템플릿 파트 → 컴포넌트

WordPress 템플릿 파트는 Astro 컴포넌트가 됩니다:

WordPress

php title="functions.php / template"
// 템플릿에서:
get_template_part('template-parts/content', 'post');

// template-parts/content-post.php:

<article class="post">
  <h2><?php the_title(); ?></h2>
  <?php the_excerpt(); ?>
</article>

EmDash

astro title="src/components/PostCard.astro"
---
const { post } = Astro.props;
---

<article class="post">
  <h2>{post.data.title}</h2>
  <p>{post.data.excerpt}</p>
</article>

astro title="src/pages/index.astro"
---
import PostCard from "../../components/PostCard.astro";
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts");
---

{posts.map((post) => <PostCard {post} />)}

메뉴

EmDash는 자동 URL 해석 기능을 갖춘 일류 메뉴 지원을 제공합니다:

WordPress

php title="header.php"
<?php
wp_nav_menu([
  'theme_location' => 'primary',
  'container' => 'nav',
]);
?>

EmDash

astro title="src/components/Header.astro"
---
import { getMenu } from "emdash";

## const menu = await getMenu("primary");

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

메뉴는 관리자 UI, 시드 파일 또는 WordPress 가져오기를 통해 생성됩니다.

위젯 영역

위젯 영역은 WordPress의 사이드바와 유사하게 작동합니다:

WordPress

php title="sidebar.php"
<?php if (is_active_sidebar('sidebar-1')) : ?>
  <aside>
    <?php dynamic_sidebar('sidebar-1'); ?>
  </aside>
<?php endif; ?>

EmDash

astro title="src/components/Sidebar.astro"
---
import { getWidgetArea } from "emdash";
import { PortableText } from "emdash/ui";

## const sidebar = await getWidgetArea("sidebar");

{sidebar && (

  <aside>
    {sidebar.widgets.map((widget) => {
      if (widget.type === "content") {
        return <PortableText value={widget.content} />;
      }
      // 다른 위젯 유형 처리
    })}
  </aside>
)}

사이트 설정

사이트 옵션과 커스터마이저 설정은 getSiteSetting()에 매핑됩니다:

WordPress	EmDash
bloginfo('name')	getSiteSetting("title")
bloginfo('description')	getSiteSetting("tagline")
get_custom_logo()	getSiteSetting("logo")
get_option('date_format')	getSiteSetting("dateFormat")
home_url()	Astro.site

import { getSiteSetting } from "emdash";

const title = await getSiteSetting("title");
const logo = await getSiteSetting("logo"); // Returns { mediaId, alt, url }

분류 체계

분류 체계는 개념적으로 동일하게 작동합니다—계층적(카테고리와 같은) 또는 평면적(태그와 같은):

import { getTaxonomyTerms, getEntryTerms, getTerm } from "emdash";

// 모든 카테고리 가져오기
const categories = await getTaxonomyTerms("categories");

// 특정 용어 가져오기
const news = await getTerm("categories", "news");

// 게시물에 대한 용어 가져오기
const postCategories = await getEntryTerms("posts", postId, "categories");

훅 → 플러그인 시스템

WordPress 훅(add_action, add_filter)은 EmDash 플러그인 훅이 됩니다:

WordPress Hook	EmDash Hook	Purpose
save_post	content:beforeSave	저장 전 콘텐츠 수정
the_content	PortableText components	렌더링된 콘텐츠 변환
pre_get_posts	Query options	쿼리 필터링
wp_head	Layout <head>	헤드 콘텐츠 추가
wp_footer	Layout before </body>	푸터 콘텐츠 추가

EmDash에서 더 나은 점

타입 안전성

전체 TypeScript 사용. 컬렉션, 쿼리 및 컴포넌트가 완전히 타입 지정됩니다. 더 이상 필드 이름이나 반환 유형을 추측할 필요가 없습니다.

성능

PHP 오버헤드 없음. 기본적으로 정적 생성. 필요 시 서버 렌더링. 에지 배포 준비 완료.

현대적인 개발자 경험

핫 모듈 교체. 컴포넌트 기반 아키텍처. 현대적 도구(Vite, TypeScript, ESLint).

Git 기반 배포

코드와 템플릿은 Git에. 콘텐츠는 데이터베이스에. FTP, 파일 권한, 해킹된 사이트 없음.

미리보기 링크

EmDash는 HMAC 서명 토큰을 사용한 보안 미리보기 URL을 생성합니다. 콘텐츠 편집자는 프로덕션에 로그인하지 않고도 초안을 미리 볼 수 있습니다—자격 증명이 아닌 링크를 공유하세요.

플러그인 충돌 없음

WordPress 플러그인 충돌이 사라집니다. EmDash 플러그인은 명시적 API를 가진 격리된 컨텍스트에서 실행됩니다. 전역 상태 오염 없음.

콘텐츠 편집자 경험

콘텐츠 편집자는 wp-admin과 유사한 EmDash 관리자 패널을 사용합니다:

• 최근 활동이 있는 대시보드
• 검색, 필터 및 일괄 작업이 가능한 컬렉션 목록
• 콘텐츠용 리치 에디터(Portable Text, Gutenberg 아님)
• 드래그 앤 드롭 업로드가 가능한 미디어 라이브러리
• 드래그 앤 드롭 정렬이 가능한 메뉴 빌더
• 사이드바 콘텐츠용 위젯 영역 편집기

편집 경험은 익숙합니다. 그 아래의 기술은 현대적입니다.

마이그레이션 경로

EmDash는 WordPress 콘텐츠를 직접 가져옵니다:

1. WordPress에서 내보내기(도구 → 내보내기)
2. EmDash 관리자에서 .xml 파일 업로드
3. 게시물 유형을 컬렉션에 매핑
4. 콘텐츠 및 미디어 가져오기

게시물, 페이지, 분류 체계, 메뉴 및 미디어가 전송됩니다. Gutenberg 블록은 Portable Text로 변환됩니다. 사용자 정의 필드는 분석되어 매핑됩니다.

전체 지침은 WordPress 마이그레이션 가이드를 참조하세요.

다음 단계

• 시작하기 — 첫 번째 EmDash 사이트 설정
• 콘텐츠 쿼리하기 — 콘텐츠 API 심층 분석
• 분류 체계 — 카테고리, 태그 및 사용자 정의 분류 체계
• 메뉴 — 탐색 메뉴
• WordPress에서 마이그레이션 — 기존 콘텐츠 가져오기