Lo sviluppo moderno dei plugin WordPress usa sempre pi\u00f9 React per l'interfaccia admin. WordPress include React integrato, insieme a una libreria completa di componenti sotto il namespace @wordpress. Costruire le pagine admin dei tuoi plugin con React offre una migliore esperienza utente, una gestione dello stato pi\u00f9 facile e compatibilit\u00e0 con il pi\u00f9 ampio ecosistema di sviluppo WordPress.<\/p>
Questa guida spiega come creare interfacce admin basate su React per plugin WordPress, dalla configurazione all'uso dei componenti fino alla gestione dei dati.<\/p>
Il codice React richiede un passaggio di build per trasformare JSX in JavaScript compatibile con il browser. Usa @wordpress\/scripts, che fornisce una configurazione webpack preconfigurata ottimizzata per lo sviluppo WordPress. Installalo con npm e aggiungi gli script build e start al tuo package.json. Il processo di build compila il tuo JavaScript, gestisce la trasformazione JSX e genera file ottimizzati per la produzione.<\/p>
Crea una directory src per i tuoi componenti React. Configura i punti di ingresso nel tuo package.json in modo che puntino ai tuoi file JS principali. La build genera un output in una directory build che devi accodare nel tuo plugin.<\/p>
Il pacchetto @wordpress\/components fornisce una libreria di componenti React che corrispondono al sistema di design dell'amministrazione WordPress. Usa questi componenti per creare interfacce che appaiano e si comportino in modo nativo in WordPress. I componenti comuni includono Button, TextControl, SelectControl, ToggleControl, RangeControl, Panel, Modal e Notice.<\/p>
Importa i componenti da @wordpress\/components nel tuo codice React. I componenti gestiscono automaticamente stile, accessibilit\u00e0 e comportamento responsive. Questo fa risparmiare tempo di sviluppo e garantisce che le tue interfacce admin siano coerenti con il core di WordPress.<\/p>
Il pacchetto wp.data fornisce un sistema di gestione dello stato basato su Redux integrato con WordPress. Usa registerStore per definire il tuo data store con azioni, reducer e selettori. Usa useSelect e useDispatch nei tuoi componenti React per accedere ai dati e attivare le azioni.<\/p>
wp.data si integra con l'API REST di WordPress tramite i resolver. Quando un componente richiede dati non ancora caricati, il resolver attiva automaticamente una richiesta API. Questo schema elimina il codice boilerplate per il recupero dei dati e la sincronizzazione dello stato.<\/p>
Crea la tua pagina admin con add_menu_page() o add_submenu_page() in PHP. Invece di generare HTML complesso, la tua funzione di callback della pagina si limita a restituire un div contenitore con un ID univoco. La tua applicazione React si monta su quel div quando la pagina viene caricata. Accoda il tuo file JavaScript compilato con wp_enqueue_script nell'hook della pagina admin.<\/p>
Usa wp_localize_script per passare dati PHP alla tua applicazione React. \u00c8 cos\u00ec che fornisci stato iniziale, nonce, URL dell'API REST e impostazioni del plugin al tuo codice JavaScript.<\/p>
Testa i tuoi componenti React con @wordpress\/jest-console o React Testing Library. Scrivi test unitari per componenti singoli e test di integrazione per flussi di dati collegati. Il pacchetto @wordpress\/scripts include una configurazione Jest che funziona subito per progetti WordPress.<\/p>
Testa l'accessibilit\u00e0 con @wordpress\/jest-axe o test manuali di navigazione da tastiera. I componenti React dovrebbero essere navigabili con i tasti Tab, operabili con Invio e Spazio, e includere etichette ARIA appropriate.<\/p>
React fornisce la migliore base per costruire interfacce amministrative moderne per WordPress. L'ecosistema @wordpress fornisce tutto ci\u00f2 di cui hai bisogno \u2014 strumenti di build, componenti UI e gestione dello stato \u2014 tutto progettato per funzionare con WordPress. Inizia con una semplice pagina di impostazioni costruita con @wordpress\/scripts, poi aggiungi interfacce complesse, store di dati e test di integrazione man mano che il tuo plugin cresce.<\/p>","protected":false},"excerpt":{"rendered":"
Come creare interfacce admin moderne per plugin WordPress usando React, la libreria @wordpress\/components e il pacchetto wp.data.<\/p>","protected":false},"author":3,"featured_media":1168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_primary_source":"","visibility_scope":"","ai_summary":"","ai_intent":"","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[7,6],"tags":[44,27,35],"ai_visibility":[],"class_list":["post-601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","category-wordpress","tag-api-first","tag-developer-to-founder","tag-saas"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/comments?post=601"}],"version-history":[{"count":2,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/601\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/601\/revisions\/1309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/media\/1168"}],"wp:attachment":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/media?parent=601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/categories?post=601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/tags?post=601"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/ai_visibility?post=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}