EmDash pour les développeurs WordPress

Sur cette page

EmDash conserve les concepts de contenu familiers tels que les articles, les pages, les taxonomies, les menus, les médias et les révisions. Astro fournit la couche thème : routes, layouts, composants et rendu serveur.

Ce qui reste familier

Les éditeurs continuent de travailler avec des types de contenu nommés, des champs structurés, des états brouillon et publié, des catégories hiérarchiques, des tags plats, des menus imbriqués, des médias et un historique des révisions. Ces concepts sont transférés dans les collections et les écrans de gestion d’EmDash.

Le flux de travail de développement change. La sélection de templates PHP devient des routes Astro explicites, les parties de templates deviennent des composants importés, et le code est déployé séparément du contenu de la base de données. Vous n’avez pas besoin de React pour construire le site public ; les composants .astro combinent du TypeScript côté serveur avec des templates similaires à HTML.

Correspondance des concepts

WordPressEmDash et Astro
Post TypeCollection EmDash
Post MetaChamp de collection
Catégorie ou tagTaxonomie EmDash
WP_QuerygetEmDashCollection()
get_post()getEmDashEntry()
the_content()<PortableText />
Hiérarchie de templatesFichiers dans src/pages/
Partie de templateComposant .astro importé
header.php et footer.phpLayout Astro
wp_nav_menu()getMenu()
SidebarZone de widgets et <WidgetArea />
Options APIParamètres du site, ou ctx.kv d’un plugin
Plugin WordPressPlugin EmDash sandboxed ou natif

Modèle de contenu

Créez et modifiez les collections sous Types de contenu dans l’admin EmDash. Une collection a des champs explicitement typés et peut activer les brouillons, les révisions, la planification, la recherche, le SEO ou les commentaires.

Les requêtes retournent des entrées de collection live Astro. entry.id est l’identifiant de route et est normalement le slug ; entry.data.id est l’ID du contenu en base de données.

L’archive suivante interroge les articles par ordre de publication :

---
import { getEmDashCollection } from "emdash";

const { entries: posts, error } = await getEmDashCollection("posts", {
  orderBy: { published_at: "desc" },
  limit: 10,
});

if (error) return new Response("Impossible de charger les articles", { 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>
))}

Fichiers du thème

Les routes Astro remplacent la hiérarchie de templates WordPress. Un template choisit sa propre structure d’URL plutôt que de dépendre de noms de fichiers magiques.

Fichier WordPressFichier actuel du blog-template
front-page.php ou 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 et footer.phpsrc/layouts/Base.astro

Lisez Astro pour les développeurs WordPress pour la structure du projet, la syntaxe des composants, les props, les slots, les layouts, le routage et le flux de requêtes rendues côté serveur utilisés par les templates EmDash.

Les menus et les zones de widgets vivent dans la base de données et restent modifiables après configuration. Les templates les interrogent au moment de la requête :

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

Paramètres du site et taxonomies

L’identité du site de type Customizer vit dans les paramètres d’EmDash. Récupérez les paramètres une fois et utilisez l’URL du logo résolue quand elle est présente :

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

Les termes de taxonomie sont des enregistrements séparés plutôt que des valeurs stockées directement dans entry.data. Résolvez un terme, puis utilisez son slug dans un filtre de collection :

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

Formats de plugins

EmDash a deux formats de plugins :

  • Un plugin sandboxed utilise emdash-plugin.jsonc pour son identité et son contrat de confiance, plus un objet src/plugin.ts exporté par défaut typé avec SandboxedPlugin. Il peut s’exécuter dans un runtime isolé et utiliser Block Kit pour l’UI d’administration.
  • Un plugin natif exporte une factory de descripteur au moment de la compilation et une fonction createPlugin() au moment de l’exécution construite avec definePlugin(). Utilisez ce format pour les composants React d’administration, les composants Astro publics ou les fragments de page.

Commencez par Choisir un format de plugin. Les noms de hooks et les APIs PluginContext sont partagés, mais les formes de paquets et de gestionnaires ne sont pas interchangeables.

Importer du contenu WordPress

Ouvrez Importer WordPress dans la barre latérale d’admin, ou visitez directement /_emdash/admin/import/wordpress. EmDash prend en charge deux chemins d’importation :

  1. Téléversez un fichier WordPress eXtended RSS (WXR) exporté depuis Outils → Exporter.
  2. Installez le plugin EmDash Exporter sur le site WordPress et connectez-vous avec un mot de passe d’application WordPress. Ce chemin peut inclure du contenu qu’une API REST publique normale n’expose pas.

Saisir une URL WordPress sans l’exportateur peut détecter le site et compter les articles, pages et médias publics. Cette sonde REST n’importe pas de contenu.

L’importateur mappe le WordPress publish au statut published d’EmDash. Les statuts brouillon, en attente, privé, futur, corbeille et inconnu deviennent des brouillons. Vérifiez les permissions importées et l’état de publication avant de modifier le DNS ou de retirer WordPress.

Suivez Migrer depuis WordPress pour la procédure complète et le comportement de reprise.

Flux de travail éditorial

L’admin EmDash fournit des listes de collections, un éditeur Portable Text, la gestion des médias, l’édition des menus, la gestion des taxonomies, les révisions et les liens de prévisualisation. Ce n’est pas une copie visuelle de wp-admin : les blocs Gutenberg deviennent du Portable Text, et les écrans disponibles dépendent des collections et fonctionnalités configurées pour le site.

Prochaines étapes