EmDash per sviluppatori WordPress

In questa pagina

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

Cosa resta familiare

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

Il flusso di lavoro 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 dal contenuto del database. Non hai bisogno di React per costruire il sito pubblico; i componenti .astro combinano TypeScript lato server con template simili all’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 sotto Tipi di contenuto nell’admin di EmDash. Una collezione ha campi esplicitamente tipati e può abilitare bozze, revisioni, pianificazione, ricerca, SEO o commenti.

Le query restituiscono voci di collezione live di Astro. entry.id è l’identificatore di route ed è normalmente lo slug; entry.data.id è l’ID del contenuto nel database.

Il seguente archivio 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("Impossibile caricare gli articoli", { 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 la propria struttura 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 utilizzati dai template EmDash.

I menu e le aree widget vivono nel database e rimangono 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 vive nelle impostazioni di EmDash. Recupera le impostazioni una 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 piuttosto che valori memorizzati direttamente in entry.data. Risolvi un termine, poi 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 contratto di fiducia, più un oggetto src/plugin.ts esportato di default 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 PluginContext sono condivisi, ma le forme dei pacchetti e dei gestori non sono intercambiabili.

Importare contenuti WordPress

Apri Importa WordPress nella barra laterale dell’admin, o visita direttamente /_emdash/admin/import/wordpress. EmDash supporta due percorsi di importazione:

  1. Carica un file WordPress eXtended RSS (WXR) esportato da Strumenti → Esporta.
  2. Installa il plugin EmDash Exporter sul sito WordPress e collegati con una password dell’applicazione WordPress. Questo percorso può includere contenuti che una normale API REST pubblica non espone.

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

L’importatore mappa il WordPress publish allo stato published di EmDash. Gli stati bozza, in attesa, privato, futuro, cestino e sconosciuto diventano bozze. Verifica 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’admin di EmDash fornisce liste di collezioni, un editor Portable Text, gestione dei media, modifica dei menu, gestione delle tassonomie, revisioni e link di anteprima. Non è una copia visiva di wp-admin: i blocchi Gutenberg diventano Portable Text e le schermate disponibili dipendono dalle collezioni e dalle funzionalità configurate per il sito.

Prossimi passi