EmDash para desarrolladores de WordPress

En esta página

EmDash mantiene conceptos de contenido familiares como publicaciones, páginas, taxonomías, menús, medios y revisiones. Astro proporciona la capa de tema: rutas, layouts, componentes y renderizado del servidor.

Lo que permanece familiar

Los editores siguen trabajando con tipos de contenido nombrados, campos estructurados, estados de borrador y publicado, categorías jerárquicas, etiquetas planas, menús anidados, medios e historial de revisiones. Esos conceptos se trasladan a las colecciones y pantallas de gestión de EmDash.

El flujo de trabajo de desarrollo cambia. La selección de plantillas PHP se convierte en rutas Astro explícitas, las partes de plantillas se convierten en componentes importados, y el código se despliega por separado del contenido de la base de datos. No necesitas React para construir el sitio público; los componentes .astro combinan TypeScript del lado del servidor con plantillas similares a HTML.

Mapa de conceptos

WordPressEmDash y Astro
Post TypeColección EmDash
Post MetaCampo de colección
Categoría o etiquetaTaxonomía EmDash
WP_QuerygetEmDashCollection()
get_post()getEmDashEntry()
the_content()<PortableText />
Jerarquía de plantillasArchivos en src/pages/
Parte de plantillaComponente .astro importado
header.php y footer.phpLayout de Astro
wp_nav_menu()getMenu()
SidebarÁrea de widgets y <WidgetArea />
Options APIConfiguraciones del sitio, o ctx.kv de un plugin
Plugin de WordPressPlugin EmDash sandboxed o nativo

Modelo de contenido

Crea y edita colecciones bajo Tipos de contenido en el admin de EmDash. Una colección tiene campos explícitamente tipados y puede habilitar borradores, revisiones, programación, búsqueda, SEO o comentarios.

Las consultas devuelven entradas de colección en vivo de Astro. entry.id es el identificador de ruta y normalmente es el slug; entry.data.id es el ID de contenido de la base de datos.

El siguiente archivo consulta publicaciones en orden de publicación:

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

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

if (error) return new Response("No se pudieron cargar las publicaciones", { 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>
))}

Archivos del tema

Las rutas de Astro reemplazan la jerarquía de plantillas de WordPress. Una plantilla elige su propia estructura de URL en lugar de depender de nombres de archivo mágicos.

Archivo WordPressArchivo actual del blog-template
front-page.php o 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 y footer.phpsrc/layouts/Base.astro

Lee Astro para desarrolladores de WordPress para la estructura del proyecto, sintaxis de componentes, props, slots, layouts, enrutamiento y el flujo de consultas renderizadas en servidor utilizados por las plantillas EmDash.

Menús y áreas de widgets

Los menús y áreas de widgets viven en la base de datos y permanecen editables después de la configuración. Las plantillas los consultan en tiempo de solicitud:

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

Configuración del sitio y taxonomías

La identidad del sitio estilo Customizer vive en la configuración de EmDash. Obtén la configuración una vez y usa la URL del logo resuelta cuando esté presente:

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

Los términos de taxonomía son registros separados en lugar de valores almacenados directamente en entry.data. Resuelve un término y luego usa su slug en un filtro de colección:

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

Formatos de plugins

EmDash tiene dos formatos de plugins:

  • Un plugin sandboxed usa emdash-plugin.jsonc para su identidad y contrato de confianza, más un objeto src/plugin.ts exportado por defecto tipado con SandboxedPlugin. Puede ejecutarse en un runtime aislado y usar Block Kit para la UI de administración.
  • Un plugin nativo exporta una fábrica de descriptores en tiempo de compilación y una función createPlugin() en tiempo de ejecución construida con definePlugin(). Usa este formato para componentes React de administración, componentes Astro públicos o fragmentos de página.

Comienza con Elegir un formato de plugin. Los nombres de hooks y las APIs de PluginContext son compartidos, pero las formas de paquete y manejadores no son intercambiables.

Importar contenido de WordPress

Abre Importar WordPress en la barra lateral del admin, o visita directamente /_emdash/admin/import/wordpress. EmDash admite dos rutas de importación:

  1. Sube un archivo WordPress eXtended RSS (WXR) exportado desde Herramientas → Exportar.
  2. Instala el plugin EmDash Exporter en el sitio WordPress y conéctalo con una contraseña de aplicación de WordPress. Esta ruta puede incluir contenido que una API REST pública normal no expone.

Ingresar una URL de WordPress sin el exportador puede detectar el sitio y contar publicaciones, páginas y medios públicos. Esa consulta REST no importa contenido.

El importador mapea WordPress publish al estado published de EmDash. Los estados borrador, pendiente, privado, futuro, papelera y desconocido se convierten en borradores. Revisa los permisos importados y el estado de publicación antes de cambiar el DNS o retirar WordPress.

Sigue Migrar desde WordPress para el procedimiento completo y el comportamiento de reintento.

Flujo de trabajo editorial

El admin de EmDash proporciona listas de colecciones, un editor de Portable Text, gestión de medios, edición de menús, gestión de taxonomías, revisiones y enlaces de vista previa. No es una copia visual de wp-admin: los bloques de Gutenberg se convierten en Portable Text, y las pantallas disponibles dependen de las colecciones y características configuradas para el sitio.

Próximos pasos