EmDash per sviluppatori WordPress

In questa pagina

EmDash mantiene concetti di contenuto familiari come articoli, pagine, tassonomie, menu, media e revisioni. Astro fornisce il livello del tema: route, layout, componenti e rendering lato server.

Cosa resta familiare

Gli editor continuano a lavorare con tipi di contenuto con nome, campi strutturati, gli stati bozza e pubblicato, categorie gerarchiche, tag piatti, menu annidati, media e cronologia delle revisioni. Questi concetti passano nelle collezioni di EmDash e nelle sue schermate di gestione.

Il flusso di sviluppo cambia. La selezione dei template PHP diventa route Astro esplicite, le parti di template diventano componenti importati e il codice viene distribuito separatamente dai contenuti del database. Non hai bisogno di React per costruire il sito pubblico; i componenti .astro combinano TypeScript lato server con template simili a HTML.

Mappa dei concetti

WordPressEmDash e Astro
Post TypeCollezione EmDash
Post MetaCampo della collezione
Categoria o tagTassonomia EmDash
WP_QuerygetEmDashCollection()
get_post()getEmDashEntry()
the_content()<PortableText />
Gerarchia dei templateFile in src/pages/
Parte di templateComponente .astro importato
header.php e footer.phpLayout Astro
wp_nav_menu()getMenu()
SidebarArea widget e <WidgetArea />
Options APIImpostazioni del sito, o ctx.kv di un plugin
Plugin WordPressPlugin EmDash sandboxed o nativo

Modello di contenuto

Crea e modifica le collezioni in Content Types nell’amministrazione di EmDash. Una collezione ha campi tipizzati espliciti e può attivare bozze, revisioni, pianificazione, ricerca, SEO o commenti.

Le query restituiscono voci di live collection di Astro. entry.id è l’identificatore della route e di norma è lo slug; entry.data.id è l’ID del contenuto nel database.

L’archivio seguente interroga gli articoli in ordine di pubblicazione:

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

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

if (error) return new Response("Could not load posts", { 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>
))}

File del tema

Le route di Astro sostituiscono la gerarchia dei template di WordPress. Un template sceglie da sé la propria struttura degli URL, invece di affidarsi a nomi di file magici.

File WordPressFile attuale 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 e footer.phpsrc/layouts/Base.astro

Leggi Astro per sviluppatori WordPress per la struttura del progetto, la sintassi dei componenti, i props, gli slot, i layout, il routing e il flusso di query renderizzate lato server usati dai template EmDash.

Menu e aree widget risiedono nel database e restano modificabili dopo la configurazione. I template li interrogano al momento della richiesta:

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

Impostazioni del sito e tassonomie

L’identità del sito in stile Customizer risiede nelle impostazioni di EmDash. Recupera le impostazioni una sola volta e usa l’URL del logo risolto 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>

I termini di tassonomia sono record separati, non valori memorizzati direttamente in entry.data. Risolvi un termine, quindi usa il suo slug in un filtro di collezione:

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

Formati dei plugin

EmDash ha due formati di plugin:

  • Un plugin sandboxed usa emdash-plugin.jsonc per la sua identità e il suo contratto di fiducia, più un oggetto src/plugin.ts esportato di default e tipizzato con SandboxedPlugin. Può essere eseguito in un runtime isolato e usare Block Kit per l’UI di amministrazione.
  • Un plugin nativo esporta una factory di descrittori al momento della compilazione e una funzione createPlugin() al momento dell’esecuzione, costruita con definePlugin(). Usa questo formato per componenti React di amministrazione, componenti Astro pubblici o frammenti di pagina.

Inizia con Scegliere un formato di plugin. I nomi degli hook e le API di PluginContext sono condivisi, ma le forme dei pacchetti e dei gestori non sono intercambiabili.

Importare contenuti WordPress

Nella barra laterale dell’amministrazione seleziona Import per aprire la pagina Import from WordPress, oppure visita direttamente /_emdash/admin/import/wordpress. EmDash supporta due percorsi di importazione:

  1. Carica un file WordPress eXtended RSS (WXR) esportato da Tools → Export.
  2. Installa il plugin EmDash Exporter sul sito WordPress e collegati con una password per le applicazioni di WordPress. Questo percorso può includere contenuti che una normale REST API pubblica non espone.

Inserire un URL WordPress senza l’exporter può rilevare il sito e contare articoli, pagine e media pubblici. Quella verifica REST non importa contenuti.

L’importatore associa lo stato WordPress publish allo stato EmDash published. Gli stati bozza, in attesa, privato, programmato, cestino e sconosciuto diventano bozze. Controlla i permessi importati e lo stato di pubblicazione prima di modificare il DNS o dismettere WordPress.

Segui Migrare da WordPress per la procedura completa e il comportamento di ripetizione.

Flusso di lavoro editoriale

L’amministrazione di EmDash offre elenchi di collezioni, un editor Portable Text, la gestione dei media, la modifica dei menu, la gestione delle tassonomie, le revisioni e i link di anteprima. Non è una copia visiva di wp-admin: i blocchi di Gutenberg diventano Portable Text, e le schermate disponibili dipendono dalle collezioni e dalle funzionalità configurate per il sito.

Prossimi passi