EmDash pour les développeurs WordPress

EmDash intègre les concepts familiers de WordPress — articles, pages, taxonomies, menus, widgets et une médiathèque — dans une pile Astro moderne. Vos connaissances en gestion de contenu sont directement transférables.

Si vous comparez les plateformes avant de migrer, lisez EmDash vs WordPress et WordPress vers Astro avec EmDash.

Ce qui reste familier

Les concepts que vous connaissez de WordPress sont des fonctionnalités de premier ordre dans EmDash :

• Collections fonctionnent comme les Types de Publication Personnalisés — définissez la structure de votre contenu, interrogez-la dans les modèles
• Taxonomies fonctionnent de la même manière — hiérarchiques (comme les catégories) et plates (comme les étiquettes)
• Menus avec ordonnancement par glisser-déposer et éléments imbriqués
• Zones de widgets pour les barres latérales et les régions de contenu dynamique
• Médiathèque avec téléchargement, organisation et gestion des images
• Interface d’administration que les éditeurs de contenu peuvent utiliser sans toucher au code

Astuce

Vous n’avez pas besoin de connaître React ou un framework JavaScript spécifique. Les composants Astro utilisent du HTML avec des expressions de modèle simples — plus proches des modèles PHP que de React.

Ce qui est différent

L’implémentation change, mais le modèle mental reste le même :

TypeScript au lieu de PHP

Les modèles sont des composants Astro. La syntaxe est plus propre, mais le concept est le même : du code serveur qui génère du HTML.

APIs de contenu au lieu de WP_Query

Les fonctions de requête comme getEmDashCollection() remplacent WP_Query. Pas de SQL, juste des appels de fonction.

Routage basé sur les fichiers

Les fichiers dans src/pages/ deviennent des URLs. Pas de règles de réécriture ou de hiérarchie de modèles à mémoriser.

Composants au lieu de parties de modèle

Importez et utilisez des composants. Même idée que get_template_part(), meilleure organisation.

Référence rapide

WordPress	EmDash	Notes
Types de Publication Personnalisés	Collections	Définir via l’interface d’admin ou l’API
WP_Query	getEmDashCollection()	Filtres, limites, requêtes de taxonomie
get_post()	getEmDashEntry()	Retourne une entrée ou null
Catégories/Étiquettes	Taxonomies	Prise en charge hiérarchique préservée
register_nav_menus()	getMenu()	Prise en charge des menus de premier ordre
register_sidebar()	getWidgetArea()	Zones de widgets de premier ordre
bloginfo('name')	getSiteSetting("title")	API des paramètres du site
the_content()	<PortableText />	Rendu de contenu structuré
Codes courts	Blocs Portable Text	Composants personnalisés
add_action/filter()	Crochets de plugin	content:beforeSave, etc.
wp_options	ctx.kv	Stockage clé-valeur
Répertoire du thème	Répertoire src/	Composants, mises en page, pages
functions.php	astro.config.mjs + configuration EmDash	Configuration de build et d’exécution

APIs de contenu

Interrogation des Collections

Les requêtes WordPress utilisent WP_Query ou des fonctions d’aide. EmDash utilise des fonctions de requête typées.

WordPress

archive.php

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

EmDash

astro title="src/pages/posts/index.astro"
---
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>
))}

Obtention d’une Entrée Unique

WordPress

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

EmDash

astro title="src/pages/posts/[slug].astro"
---
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>

Hiérarchie des Modèles

WordPress utilise une hiérarchie de modèles pour sélectionner quel fichier affiche une page. Astro utilise un routage explicite basé sur les fichiers.

Modèle WordPress	Équivalent EmDash
index.php	src/pages/index.astro
single.php	src/pages/posts/[slug].astro
single-{type}.php	src/pages/{type}/[slug].astro
page.php	src/pages/pages/[slug].astro
archive.php	src/pages/posts/index.astro
archive-{type}.php	src/pages/{type}/index.astro
category.php	src/pages/categories/[slug].astro
tag.php	src/pages/tags/[slug].astro
search.php	src/pages/search.astro
404.php	src/pages/404.astro
header.php / footer.php	src/layouts/Base.astro
sidebar.php	src/components/Sidebar.astro

Astuce

Le routage d’Astro est plus explicite que la hiérarchie de WordPress. Chaque route est un fichier. Les segments dynamiques utilisent la syntaxe [param].

Parties de Modèle → Composants

Les parties de modèle WordPress deviennent des composants Astro :

WordPress

php title="functions.php / template"
// Dans le modèle :
get_template_part('template-parts/content', 'post');

// template-parts/content-post.php:

<article class="post">
  <h2><?php the_title(); ?></h2>
  <?php the_excerpt(); ?>
</article>

EmDash

astro title="src/components/PostCard.astro"
---
const { post } = Astro.props;
---

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

astro title="src/pages/index.astro"
---
import PostCard from "../../components/PostCard.astro";
import { getEmDashCollection } from "emdash";

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

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

Menus

EmDash dispose d’un support de premier ordre pour les menus avec une résolution automatique des URL :

WordPress

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

EmDash

astro title="src/components/Header.astro"
---
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>

Les menus sont créés via l’interface d’administration, les fichiers de seed ou l’importation depuis WordPress.

Zones de widgets

Les zones de widgets fonctionnent comme les barres latérales dans WordPress :

WordPress

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

EmDash

astro title="src/components/Sidebar.astro"
---
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} />;
      }
      // Gérer les autres types de widgets
    })}
  </aside>
)}

Paramètres du site

Les options du site et les paramètres du personnalisateur correspondent à getSiteSetting() :

WordPress	EmDash
bloginfo('name')	getSiteSetting("title")
bloginfo('description')	getSiteSetting("tagline")
get_custom_logo()	getSiteSetting("logo")
get_option('date_format')	getSiteSetting("dateFormat")
home_url()	Astro.site

import { getSiteSetting } from "emdash";

const title = await getSiteSetting("title");
const logo = await getSiteSetting("logo"); // Renvoie { mediaId, alt, url }

Taxonomies

Les taxonomies fonctionnent de la même manière conceptuellement — hiérarchiques (comme les catégories) ou plates (comme les étiquettes) :

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

// Obtenir toutes les catégories
const categories = await getTaxonomyTerms("categories");

// Obtenir un terme spécifique
const news = await getTerm("categories", "news");

// Obtenir les termes pour un article
const postCategories = await getEntryTerms("posts", postId, "categories");

Hooks → Système de plugins

Les hooks WordPress (add_action, add_filter) deviennent des hooks de plugin EmDash :

WordPress Hook	EmDash Hook	Objectif
save_post	content:beforeSave	Modifier le contenu avant sauvegarde
the_content	PortableText components	Transformer le contenu rendu
pre_get_posts	Query options	Filtrer les requêtes
wp_head	Layout <head>	Ajouter du contenu dans l’en-tête
wp_footer	Layout before </body>	Ajouter du contenu dans le pied de page

Ce qui est meilleur dans EmDash

Sécurité des types

TypeScript partout. Les collections, requêtes et composants sont entièrement typés. Plus besoin de deviner les noms de champs ou les types de retour.

Performance

Pas de surcharge PHP. Génération statique par défaut. Rendu côté serveur quand nécessaire. Prêt pour le déploiement sur le Edge.

Expérience de développement moderne

Remplacement à chaud des modules. Architecture basée sur les composants. Outillage moderne (Vite, TypeScript, ESLint).

Déploiements basés sur Git

Code et modèles dans git. Contenu dans la base de données. Pas de FTP, pas de permissions de fichiers, pas de sites hackés.

Liens de prévisualisation

EmDash génère des URL de prévisualisation sécurisées avec des tokens signés HMAC. Les éditeurs de contenu peuvent prévisualiser les brouillons sans se connecter à la production — partagez un lien, pas des identifiants.

Pas de conflits de plugins

Les conflits de plugins WordPress disparaissent. Les plugins EmDash s’exécutent dans des contextes isolés avec des API explicites. Pas de pollution de l’état global.

Expérience de l’éditeur de contenu

Les éditeurs de contenu utilisent le panneau d’administration EmDash, similaire à wp-admin :

• Tableau de bord avec l’activité récente
• Listes de collections avec recherche, filtrage et actions groupées
• Éditeur riche pour le contenu (Portable Text, pas Gutenberg)
• Bibliothèque multimédia avec téléversement par glisser-déposer
• Constructeur de menus avec ordonnancement par glisser-déposer
• Éditeur de zones de widgets pour le contenu des barres latérales

L’expérience d’édition est familière. La technologie sous-jacente est moderne.

Chemin de migration

EmDash importe directement le contenu WordPress :

1. Exporter depuis WordPress (Outils → Exporter)
2. Téléverser le fichier .xml dans l’admin d’EmDash
3. Associer les types de publication aux collections
4. Importer le contenu et les médias

Les articles, pages, taxonomies, menus et médias sont transférés. Les blocs Gutenberg sont convertis en Portable Text. Les champs personnalisés sont analysés et associés.

Consultez le Guide de migration WordPress pour des instructions complètes.

Prochaines étapes

• Démarrage — Configurez votre premier site EmDash
• Interroger le contenu — Plongée approfondie dans les API de contenu
• Taxonomies — Catégories, étiquettes et taxonomies personnalisées
• Menus — Menus de navigation
• Migrer depuis WordPress — Importer du contenu existant