{"id":77622,"date":"2024-05-13T09:06:25","date_gmt":"2024-05-13T08:06:25","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77622&preview=true&preview_id=77622"},"modified":"2024-05-13T13:36:02","modified_gmt":"2024-05-13T12:36:02","slug":"wordpress-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-sveltekit\/","title":{"rendered":"Integrare SvelteKit con WordPress headless"},"content":{"rendered":"

Da un po’ di tempo a questa parte, WordPress headless \u00e8 una grande tendenza nell’ambito del web dev. La separazione tra front-end e back-end pu\u00f2 portare a un grado di controllo pi\u00f9 elevato, ad applicazioni omnichannel<\/a> e ad alcuni utilizzi interessanti di questa nuova tecnologia.<\/p>\n

Molti sviluppatori si sono divertiti a sperimentare framework come Vue.js<\/a> e React.js<\/a> o addirittura framework web come Django<\/a> e Ruby on Rails<\/a>, che di solito sono quasi del tutto incompatibili con WordPress.<\/p>\n

Ci sono molti framework come questi che funzionano bene con WordPress headless, ma SvelteKit \u00e8 un framework speciale. Questo framework per l’interfaccia utente \u00e8 stato creato appositamente per semplificare lo sviluppo di applicazioni web con un codice conciso e raffinato. Pu\u00f2 semplificare facilmente le funzionalit\u00e0 che normalmente non danno il massimo in un ambiente “disaccoppiato”.<\/p>\n

Vi interessa saperne di pi\u00f9? Allora rivediamo insieme alcune nozioni di base di WordPress headless e poi passeremo a SvelteKit e come farlo funzionare nel vostro ambiente.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cos’\u00e8 WordPress headless?<\/h2>\n

Probabilmente conoscete gi\u00e0 la differenza tra il front-end e il back-end di WordPress<\/a>. Il back end \u00e8 il luogo in cui avvengono tutte le operazioni di base del CMS: si creano post e pagine, si installano i plugin, si progetta il tema e si modificano le impostazioni.<\/p>\n

Dall’altra parte, il front-end \u00e8 il sito web che viene visualizzato dai visitatori. WordPress, insieme ai suoi temi e plugin, utilizza varie funzioni come get_posts()<\/a> per prelevare e visualizzare i dati di cui ha bisogno.<\/p>\n

Ad esempio, prendiamo il widget dei Post Recenti che viene visualizzato sulla homepage. Utilizzando funzioni di questo tipo, accede ai dati dal back-end e mostra gli ultimi post nel front-end pubblico.<\/p>\n

$Gli articoli correlati mostrati sul blog di Kinsta.Il back-end e il front-end di WordPress sono strettamente intrecciati e, per molti versi, dipendono l’uno dall’altro per funzionare, ma questo non significa che siano inseparabili.<\/p>\n

\u00c8 qui che entra in gioco il concetto di “WordPress headless”: con questo sistema si separa, o disaccoppia, il back end di WordPress. In questo modo sarete liberi di collegarlo a qualsiasi tecnologia front-end vogliate utilizzare, non solo PHP, ma qualsiasi framework di sviluppo web<\/a> o persino un’applicazione.<\/p>\n

Questo ha la funzionalit\u00e0 aggiuntiva di permettere di utilizzare il CMS WordPress su pi\u00f9 canali. Potrete portare i post del blog o altri elementi del CMS su pi\u00f9 siti web, applicazioni mobili e ovunque vogliate.<\/p>\n

Nel complesso, WordPress headless offre un maggiore controllo sul CMS e la possibilit\u00e0 di utilizzare tecnologie solitamente incompatibili con esso. Inoltre, evita di dover scrivere un’intera applicazione da zero: si pu\u00f2 utilizzare il CMS integrato di WordPress per fare parte del lavoro.<\/p>\n

Cos’\u00e8 l’API REST?<\/h2>\n

Per far funzionare WordPress headless, \u00e8 necessario collegare le proprie applicazioni utilizzando un’API (Application Programming Interface). Le API permettono a due applicazioni diverse di interfacciarsi tra loro, in questo caso il back-end di WordPress e la vostra applicazione front-end personalizzata.<\/p>\n

Esistono molti tipi di API, ma l’API REST<\/a> \u00e8 una di quelle gi\u00e0 presenti in WordPress. Questo permette alle applicazioni esterne di recuperare in modo sicuro i dati dal back-end di WordPress senza dover passare per l’interfaccia di amministrazione.<\/p>\n

L’API REST \u00e8 utilizzata in diverse funzioni ufficiali di WordPress, tra cui l’editor di blocchi, e la maggior parte dei temi e dei plugin che richiedono un’API per funzionare la utilizzano.<\/p>\n

Questo vale anche per le applicazioni headless. Molte di queste utilizzano l’API REST per interfacciarsi con WordPress, recuperando i dati dal back-end e rendendoli dinamicamente attraverso l’applicazione front-end.<\/p>\n

L’API REST fornisce endpoint<\/a> che rappresentano diverse risorse di WordPress, come post, pagine, utenti, categorie e cos\u00ec via. Accedere a questi punti permette di visualizzare questi dati nel front-end.<\/p>\n

Sebbene sia possibile utilizzare l’API REST, SvelteKit si basa principalmente su una tecnologia diversa per molte delle sue funzioni: GraphQL.<\/p>\n

Cos’\u00e8 GraphQL?<\/h2>\n
\"GraphQL\"
GraphQL \u00e8 un linguaggio di interrogazione delle API.<\/figcaption><\/figure>\n

GraphQL<\/a> non \u00e8 un’API vera e propria, ma un linguaggio di interrogazione API. A differenza delle API REST<\/a> tradizionali, in cui i client devono spesso effettuare pi\u00f9 richieste a diversi endpoint per recuperare dati correlati, GraphQL permette di recuperare tutti i dati con un’unica richiesta.<\/p>\n

Nel complesso, GraphQL \u00e8 stato progettato per permettere di fare query pi\u00f9 concise in un framework veloce e ottimizzato. \u00c8 anche pi\u00f9 facile da imparare e meno complesso delle API REST.<\/p>\n

Per questi motivi, molti framework headless per WordPress utilizzano GraphQL al posto dell’API REST, o insieme ad essa. Sebbene GraphQL non sia incluso in WordPress come l’API REST, esistono dei plugin che si possono utilizzare per integrare questa funzionalit\u00e0 nel CMS.<\/p>\n

Grazie al framework ottimizzato, eviterete di recuperare i dati in eccesso o in difetto. Potrete recuperare i dati esatti di cui avete bisogno con un’unica query, il che \u00e8 molto pi\u00f9 semplice sia per la vostra rete e che per il vostro server.<\/p>\n

Cos’\u00e8 SvelteKit?<\/h2>\n
\"SvelteKit\"
SvelteKit \u00e8 un framework che si pu\u00f2 utilizzare per creare applicazioni e WordPress headless.<\/figcaption><\/figure>\n

SvelteKit<\/a> \u00e8 un framework web costruito su Svelte, un framework front-end open source simile a Next.js<\/a> o React<\/a> nelle funzioni. \u00c8 stato creato per semplificare il processo di creazione di applicazioni web e, sebbene non sia stato creato specificamente per WordPress headless, questa \u00e8 solo una delle tante applicazioni possibili.<\/p>\n

SvelteKit \u00e8 stato costruito su HTML, CSS e Javascript – niente di pi\u00f9. Ci\u00f2 lo rende facilissimo da usare e agnostico rispetto ai framework, quindi si pu\u00f2 usare insieme ad altri framework per creare un’applicazione front-end completamente dinamica o per costruire un sito statico<\/a>.<\/p>\n

Svelte \u00e8 stato lanciato nel 2016 e viene aggiornato attivamente ancora oggi. Il framework web SvelteKit \u00e8 arrivato qualche anno dopo, nel 2020. Entrambi sono molto conosciuti e amati nel panorama dello sviluppo web e permettono di scrivere codice semplice ed elegante.<\/p>\n

Perch\u00e9 usare SvelteKit per WordPress headless<\/h3>\n

Ci sono alcuni aspetti di WordPress headless che possono essere difficili da far funzionare. Grazie al design minimale di SvelteKit, questi problemi sono ridotti al minimo e rendono la configurazione di WordPress headless molto pi\u00f9 agevole.<\/p>\n

Ecco solo alcune delle funzionalit\u00e0 offerte da SvelteKit.<\/p>\n