EmDash pour les développeurs WordPress

EmDash apporte les concepts familiers de WordPress—articles, pages, taxonomies, menus, widgets et une bibliothèque multimédia—dans une stack Astro moderne. Vos connaissances en gestion de contenu se transfèrent directement.

Ce qui reste familier

Les concepts que vous connaissez de WordPress sont des fonctionnalités de première classe dans EmDash :

• Collections fonctionnent comme les Custom Post Types—définissez votre structure de contenu, interrogez-la dans les templates
• Taxonomies fonctionnent de la même manière—hiérarchiques (comme les catégories) et plates (comme les tags)
• Menus avec tri glisser-déposer et éléments imbriqués
• Zones de widgets pour les barres latérales et les régions de contenu dynamique
• Bibliothèque multimédia avec téléchargement, organisation et gestion d’images
• Interface d’administration que les éditeurs de contenu peuvent utiliser sans toucher au code

Ce qui est différent

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

Référence rapide

APIs de contenu

Requêter les Collections

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

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

Obtenir une seule entrée

Les exemples suivants récupèrent une entrée par identifiant et la rendent, dans WordPress et dans 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>

Hiérarchie de templates

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

Template Parts → Composants

Les template parts de WordPress deviennent des composants Astro :

// Dans le 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} />)}

Menus

EmDash a un support de menu de première classe avec résolution automatique d’URL :

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

Les menus sont créés via l’UI d’admin, des fichiers seed ou l’import WordPress.

Zones de widgets

Les zones de widgets fonctionnent comme les barres latérales dans 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} />;
      }
      // Gérer les autres types de widgets
    })}
  </aside>
)}

Paramètres du site

Les options du site et les paramètres du customizer se mappent à getSiteSetting() :

L’exemple suivant lit les paramètres individuels avec getSiteSetting() :

import { getSiteSetting } from "emdash";

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

Taxonomies

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

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 plugin

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

Ce qui est mieux dans EmDash

Liens de prévisualisation

EmDash génère des URLs de prévisualisation sécurisées avec des tokens signés HMAC. Les éditeurs de contenu partagent un lien de prévisualisation pour montrer un brouillon, afin que les relecteurs puissent le voir sans connexion de production.

Plugins isolés

Les plugins EmDash s’exécutent dans des contextes isolés avec des APIs explicites. Chaque plugin n’atteint que les APIs qu’il déclare, donc les plugins ne partagent pas ou n’écrasent pas l’état global de l’autre.

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, filtres et actions en masse
• Éditeur riche pour le contenu (Portable Text, pas Gutenberg)
• Bibliothèque multimédia avec téléchargement glisser-déposer
• Constructeur de menu avec tri glisser-déposer
• Éditeur de zone de widgets pour le contenu de barre latérale

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

Chemin de migration

EmDash importe le contenu WordPress directement :

1. Exporter depuis WordPress (Outils → Exporter)
2. Télécharger le fichier .xml dans l’admin d’EmDash
3. Mapper les post types 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 custom fields sont analysés et mappés.

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

Prochaines étapes

• Commencer — Configurez votre premier site EmDash
• Requêter le contenu — Plongée profonde dans les APIs de contenu
• Taxonomies — Catégories, tags et taxonomies personnalisées
• Menus — Menus de navigation
• Migrer depuis WordPress — Importer le contenu existant