WordPress開発者のためのEmDash

EmDashは、投稿、固定ページ、タクソノミー、メニュー、メディア、リビジョンといった、馴染みのあるコンテンツの概念を引き継いでいます。Astroはテーマ層（ルート、レイアウト、コンポーネント、サーバーレンダリング）を担います。

馴染みのある部分

エディターは、名前付きのコンテンツタイプ、構造化フィールド、下書きと公開の状態、階層的なカテゴリー、フラットなタグ、入れ子のメニュー、メディア、リビジョン履歴をこれまでどおり扱います。これらの概念は、EmDashのコレクションと管理画面に引き継がれます。

開発ワークフローは変わります。PHPのテンプレート選択は明示的なAstroのルートになり、テンプレートパーツはインポートするコンポーネントになり、コードはデータベースのコンテンツとは別にデプロイされます。公開サイトの構築にReactは必要ありません。.astroコンポーネントは、サーバーサイドのTypeScriptとHTMLに似たテンプレートを組み合わせたものです。

コンセプトマップ

コンテンツモデル

コレクションは、EmDash管理画面のContent Typesで作成・編集します。コレクションには明示的に型付けされたフィールドがあり、下書き、リビジョン、スケジュール公開、検索、SEO、コメントを有効にできます。

クエリはAstroのライブコレクションのエントリーを返します。entry.idはルートの識別子で、通常はslugです。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に直接保存される値ではなく、独立したレコードです。タームを取得し、そのslugをコレクションのフィルターで使用します。

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には2つのプラグイン形式があります。

• サンドボックスプラグインは、アイデンティティとトラストコントラクトに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は2つのインポート方法をサポートしています。

1. Tools → Exportからエクスポートした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になり、利用できる画面はサイトに設定されたコレクションと機能によって決まります。

次のステップ