Jak zbudować skórkę dla swojej aplikacji internetowej za pomocą React i WordPress

Jesteś inżynierem stron internetowych, a teraz chcesz zbudować niesamowicie szybki sklep internetowy dla swoich klientów. Lista produktów powinna pojawić się błyskawicznie, a wyszukiwanie nie powinno zmarnować więcej niż ułamek sekundy. Czy to marzenie?

Nigdy więcej. Cóż, przynajmniej jest to coś, czego nie można osiągnąć za pomocą połączenia REST API WordPressa i React, nowoczesnej biblioteki JavaScript.

Czekaj, co? WordPress REST API?

Tak, WordPress REST API pomoże Ci zbudować zaplecze dla Twojej aplikacji internetowej. Jest to dobry wybór dla technologii zaplecza aplikacji sieci Web, jeśli tworzysz rozwiązanie oparte na treści. WordPress będzie również bezproblemowo współpracować z innymi technologiami; możesz użyć Node.js jako centrum swojej aplikacji do łączenia się z innymi usługami RESTful.

Interfejs API REST WordPressa zmienia zasady gry dla WordPressa, który można teraz śmiało nazwać frameworkiem aplikacji internetowych — a nie tylko CMS. Teraz, gdy front i back-end są całkowicie oddzielone, WordPress może być używany jako back-end aplikacji mobilnej lub jako back-end dla dowolnego systemu skupiającego się na treści.

Ale dlaczego WordPress? Powód: będziesz zaskoczony funkcjonalnościami, które pojawiają się po wyjęciu z pudełka z WordPress. Otrzymasz rozbudowane zarządzanie użytkownikami, zarządzanie mediami i niesamowicie przyjazny dla programistów zestaw interfejsów API, które rozszerzą Twoją pracę.

W tym artykule przeprowadzę Cię przez proces budowania motywu SPA (Single Page Application) WordPress przy użyciu biblioteki JavaScript o nazwie React, łączącej się z WP REST API.

Przejdźmy do budowania motywu

W tym artykule zakładamy, że znasz już różne istniejące interfejsy API WordPress, w szczególności te, które napędzają rozwój motywów pod kątem estetyki Twojej witryny i funkcji wtyczek Twojej witryny. Zakładam również, że skonfigurowałeś platformę programistyczną dla WordPressa, taką jak stos LAMP w środowisku Linux lub MacOS.

Jednak dla uproszczenia odniosę się tylko do ścieżek bezwzględnych widocznych na platformie XAMPP, która jest używana w systemie Windows.

Teraz utwórzmy instancję WordPressa na naszym lokalnym hoście, nazywając ją „Celestial”. Jest to nazwa motywu WordPress, którego zamierzamy użyć, aby pomóc nam wyznaczyć kierunek budowania przyszłych motywów gotowych do użycia z aplikacjami internetowymi wspieranymi przez WordPress REST API. Być może znasz już ulubioną hierarchię szablonów WordPressa, ale dzięki API REST masz okazję odkryć coś innego!

Następnie musimy utworzyć folder dla motywu w folderze wp-content\themes . Przejdź do C:\xampp\htdocs\celestial\wp-content\themes\ (lub odpowiednika) i utwórz folder celestial . Dodaj te pliki do folderu motywów celestial :

1. index.php
   Plik typu catch-all dla motywu.
2. style.css
   Zawiera informacje o motywie (a nie rzeczywisty CSS).
3. functions.php
   Pisanie funkcjonalności i importowanie plików CSS i JS.

Dodaj plik obrazu o nazwie screenshot.jpg , jeśli chcesz, aby obraz do motywu był wyświetlany w panelu.

Uwaga : Kod każdego pliku ma kilka linijek i można go znaleźć na GitHub .

Następnie zaloguj się do pulpitu WordPress, przejdź do Wygląd → Motywy i wybierz motyw „Niebiański”. Teraz, gdy podstawa jest na swoim miejscu, przejdźmy do tworzenia motywu.

Pierwsze kroki z React i pakietem internetowym dla motywu

React to bardzo popularna biblioteka interfejsu użytkownika obsługiwana i utrzymywana przez Facebooka. Według wyników badania Developer Survey 2017 przeprowadzonego przez Stack Overflow, „React jest najbardziej lubiany przez programistów”.

Aby rozpocząć projekt, musisz zainicjować projekt jako projekt NPM (Node Package Manager). Odbywa się to za pomocą polecenia npm init w terminalu (po zainstalowaniu Node.js i NPM na komputerze). Inicjalizacja projektu poprosi Cię o podanie pewnych informacji konfiguracyjnych. Po pomyślnej inicjalizacji NPM utworzy plik package.json w katalogu głównym motywu. Ten plik będzie zawierał szczegóły projektu i wszystkie zależności projektu.

React jest teraz objęty licencją MIT, więc będziemy używać wersji 16 Reacta jako biblioteki JavaScript dla tego projektu. React ma pod maską kilka fajnych funkcji, takich jak Virtual DOM (reprezentacja dokumentu w pamięci) i otacza go szereg narzędzi, takich jak React Router. React jest również używany w projekcie Calypso WordPress — pulpicie nawigacyjnym WordPress.com.

Teraz zainstalujemy w projekcie wymagane pakiety NPM:

1. Wpisz npm install --save react react-dom w terminalu i naciśnij enter, aby zainstalować pakiety.

   

   Ponieważ budujemy motyw jako aplikację jednostronicową (SPA), potrzebujemy pomocy narzędzia takiego jak Webpack. Będziemy pisać kod jako różne komponenty, a Webpack pomoże nam spakować je wszystkie razem i wyprowadzić jako pojedynczy plik .js lub .css. Krótko mówiąc, jest to pakiet modułów.
   
   Webpack musi być najpierw zainstalowany globalnie na Twoim komputerze. W tym celu ponownie możemy wykorzystać NPM.
2. Wpisz polecenie npm install -g webpack , aby uzyskać najnowszą stabilną wersję Webpack zainstalowaną globalnie w systemie.
   
   Następnie zainstalujemy w naszej aplikacji pakiety NPM obsługujące Webpack.
3. Przejdź do pliku package.json w moim repozytorium git i skopiuj stamtąd pozostałe zależności do sekcji zależności package.json . Następnie uruchom ponownie npm install , aby zainstalować wszystkie pakiety w 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" }

   
   Powyżej znajduje się lista wszystkich wymaganych pakietów w pliku package.json dla tego projektu.
4. Skopiuj konfiguracje z usługi GitHub i wklej je do pliku webpack.config.js folderu motywu.

    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 }) ] }

   
   Ważne : Proszę zauważyć, że module.exports → module → rules[3] → use → publicPath może się zmieniać w zależności od tego, gdzie w localhost znajdują się obrazy odległości projektu. Jeśli to nieprawda, obrazy mogą nie wyświetlać się poprawnie w aplikacji internetowej.
5. Następnie do kompilacji projektu można użyć tych poleceń:
   • webpack lub npm run build w celu skompilowania projektu lub
   • webpack --watch lub npm run watch , aby skompilować projekt i obserwować zmiany.

Uwaga : Aby lepiej zrozumieć Webpack, przeczytaj ten artykuł Josepha Zimmermana w Smashing Magazine .

Rozszerzenie interfejsu API REST WordPress

Interfejs API REST WordPressa zawiera wiele różnych punktów końcowych do pobierania postów, stron, multimediów i tak dalej. Jednak nie zawsze mogą zawierać wszystkie szczegóły w swojej odpowiedzi. Na przykład metoda postów nie podaje adresu URL polecanego obrazu ani nazwiska autora. Dlatego musimy wykonać osobne wywołania do każdego z tych elementów.

Ale co, jeśli chcesz, aby Twoje własne dane pojawiały się w odpowiedzi na posty? W tym miejscu pojawia się magia rozszerzenia interfejsu API REST. Poniższy kod doda dwie dodatkowe zmienne w odpowiedzi na żądanie postów , a mianowicie author_name i featured_image_src . Kod znajduje się w pliku 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'); }

Globalna zmienna JavaScript

Istnieją pewne stałe WordPress (znane jako „zmienne”), których będziemy używać w całej aplikacji React. Będą to informacje o różnych trasach aplikacji (a później będą one specyficzne dla WooCommerce).

Ta zmienna jest zdefiniowana w pliku functions.php . Będzie się nazywać „CelestialSettings” i zostanie dołączony do celestial-scripts , uchwytu umieszczonego w kolejce pliku app.js :

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

Powyższy kod pokazuje przykład pobierania zmiennych WordPressa (PHP) do front-endu, ważnej i bardzo przydatnej techniki podczas budowania oddzielonego motywu. Ta zmienna obiektu zawiera tytuł strony, ścieżkę, adres URL API i root oraz trzy zmienne związane z WooCommerce (wyjaśnione później).

Reaguj i JSX

React różni się od pozostałych głównych bibliotek JavaScript. Mam na myśli to, że zazwyczaj piszemy JavaScript w naszym kodzie HTML. Jednak w przypadku Reacta, w kodzie JavaScript piszemy HTML. Aby być bardziej dokładnym, piszemy JSX wewnątrz JS. JSX jest bardzo podobny do HTML, ale ma kilka różnic. Atrybut class jest na przykład zapisany jako className . Jest on następnie konwertowany do zwykłego JavaScript za pomocą Webpack i Babel i zapisywany w app.js .

Istnieje jednak kilka ograniczeń związanych z pisaniem JSX. Na przykład możemy mieć tylko jedno dziecko w naszej metodzie render() , które będzie służyć jako element główny dla Component. Jednak zaletą jest to, że łatwiej jest debugować. Możemy dokładnie wiedzieć, gdzie popełniliśmy błąd, podczas gdy w normalnym HTML nasz błąd generalnie nie zostanie wyraźnie pokazany. Będziemy pisać JSX dla tego projektu, dlatego pliki JavaScript będą miały rozszerzenie .jsx . Jednak może to być również .js , jeśli wolisz.

Utwórz następujące pliki w folderze src :

1. index.jsx (plik główny i ten, który zawiera konfiguracje routera React)
2. header.jsx (komponent nagłówka)
3. footer.jsx (komponent stopki)
4. posts.jsx (dla archiwum postów)
5. post-list.jsx (komponent pojedynczego posta w ramach posts.jsx )
6. post.jsx (dla pojedynczego posta)
7. products.jsx (zawiera wszystkie produkty z WooCommerce)
8. product.jsx (wyświetla pojedynczy produkt z WooCommerce)
9. style.scss (zawiera cały kod CSS w formacie SASS)

ReactDOM.render()

Plik index.jsx jest katalogiem głównym projektu. Mam na myśli to, że index.jsx zawiera komponent App, który jest renderowany do 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 );

Pozostałe komponenty są określone w React Router i zostaną załadowane po odwiedzeniu różnych tras.

W ten sposób piszemy komponenty modułowe, w których wszystkie różne komponenty ostatecznie kończą się na index.jsx .

Komponenty stanowe a komponenty bezstanowe

Zauważyłbyś, że komponenty są zapisywane na jeden z dwóch poniższych sposobów:

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

Pierwszy sposób to sposób pisania komponentów bezstanowych, a drugi to przykład komponentów stanowych. Bezstanowy oznacza, że ​​komponent nie zawiera w sobie słowa „stan”. „stan” jest zasadniczo zmienną, która zawiera informacje w komponencie i za każdym razem, gdy zmienna się zmienia, komponent jest ponownie renderowany. Komponenty stanowe są również nazywane „Komponentami inteligentnymi”. Zmienne stanu są zatem używane do wewnętrznej komunikacji w tym komponencie.

Drugi typ, komponenty bezstanowe, nie mają w sobie zmiennej stanu i czasami nazywają się „dumbowymi komponentami”. Jednak, podobnie jak Stateful Components, mają „podstawy”, które są właściwościami przekazywanymi im z ich komponentów nadrzędnych.

Komponenty stanowe mają metody cyklu życia Reacta, podczas gdy bezstanowe ma tylko metodę render() , która jest dla nich metodą domyślną.

Metody cyklu życia React

Są to metody wywoływane na różnych etapach cyklu życia komponentu, które możemy nadpisać, aby uruchomić w tych instancjach nasz własny kod. W naszej aplikacji wykorzystujemy następujące metody:

• constructor()
  Wywoływana przed zamontowaniem komponentu.
• componentDidMount()
  Wywoływane natychmiast po zamontowaniu komponentu.
• render()
  Metoda, która jest wywoływana do renderowania treści JSX (HTML).
• componentDidUpdate()
  Wywoływane, gdy komponent jest aktualizowany.
• componentWillUnmount()
  Wywoływany, gdy składnik ma zostać usunięty.

Uwaga : Aby dowiedzieć się więcej o składnikach i ich cyklu życia, przeczytaj dokumentację tutaj .

Obietnice JavaScript

Użyjemy obietnic JavaScript, aby uzyskać dane z naszego WordPress REST API. Po pierwsze, mamy adres URL do REST API w naszym functions.php , gdzie dodaliśmy go jako zmienną JavaScript, do której możemy uzyskać dostęp z poziomu interfejsu użytkownika.

Użyjemy metody Fetch API JavaScript, aby pobrać dane z różnych punktów końcowych. Dodajemy moduł ładujący, aby pokazać użytkownikowi podczas pobierania treści:

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

Korzystanie z routera React

React Router to biblioteka, która będzie obsługiwać routing po stronie klienta dla naszej aplikacji. Routing po stronie serwera jest możliwy dzięki WordPress, ale aby osiągnąć prawdziwie SPA, potrzebujemy pomocy React Router.

Od wersji 4 React Router został podzielony na trzy pakiety: React react-router , React react-router-dom i React react-router-native . W tym projekcie react-router-dom , ponieważ jest on używany w aplikacjach internetowych.

Ponieważ react-router-dom jest już zainstalowany, możemy zapisać konfigurację routera w pliku index.jsx . Kod będzie wyglądał następująco:

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

Powyższy kod zajmie się całym routingiem obsługiwanym po stronie klienta. Znak * w ostatnim wierszu oznacza, że ​​każda inna trasa niewymieniona powyżej przeniesie użytkownika na stronę „404 Nie znaleziono”.

Tag <Link to=""> jest używany zamiast tagu <a href=””> do łączenia różnych stron za pomocą 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>

Pobieranie danych testowych

Po utworzeniu motywu nadszedł czas, aby dodać trochę danych. Jednym ze sposobów dodawania danych jest tworzenie własnych treści. Istnieje jednak łatwiejszy (i lepszy) sposób dodawania danych do naszej witryny WordPress. Ta metoda importuje dane zastępcze z zewnętrznego źródła:

• Wejdź na https://codex.wordpress.org/Theme_Unit_Test i pobierz dane testu jednostki motywu
• Przejdź do Narzędzia> Importuj> WordPress , aby zainstalować importer WordPress.
• Po zainstalowaniu importera WordPress kliknij Uruchom importera.
• Kliknij „Wybierz plik” w importerze
• Wybierz pobrany plik i zaimportuj dane testowe jednostki motywu WordPress

Teraz musisz wybrać plik theme-unit-test-data.xml , a cała zawartość zastępcza znajduje się teraz w Twojej witrynie.

Integracja z WooCommerce

Teraz jesteśmy gotowi do zasilania naszego sklepu za pomocą Reacta. Wykorzystamy w tym celu pliki products.jsx i product.jsx , których kod jest podobny odpowiednio do posts.jsx i p ost.jsx .

Dodamy jeszcze trzy zmienne do CelestialSettings pod „woo” (patrz Globalna zmienna JavaScript):

1. URL
2. consumer_key
3. consumer_secret

Klucz klienta i tajny klucz klienta muszą zostać wygenerowane z Panelu → WooCommerce → Ustawienia → API → Klucze/Aplikacje .

W przypadku adresu URL woo musisz go dodać ręcznie (ponieważ WooCommerce umożliwia transfer tylko przez SSL, dodaj adres URL z https, tj https://localhost/celestial/wp-json/wc/v2/ ).

Skopiuj klucz konsumenta i tajny klucz konsumenta i wklej je w odpowiednich miejscach w functions.php . Będzie to służyć jako uwierzytelnianie dostępu do WooCommerce za pośrednictwem wywołania API.

Odwiedź dokumentację WooCommerce REST API, aby uzyskać więcej informacji o jego API. Plik products.jsx zawiera kod do zapełnienia sklepu produktami. Produkty mogą być dodawane przez administratora z pulpitu nawigacyjnego. Wystarczy przejść do Dashboard → Products → Add New i wprowadzić szczegóły produktu.

Po kliknięciu w określony produkt zostaniesz przeniesiony na stronę product.jsx :

Kod powyższej strony jest podobny do 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> ); }

Permalinki

Aby motyw działał poprawnie, musimy ustawić następujące permalinki w Dashboard → Settings → Permalinks :

1. W obszarze Ustawienia ogólne → Struktura niestandardowa : https://localhost/celestial/posts/%postname%/

2. W sekcji Permalinki produktów → Baza niestandardowa : /products/

Jeśli nie ustawisz permalinków jak powyżej, motyw może nie działać zgodnie z oczekiwaniami.

Poprawka WooCommerce

Gdy przejdziesz do localhost/celestial/products , prawdopodobnie pojawi się puste miejsce, w którym mają zostać załadowane produkty. Dzieje się tak, ponieważ WooCommerce potrzebuje uwierzytelnionych żądań, podczas gdy nasz localhost nie jest https. Aby rozwiązać problem:

1. Odwiedź https://localhost/celestial/wp-json/wc/v2/products. To da nam ostrzeżenie:

1. Kliknij ZAAWANSOWANE > Przejdź do hosta lokalnego (niebezpieczne) .
2. Teraz, jeśli wrócisz do strony produktów, pozycje będą wyświetlane poprawnie.

Uwaga : jeśli korzystasz z Valet na Macu, musisz uruchomić Valet Secure w swojej witrynie, aby zabezpieczyć lokalną witrynę certyfikatem TLS. To kolejny sposób na rozwiązanie problemu.

Co to jest ScrollMagic?

ScrollMagic to biblioteka, która pozwala nam wykonywać określone czynności podczas przewijania strony. Aby użyć ScrollMagic, umieścimy w kolejce bibliotekę ScrollMagic JavaScript w functions.php . W tym projekcie używamy ScrollMagic w dwóch instancjach:

1. Aby leniwie ładować posty w komponencie 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(); } }); }

   
   Leniwe ładowanie postów w komponencie posts.jsx
2. Aby wyświetlić animację pojawiania się pojawiających się postów, przewijając odpowiednio posty i produkty w komponentach posts.jsx i 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); }); }

   
   Stosowanie animacji pojawiania się dla postów, które pojawiają się podczas przewijania

Jesteśmy teraz gotowi do obejrzenia naszego motywu z poziomu interfejsu. Przejdź do localhost/celestial w przeglądarce internetowej i zobacz, jak działa Twój motyw.

I poklep się po plecach, ponieważ udało Ci się stworzyć motyw!

Inne motywy WordPress z bibliotekami JavaScript

Jeśli uznałeś to za pomocne, możesz rzucić okiem na inne niesamowite oddzielone motywy WordPress zbudowane przy użyciu nowoczesnych bibliotek/frameworków JavaScript:

• Foxhound: pierwszy oddzielony motyw, który trafił do repozytorium motywów WordPress. Ten motyw, napisany przez Kelly Dwan, wykorzystuje React, Redux i React Router.
• Anadama React: Kolejny motyw tego samego autora, ale używający Flux zamiast Redux i Page zamiast React Router.
• Wallace: Napisany przez Kirby, ten motyw wykorzystuje Angular z API REST WordPress.
• Picard: Napisany przez Automattic, aby zaprezentować możliwości interfejsu API REST WordPress.
• React Verse: motyw React i Redux, który napisałem w oparciu o Foxhound.

Następne kroki

Główne sekcje, które chciałem wam pokazać, są już gotowe. Możesz kontynuować budowanie projektu, aby uzyskać dalszą wiedzę. Oto kilka zaleceń, do których możesz się zastosować:

1. Pełnoprawny sklep z wtyczką WooCommerce, w tym kasa i koszyk;
2. Każda strona dla archiwum, tagu, taksonomii itd.;
3. Zarządzanie stanem za pomocą Redux lub Flux.
   

Powodzenia i szczęśliwego kodowania!