Cara Membuat Skin Untuk Aplikasi Web Anda Dengan React Dan WordPress

Jadi, Anda telah melatih diri Anda sebagai seorang insinyur web, dan sekarang ingin membangun toko online yang sangat cepat untuk pelanggan Anda. Daftar produk akan muncul dalam sekejap, dan pencarian juga tidak akan menghabiskan lebih dari sepersekian detik. Apakah itu hal-hal dari lamunan?

Tidak lagi. Yah, setidaknya tidak ada yang tidak bisa dicapai dengan kombinasi REST API WordPress dan React, library JavaScript modern.

Tunggu apa? API REST WordPress?

Ya, REST API WordPress akan membantu Anda membangun fondasi back-end untuk aplikasi web Anda. Ini adalah pilihan yang baik untuk teknologi back-end aplikasi web Anda jika Anda sedang membangun solusi berbasis konten. WordPress akan beroperasi dengan lancar dengan teknologi lain juga; Anda dapat menggunakan Node.js sebagai fokus aplikasi Anda untuk terhubung ke layanan RESTful lainnya.

WordPress REST API adalah pengubah permainan untuk WordPress, yang sekarang dapat dengan aman disebut sebagai kerangka kerja aplikasi web — bukan hanya CMS. Sekarang setelah front-end dan back-end benar-benar dipisahkan, WordPress dapat digunakan sebagai back-end aplikasi seluler atau sebagai back-end untuk sistem apa pun yang berfokus pada konten.

Tapi kenapa WordPress? Alasannya: Anda akan kagum dengan fungsionalitas yang muncul di luar kotak dengan WordPress. Anda akan mendapatkan manajemen pengguna yang ekstensif, manajemen media, dan serangkaian API yang sangat ramah pengembang untuk memperluas pekerjaan Anda.

Pada artikel ini, saya akan memandu Anda membangun tema WordPress SPA (Single Page Application) menggunakan library JavaScript yang disebut React, menghubungkan ke WP REST API.

Mari Langsung Membangun Tema

Artikel ini mengasumsikan bahwa Anda sudah terbiasa dengan berbagai API WordPress yang ada, terutama yang mendorong pengembangan tema untuk estetika situs Anda, dan fungsionalitas untuk plugin situs Anda. Saya juga berasumsi Anda telah menyiapkan platform pengembangan Anda untuk WordPress, seperti tumpukan LAMP di lingkungan Linux atau MacOS.

Untuk kesederhanaan, saya hanya akan merujuk ke jalur absolut yang terlihat dengan platform XAMPP yang digunakan dengan Windows.

Sekarang, mari kita buat instance WordPress di localhost kita, beri nama 'Celestial.' Itulah nama tema WordPress yang akan kita gunakan untuk membantu kita menetapkan arah untuk membangun tema masa depan yang siap digunakan dengan aplikasi web yang didukung oleh WordPress REST API. Anda mungkin sudah akrab dengan hierarki template WordPress yang sangat disukai, tetapi dengan REST API, Anda memiliki kesempatan untuk menemukan sesuatu yang berbeda!

Kita kemudian perlu membuat folder untuk tema di dalam folder wp-content\themes . Arahkan ke C:\xampp\htdocs\celestial\wp-content\themes\ (atau yang setara) dan buat folder celestial . Tambahkan file-file ini di dalam folder tema celestial :

1. index.php
   File catch-all untuk tema.
2. style.css
   Ini berisi informasi tentang tema (dan bukan CSS sebenarnya).
3. functions.php
   Untuk menulis fungsionalitas dan mengimpor file CSS dan JS.

Tambahkan file gambar bernama screenshot.jpg jika Anda ingin gambar untuk tema Anda ditampilkan di dalam dasbor.

Catatan : Kode untuk setiap file panjangnya beberapa baris dan dapat ditemukan di GitHub .

Selanjutnya, masuk ke Dashboard WordPress Anda, buka Appearance → Themes dan pilih 'Celestial' sebagai tema. Sekarang setelah fondasinya ada, mari kita mulai membuat tema.

Memulai Dengan React Dan Webpack Untuk Tema

React adalah perpustakaan UI yang sangat populer yang didukung dan dikelola oleh Facebook. Menurut hasil Survei Pengembang Stack Overflow 2017, “Bereaksi adalah yang paling disukai di antara pengembang.”

Untuk memulai proyek, Anda perlu menginisialisasi proyek sebagai proyek NPM (Node Package Manager). Ini dilakukan dengan perintah npm init di terminal (setelah menginstal Node.js dan NPM di komputer Anda). Inisialisasi proyek akan meminta Anda untuk informasi konfigurasi tertentu. Setelah inisialisasi berhasil, NPM akan membuat file package.json di direktori root tema. File ini akan menyertakan detail proyek dan semua dependensi proyek.

React sekarang berada di bawah lisensi MIT, jadi kami akan menggunakan React versi 16 sebagai library JavaScript untuk proyek ini. React memiliki beberapa fitur keren, seperti DOM Virtual (representasi dokumen di dalam memori) dan memiliki sejumlah alat yang mengelilinginya seperti React Router. React juga digunakan di Project Calypso WordPress — dasbor untuk WordPress.com.

Kami sekarang akan menginstal paket NPM yang diperlukan ke proyek:

1. Ketik npm install --save react react-dom di terminal dan tekan enter untuk menginstal paket.

   

   Karena kami sedang membangun tema sebagai Aplikasi Halaman Tunggal (SPA), kami memerlukan bantuan alat seperti Webpack. Kami akan menulis kode sebagai komponen yang berbeda, dan Webpack akan membantu kami mengemas semuanya bersama-sama dan mengeluarkannya sebagai satu file .js atau .css. Singkatnya, ini adalah bundler modul.
   
   Webpack harus diinstal terlebih dahulu secara global di komputer Anda. Untuk melakukan itu, kita kembali dapat memanfaatkan NPM.
2. Ketik perintah npm install -g webpack untuk mendapatkan versi stabil terbaru dari Webpack yang diinstal secara global di sistem Anda.
   
   Selanjutnya, kami akan menginstal paket NPM yang mendukung Webpack di aplikasi kami.
3. Buka file package.json di git repo saya dan salin sisa dependensi dari sana ke bagian dependensi package.json Anda. Kemudian jalankan npm install lagi untuk menginstal semua paket di dalam 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" }

   
   Di atas adalah daftar semua paket yang diperlukan dalam file package.json untuk proyek ini.
4. Salin konfigurasi dari GitHub dan tempel ke file webpack.config.js folder tema Anda.

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

   
   Penting : Harap dicatat bahwa module.exports → module → rules[3] → use → publicPath dapat berubah sesuai dengan lokasi dist image proyek Anda di localhost. Jika ini salah, gambar mungkin tidak ditampilkan dengan benar di aplikasi web.
5. Setelah itu, perintah ini dapat digunakan untuk mengkompilasi proyek:
   • webpack atau npm run build untuk mengkompilasi proyek, atau
   • webpack --watch atau npm run watch untuk mengkompilasi proyek dan melihat perubahan.

Catatan : Untuk mendapatkan pemahaman yang lebih baik tentang Webpack, baca artikel ini oleh Joseph Zimmerman di Majalah Smashing .

Memperluas REST API WordPress

API REST WordPress hadir dengan banyak titik akhir yang berbeda untuk mengambil posting, halaman, media, dan sebagainya. Namun, mereka mungkin tidak selalu memiliki semua detail dalam tanggapan mereka. Misalnya, metode posting tidak memberikan URL gambar unggulan atau nama penulis. Oleh karena itu, kita harus membuat panggilan terpisah untuk masing-masing elemen ini.

Tetapi bagaimana jika Anda ingin data Anda sendiri muncul dalam tanggapan kiriman? Di situlah keajaiban memperluas REST API masuk. Kode berikut akan menambahkan dua variabel tambahan dalam menanggapi permintaan posting , yaitu author_name dan featured_image_src . Kode ada di dalam 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'); }

Variabel JavaScript Global

Ada konstanta WordPress tertentu (atau dikenal sebagai 'variabel') yang akan kita gunakan di seluruh aplikasi React. Ini akan menjadi informasi tentang berbagai rute aplikasi (dan kemudian menjadi rute khusus WooCommerce).

Variabel ini didefinisikan dalam file functions.php . Ini akan disebut 'CelestialSettings' dan ditambahkan ke celestial-scripts , pegangan untuk file app.js yang diantrekan:

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

Kode di atas menunjukkan contoh mendapatkan variabel WordPress (PHP) ke front-end, teknik penting dan sangat berguna saat membangun tema yang dipisahkan. Variabel objek ini menyimpan judul situs, jalur, URL untuk API dan root dan tiga variabel yang berkaitan dengan WooCommerce (dijelaskan nanti).

Bereaksi Dan BEJ

React berbeda dari library JavaScript utama lainnya. Yang saya maksud dengan itu adalah, kami biasanya menulis JavaScript di dalam HTML kami. Namun, ketika berbicara tentang React, kami menulis HTML di dalam kode JavaScript kami. Agar lebih akurat, kami menulis JSX di dalam JS. JSX sangat mirip dengan HTML tetapi memiliki beberapa perbedaan. Atribut class ditulis sebagai className misalnya. Ini kemudian dikonversi ke JavaScript biasa melalui Webpack dan Babel dan disimpan dalam app.js .

Namun demikian, ada beberapa batasan dalam penulisan BEJ. Misalnya, kita hanya dapat memiliki satu anak dalam metode render() kita, yang akan berfungsi sebagai elemen root untuk Komponen. Namun, keuntungannya adalah lebih mudah untuk di-debug. Kita bisa tahu persis di mana kita telah melakukan kesalahan, sedangkan dalam HTML biasa kesalahan kita umumnya tidak akan ditampilkan secara eksplisit. Kami akan menulis JSX untuk proyek ini, dan oleh karena itu, file JavaScript akan memiliki ekstensi .jsx . Namun, bisa juga .js jika Anda menginginkannya.

Buat file berikut di dalam folder src :

1. index.jsx (file utama dan yang berisi konfigurasi React Router)
2. header.jsx (komponen header)
3. footer.jsx (komponen footer)
4. posts.jsx (untuk arsip posting)
5. post-list.jsx (komponen untuk setiap posting dalam posts.jsx )
6. post.jsx (untuk satu posting)
7. products.jsx (berisi semua produk dari WooCommerce)
8. product.jsx (menampilkan satu produk dari WooCommerce)
9. style.scss (untuk memuat semua kode CSS dalam format SASS)

ReactDOM.render()

File index.jsx adalah root dari proyek. Yang saya maksud adalah, index.jsx berisi App komponen yang dirender ke 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 );

Komponen lain ditentukan dalam React Router dan akan dimuat saat mengunjungi rute yang berbeda.

Beginilah cara kami menulis komponen modular di mana semua komponen yang berbeda akhirnya berakhir di index.jsx .

Komponen Stateful vs. Stateless

Anda akan melihat komponen ditulis dengan salah satu dari dua cara berikut:

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

Cara pertama adalah bagaimana kita menulis Stateless Components dan yang kedua adalah contoh Stateful Components. Stateless berarti komponen tersebut tidak memiliki 'status' di dalamnya. 'status' pada dasarnya adalah variabel yang memiliki informasi di dalam komponen, dan setiap kali variabel berubah, komponen dirender ulang. Komponen Stateful juga dikenal sebagai 'Komponen Cerdas.' Variabel keadaan dengan demikian digunakan untuk komunikasi dalam dalam komponen itu.

Tipe kedua, Komponen Tanpa Kewarganegaraan tidak memiliki variabel status di dalamnya dan terkadang disebut 'Komponen Bodoh.' Namun, seperti Stateful Components, mereka memiliki 'props', yang merupakan properti yang diturunkan kepada mereka dari komponen induknya.

Komponen stateful memiliki metode siklus hidup React sedangkan komponen Stateless hanya memiliki metode render() yang merupakan metode default untuknya.

Metode Siklus Hidup Bereaksi

Ini adalah metode yang dipanggil pada tahapan berbeda dalam siklus hidup komponen, yang dapat kita ganti untuk menjalankan kode kita sendiri pada instance tersebut. Kami menggunakan metode berikut dalam aplikasi kami:

• constructor()
  Dipanggil sebelum komponen dipasang.
• componentDidMount()
  Dipanggil segera setelah komponen dipasang.
• render()
  Metode yang dipanggil untuk merender konten JSX (HTML).
• componentDidUpdate()
  Dipanggil saat komponen diperbarui.
• componentWillUnmount()
  Dipanggil ketika komponen akan dihapus.

Catatan : Untuk mempelajari lebih lanjut tentang Komponen dan siklus hidupnya, baca dokumentasi di sini .

Janji JavaScript

Kami akan menggunakan Janji JavaScript untuk mendapatkan data dari API REST WordPress kami. Pertama, kami memiliki URL ke REST API di functions.php kami, di mana kami telah menambahkannya sebagai variabel JavaScript yang dapat kami akses dari front-end.

Kami akan menggunakan metode API pengambilan JavaScript untuk mendapatkan data dari titik akhir yang berbeda. Kami menambahkan pemuat untuk menunjukkan kepada pengguna saat konten sedang diambil:

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

Menggunakan React Router

React Router adalah library yang akan menangani perutean sisi klien untuk aplikasi kita. Perutean sisi server dimungkinkan dengan WordPress, tetapi untuk mencapai pengalaman SPA yang sesungguhnya, kami memerlukan bantuan React Router.

Sejak versi 4, React Router telah dipecah menjadi tiga paket: react-router , react-router-dom , dan react-router-native . Kami akan menggunakan react-router-dom untuk proyek ini karena itulah yang digunakan dalam aplikasi web.

Karena react-router-dom sudah terinstal, kita dapat menulis konfigurasi router di dalam file index.jsx . Kode akan menjadi sebagai berikut:

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

Kode di atas akan menangani semua perutean, ditangani di sisi klien. * di baris terakhir mengatakan bahwa rute lain yang tidak disebutkan di atas akan membawa pengguna ke halaman '404 Not Found'.

Tag <Link to=""> digunakan sebagai pengganti tag <a href=””> untuk menghubungkan antar halaman yang berbeda menggunakan 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>

Mendapatkan Data Uji

Sekarang setelah Anda membuat tema, sekarang saatnya menambahkan beberapa data. Salah satu cara untuk menambahkan data adalah dengan membuat konten kita sendiri. Namun, ada cara yang lebih mudah (dan lebih baik) untuk menambahkan data ke situs WordPress kami. Metode ini mengimpor data placeholder dari sumber eksternal:

• Buka https://codex.wordpress.org/Theme_Unit_Test dan unduh data pengujian unit tema
• Buka Alat > Impor > WordPress untuk menginstal pengimpor WordPress.
• Setelah pengimpor WordPress diinstal, klik Jalankan Importir.
• Klik 'Pilih file' di importir
• Pilih file yang diunduh dan impor Data Pengujian Unit Tema WordPress

Sekarang Anda harus memilih file theme-unit-test-data.xml dan semua konten placeholder sekarang ada di situs Anda.

Integrasi WooCommerce

Sekarang, kami siap untuk memberi daya pada toko kami menggunakan React. Kami akan menggunakan file products.jsx dan product.jsx untuk tujuan ini, yang kodenya mirip dengan posts.jsx dan p ost.jsx masing-masing.

Kami akan menambahkan tiga variabel lagi ke CelestialSettings di bawah 'woo' (lihat Variabel JavaScript Global):

1. URL
2. consumer_key
3. consumer_secret

Kunci Konsumen dan Rahasia Konsumen harus dibuat dari Dasbor → WooCommerce → Pengaturan → API → Kunci/Aplikasi .

Untuk URL woo, Anda harus menambahkannya secara manual (karena WooCommerce hanya mengizinkan transfer melalui SSL, tambahkan URL dengan https, yaitu https://localhost/celestial/wp-json/wc/v2/ ).

Salin kunci Konsumen dan rahasia Konsumen dan tempel di tempat yang sesuai di dalam functions.php . Ini akan berfungsi sebagai otentikasi untuk mengakses WooCommerce melalui panggilan API.

Kunjungi dokumentasi WooCommerce REST API untuk informasi lebih lanjut tentang API-nya. File products.jsx memiliki kode untuk mengisi toko dengan produk. Produk dapat ditambahkan oleh admin dari dashboard. Cukup buka Dasbor → Produk → Tambah Baru dan masukkan detail produk.

Ketika Anda mengklik produk tertentu, Anda akan dibawa ke halaman product.jsx :

Kode untuk halaman di atas mirip dengan 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> ); }

Tautan permanen

Agar tema berfungsi dengan benar, kita harus mengatur permalink berikut di dalam Dashboard → Settings → Permalinks :

1. Di bawah Pengaturan Umum → Struktur Kustom : https://localhost/celestial/posts/%postname%/

2. Di bawah Tautan permanen Produk → Basis khusus : /products/

Jika Anda tidak mengatur permalink seperti di atas, tema mungkin tidak berfungsi seperti yang diinginkan.

Perbaikan WooCommerce

Saat Anda menavigasi ke localhost/celestial/products , kemungkinan Anda akan mendapatkan ruang kosong tempat produk seharusnya dimuat. Ini terjadi karena WooCommerce membutuhkan permintaan yang diautentikasi sedangkan localhost kami bukan https. Untuk memperbaiki masalah:

1. Kunjungi https://localhost/celestial/wp-json/wc/v2/products. Ini akan memberi kita peringatan:

1. Klik LANJUTAN > Lanjutkan ke localhost (tidak aman) .
2. Sekarang, jika Anda kembali ke halaman produk, item akan ditampilkan dengan benar.

Catatan : Jika Anda menggunakan Valet di Mac, Anda harus menjalankan Valet Secure di situs Anda untuk mengamankan situs lokal dengan sertifikat TLS. Ini adalah cara lain untuk memperbaiki masalah.

Apa Itu ScrollMagic?

ScrollMagic adalah perpustakaan yang memungkinkan kita untuk melakukan tindakan tertentu saat menggulir halaman. Untuk menggunakan ScrollMagic kita akan mengantrekan library JavaScript ScrollMagic di functions.php . Kami menggunakan ScrollMagic untuk dua contoh dalam proyek ini:

1. Untuk memuat posting dengan lambat di dalam komponen 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(); } }); }

   
   Postingan yang lambat dimuat dalam komponen posts.jsx
2. Untuk menampilkan animasi fade-in untuk postingan yang muncul dengan menggulir postingan dan produk di masing-masing komponen posts.jsx dan 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); }); }

   
   Menerapkan animasi fade-in untuk posting yang muncul saat bergulir terjadi

Kami sekarang siap untuk melihat tema kami dari front-end. Arahkan ke localhost/celestial di browser web Anda dan lihat tema Anda beraksi.

Dan tepuk punggung Anda, karena Anda sekarang telah berhasil membuat tema!

Tema WordPress Lainnya Dengan Perpustakaan JavaScript

Jika Anda merasa ini bermanfaat, Anda dapat melihat tema WordPress terpisah lainnya yang dibuat menggunakan pustaka/kerangka kerja JavaScript modern:

• Foxhound: Tema terpisah pertama yang masuk ke repositori tema WordPress. Ditulis oleh Kelly Dwan, tema ini menggunakan React, Redux dan React Router.
• Anadama React: Tema lain oleh penulis yang sama, tetapi menggunakan Flux sebagai ganti Redux, dan Page sebagai ganti React Router.
• Wallace: Ditulis oleh Kirby, tema ini menggunakan Angular dengan REST API WordPress.
• Picard: Ditulis oleh Automattic sendiri untuk menunjukkan kemampuan REST API WordPress.
• React Verse: Tema React dan Redux yang saya tulis berdasarkan Foxhound.

Langkah selanjutnya

Bagian utama yang ingin saya tunjukkan sekarang sudah selesai. Anda dapat melanjutkan dengan membangun proyek untuk pengetahuan lebih lanjut. Ini adalah beberapa rekomendasi yang bisa Anda lakukan:

1. Toko lengkap dengan plugin WooCommerce, termasuk checkout dan keranjang belanja;
2. Masing-masing halaman untuk arsip, tag, taksonomi, dan sebagainya;
3. Manajemen negara dengan Redux atau Flux.
   

Semoga berhasil, dan selamat coding!