React ve WordPress ile Web Uygulamanız İçin Bir Dış Görünüm Nasıl Oluşturulur

Kendinizi bir web mühendisi olarak yetiştirdiniz ve şimdi müşterileriniz için inanılmaz hızlı bir çevrimiçi mağaza oluşturmak istiyorsunuz. Ürün listesi anında görünmelidir ve arama da bir saniyeden daha fazlasını boşa harcamamalıdır. Bu hayallerin malzemesi mi?

Artık değil. En azından WordPress'in REST API'si ve modern bir JavaScript kitaplığı olan React kombinasyonu ile elde edilemeyecek bir şey değil.

Bir dakika ne? WordPress REST API'si?

Evet, WordPress REST API, web uygulamanız için arka uç temeli oluşturmanıza yardımcı olacaktır. İçerik odaklı bir çözüm oluşturuyorsanız, web uygulamanızın arka uç teknolojisi için bu iyi bir seçimdir. WordPress, diğer teknolojilerle de sorunsuz bir şekilde birlikte çalışacaktır; Node.js'yi diğer RESTful hizmetlerine bağlanmak için uygulamanızın odak noktası olarak kullanabilirsiniz .

WordPress REST API, artık yalnızca bir CMS değil, güvenli bir şekilde bir web uygulaması çerçevesi olarak adlandırılabilecek WordPress için bir oyun değiştiricidir. Artık ön ve arka uç tamamen ayrıldığına göre, WordPress bir mobil uygulama arka ucu veya içeriğe odaklanan herhangi bir sistem için arka uç olarak kullanılabilir.

Ama neden WordPress? Nedeni: WordPress ile kutudan çıkan işlevlere hayran kalacaksınız. Çalışmanızı genişletmek için kapsamlı kullanıcı yönetimi, medya yönetimi ve inanılmaz derecede geliştirici dostu bir API seti alacaksınız.

Bu yazıda, WP REST API'sine bağlanan React adlı JavaScript kitaplığını kullanarak bir SPA (Tek Sayfa Uygulaması) WordPress teması oluşturma konusunda size yol göstereceğim.

Temayı İnşa Etmeye Geçelim

Bu makale, özellikle sitenizin estetiği için temaların ve sitenizin eklentilerinin işlevlerinin geliştirilmesini sağlayanlar olmak üzere, mevcut çeşitli WordPress API'lerine zaten aşina olduğunuzu varsayar. Ayrıca, Linux veya MacOS ortamındaki LAMP yığını gibi WordPress için geliştirme platformunuzu kurduğunuzu da varsayıyorum.

Yine de basitlik için, Windows ile kullanılan XAMPP platformunda görünen mutlak yollardan bahsedeceğim.

Şimdi, yerel ana makinemizde 'Celestial' adlı bir WordPress örneği oluşturalım. Bu, WordPress REST API tarafından desteklenen web uygulamalarıyla kullanıma hazır gelecek temalar oluşturmak için yön belirlememize yardımcı olması için kullanacağımız WordPress temasının adıdır. WordPress'in çok sevilen şablon hiyerarşisine zaten aşina olabilirsiniz, ancak REST API ile farklı bir şey keşfetme fırsatınız var!

Daha sonra wp-content\themes klasörü içinde tema için bir klasör oluşturmamız gerekiyor. C:\xampp\htdocs\celestial\wp-content\themes\ (veya eşdeğeri) konumuna gidin ve bir celestial klasörü oluşturun. Bu dosyaları celestial tema klasörünün içine ekleyin:

1. index.php
   Temanın tümünü yakalama dosyası.
2. style.css
   Bu, tema hakkında bilgi içerir (gerçek CSS değil).
3. functions.php
   CSS ve JS dosyalarının işlevselliğini ve içe aktarılmasını yazmak.

Pano içinde temanız için bir resim gösterilmesini istiyorsanız, screenshot.jpg adlı bir resim dosyası ekleyin.

Not : Her dosyanın kodu birkaç satır uzunluğundadır ve GitHub'da bulunabilir .

Ardından, WordPress Kontrol Panelinize giriş yapın, Görünüm → Temalar'a gidin ve tema olarak 'Göksel'i seçin. Artık temel hazır olduğuna göre, temayı oluşturmaya başlayalım.

Tema İçin React And Webpack ile Başlarken

React, Facebook tarafından desteklenen ve sürdürülen çok popüler bir UI kitaplığıdır. Stack Overflow'un Geliştirici Anketi 2017 sonuçlarına göre, "React, geliştiriciler arasında en sevilenidir."

Projeyi başlatmak için projeyi bir NPM (Düğüm Paket Yöneticisi) projesi olarak başlatmanız gerekir. Bu, terminalde npm init komutuyla yapılır (bilgisayarınıza Node.js ve NPM'yi yükledikten sonra). Projeyi başlatmak, sizden belirli yapılandırma bilgilerini isteyecektir. Başarılı başlatmanın ardından NPM, temanın kök dizininde bir package.json dosyası oluşturacaktır. Bu dosya, proje ayrıntılarını ve projenin tüm bağımlılıklarını içerecektir.

React artık MIT lisansı altında, bu nedenle bu proje için JavaScript kitaplığı olarak React'in 16. sürümünü kullanacağız. React, Virtual DOM (belgenin bellekteki bir temsili) gibi bazı harika özelliklere sahiptir ve onu çevreleyen React Router gibi bir dizi araca sahiptir. React, WordPress.com'un kontrol paneli olan WordPress Calypso Projesi'nde de kullanılır.

Şimdi projeye gerekli NPM paketlerini kuracağız:

1. npm install --save react react-dom yazın ve paketleri kurmak için enter tuşuna basın.

   

   Temayı Tek Sayfa Uygulaması (SPA) olarak oluşturduğumuz için Webpack gibi bir aracın yardımına ihtiyacımız var. Kodu farklı bileşenler olarak yazacağız ve Webpack hepsini bir arada paketlememize ve tek bir .js veya .css dosyası olarak çıktı almamıza yardımcı olacak. Kısacası, bu bir modül paketleyicidir.
   
   Web paketinin önce bilgisayarınıza global olarak yüklenmesi gerekir. Bunu yapmak için tekrar NPM'yi kullanabiliriz.
2. Sisteminizde global olarak kurulu Webpack'in en son kararlı sürümünü almak için npm install -g webpack komutunu yazın.
   
   Ardından, Webpack'i destekleyen NPM paketlerini uygulamamıza yükleyeceğiz.
3. Git depomdaki package.json dosyasına gidin ve geri kalan bağımlılıkları package.json'ın bağımlılıklar bölümüne kopyalayın. Ardından package.json içindeki tüm paketleri kurmak için npm install tekrar çalıştırın.

    { "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" }

   
   Yukarıdaki, bu proje için package.json dosyasındaki tüm gerekli paketlerin bir listesidir.
4. Konfigürasyonları GitHub'dan kopyalayın ve tema klasörünüzün webpack.config.js dosyasına yapıştırın.

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

   
   Önemli : Lütfen module.exports → module → Rules rules[3] → use → publicPath projenizin dist görüntülerinin localhost'ta bulunduğu yere göre değişebileceğini unutmayın. Bu yanlışsa, resimler web uygulamasında düzgün görüntülenmeyebilir.
5. Daha sonra, projeyi derlemek için şu komutlar kullanılabilir:
   • projeyi derlemek için webpack veya npm run build veya
   • webpack --watch veya npm run watch .

Not : Webpack'i daha iyi anlamak için Joseph Zimmerman'ın Smashing Magazine'deki bu makalesini okuyun .

WordPress REST API'sini Genişletme

WordPress REST API, gönderileri, sayfaları, medyayı vb. getirmek için birçok farklı uç nokta ile birlikte gelir. Ancak, yanıtlarında her zaman tüm ayrıntılara sahip olmayabilirler. Örneğin, gönderiler yöntemi, öne çıkan görselin URL'sini veya yazarın adını vermez. Bu nedenle, bu öğelerin her birine ayrı çağrılar yapmak zorundayız.

Peki ya gönderi yanıtlarında kendi verilerinizin görünmesini istiyorsanız? İşte burada REST API'sini genişletmenin büyüsü devreye giriyor. Aşağıdaki kod, gönderi isteğine yanıt olarak iki ek değişken ekleyecektir, yani author_name ve featured_image_src . Kod, functions.php dosyasının içindedir:

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

Global JavaScript Değişkeni

React uygulaması boyunca kullanacağımız belirli WordPress sabitleri (veya 'değişkenler' olarak bilinir) vardır. Bu, uygulamanın çeşitli yolları hakkında bilgi olacaktır (ve daha sonra WooCommerce'e özgü olanlar olacaktır).

Bu değişken, functions.php dosyasında tanımlanır. 'CelestialSettings' olarak adlandırılacak ve kuyruğa alınmış app.js dosyasının tanıtıcısı olan celestial-scripts eklenecektir:

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

Yukarıdaki kod, ayrıştırılmış bir tema oluştururken önemli ve çok kullanışlı bir teknik olan WordPress (PHP) değişkenlerini ön uca almanın bir örneğini göstermektedir. Bu nesne değişkeni, site başlığını, yolunu, API ve kök URL'sini ve WooCommerce ile ilgili üç değişkeni (daha sonra açıklanacaktır) tutar.

Tepki ve JSX

React, diğer büyük JavaScript kitaplıklarından farklıdır. Bununla demek istediğim, genellikle JavaScript'imizi HTML'mizin içine yazıyoruz. Ancak React söz konusu olduğunda JavaScript kodumuzun içine HTML yazıyoruz. Daha doğrusu, JS'nin içine JSX yazıyoruz. JSX, HTML'ye çok benzer ancak birkaç farklılığı vardır. class niteliği örneğin className olarak yazılmıştır. Bu daha sonra Webpack ve Babel aracılığıyla düz JavaScript'e dönüştürülür ve app.js içine kaydedilir.

Bununla birlikte, JSX yazarken birkaç kısıtlama vardır. Örneğin, bir Bileşen için kök öğe olarak hizmet edecek olan render() yöntemimizde yalnızca bir çocuğumuz olabilir. Bununla birlikte, avantaj, hata ayıklamanın daha kolay olmasıdır. Tam olarak nerede hata yaptığımızı bilebiliriz, oysa normal HTML'de hatamız genellikle açıkça gösterilmez. Bu proje için JSX yazacağız ve bu nedenle JavaScript dosyaları .jsx uzantısına sahip olacak. Ancak, isterseniz .js de olabilir.

src klasörü içinde aşağıdaki dosyaları oluşturun:

1. index.jsx (ana dosya ve React Router konfigürasyonlarını içeren dosya)
2. header.jsx (başlık bileşeni)
3. footer.jsx (altbilgi bileşeni)
4. posts.jsx (yazıların arşivi için)
5. post-list.jsx ( posts.jsx içindeki tek bir gönderi için bileşen)
6. post.jsx (tek bir gönderi için)
7. Products.jsx (WooCommerce'deki tüm products.jsx içerir)
8. product.jsx (WooCommerce'den tek bir ürün görüntüler)
9. style.scss (tüm CSS kodunu SASS formatında içerecek şekilde)

ReactDOM.render()

index.jsx dosyası projenin köküdür. Bununla demek istediğim, index.jsx , DOM'a işlenen App bileşenini içerir.

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

Diğer bileşenler React Router içinde belirtilmiştir ve farklı rotalar ziyaret edildiğinde yüklenecektir.

Tüm farklı bileşenlerin eninde sonunda index.jsx ile bittiği modüler bileşenleri bu şekilde yazıyoruz.

Durum Bilgili ve Durumsuz Bileşenler

Bileşenlerin aşağıdaki iki yoldan biriyle yazıldığını fark etmişsinizdir:

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

İlk yol, Durumsuz Bileşenleri nasıl yazdığımız ve ikincisi Durum Bilgili Bileşenlerin bir örneğidir. Durumsuz, bileşenin içinde 'durum' olmadığı anlamına gelir. 'durum' esasen bileşen içinde bilgiye sahip bir değişkendir ve değişken her değiştiğinde bileşen yeniden oluşturulur. Durum Bilgisi Bileşenler aynı zamanda 'Akıllı Bileşenler' olarak da bilinir. Durum değişkenleri bu nedenle bu bileşen içindeki iç iletişim için kullanılır.

İkinci tür olan Durumsuz Bileşenler, içlerinde durum değişkenine sahip değildir ve bazen 'Aptal Bileşenler' olarak adlandırılır. Ancak, Durum Bilgili Bileşenler gibi, üst bileşenlerinden kendilerine aktarılan özellikler olan 'sahnelere' sahiptirler.

Durum bilgisi olan bileşenler, React yaşam döngüsü yöntemlerine sahipken, Durumsuz olan yalnızca, bunun için varsayılan yöntem olan render() yöntemine sahiptir.

React Yaşam Döngüsü Yöntemleri

Bunlar, bileşenin yaşam döngüsünün farklı aşamalarında çağrılan ve bu durumlarda kendi kodumuzu çalıştırmak için geçersiz kılabileceğimiz yöntemlerdir. Uygulamamızda aşağıdaki yöntemleri kullanıyoruz:

• constructor()
  Bir bileşen monte edilmeden önce çağrılır.
• componentDidMount()
  Bir bileşen monte edildikten hemen sonra çağrılır.
• render()
  JSX (HTML) içeriğini işlemek için çağrılan yöntem.
• componentDidUpdate()
  Bileşen güncellendiğinde çağrılır.
• componentWillUnmount()
  Bir bileşen kaldırılacağı zaman çağrılır.

Not : Bileşenler ve yaşam döngüleri hakkında daha fazla bilgi edinmek için buradaki belgeleri okuyun .

JavaScript Sözleri

WordPress REST API'mizden veri almak için JavaScript Sözlerini kullanacağız. İlk olarak, function.php dosyamızda REST API'nin URL'sine sahibiz, burada onu ön uçtan erişebileceğimiz bir JavaScript değişkeni olarak ekledik.

Farklı uç noktalardan veri almak için JavaScript'in getirme API yöntemini kullanacağız. İçerik alınırken kullanıcıya göstermek için bir yükleyici ekliyoruz:

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

React Router'ı Kullanma

React Router, uygulamamız için istemci tarafı yönlendirmeyi gerçekleştirecek kitaplıktır. Sunucu tarafı yönlendirme WordPress ile mümkündür, ancak gerçek bir SPA deneyimi elde etmek için React Router'ın yardımına ihtiyacımız var.

Sürüm 4'ten bu yana, React Router üç pakete bölünmüştür: react-router , react-router-dom ve react-router-native . Web uygulamalarında kullanılan bu proje için react-router-dom kullanacağız.

react-router-dom zaten kurulu olduğu için, yönlendirici yapılandırmasını index.jsx dosyasının içine yazabiliriz. Kod aşağıdaki gibi olacaktır:

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

Yukarıdaki kod, istemci tarafında ele alınan tüm yönlendirmeyle ilgilenecektir. Son satırdaki * , yukarıda belirtilmeyen diğer herhangi bir rotanın kullanıcıyı '404 Bulunamadı' sayfasına götüreceğini söylüyor.

React Router kullanarak farklı sayfalar arasında bağlantı oluşturmak için <a href=””> etiketi yerine <Link to=""> etiketi kullanılır:

 <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>

Test Verilerini Alma

Artık temayı oluşturduğunuza göre, biraz veri eklemenin zamanı geldi. Veri eklemenin bir yolu, kendi içeriğimizi oluşturmaktır. Ancak, WordPress sitemize veri eklemenin daha kolay (ve daha iyi) bir yolu var. Bu yöntem, yer tutucu verilerini harici bir kaynaktan içe aktarır:

• https://codex.wordpress.org/Theme_Unit_Test adresine gidin ve tema birimi test verilerini indirin
• WordPress içe aktarıcısını yüklemek için Araçlar > İçe Aktar > WordPress'e gidin .
• WordPress içe aktarıcı yüklendikten sonra, Aktarıcıyı Çalıştır'a tıklayın.
• İçe aktarıcıda 'Dosya seç'i tıklayın
• İndirilen dosyayı seçin ve WordPress Tema Birimi Test Verilerini içe aktarın

Şimdi theme-unit-test-data.xml dosyasını seçmeniz gerekiyor ve tüm yer tutucu içeriği artık sitenizde.

WooCommerce Entegrasyonu

Artık mağazamızı React kullanarak güçlendirmeye hazırız. Bu amaçla, kodu sırasıyla posts.jsx ve p ost.jsx'e benzeyen product.jsx ve product.jsx dosyalarını kullanacağız .

'woo' altında CelestialSettings'e üç değişken daha ekleyeceğiz (bkz. Küresel JavaScript Değişkeni):

1. URL
2. consumer_key
3. consumer_secret

Tüketici anahtarı ve Tüketici sırrı, Dashboard → WooCommerce → Settings → API → Keys/Apps öğesinden oluşturulmalıdır.

Woo URL'sini manuel olarak eklemeniz gerekir (WooCommerce yalnızca SSL üzerinden aktarıma izin verdiğinden, URL'yi https ile ekleyin, yani https://localhost/celestial/wp-json/wc/v2/ ).

Tüketici anahtarını ve Tüketici sırrını kopyalayın ve bunları function.php içindeki uygun yerlere yapıştırın. Bu, bir API çağrısı aracılığıyla WooCommerce'e erişmek için kimlik doğrulama işlevi görecektir.

API'si hakkında daha fazla bilgi için WooCommerce REST API belgelerini ziyaret edin. Products.jsx dosyası, mağazayı ürünlerle doldurma koduna sahiptir. Ürünler, kontrol panelinden bir yönetici tarafından eklenebilir. Pano → Ürünler → Yeni Ekle'ye gidin ve ürün ayrıntılarını girin.

Belirli bir ürüne tıkladığınızda, product.jsx sayfasına yönlendirileceksiniz:

Yukarıdaki sayfanın kodu post.jsx'e benzer:

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

kalıcı bağlantılar

Temanın düzgün çalışması için Dashboard → Settings → Permalinks içinde aşağıdaki kalıcı bağlantıları ayarlamamız gerekiyor:

1. Ortak Ayarlar → Özel Yapı altında: https://localhost/celestial/posts/%postname%/

2. Ürün kalıcı bağlantıları altında → Özel taban : /products/

Kalıcı bağlantıları yukarıdaki gibi ayarlamazsanız tema istendiği gibi çalışmayabilir.

Bir WooCommerce Düzeltmesi

localhost/celestial/products adresine gittiğinizde, ürünlerin yüklenmesi gereken bir boş alan elde etme şansınız vardır. Bu, WooCommerce'in kimliği doğrulanmış isteklere ihtiyaç duyması nedeniyle olur, oysa yerel ana makinemiz https değildir. Sorunu düzeltmek için:

1. https://localhost/celestial/wp-json/wc/v2/products adresini ziyaret edin. Bu bize bir uyarı verecektir:

1. GELİŞMİŞ > localhost'a geç (güvenli değil) üzerine tıklayın.
2. Şimdi, ürünler sayfasına geri dönerseniz, ürünler doğru şekilde görüntülenecektir.

Not : Mac'te Valet kullanıyorsanız, yerel siteyi TLS sertifikasıyla güvenceye almak için sitenizde Valet Secure çalıştırmanız gerekir. Bu, sorunu çözmenin başka bir yoludur.

ScrollMagic Nedir?

ScrollMagic, sayfada gezinirken belirli eylemleri gerçekleştirmemizi sağlayan bir kitaplıktır. ScrollMagic'i kullanmak için ScrollMagic JavaScript kitaplığını function.php içinde kuyruğa alacağız. Bu projede iki örnek için ScrollMagic kullanıyoruz:

1. Posts.jsx bileşeni içindeki gönderileri tembel olarak yüklemek için:

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

   
   Posts.jsx bileşeni içinde tembel yüklenen gönderiler
2. Sırasıyla posts.jsx ve products.jsx bileşenlerindeki gönderiler ve ürünler arasında gezinerek görünen gönderiler için bir yavaşlama animasyonu göstermek için:

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

   
   Kaydırma gerçekleşirken görünen gönderiler için bir solma animasyonu uygulama

Artık temamızı ön uçtan görüntülemeye hazırız. Web tarayıcınızda localhost/göksel'e gidin ve temanızı çalışırken görün.

Ve arkanıza yaslanın, çünkü şimdi temayı başarıyla oluşturdunuz!

JavaScript Kitaplıkları ile Diğer WordPress Temaları

Bunu faydalı bulduysanız, modern JavaScript kitaplıkları/çerçeveleri kullanılarak oluşturulmuş diğer harika ayrıştırılmış WordPress temalarına göz atabilirsiniz:

• Foxhound: WordPress temaları deposuna ulaşan ilk ayrıştırılmış tema. Kelly Dwan tarafından yazılan bu tema, React, Redux ve React Router'ı kullanır.
• Anadama React: Aynı yazara ait başka bir tema, ancak Redux yerine Flux ve React Router yerine Page kullanılıyor.
• Wallace: Kirby tarafından yazılan bu tema, WordPress REST API ile Angular'ı kullanır.
• Picard: WordPress REST API'sinin yeteneğini sergilemek için Automattic tarafından yazılmıştır.
• React Verse: Foxhound'dan yola çıkarak yazdığım bir React and Redux teması.

Sonraki adımlar

Size göstermek istediğim ana bölümler şimdi bitti. Daha fazla bilgi için projeyi oluşturmaya devam edebilirsiniz. Bunlar, uygulayabileceğiniz bazı önerilerdir:

1. Ödeme ve alışveriş sepeti dahil olmak üzere WooCommerce eklentisine sahip tam teşekküllü bir mağaza;
2. Arşiv, etiket, sınıflandırma vb. için birer sayfa;
3. Redux veya Flux ile durum yönetimi.
   

İyi şanslar ve mutlu kodlamalar!