WordPress開発者のためのEmDash

そのまま使える概念

編集者は引き続き、名前の付いたコンテンツの種類、構造化されたフィールド、下書きと公開済みの状態、階層を持つカテゴリー、階層のないタグ、入れ子のメニュー、メディア、リビジョンの履歴を使って作業します。これらの概念は、EmDashのコレクションと管理画面に移ります。

変わるのは開発のワークフローです。PHPのテンプレートの選択は明示的なAstroのルートになり、テンプレートパーツはimportするコンポーネントになり、コードはデータベースのコンテンツとは別にデプロイします。公開するサイトを作るのに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("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>
))}

テーマのファイル

WordPressのテンプレート階層の代わりに、Astroのルートを使います。テンプレートは、特別な意味を持つファイル名に頼らず、自分で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の設定に保存されます。設定を1回取得し、ロゴがある場合は解決済みのロゴの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を使えます。
• ネイティブ型プラグインは、ビルド時に使う記述子を返すファクトリーと、definePlugin() で作った実行時の createPlugin() 関数をエクスポートします。Reactの管理画面コンポーネント、公開サイト用のAstroコンポーネント、ページの断片を使う場合は、この形式を使います。

まずプラグイン形式の選び方を読みます。フックの名前と PluginContext のAPIは共通ですが、パッケージとハンドラーの形は互いに入れ替えられません。

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

管理画面のサイドバーで「Import 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 になり、使える画面は、サイトに設定したコレクションと機能によって変わります。

次のステップ