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

• サンドボックスプラグインはアイデンティティとトラストコントラクトにemdash-plugin.jsoncを使用し、SandboxedPlugin型のデフォルトエクスポートされたsrc/plugin.tsオブジェクトを加えます。分離されたランタイムで実行でき、管理UIにBlock Kitを使用できます。
• ネイティブプラグインはビルド時のディスクリプタファクトリとランタイムのcreatePlugin()関数（definePlugin()で構築）をエクスポートします。React管理コンポーネント、公開Astroコンポーネント、ページフラグメントにはこの形式を使用してください。

プラグイン形式の選択から始めてください。フック名とPluginContext APIは共有されていますが、パッケージとハンドラーの形式は互換性がありません。

WordPressコンテンツのインポート

管理サイドバーでWordPressインポートを開くか、直接/_emdash/admin/import/wordpressにアクセスします。EmDashは2つのインポートパスをサポートしています：

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になり、利用可能な画面はサイトに設定されたコレクションと機能に依存します。

次のステップ