Cum să construiți un skin pentru aplicația dvs. web cu React și WordPress

Așa că v-ați pregătit ca inginer web și acum doriți să construiți un magazin online extraordinar de rapid pentru clienții dvs. Lista de produse ar trebui să apară într-o clipă, iar căutarea nu ar trebui să irosească mai mult de o fracțiune de secundă. Asta e chestia viselor cu ochii deschisi?

Nu mai. Ei bine, cel puțin nu este nimic care să nu poată fi realizat cu combinația dintre API-ul REST al WordPress și React, o bibliotecă JavaScript modernă.

Stai ce? API-ul REST WordPress?

Da, API-ul REST WordPress vă va ajuta să construiți fundația back-end pentru aplicația dvs. web. Aceasta este o alegere bună pentru tehnologia back-end a aplicației dvs. web dacă construiți o soluție bazată pe conținut. WordPress va interopera fără probleme și cu alte tehnologii; ați putea folosi Node.js ca obiectiv al aplicației dvs. pentru a vă conecta la alte servicii RESTful.

API-ul REST WordPress este un schimbător de jocuri pentru WordPress, care acum poate fi numit în siguranță un cadru de aplicație web - nu doar un CMS. Acum că front-end-ul și back-end-ul sunt complet decuplate, WordPress poate fi folosit ca back-end pentru aplicații mobile sau ca back-end pentru orice sistem care se concentrează pe conținut.

Dar de ce WordPress? Motivul: Vei fi uimit de funcționalitățile care ies din cutie cu WordPress. Veți obține o gestionare extinsă a utilizatorilor, management media și un set de API-uri incredibil de ușor de dezvoltat pentru a vă extinde activitatea.

În acest articol, vă voi ghida prin construirea unei teme WordPress SPA (aplicație pentru o singură pagină) folosind biblioteca JavaScript numită React, conectându-vă la API-ul WP REST.

Să trecem la construirea temei

Acest articol presupune că sunteți deja familiarizat cu diferitele API-uri WordPress existente, în special cu cele care conduc la dezvoltarea temelor pentru estetica site-ului dvs. și cu funcționalitățile pentru pluginurile site-ului dvs. De asemenea, presupun că v-ați configurat platforma de dezvoltare pentru WordPress, cum ar fi stiva LAMP într-un mediu Linux sau MacOS.

Pentru simplitate, totuși, mă voi referi numai la căile absolute ca fiind vizibile cu platforma XAMPP care este utilizată cu Windows.

Acum, să creăm o instanță de WordPress în gazda noastră locală, numind-o „Celestial”. Acesta este numele temei WordPress pe care o vom folosi pentru a ne ajuta să stabilim direcția pentru construirea viitoarelor teme gata de utilizare cu aplicații web alimentate de API-ul REST WordPress. Poate că ești deja familiarizat cu ierarhia șabloanelor mult iubită a WordPress, dar cu API-ul REST, ai ocazia să descoperi ceva diferit!

Apoi trebuie să creăm un folder pentru temă în folderul wp-content\themes . Navigați la C:\xampp\htdocs\celestial\wp-content\themes\ (sau echivalent) și creați un folder celestial . Adăugați aceste fișiere în folderul cu tema celestial :

1. index.php
   Fișierul catch-all pentru temă.
2. style.css
   Acesta conține informații despre temă (și nu CSS real).
3. functions.php
   Pentru a scrie funcționalitatea și importul fișierelor CSS și JS.

Adăugați un fișier imagine numit screenshot.jpg dacă doriți o imagine pentru tema dvs. afișată în tabloul de bord.

Notă : Codul pentru fiecare fișier are câteva rânduri și poate fi găsit pe GitHub .

Apoi, conectați-vă la tabloul de bord WordPress, mergeți la Aspect → Teme și selectați „Celestial” ca temă. Acum că fundația este la locul său, să trecem la crearea temei.

Noțiuni introductive cu React și Webpack pentru temă

React este o bibliotecă UI foarte populară, susținută și întreținută de Facebook. Conform rezultatelor sondajului pentru dezvoltatori din 2017 de la Stack Overflow, „React este cel mai iubit dintre dezvoltatori”.

Pentru a începe proiectul, trebuie să inițializați proiectul ca proiect NPM (Node Package Manager). Acest lucru se face cu comanda npm init în terminal (după ce ați instalat Node.js și NPM pe computer). Inițializarea proiectului vă va solicita anumite informații de configurare. După inițializarea cu succes, NPM va crea un fișier package.json în directorul rădăcină al temei. Acest fișier va include detaliile proiectului și toate dependențele proiectului.

React este acum sub licență MIT, așa că vom folosi versiunea 16 a React ca bibliotecă JavaScript pentru acest proiect. React are câteva caracteristici interesante sub capotă, cum ar fi Virtual DOM (o reprezentare a documentului în memorie) și are o serie de instrumente care îl înconjoară, cum ar fi React Router. React este folosit și în proiectul Calypso al WordPress - tabloul de bord pentru WordPress.com.

Acum vom instala pachetele NPM necesare în proiect:

1. Tastați npm install --save react react-dom în terminal și apăsați Enter pentru a instala pachetele.

   

   Deoarece construim tema ca o aplicație cu o singură pagină (SPA), avem nevoie de ajutorul unui instrument precum Webpack. Vom scrie cod ca componente diferite, iar Webpack ne va ajuta să le ambalăm pe toate împreună și să le scoatem ca un singur fișier .js sau .css. Pe scurt, este un bundler de module.
   
   Webpack trebuie mai întâi să fie instalat global pe computer. Pentru a face asta, putem folosi din nou NPM.
2. Introdu comanda npm install -g webpack pentru a obține cea mai recentă versiune stabilă a Webpack instalată la nivel global în sistemul tău.
   
   În continuare, vom instala pachete NPM care acceptă Webpack în aplicația noastră.
3. Accesați fișierul package.json din depozitul meu git și copiați restul dependențelor de acolo în secțiunea de dependențe a pachetului.json . Apoi rulați npm install din nou pentru a instala toate pachetele din 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" }

   
   Mai sus este o listă a tuturor pachetelor necesare din fișierul package.json pentru acest proiect.
4. Copiați configurațiile din GitHub și inserați-le în fișierul webpack.config.js al folderului cu 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 }) ] }

   
   Important : Rețineți că module.exports → module → rules[3] → use → publicPath se poate schimba în funcție de locul în care sunt situate imaginile dist ale proiectului dumneavoastră în localhost. Dacă acest lucru este greșit, este posibil ca imaginile să nu se afișeze corect în aplicația web.
5. Ulterior, aceste comenzi pot fi folosite pentru a compila proiectul:
   • webpack sau npm run build pentru a compila proiectul sau
   • webpack --watch sau npm run watch pentru a compila proiectul și a urmări modificările.

Notă : Pentru a înțelege mai bine Webpack, citiți acest articol de Joseph Zimmerman pe Smashing Magazine .

Extinderea API-ului REST WordPress

API-ul REST WordPress vine cu multe puncte finale diferite pentru preluarea postărilor, paginilor, media și așa mai departe. Cu toate acestea, este posibil să nu aibă întotdeauna toate detaliile în răspunsul lor. De exemplu, metoda postărilor nu oferă adresa URL a imaginii prezentate sau numele autorului. Prin urmare, trebuie să facem apeluri separate la fiecare dintre aceste elemente.

Dar ce se întâmplă dacă ai vrea să apară propriile tale date în răspunsul la postări? Aici intervine magia extinderii API-ului REST. Următorul cod va adăuga două variabile suplimentare în răspunsul la cererea de postări , și anume author_name și featured_image_src . Codul se află în fișierul 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'); }

O variabilă JavaScript globală

Există anumite constante WordPress (sau cunoscute ca „variabile”) pe care le vom folosi în aplicația React. Acestea vor fi informații despre diferitele rute ale aplicației (și mai târziu vor fi cele specifice WooCommerce).

Această variabilă este definită în fișierul functions.php . Acesta va fi numit „CelestialSettings” și va fi atașat la celestial-scripts , mânerul pentru fișierul app.js pus în coadă:

 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' ), ) ) ) );

Codul de mai sus arată un exemplu de aducere a variabilelor WordPress (PHP) la front-end, o tehnică importantă și foarte utilă atunci când construiești o temă decuplată. Această variabilă obiect conține titlul site-ului, calea, adresa URL pentru API și rădăcină și trei variabile legate de WooCommerce (explicate mai târziu).

React și JSX

React este diferit de restul bibliotecilor majore JavaScript. Ceea ce vreau să spun prin asta este că, în general, scriem JavaScript în HTML-ul nostru. Cu toate acestea, când vine vorba de React, scriem HTML în codul nostru JavaScript. Pentru a fi mai precis, scriem JSX în JS. JSX este foarte asemănător cu HTML, dar are câteva diferențe. Atributul class este scris ca className , de exemplu. Acesta este apoi convertit în JavaScript simplu prin Webpack și Babel și salvat în app.js.

Există, totuși, câteva restricții la scrierea JSX. De exemplu, putem avea un singur copil în metoda noastră render() , care va servi ca element rădăcină pentru o componentă. Cu toate acestea, avantajul este că este mai ușor de depanat. Putem ști exact unde am făcut o greșeală, în timp ce în HTML normal, eroarea noastră nu va fi afișată în mod explicit. Vom scrie JSX pentru acest proiect și, prin urmare, fișierele JavaScript vor avea extensia .jsx . Cu toate acestea, ar putea fi și .js dacă preferați acest lucru.

Creați următoarele fișiere în folderul src :

1. index.jsx (fișierul principal și cel care conține configurațiile React Router)
2. header.jsx (componenta antet)
3. footer.jsx (componenta subsol)
4. posts.jsx (pentru arhiva de postări)
5. post-list.jsx (componentă pentru o postare individuală în posts.jsx )
6. post.jsx (pentru o singură postare)
7. products.jsx (conține toate produsele de la WooCommerce)
8. product.jsx (afișează un singur produs de la WooCommerce)
9. style.scss (pentru a conține tot codul CSS în format SASS)

ReactDOM.render()

Fișierul index.jsx este rădăcina proiectului. Ceea ce vreau să spun prin asta este că index.jsx conține aplicația componentă care este redată către 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 );

Celelalte componente sunt specificate în React Router și vor fi încărcate la vizitarea diferitelor rute.

Acesta este modul în care scriem componente modulare în care toate componentele diferite se termină în cele din urmă la index.jsx .

Componente Stateful vs. Stateless

Ați fi observat că componentele sunt scrise în oricare dintre următoarele două moduri:

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

Prima modalitate este modul în care scriem Componente fără stat, iar al doilea este un exemplu de Componente Stateful. Apatrid înseamnă că componenta nu are „stare” în ea. „starea” este în esență o variabilă care conține informații în componentă și de fiecare dată când variabila se modifică, componenta este re-redată. Componentele stateful sunt cunoscute și sub denumirea de „Componente inteligente”. Variabilele de stare sunt astfel utilizate pentru comunicarea interioară în cadrul acelei componente.

Al doilea tip, Componentele fără stat nu au variabila de stare în ele și uneori se numesc „Componente stupide”. Cu toate acestea, la fel ca Componentele Stateful, au „recuzite”, care sunt proprietăți transmise lor de la componentele lor părinte.

Componentele stateful au metodele ciclului de viață React, în timp ce cea Stateless are doar metoda render() care este metoda implicită pentru aceasta.

Metode React Lifecycle

Acestea sunt metode numite în diferite etape din ciclul de viață al componentei, pe care le putem suprascrie pentru a rula propriul cod în acele instanțe. Utilizăm următoarele metode în aplicația noastră:

• constructor()
  Apelat înainte ca o componentă să fie montată.
• componentDidMount()
  Invocat imediat după ce o componentă este montată.
• render()
  Metoda care este apelată pentru a reda conținutul JSX (HTML).
• componentDidUpdate()
  Apelat când componenta este actualizată.
• componentWillUnmount()
  Invocat atunci când o componentă urmează să fie eliminată.

Notă : Pentru a afla mai multe despre Componente și ciclul lor de viață, citiți documentația aici .

Promisiuni JavaScript

Vom folosi JavaScript Promises pentru a obține date din API-ul nostru WordPress REST. În primul rând, avem URL-ul către API-ul REST în functions.php , unde am adăugat-o ca variabilă JavaScript pe care o putem accesa de pe front-end.

Vom folosi metoda API de preluare a JavaScript pentru a obține date de la diferite puncte finale. Adăugăm un încărcător pentru a arăta utilizatorului în timp ce conținutul este preluat:

 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(); }); }

Utilizarea routerului React

React Router este biblioteca care se va ocupa de rutarea clientului pentru aplicația noastră. Rutarea pe server este posibilă cu WordPress, dar pentru a obține o experiență cu adevărat SPA avem nevoie de ajutorul lui React Router.

Începând cu versiunea 4, React Router a fost împărțit în trei pachete: react-router , react-router-dom și react-router-native . Vom folosi react-router-dom pentru acest proiect, deoarece acesta este cel folosit în aplicațiile web.

Deoarece react-router-dom este deja instalat, putem scrie configurația routerului în fișierul index.jsx . Codul va fi după cum urmează:

 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') );

Codul de mai sus se va ocupa de toată rutarea, gestionată în partea clientului. * din ultima linie spune că orice altă rută care nu este menționată mai sus va duce utilizatorul la pagina „404 Not Found”.

Eticheta <Link to=""> este folosită în locul etichetei <a href=””> pentru conectarea între diferite pagini folosind 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>

Obținerea datelor de testare

Acum că ați creat tema, este timpul să adăugați câteva date. O modalitate de a adăuga date este să ne creăm propriul conținut. Cu toate acestea, există o modalitate mai ușoară (și mai bună) de a adăuga date pe site-ul nostru WordPress. Această metodă importă date de substituent dintr-o sursă externă:

• Accesați https://codex.wordpress.org/Theme_Unit_Test și descărcați datele testului unitar al temei
• Mergeți la Instrumente > Import > WordPress pentru a instala importatorul WordPress.
• După ce importatorul WordPress este instalat, faceți clic pe Run Importer.
• Faceți clic pe „Alegeți fișierul” în importator
• Selectați fișierul descărcat și importați datele testului unitar al temei WordPress

Acum trebuie să selectați fișierul theme-unit-test-data.xml și tot conținutul substituentului este acum pe site-ul dvs.

Integrare WooCommerce

Acum, suntem gata să ne alimentam magazinul folosind React. Vom folosi fișierele products.jsx și product.jsx în acest scop, al căror cod este similar cu posts.jsx și, respectiv, p ost.jsx .

Vom adăuga încă trei variabile la CelestialSettings sub „woo” (consultați O variabilă JavaScript globală):

1. URL
2. consumer_key
3. consumer_secret

Cheia de consumator și secretul de consumator trebuie să fie generate din Dashboard → WooCommerce → Settings → API → Keys/Apps .

Pentru URL-ul woo, trebuie să îl adăugați manual (din moment ce WooCommerce permite transferul numai prin SSL, adăugați URL-ul cu https, adică https://localhost/celestial/wp-json/wc/v2/ ).

Copiați cheia Consumer și Consumer secret și lipiți-le în locurile potrivite din functions.php . Aceasta va servi drept autentificare pentru accesarea WooCommerce printr-un apel API.

Vizitați documentația WooCommerce REST API pentru mai multe informații despre API-ul său. Fișierul products.jsx are codul pentru popularea magazinului cu produse. Produsele pot fi adăugate de un administrator din tabloul de bord. Doar accesați Tabloul de bord → Produse → Adăugați nou și introduceți detaliile produsului.

Când faceți clic pe un anumit produs, veți fi direcționat către pagina product.jsx :

Codul pentru pagina de mai sus este similar cu 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-uri

Pentru ca tema să funcționeze corect, trebuie să setăm următoarele permalink-uri în Dashboard → Setări → Permalink -uri :

1. Sub Setări comune → Structură personalizată : https://localhost/celestial/posts/%postname%/

2. Sub Permalink-uri pentru produse → Bază personalizată : /products/

Dacă nu setați permalinkurile ca mai sus, este posibil ca tema să nu funcționeze așa cum doriți.

O remediere WooCommerce

Când navigați la localhost/celestial/products , sunt șanse să obțineți un spațiu liber unde produsele ar trebui să fie încărcate. Acest lucru se întâmplă deoarece WooCommerce are nevoie de solicitări autentificate, în timp ce gazda noastră locală nu este https. Pentru a remedia problema:

1. Vizitați https://localhost/celestial/wp-json/wc/v2/products. Acest lucru ne va da un avertisment:

1. Faceți clic pe AVANZAT > Continuați la localhost (nesigur) .
2. Acum, dacă te întorci la pagina de produse, articolele vor fi afișate corect.

Notă : Dacă utilizați Valet pe un Mac, trebuie să rulați Valet Secure pe site-ul dvs. pentru a securiza site-ul local cu un certificat TLS. Acesta este un alt mod de a rezolva problema.

Ce este ScrollMagic?

ScrollMagic este o bibliotecă care ne permite să efectuăm anumite acțiuni atunci când derulăm prin pagină. Pentru a folosi ScrollMagic vom pune în coadă biblioteca JavaScript ScrollMagic în functions.php . Utilizăm ScrollMagic pentru două cazuri în acest proiect:

1. Pentru a încărca leneș postările din componenta 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(); } }); }

   
   Încărcare leneșă a postărilor din componenta posts.jsx
2. Pentru a afișa o animație cu fade-in pentru postările care apar prin derularea postărilor și produselor din componentele posts.jsx și, respectiv, 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); }); }

   
   Aplicarea unei animații cu fade-in pentru postările care apar pe măsură ce are loc derularea

Acum suntem gata să vedem tema noastră din front-end. Navigați la localhost/celestial în browserul dvs. web și vedeți tema în acțiune.

Și mângâie-te pe spate, pentru că acum ai creat cu succes tema!

Alte teme WordPress cu biblioteci JavaScript

Dacă ați găsit acest lucru util, puteți arunca o privire la alte teme WordPress decuplate minunate, construite folosind biblioteci/cadre JavaScript moderne:

• Foxhound: prima temă decuplată care a ajuns în depozitul de teme WordPress. Scrisă de Kelly Dwan, această temă folosește React, Redux și React Router.
• Anadama React: O altă temă a aceluiași autor, dar folosind Flux în loc de Redux și Page în loc de React Router.
• Wallace: Scrisă de Kirby, această temă folosește Angular cu API-ul REST WordPress.
• Picard: Scris de Automattic înșiși pentru a prezenta capacitatea API-ului REST WordPress.
• React Verse: O temă React și Redux pe care am scris-o pe baza Foxhound.

Pasii urmatori

Secțiunile principale pe care am vrut să vi le arăt sunt acum terminate. Puteți continua cu construirea proiectului pentru cunoștințe suplimentare. Acestea sunt câteva recomandări pe care le puteți urma:

1. Un magazin cu drepturi depline cu pluginul WooCommerce, inclusiv finalizarea comenzii și coșul de cumpărături;
2. Câte o pagină pentru arhivă, etichetă, taxonomie și așa mai departe;
3. Management de stat cu Redux sau Flux.
   

Succes și codare fericită!