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"); // { 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	目的
save_post	content:beforeSave	保存前のコンテンツを変更
the_content	PortableText components	レンダリングされたコンテンツを変換
pre_get_posts	Query options	クエリをフィルタリング
wp_head	Layout <head>	ヘッドコンテンツを追加
wp_footer	Layout before </body>	フッターコンテンツを追加

EmDashでより優れている点

Type Safety

TypeScriptを全面的に採用。コレクション、クエリ、コンポーネントは完全に型付けされています。フィールド名や戻り値の型を推測する必要はありません。

Performance

PHPのオーバーヘッドなし。デフォルトで静的生成。必要に応じてサーバーレンダリング。エッジデプロイメントに対応。

Modern DX

ホットモジュールリプレースメント。コンポーネントベースのアーキテクチャ。モダンなツーリング（Vite、TypeScript、ESLint）。

Git-based Deployments

コードとテンプレートはgitで管理。コンテンツはデータベースに保存。FTP、ファイルパーミッション、ハッキングされたサイトはありません。

プレビューリンク

EmDashはHMAC署名付きトークンを使用した安全なプレビューURLを生成します。コンテンツ編集者は本番環境にログインせずに下書きをプレビューできます—認証情報ではなくリンクを共有します。

プラグイン競合なし

WordPressのプラグイン競合は解消されます。EmDashプラグインは明示的なAPIを持つ分離されたコンテキストで実行されます。グローバル状態の汚染はありません。

コンテンツ編集者エクスペリエンス

コンテンツ編集者はwp-adminに似たEmDash管理パネルを使用します：

• ダッシュボード：最近のアクティビティを表示
• コレクション一覧：検索、フィルタリング、一括操作が可能
• リッチエディター：コンテンツ編集用（GutenbergではなくPortable Text）
• メディアライブラリ：ドラッグ＆ドロップアップロード
• メニュービルダー：ドラッグ＆ドロップによる順序変更
• ウィジェットエリアエディター：サイドバーコンテンツ用

編集エクスペリエンスは見慣れたものですが、その基盤となる技術はモダンです。

移行パス

EmDashはWordPressコンテンツを直接インポートします：

1. WordPressからエクスポート（ツール → エクスポート）
2. EmDash管理パネルで .xml ファイルをアップロード
3. 投稿タイプをコレクションにマッピング
4. コンテンツとメディアをインポート

投稿、ページ、タクソノミー、メニュー、メディアが移行されます。GutenbergブロックはPortable Textに変換されます。カスタムフィールドは分析されマッピングされます。

完全な手順についてはWordPress移行ガイドを参照してください。

次のステップ

• はじめに — 最初のEmDashサイトをセットアップ
• コンテンツのクエリ — コンテンツAPIの詳細な解説
• タクソノミー — カテゴリー、タグ、カスタムタクソノミー
• メニュー — ナビゲーションメニュー
• WordPressからの移行 — 既存コンテンツのインポート