EmDash para desenvolvedores WordPress

Nesta página

O EmDash mantém conceitos de conteúdo familiares como publicações, páginas, taxonomias, menus, mídia e revisões. O Astro fornece a camada de tema: rotas, layouts, componentes e renderização no servidor.

O que permanece familiar

Os editores continuam trabalhando com tipos de conteúdo nomeados, campos estruturados, estados de rascunho e publicado, categorias hierárquicas, tags planas, menus aninhados, mídia e histórico de revisões. Esses conceitos são transferidos para as coleções e telas de gerenciamento do EmDash.

O fluxo de trabalho de desenvolvimento muda. A seleção de templates PHP se torna rotas Astro explícitas, as partes de templates se tornam componentes importados, e o código é implantado separadamente do conteúdo do banco de dados. Você não precisa de React para construir o site público; os componentes .astro combinam TypeScript do lado do servidor com templates semelhantes a HTML.

Mapa de conceitos

WordPressEmDash e Astro
Post TypeColeção EmDash
Post MetaCampo da coleção
Categoria ou tagTaxonomia EmDash
WP_QuerygetEmDashCollection()
get_post()getEmDashEntry()
the_content()<PortableText />
Hierarquia de templatesArquivos em src/pages/
Parte de templateComponente .astro importado
header.php e footer.phpLayout Astro
wp_nav_menu()getMenu()
SidebarÁrea de widgets e <WidgetArea />
Options APIConfigurações do site, ou ctx.kv de um plugin
Plugin WordPressPlugin EmDash sandboxed ou nativo

Modelo de conteúdo

Crie e edite coleções em Tipos de conteúdo no admin do EmDash. Uma coleção tem campos explicitamente tipados e pode habilitar rascunhos, revisões, agendamento, busca, SEO ou comentários.

As consultas retornam entradas de coleção ao vivo do Astro. entry.id é o identificador de rota e normalmente é o slug; entry.data.id é o ID do conteúdo no banco de dados.

O seguinte arquivo consulta publicações em ordem de publicação:

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

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

if (error) return new Response("Não foi possível carregar as publicações", { 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>
))}

Arquivos do tema

As rotas do Astro substituem a hierarquia de templates do WordPress. Um template escolhe sua própria estrutura de URL em vez de depender de nomes de arquivo mágicos.

Arquivo WordPressArquivo atual do 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 e footer.phpsrc/layouts/Base.astro

Leia Astro para desenvolvedores WordPress para a estrutura do projeto, sintaxe de componentes, props, slots, layouts, roteamento e o fluxo de consultas renderizadas no servidor usados pelos templates EmDash.

Menus e áreas de widgets vivem no banco de dados e permanecem editáveis após a configuração. Os templates os consultam no momento da requisição:

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

Configurações do site e taxonomias

A identidade do site estilo Customizer vive nas configurações do EmDash. Busque as configurações uma vez e use a URL do logo resolvida quando 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>

Os termos de taxonomia são registros separados em vez de valores armazenados diretamente em entry.data. Resolva um termo e depois use seu slug em um filtro de coleção:

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

O EmDash tem dois formatos de plugins:

  • Um plugin sandboxed usa emdash-plugin.jsonc para sua identidade e contrato de confiança, mais um objeto src/plugin.ts exportado por padrão tipado com SandboxedPlugin. Pode ser executado em um runtime isolado e usar Block Kit para a UI de administração.
  • Um plugin nativo exporta uma fábrica de descritores em tempo de compilação e uma função createPlugin() em tempo de execução construída com definePlugin(). Use este formato para componentes React de administração, componentes Astro públicos ou fragmentos de página.

Comece com Escolher um formato de plugin. Os nomes de hooks e as APIs PluginContext são compartilhados, mas as formas de pacotes e handlers não são intercambiáveis.

Importar conteúdo WordPress

Abra Importar WordPress na barra lateral do admin, ou visite diretamente /_emdash/admin/import/wordpress. O EmDash suporta dois caminhos de importação:

  1. Faça upload de um arquivo WordPress eXtended RSS (WXR) exportado de Ferramentas → Exportar.
  2. Instale o plugin EmDash Exporter no site WordPress e conecte com uma senha de aplicação WordPress. Este caminho pode incluir conteúdo que uma API REST pública normal não expõe.

Inserir uma URL WordPress sem o exportador pode detectar o site e contar publicações, páginas e mídia públicos. Essa sondagem REST não importa conteúdo.

O importador mapeia o WordPress publish para o estado published do EmDash. Os estados rascunho, pendente, privado, futuro, lixeira e desconhecido se tornam rascunhos. Revise as permissões importadas e o estado de publicação antes de alterar o DNS ou aposentar o WordPress.

Siga Migrar do WordPress para o procedimento completo e o comportamento de tentativa.

Fluxo de trabalho editorial

O admin do EmDash fornece listas de coleções, um editor Portable Text, gerenciamento de mídia, edição de menus, gerenciamento de taxonomias, revisões e links de pré-visualização. Não é uma cópia visual do wp-admin: os blocos Gutenberg se tornam Portable Text e as telas disponíveis dependem das coleções e recursos configurados para o site.

Próximos passos