Come creare una skin per la tua app Web con React e WordPress

Quindi ti sei formato come ingegnere web e ora vuoi creare un negozio online incredibilmente veloce per i tuoi clienti. L'elenco dei prodotti dovrebbe apparire in un istante e la ricerca non dovrebbe richiedere più di una frazione di secondo. È roba da sogni ad occhi aperti?

Non più. Bene, almeno non è nulla che non possa essere ottenuto con la combinazione dell'API REST di WordPress e React, una moderna libreria JavaScript.

Aspetta cosa? API REST di WordPress?

Sì, l'API REST di WordPress ti aiuterà a costruire le basi di back-end per la tua applicazione web. Questa è una buona scelta per la tecnologia back-end della tua applicazione web se stai creando una soluzione basata sui contenuti. WordPress interagirà senza problemi anche con altre tecnologie; potresti utilizzare Node.js come fulcro della tua applicazione per connetterti ad altri servizi RESTful.

L'API REST di WordPress è un punto di svolta per WordPress, che ora può essere tranquillamente definito un framework di applicazioni Web, non solo un CMS. Ora che il front-end e il back-end sono completamente disaccoppiati, WordPress può essere utilizzato come back-end di app mobili o come back-end per qualsiasi sistema incentrato sui contenuti.

Ma perché WordPress? Il motivo: rimarrai stupito dalle funzionalità che emergono fuori dagli schemi con WordPress. Otterrai un'ampia gestione degli utenti, una gestione dei media e un set di API incredibilmente intuitivo per gli sviluppatori per estendere il tuo lavoro.

In questo articolo, ti guiderò attraverso la creazione di un tema WordPress SPA (Single Page Application) utilizzando la libreria JavaScript chiamata React, collegandoti all'API REST di WP.

Passiamo alla costruzione del tema

Questo articolo presuppone che tu abbia già familiarità con le varie API WordPress esistenti, in particolare quelle che guidano lo sviluppo di temi per l'estetica del tuo sito e le funzionalità per i plugin del tuo sito. Presumo anche che tu abbia impostato la tua piattaforma di sviluppo per WordPress, come lo stack LAMP in un ambiente Linux o MacOS.

Per semplicità, tuttavia, mi riferirò solo ai percorsi assoluti visibili con la piattaforma XAMPP utilizzata con Windows.

Ora creiamo un'istanza di WordPress nel nostro localhost, chiamandolo "Celestial". Questo è il nome del tema WordPress che utilizzeremo per aiutarci a impostare la direzione per la creazione di temi futuri pronti per l'uso con le applicazioni Web basate sull'API REST di WordPress. Potresti già avere familiarità con la tanto amata gerarchia dei modelli di WordPress, ma con l'API REST hai l'opportunità di scoprire qualcosa di diverso!

Abbiamo quindi bisogno di creare una cartella per il tema all'interno della cartella wp-content\themes . Passare a C:\xampp\htdocs\celestial\wp-content\themes\ (o equivalente) e creare una cartella celestial . Aggiungi questi file all'interno della cartella del tema celestial :

1. index.php
   Il file catch-all per il tema.
2. style.css
   Questo contiene informazioni sul tema (e non sul CSS effettivo).
3. functions.php
   Scrivere le funzionalità e l'importazione di file CSS e JS.

Aggiungi un file immagine denominato screenshot.jpg se desideri visualizzare un'immagine per il tuo tema all'interno della dashboard.

Nota : il codice per ogni file è lungo alcune righe e può essere trovato su GitHub .

Quindi, accedi alla dashboard di WordPress, vai su Aspetto → Temi e seleziona "Celestial" come tema. Ora che le basi sono a posto, iniziamo a creare il tema.

Introduzione a React e Webpack per il tema

React è una libreria dell'interfaccia utente molto popolare supportata e gestita da Facebook. Secondo i risultati del Developer Survey 2017 di Stack Overflow, "React è il più amato dagli sviluppatori".

Per avviare il progetto, è necessario inizializzare il progetto come progetto NPM (Node Package Manager). Questo viene fatto con il comando npm init nel terminale (dopo aver installato Node.js e NPM sul tuo computer). L'inizializzazione del progetto richiederà alcune informazioni di configurazione. Dopo l'inizializzazione riuscita, NPM creerà un file package.json nella directory principale del tema. Questo file includerà i dettagli del progetto e tutte le dipendenze del progetto.

React è ora sotto licenza MIT, quindi utilizzeremo la versione 16 di React come libreria JavaScript per questo progetto. React ha alcune caratteristiche interessanti sotto il cofano, come il Virtual DOM (una rappresentazione del documento in memoria) e ha una serie di strumenti che lo circondano come React Router. React viene utilizzato anche nel progetto Calypso di WordPress, la dashboard per WordPress.com.

Ora installeremo i pacchetti NPM richiesti nel progetto:

1. Digita npm install --save react react-dom nel terminale e premi invio per installare i pacchetti.

   

   Poiché stiamo costruendo il tema come un'applicazione a pagina singola (SPA), abbiamo bisogno dell'aiuto di uno strumento come Webpack. Scriveremo il codice come componenti diversi e Webpack ci aiuterà a impacchettarli tutti insieme e a produrli come un singolo file .js o .css. In breve, è un bundle di moduli.
   
   Webpack deve prima essere installato a livello globale sul tuo computer. Per farlo, possiamo di nuovo utilizzare NPM.
2. Digita il comando npm install -g webpack per ottenere l'ultima versione stabile di Webpack installata a livello globale nel tuo sistema.
   
   Successivamente, installeremo i pacchetti NPM che supportano Webpack nella nostra app.
3. Vai al file package.json nel mio repository git e copia il resto delle dipendenze da lì nella sezione delle dipendenze del tuo package.json . Quindi esegui nuovamente npm install per installare tutti i pacchetti all'interno di package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   Quanto sopra è un elenco di tutti i pacchetti richiesti nel file package.json per questo progetto.
4. Copia le configurazioni da GitHub e incollale nel file webpack.config.js della cartella del tema.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Importante : Nota che module.exports → module → rules[3] → use → publicPath può cambiare a seconda di dove si trovano le immagini dist del tuo progetto in localhost. In caso contrario, le immagini potrebbero non essere visualizzate correttamente nell'app Web.
5. Successivamente, questi comandi possono essere utilizzati per compilare il progetto:
   • webpack o npm run build per compilare il progetto, oppure
   • webpack --watch o npm run watch per compilare il progetto e controllare le modifiche.

Nota : per una migliore comprensione di Webpack, leggi questo articolo di Joseph Zimmerman su Smashing Magazine .

Estensione dell'API REST di WordPress

L'API REST di WordPress viene fornita con molti endpoint diversi per il recupero di post, pagine, media e così via. Tuttavia, potrebbero non avere sempre tutti i dettagli nella loro risposta. Ad esempio, il metodo post non fornisce l'URL dell'immagine in primo piano o il nome dell'autore. Pertanto, dobbiamo effettuare chiamate separate a ciascuno di questi elementi.

Ma cosa succede se desideri che i tuoi dati vengano visualizzati nella risposta ai post? È qui che entra in gioco la magia dell'estensione dell'API REST. Il codice seguente aggiungerà due variabili aggiuntive nella risposta alla richiesta di post , ovvero author_name e featured_image_src . Il codice è all'interno del file functions.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

Una variabile JavaScript globale

Ci sono alcune costanti di WordPress (o note come "variabili") che utilizzeremo nell'app React. Queste saranno informazioni sui vari percorsi dell'applicazione (e in seguito saranno quelli specifici di WooCommerce).

Questa variabile è definita all'interno del file functions.php . Si chiamerà 'CelestialSettings' e verrà aggiunto a celestial-scripts , l'handle per il file app.js accodato :

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

Il codice sopra mostra un esempio di come portare le variabili di WordPress (PHP) nel front-end, una tecnica importante e molto utile quando si costruisce un tema disaccoppiato. Questa variabile oggetto contiene il titolo del sito, il percorso, l'URL per l'API e la radice e tre variabili relative a WooCommerce (spiegate più avanti).

Reagire e JSX

React è diverso dal resto delle principali librerie JavaScript. Intendo dire che generalmente scriviamo JavaScript all'interno del nostro HTML. Tuttavia, quando si tratta di React, scriviamo HTML all'interno del nostro codice JavaScript. Per essere più precisi, scriviamo JSX all'interno di JS. JSX è molto simile a HTML ma presenta alcune differenze. L'attributo class è scritto ad esempio come className . Questo viene quindi convertito in JavaScript semplice tramite Webpack e Babel e salvato all'interno di app.js .

Ci sono, tuttavia, alcune restrizioni con la scrittura di JSX. Ad esempio, possiamo avere un solo figlio all'interno del nostro metodo render() , che fungerà da elemento radice per un Component. Tuttavia, il vantaggio è che è più facile eseguire il debug. Possiamo sapere esattamente dove abbiamo commesso un errore, mentre nell'HTML normale il nostro errore generalmente non viene mostrato in modo esplicito. Scriveremo JSX per questo progetto e, pertanto, i file JavaScript avranno un'estensione di .jsx . Tuttavia, potrebbe anche essere .js se preferisci.

Crea i seguenti file all'interno della cartella src :

1. index.jsx (il file principale e quello che contiene le configurazioni di React Router)
2. header.jsx (il componente dell'intestazione)
3. footer.jsx (il componente footer)
4. posts.jsx (per l'archivio dei post)
5. post-list.jsx (componente per un singolo post all'interno di posts.jsx )
6. post.jsx (per un singolo post)
7. products.jsx (contiene tutti i prodotti di WooCommerce)
8. product.jsx (mostra un singolo prodotto da WooCommerce)
9. style.scss (per contenere tutto il codice CSS in formato SASS)

ReactDOM.render()

Il file index.jsx è la radice del progetto. Intendo dire che index.jsx contiene l'app componente di cui viene eseguito il rendering sul DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Gli altri componenti sono specificati all'interno di React Router e verranno caricati visitando i diversi percorsi.

Questo è il modo in cui scriviamo componenti modulari in cui tutti i diversi componenti finiscono in index.jsx .

Componenti con stato e senza stato

Avresti notato che i componenti venivano scritti in uno dei due modi seguenti:

1. const App = () => (
2. class Post extends React.Component {

Il primo modo è come scriviamo Stateless Components e il secondo è un esempio di Stateful Components. Apolide significa che il componente non contiene 'stato'. 'stato' è essenzialmente una variabile che contiene informazioni all'interno del componente e ogni volta che la variabile cambia, il componente viene riprodotto. I componenti con stato sono noti anche come "Componenti intelligenti". Le variabili di stato vengono quindi utilizzate per la comunicazione interna all'interno di quel componente.

Il secondo tipo, i componenti senza stato, non contengono la variabile di stato e talvolta sono chiamati "Componenti stupidi". Tuttavia, come i componenti con stato, hanno "props", che sono proprietà tramandate dai loro componenti principali.

I componenti con stato hanno i metodi del ciclo di vita React mentre quello senza stato ha solo il metodo render() che è il metodo predefinito per esso.

Reagire ai metodi del ciclo di vita

Questi sono metodi chiamati in diverse fasi del ciclo di vita del componente, che possiamo sovrascrivere per eseguire il nostro codice in quelle istanze. Stiamo utilizzando i seguenti metodi nella nostra applicazione:

• constructor()
  Chiamato prima del montaggio di un componente.
• componentDidMount()
  Richiamato immediatamente dopo il montaggio di un componente.
• render()
  Il metodo chiamato per eseguire il rendering del contenuto JSX (HTML).
• componentDidUpdate()
  Chiamato quando il componente viene aggiornato.
• componentWillUnmount()
  Richiamato quando un componente deve essere rimosso.

Nota : per ulteriori informazioni sui componenti e sul loro ciclo di vita, leggere la documentazione qui .

JavaScript promesse

Utilizzeremo JavaScript Promises per ottenere dati dalla nostra API REST di WordPress. Innanzitutto, abbiamo l'URL dell'API REST nel nostro functions.php , dove lo abbiamo aggiunto come variabile JavaScript a cui possiamo accedere dal front-end.

Utilizzeremo il metodo API di recupero di JavaScript per ottenere dati dai diversi endpoint. Stiamo aggiungendo un caricatore per mostrare all'utente mentre il contenuto viene recuperato:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Utilizzo del router React

React Router è la libreria che gestirà il routing lato client per la nostra applicazione. Il routing lato server è possibile con WordPress, ma per ottenere un'esperienza veramente SPA abbiamo bisogno dell'aiuto di React Router.

Dalla versione 4, React Router è stato suddiviso in tre pacchetti: react-router , react-router-dom e react-router-native . Useremo react-router-dom per questo progetto poiché è quello utilizzato nelle applicazioni web.

Poiché react-router-dom è già installato, possiamo scrivere la configurazione del router all'interno del file index.jsx . Il codice sarà il seguente:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

Il codice sopra si occuperà di tutto il routing, gestito dal lato client. Il * nell'ultima riga dice che qualsiasi altro percorso non menzionato sopra porterà l'utente alla pagina "404 non trovato".

Il <Link to=""> viene utilizzato al posto del tag <a href=””> per il collegamento tra pagine diverse utilizzando React Router:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Ottenere i dati di prova

Ora che hai creato il tema, è il momento di aggiungere alcuni dati. Un modo per aggiungere dati è creare il nostro contenuto. Tuttavia, esiste un modo più semplice (e migliore) per aggiungere dati al nostro sito WordPress. Questo metodo importa i dati segnaposto da un'origine esterna:

• Vai su https://codex.wordpress.org/Theme_Unit_Test e scarica i dati del test unitario del tema
• Vai su Strumenti > Importa > WordPress per installare l'importatore di WordPress.
• Dopo aver installato l'importatore di WordPress, fai clic su Esegui importatore.
• Fai clic su "Scegli file" nell'importatore
• Seleziona il file scaricato e importa i dati del test unitario del tema di WordPress

Ora devi selezionare il file theme-unit-test-data.xml e tutto il contenuto del segnaposto è ora sul tuo sito.

Integrazione WooCommerce

Ora siamo pronti per alimentare il nostro negozio usando React. A tale scopo utilizzeremo i file products.jsx e product.jsx , il cui codice è simile rispettivamente a posts.jsx e p ost.jsx .

Aggiungeremo altre tre variabili a CelestialSettings sotto 'woo' (vedi Una variabile JavaScript globale):

1. URL
2. consumer_key
3. consumer_secret

La chiave del consumatore e il segreto del consumatore devono essere generati da Dashboard → WooCommerce → Impostazioni → API → Chiavi/App .

Per l'URL woo, devi aggiungerlo manualmente (poiché WooCommerce consente il trasferimento solo su SSL, aggiungi l'URL con https, ovvero https://localhost/celestial/wp-json/wc/v2/ ).

Copia la chiave del consumatore e il segreto del consumatore e incollali nelle posizioni appropriate all'interno di functions.php . Questo servirà come autenticazione per l'accesso a WooCommerce tramite una chiamata API.

Visita la documentazione dell'API REST di WooCommerce per ulteriori informazioni sulla sua API. Il file products.jsx contiene il codice per popolare il negozio con i prodotti. I prodotti possono essere aggiunti da un amministratore dalla dashboard. Basta andare su Dashboard → Prodotti → Aggiungi nuovo e inserire i dettagli del prodotto.

Quando fai clic su un determinato prodotto, verrai indirizzato alla pagina product.jsx :

Il codice per la pagina sopra è simile a post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

Permalink

Affinché il tema funzioni correttamente, dobbiamo impostare i seguenti permalink in Dashboard → Impostazioni → Permalink :

1. In Impostazioni comuni → Struttura personalizzata : https://localhost/celestial/posts/%postname%/

2. In Permalink prodotto → Base personalizzata : /products/

Se non imposti i permalink come sopra, il tema potrebbe non funzionare come desiderato.

Una correzione WooCommerce

Quando navighi su localhost/celestial/products , è probabile che otterrai uno spazio vuoto in cui dovrebbero essere caricati i prodotti. Ciò accade perché WooCommerce ha bisogno di richieste autenticate mentre il nostro localhost non è https. Per risolvere il problema:

1. Visita https://localhost/celestial/wp-json/wc/v2/products. Questo ci darà un avvertimento:

1. Fare clic su AVANZATO > Procedi a localhost (non sicuro) .
2. Ora, se torni alla pagina dei prodotti, gli articoli verranno visualizzati correttamente.

Nota : se utilizzi Valet su un Mac, devi eseguire Valet Secure sul tuo sito per proteggere il sito locale con un certificato TLS. Questo è un altro modo per risolvere il problema.

Cos'è ScrollMagic?

ScrollMagic è una libreria che ci consente di eseguire determinate azioni durante lo scorrimento della pagina. Per utilizzare ScrollMagic accoderemo la libreria JavaScript ScrollMagic in functions.php . Stiamo usando ScrollMagic per due istanze in questo progetto:

1. Per caricare in modo lento i post all'interno del componente posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Post a caricamento lento all'interno del componente posts.jsx
2. Per mostrare un'animazione in dissolvenza per i post che appaiono scorrendo i post e i prodotti rispettivamente nei componenti posts.jsx e products.jsx :

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Applicazione di un'animazione di dissolvenza in entrata per i post visualizzati durante lo scorrimento

Ora siamo pronti per visualizzare il nostro tema dal front-end. Passa a localhost/celestial sul tuo browser web e guarda il tuo tema in azione.

E datti una pacca sulla spalla, perché ora hai creato con successo il tema!

Altri temi WordPress con librerie JavaScript

Se l'hai trovato utile, puoi dare un'occhiata ad altri fantastici temi WordPress disaccoppiati creati utilizzando moderne librerie/framework JavaScript:

• Foxhound: il primo tema disaccoppiato ad essere inserito nel repository dei temi di WordPress. Scritto da Kelly Dwan, questo tema utilizza React, Redux e React Router.
• Anadama React: un altro tema dello stesso autore, ma che utilizza Flux invece di Redux e Page invece di React Router.
• Wallace: Scritto da Kirby, questo tema utilizza Angular con l'API REST di WordPress.
• Picard: Scritto dagli stessi Automattic per mostrare le capacità dell'API REST di WordPress.
• React Verse: un tema React e Redux che ho scritto basato su Foxhound.

Prossimi passi

Le sezioni principali che volevo mostrarvi ora sono terminate. Puoi continuare con la costruzione del progetto per ulteriori conoscenze. Questi sono alcuni consigli che potresti seguire:

1. Un negozio a tutti gli effetti con il plug-in WooCommerce, inclusi checkout e carrello;
2. Una pagina per archivio, tag, tassonomia e così via;
3. Gestione dello stato con Redux o Flux.
   

Buona fortuna e buona codifica!