EmDash für WordPress-Entwickler

EmDash bringt vertraute WordPress-Konzepte – Beiträge, Seiten, Taxonomien, Menüs, Widgets und eine Medienbibliothek – in einen modernen Astro-Stack. Ihr Content-Management-Wissen wird direkt übertragen.

Was vertraut bleibt

Die Konzepte, die Sie von WordPress kennen, sind erstklassige Funktionen in EmDash:

• Collections funktionieren wie Custom Post Types – definieren Sie Ihre Inhaltsstruktur, fragen Sie sie in Templates ab
• Taxonomien funktionieren genauso – hierarchisch (wie Kategorien) und flach (wie Tags)
• Menüs mit Drag-and-Drop-Sortierung und verschachtelten Elementen
• Widget-Bereiche für Sidebars und dynamische Inhaltsbereiche
• Medienbibliothek mit Upload, Organisation und Bildverwaltung
• Admin-UI, die Content-Editoren ohne Code-Berührung verwenden können

Was anders ist

Die Implementierung ändert sich, aber das mentale Modell bleibt gleich:

Kurzreferenz

Content-APIs

Collections abfragen

WordPress-Abfragen verwenden WP_Query oder Hilfsfunktionen. EmDash verwendet typisierte Query-Funktionen.

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

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

Einzelnen Eintrag abrufen

Die folgenden Beispiele rufen einen Eintrag nach Kennung ab und rendern ihn, in WordPress und in EmDash:

<?php
$post = get_post($id);
?>
<article>
  <h1><?php echo $post->post_title; ?></h1>
  <?php echo apply_filters('the_content', $post->post_content); ?>
</article>

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

Template-Hierarchie

WordPress verwendet eine Template-Hierarchie, um auszuwählen, welche Datei eine Seite rendert. Astro verwendet explizites dateibasiertes Routing.

Template-Parts → Komponenten

WordPress-Template-Parts werden zu Astro-Komponenten:

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

---
const { post } = Astro.props;
---

<article class="post">
	<h2>{post.data.title}</h2>
	<p>{post.data.excerpt}</p>
</article>

---
import PostCard from "../components/PostCard.astro";
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts");
---

{posts.map((post) => <PostCard {post} />)}

Menüs

EmDash hat erstklassige Menü-Unterstützung mit automatischer URL-Auflösung:

<?php
wp_nav_menu([
  'theme_location' => 'primary',
  'container' => 'nav',
]);
?>

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

Menüs werden über die Admin-UI, Seed-Dateien oder WordPress-Import erstellt.

Widget-Bereiche

Widget-Bereiche funktionieren wie Sidebars in WordPress:

<?php if (is_active_sidebar('sidebar-1')) : ?>
  <aside>
    <?php dynamic_sidebar('sidebar-1'); ?>
  </aside>
<?php endif; ?>

---
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} />;
      }
      // Andere Widget-Typen behandeln
    })}
  </aside>
)}

Site-Einstellungen

Site-Optionen und Customizer-Einstellungen werden auf getSiteSetting() abgebildet:

Das folgende Beispiel liest einzelne Einstellungen mit getSiteSetting():

import { getSiteSetting } from "emdash";

const title = await getSiteSetting("title");
const logo = await getSiteSetting("logo"); // Gibt { mediaId, alt, url } zurück

Taxonomien

Taxonomien funktionieren konzeptionell gleich – hierarchisch (wie Kategorien) oder flach (wie Tags):

import { getTaxonomyTerms, getEntryTerms, getTerm } from "emdash";

// Alle Kategorien abrufen
const categories = await getTaxonomyTerms("categories");

// Einen spezifischen Term abrufen
const news = await getTerm("categories", "news");

// Terms für einen Beitrag abrufen
const postCategories = await getEntryTerms("posts", postId, "categories");

Hooks → Plugin-System

WordPress-Hooks (add_action, add_filter) werden zu EmDash-Plugin-Hooks:

Was in EmDash besser ist

Vorschau-Links

EmDash generiert sichere Vorschau-URLs mit HMAC-signierten Tokens. Content-Editoren teilen einen Vorschau-Link, um einen Entwurf zu zeigen, sodass Reviewer ihn ohne Produktions-Login sehen können.

Isolierte Plugins

EmDash-Plugins laufen in isolierten Kontexten mit expliziten APIs. Jedes Plugin erreicht nur die APIs, die es deklariert, sodass Plugins den globalen Status nicht teilen oder überschreiben.

Content-Editor-Erfahrung

Content-Editoren verwenden das EmDash-Admin-Panel, ähnlich wie wp-admin:

• Dashboard mit aktueller Aktivität
• Collection-Auflistungen mit Suche, Filter und Massenaktionen
• Rich-Editor für Inhalte (Portable Text, nicht Gutenberg)
• Medienbibliothek mit Drag-and-Drop-Upload
• Menü-Builder mit Drag-and-Drop-Sortierung
• Widget-Bereich-Editor für Sidebar-Inhalte

Die Bearbeitungserfahrung ist vertraut. Die zugrunde liegende Technologie ist modern.

Migrationspfad

EmDash importiert WordPress-Inhalte direkt:

1. Export aus WordPress (Tools → Export)
2. Hochladen der .xml-Datei in EmDashs Admin
3. Zuordnung von Post Types zu Collections
4. Import von Inhalten und Medien

Beiträge, Seiten, Taxonomien, Menüs und Medien werden übertragen. Gutenberg-Blöcke werden in Portable Text konvertiert. Custom Fields werden analysiert und zugeordnet.

Siehe den WordPress-Migrationsleitfaden für vollständige Anweisungen.

Nächste Schritte

• Erste Schritte — Richten Sie Ihre erste EmDash-Site ein
• Inhalte abfragen — Tiefer Einblick in Content-APIs
• Taxonomien — Kategorien, Tags und benutzerdefinierte Taxonomien
• Menüs — Navigationsmenüs
• Von WordPress migrieren — Vorhandene Inhalte importieren