EmDash für WordPress-Entwickler

Auf dieser Seite

EmDash behält vertraute Inhaltskonzepte wie Beiträge, Seiten, Taxonomien, Menüs, Medien und Revisionen bei. Astro liefert die Theme-Ebene: Routen, Layouts, Komponenten und Server-Rendering.

Was vertraut bleibt

Redakteure arbeiten weiterhin mit benannten Inhaltstypen, strukturierten Feldern, den Zuständen Entwurf und Veröffentlicht, hierarchischen Kategorien, flachen Tags, verschachtelten Menüs, Medien und Revisionsverlauf. Diese Konzepte finden sich in EmDash-Sammlungen und Verwaltungsansichten wieder.

Der Entwicklungs-Workflow ändert sich. Die PHP-Template-Auswahl wird zu expliziten Astro-Routen, Template Parts werden zu importierten Komponenten, und Code wird getrennt von den Datenbankinhalten bereitgestellt. Sie brauchen React nicht, um die öffentliche Website zu bauen; .astro-Komponenten kombinieren serverseitiges TypeScript mit HTML-ähnlichen Templates.

Konzeptzuordnung

WordPressEmDash und Astro
Post TypeEmDash-Sammlung
Post MetaSammlungsfeld
Kategorie oder TagEmDash-Taxonomie
WP_QuerygetEmDashCollection()
get_post()getEmDashEntry()
the_content()<PortableText />
Template-HierarchieDateien in src/pages/
Template PartImportierte .astro-Komponente
header.php und footer.phpAstro-Layout
wp_nav_menu()getMenu()
SidebarWidget-Bereich und <WidgetArea />
Options APISite-Einstellungen oder ctx.kv eines Plugins
WordPress-PluginSandboxed oder natives EmDash-Plugin

Inhaltsmodell

Erstellen und bearbeiten Sie Sammlungen unter Content Types im EmDash-Admin. Eine Sammlung hat explizit typisierte Felder und kann Entwürfe, Revisionen, Terminplanung, Suche, SEO oder Kommentare aktivieren.

Abfragen liefern Astro-Live-Collection-Einträge. entry.id ist die Routenkennung und normalerweise der Slug; entry.data.id ist die Inhalts-ID in der Datenbank.

Das folgende Archiv fragt Beiträge in der Reihenfolge ihrer Veröffentlichung ab:

---
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>
))}

Theme-Dateien

Astro-Routen ersetzen die WordPress-Template-Hierarchie. Ein Template wählt seine URL-Struktur selbst, statt sich auf magische Dateinamen zu verlassen.

WordPress-DateiAktuelle Blog-Template-Datei
front-page.php oder home.phpsrc/pages/index.astro
single.phpsrc/pages/posts/[slug].astro
archive.phpsrc/pages/posts/index.astro
page.phpsrc/pages/pages/[slug].astro
category.phpsrc/pages/category/[slug].astro
tag.phpsrc/pages/tag/[slug].astro
search.phpsrc/pages/search.astro
404.phpsrc/pages/404.astro
header.php und footer.phpsrc/layouts/Base.astro

Lesen Sie Astro für WordPress-Entwickler für die Projektstruktur, Komponentensyntax, Props, Slots, Layouts, Routing und den servergerenderten Abfrageablauf, die von EmDash-Templates verwendet werden.

Menüs und Widget-Bereiche

Menüs und Widget-Bereiche liegen in der Datenbank und bleiben nach der Einrichtung bearbeitbar. Templates fragen sie zur Anfragezeit ab:

---
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>

Site-Einstellungen und Taxonomien

Die Site-Identität im Stil des Customizers liegt in den EmDash-Einstellungen. Rufen Sie die Einstellungen einmal ab und verwenden Sie die aufgelöste Logo-URL, sofern eine vorhanden ist:

---
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>

Taxonomie-Begriffe sind eigene Datensätze und keine Werte, die direkt in entry.data gespeichert werden. Lösen Sie einen Begriff auf und verwenden Sie dann seinen Slug in einem Sammlungsfilter:

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: [] };

Plugin-Formate

EmDash kennt zwei Plugin-Formate:

  • Ein Sandboxed-Plugin verwendet emdash-plugin.jsonc für seine Identität und seinen Vertrauensvertrag sowie ein per Default exportiertes Objekt in src/plugin.ts, das mit SandboxedPlugin typisiert ist. Es kann in einer isolierten Laufzeitumgebung ausgeführt werden und nutzt Block Kit für die Admin-Oberfläche.
  • Ein natives Plugin exportiert eine Descriptor-Factory für die Build-Zeit und eine Laufzeitfunktion createPlugin(), die mit definePlugin() erstellt wird. Verwenden Sie dieses Format für React-Admin-Komponenten, öffentliche Astro-Komponenten oder Seitenfragmente.

Beginnen Sie mit Ein Plugin-Format wählen. Die Hook-Namen und die PluginContext-APIs sind gemeinsam, aber die Paket- und Handler-Formen sind nicht austauschbar.

WordPress-Inhalte importieren

Wählen Sie in der Admin-Seitenleiste Import, um die Seite Import from WordPress zu öffnen, oder rufen Sie /_emdash/admin/import/wordpress direkt auf. EmDash unterstützt zwei Importwege:

  1. Laden Sie eine WordPress-eXtended-RSS-Datei (WXR) hoch, die über Tools → Export exportiert wurde.
  2. Installieren Sie das EmDash-Exporter-Plugin auf der WordPress-Website und verbinden Sie sich mit einem WordPress-Anwendungspasswort. Dieser Weg kann Inhalte umfassen, die eine normale öffentliche REST-API nicht bereitstellt.

Wenn Sie eine WordPress-URL ohne den Exporter eingeben, kann die Website erkannt werden und es werden öffentliche Beiträge, Seiten und Medien gezählt. Diese REST-Abfrage importiert keine Inhalte.

Der Importer ordnet den WordPress-Status publish dem EmDash-Status published zu. Die Status Entwurf, Ausstehend, Privat, Geplant, Papierkorb und unbekannte Status werden zu Entwürfen. Prüfen Sie importierte Berechtigungen und den Veröffentlichungsstatus, bevor Sie DNS ändern oder WordPress außer Betrieb nehmen.

Folgen Sie Von WordPress migrieren für das vollständige Verfahren und das Wiederholungsverhalten.

Redaktioneller Workflow

Der EmDash-Admin bietet Sammlungslisten, einen Portable-Text-Editor, Medienverwaltung, Menübearbeitung, Taxonomieverwaltung, Revisionen und Vorschau-Links. Er ist keine visuelle Kopie von wp-admin: Gutenberg-Blöcke werden zu Portable Text, und die verfügbaren Ansichten hängen von den Sammlungen und Funktionen ab, die für die Website konfiguriert sind.

Nächste Schritte