Vuejs ile WordPress’te tek bir hibrit sayfa uygulaması oluşturun
WordPress uygulamanızı, şimdi React ve Angular gibi insanlarla aşamaları paylaşan Vue.js-Progression JavaScript çerçevesi ile güçlendirin. Bu makalede, zengin kullanıcı arayüzleri geliştirmek için çok popüler olan vue.js – javascript çerçevesi ile mevcut WordPress uygulamalarına tek bir sayfa arama uygulamasının nasıl entegre edileceğini göstereceğim. Başlangıçtan itibaren bir VUE uygulaması oluşturma, WordPress API REST ile etkileşime girme ve yeniden kullanılabilecek VUE bileşenleriyle bir arama uygulaması yapma sürecinde size rehberlik edeceğim.
Hiç bir Vue veya başka bir modern JavaScript kütüphanesi/kütüphanesi ile çalışmadıysanız, girmek için doğru zaman budur. JavaScript oyununuzu geliştirmeye teşvik eden birçok çerçeve çok fazla olsa da, Vue bu yolculuğu eğlenceli hale getiriyor. . Not: Bu makale orta seviye WordPress geliştiricileri için tasarlanmıştır ve PHP, JavaScript, Vue.js ve WordPress Rest API bilgisine sahip olduğunuzu varsayar. Yenilemek istiyorsanız, aşağıdakileri okumanızı öneririm:
WordPress geliştiricileri için JavaScript
WordPress Rest API için Hızlı Başlangıç Kılavuzu
JavaScript ve Rest Fire WordPress: Jargon’u anlayın
Vue.js (2.x) ‘e aşinalık da önemlidir. Tek Sayfa Uygulaması (SPA), WordPress API REST ile etkileşim kurmak için tek bir dosya bileşeni, özel etkinlikler, hesaplanan özellikler, yaşam döngüsü kancaları ve Axios gibi birçok VUE özelliği kullanır. Vue’da yeniyseniz, öğrenmesi kolaydır ve aşağıdaki öğreticilerle sadece birkaç saat içinde başlayabilirsiniz:
Vue.js 2 – Acadamind tarafından başlıyor
VUE.JS’ye Giriş Vue Mastercy Vue uygulaması saf ES5 sözdiziminde yazılabilse de, ES6 ve ES7 sürümlerinde tanıtılan birkaç yeni JavaScript özelliğini kullanacağım. ES6 ile hızı artırmanız gerekiyorsa, aşağıdakilere bakın:
ES6 JavaScript-Basics
ES2015 için WordPress Geliştirici Kılavuzu (ES6)
ES6 ve ES7’de beş dakikalık yıldırım kursu
Modern JavaScript kullanmanız mı gerekiyor yoksa VUE.JS tamamen ihtiyaçlarınıza ve tercihlerinize bağlı olacaktır. Amacım, WordPress’e tek bir sayfa uygulamasını pratik bir arama uygulamasıyla entegre etme olasılığını keşfetmenize yardımcı olmaktır. Haydi başlayalım!
WordPress’te Vue Spa’ya Genel Bakış Bu makale için, yirmi on yedi WordPress temasından çocuk temasını kullanarak vue.js ile WordPress ile tek bir sayfa arama uygulaması oluşturdum. Makaleyi takip etmek için buradan çocukların temasını indirebilirsiniz. Arama uygulaması, özel bir sayfa şablonu kullanılarak herhangi bir WordPress sayfasında oluşturulabilir. Sayfa şablonu temel olarak yüklenecek mevcut DOM öğeleri içeren bir VUE örneği sağlar.
Vue.js uygulamasını WordPress’e özel bir sayfa şablonuyla entegre edin
Geleneksel bir arama senaryosunda vue.js ile arama deneyiminin geliştirilmesi, sunucuya olan her istek sayfanın yeniden yüklenmesine neden olur. Ancak, VUE.JS veya SPA yaklaşımı ile, kullanıcı arama ile etkileşime girdiğinde ancak yeniden yüklemeden sayfa dinamik olarak güncellenir. Bu çok hoş bir kullanıcı deneyimi yapar. Aslında, burada yaptığım kalemde deneyebilirsiniz: Vue arama uygulamam yukarıdaki kalem örneğine dayanarak oluşturulmuştur. Öyleyse, arama uygulamasında koda dalış yapmadan önce parçanın nasıl olduğunu anlayalım. Anatomy Aşağıdaki tek VUE Infographic sayfası arama uygulaması, arama uygulamasının birbirleriyle etkileşime girebilecek birkaç bileşen kullanılarak nasıl düzenlendiğini açıklar.
Dahili tek sayfa arama uygulaması vue
Yüksek seviyede, çeşitli bileşenler budur: AppNavigation, Vue yönlendiricisinin AppQuickSearch ve AppCustomSearch bileşenleri oluşturmak için bir yönlendirici bağlantısı sağlar.
AppQuickSearch ve AppCustomSearch, AppFiltersWitches ve AppGetPosts için bir üst bileşen olarak işlev görür. Ancak, her biri veri, yöntem ve mülkün kendisi ile donatılmış iki tam bağımsız arama uygulaması üretirler.
Bir onay kutusu veya radyo düğmesi olabilecek giriş anahtarını kaldırma AppFilersWitches, orada iletilen parametrelere bağlıdır.
AppGetPosts, WordPress API dinlenmesinden veri alır ve arama tuşunu ve anahtar girişini kullanarak filtreler. Bu daha sonra filtrenin sonuçlarında her yazı için AppDisPlayPost bileşenini çağırır.
AppDisplayPost Bireysel gönderme öğeleri için işaretleme İşaretleme ve arama sonuçlarında görüntüler. Tüm bunlar, WordPress’teki belirli bir sayfa için özel bir sayfa şablonunda gerçekleşir.
Tek bir VUE dosya bileşeni kullanarak, DOM veya JavaScript şablonunda şablonları kullanan bir VUE ile oluşturulan VUE bileşenlerinin birçok örneğini görmüş olabilirsiniz. Ancak, WordPress’te bir arama uygulaması oluşturmak için Vue’nun güçlü bir tek dosya bileşenini kullandım. Tek dosya bileşenleri, tarayıcılara daha önce derlenen JavaScript’i (oluşturma işlevi), sözdizimi programlama, vaka duyarsız bileşen seçmenleri ve birkaç isim için CSS bileşen kapsamı sağlama yeteneği olan birçok avantaja sahiptir. Ayrıca modüler kodlar yazmama izin verirler ve kod tabanını birkaç dosyaya (.vue) bölerek yönetilebilirler.
Artık çeşitli şeylerin nasıl çalıştığı hakkında iyi bir fikriniz olduğuna göre, uygulamalar oluşturmaya başlayalım. Yerel geliştirme iş akışını ayarlamak için bir vue-cli kullanmak, kodu tek bir dosya bileşeniyle birkaç dosyaya (.vue) ayırın, Vue Loader, Webpack, Babel, vb. Gibi geliştirme araçlarının kullanılmasını gerektirecektir. Ancak, bunun sizi karıştırmasına izin vermeyin çünkü her şeyi iyi tutacağım. Basit ve yapılandırma dosyalarıyla ilgilenmiyor. Bir Vue-Cli ile, daha önce modern ön uç iş akışları için en iyi oluşturma araçlarıyla yapılandırılmış bir VUE uygulama iskelesi yapabilirsiniz. Öyleyse önce CLI’yi düzenleyelim.
Adım 1: Vue-Cli’yi kullanmak için Node.js yükleyin, sisteminize yüklü Node.js (8.x tercih edilen, NPM sürüm 3+) ihtiyacınız vardır. Platformunuz için yüklemeyi buradan indirme sayfasından indirebilirsiniz. Ayarladıktan sonra, aşağıdaki komutun çalışıp çalışmadığı testi: Düğüm -Sürme ve NPM -Sürümü
Adım 2: Bir sonraki Vue-Cli’yi yükleyin, sistem terminalinizi (benim durumumda PowerShell) açın ve NPM yüklemesi -g Vue-cli komutunu çalıştırarak Vue-Cli (2.x) ‘de küresel olarak yükleyin. Bittiğinde, test Vue -ersion komutunu çalıştırarak çalışır.
Vue uygulaması oluşturmak için bir Vue-Cli (2.x) hazırlayın
Yukarıdaki resimde, NPM Install -g Eslint ile küresel olarak Eslint’i de yüklediğimi göreceksiniz. Bunun nedeni, JavaScript’imi biçimlendirmek ve örmek için Visual Studio Kodunu ve Eklenti Düzenleyicisi’ni kullanmam. Seçtiğiniz herhangi bir kod düzenleyicisini kullanabilirsiniz, ancak Linter JavaScript ile yapılandırın şiddetle tavsiye edilir. Temel ayarlar tamamlandıktan sonra, Vue-Cli ile WordPress’te bir uygulama oluşturalım. Vue-clli ile iskele vue uygulaması bir vue uygulaması oluşturmak için resmi Vuejs-Template webpack kullandım. Ancak, ihtiyaçlarınıza göre daha sofistike bir şablon kullanmak isteyebilirsiniz.
Şablon, bir webpack ile bir VUE projesi hazırlar ve geliştirme sunucusu ve diğer modern geliştirme araçlarıyla yapılandırır. Bu bize karmaşık geliştirme iş akışı sağlar. Diğer şeylerin yanı sıra, geliştirme sırasında JavaScript NextGen (ES6/ES7) kullanarak kod yazmamızı sağlar, ancak daha iyi tarayıcıların uyumluluğuna ES5’te derlenen JavaScript demetlerini gönderin. Adım 1: Vue projelerini yönetmek, sistem terminalinizi kullanarak WordPress temasına veya çocuğunuzun temasına gitmek için WordPress’te bir VUE uygulaması hazırlayın. Burada, görsel çalışma kodunun editörü ile entegre olan PowerShell’i (Windows 10’da) kullanıyorum. WordPress Tema Dizini’nize yönlendirme
Adım 2: Sonraki webpack-SIM-Simple şablonuyla bir VUE uygulaması oluşturun, Vue Init WebPack-Simmple Project-Name komutunu çalıştırın, VUE IDPack-Simple Project-Name Proje adını projenizin adıyla değiştirin (SPA in örnek) ve talimatları takip edin ve ekrandaki talimatları izleyin. Vue init ve webpack şablonları ile iskele vue uygulaması
Not: VuetwentyEventeen çocuk temamı takip ederseniz bu adımı geçin. Spa proje klasöründe zaten uygulamalar içeriyor. Bu, VUE projesini modern geliştirme araçları için yapılandırma ile dizinindeki yapar. Adım 3: Kod Düzenleyicinizi kullanarak WordPress temanıza giderseniz Geliştirme Bağımlılığı’nı yükleyin ve birçok yeni dosya arasında yeni proje klasörüne bakın, Package.json adlı bir dosya göreceksiniz. Bu temel olarak uygulama tarafından ihtiyaç duyulacak tüm geliştirme araçlarını içerir. Bu araçların hala kurulması ve bunu yapmak için aşağıdakileri çalıştırmalıdır:
Project-Name CD (Proje Klasörünüzle Proje Adını Değiştirin) NPM Yükleme NPM daha sonra node_modules adlı bir klasörde gereken tüm bağımlılıkları indirecek ve yükleyecektir.
NPM ile Gelişim Bağımlılıklarının Kurulması Bu indirilen dosyayı WordPress’e uygulamayacağımızı unutmayın. Sadece geliştirme aşamasında gereklidirler. Adım 4: WordPress ile Dev Server Webpack’i çalıştırın Son adım, önceki adımda yüklü WebPack Geliştirme Sunucusunu çalıştırmayı içerir. Bu ilk başta garip görünebilir, ancak geliştirme sunucusunu (önceki adımda yüklü) çalıştırmalı ve yerel WordPress sunucunuzla (XAMP, WAMP, VVV, vb.) Birlikte çalıştırmaya devam etmelisiniz. Vue Spa istemci tarafı uygulaması olmasına rağmen, başlangıçta sunucu tarafından sunulması gerekir ve webpack sunucusu bizim için yapacaktır. Sadece geliştirme tamamlandığında, son JavaScript paketini WordPress aracılığıyla sunacağız. Geliştirme sunucusunu başlatmak için Vue Project klasöründen NPM Run Dev komutunu çalıştırın. Daha sonra Marş Vue uygulamasının Localhost’ta otomatik olarak açıldığını göreceksiniz: 8080 tarayıcınızda.
Webpack geliştirme sunucusunu çalıştırın
VUE PAKET (Build.js) Tarayıcınızdaki Başlangıç Uygulama sayfasının kaynağını görürseniz, sayfanın yalnızca bir dosya komut dosyası – Build.js içerdiğini göreceksiniz. Bunun nedeni, geliştirme sunucusunu çalıştırdığınızda WebPack, VUE uygulamasını otomatik olarak derler ve Vue kitaplığı ve diğer bağımlılıkları bir JavaScript dosyasına paketler. Ancak, dosyanın sisteminizde fiziksel olarak bulunmadığını ve çalıştırıldığında düğümler ve webpack’ler tarafından dinamik olarak yapıldığını unutmayın.
JavaScript demetleri, uygulamanızla gönderebileceğiniz fiziksel yapı dosyaları üretmek için webpack tarafından çalışma zamanı olduğunda dinamik olarak yapılır, bir sonraki aşamada göreceğimiz NPM Run Build’ı çalıştırmanız gerekir. Bu aşamada, WordPress tema klasöründen geliştirme sunucusu tarafından sunulan tam işlevsel bir VUE uygulamamız var. Ancak, bunun WordPress ile ilgisi yok. Vue uygulamasını WordPress temanızla nasıl entegre edebileceğinize bakalım. Vue SPA’yı WordPress ile entegre et Vue uygulamalarını WordPress ile entegre etmek temelde üç şey gerektirir:
Vue uygulamaları için WordPress’teki DOM öğeleri yüklenecek WordPress’te Vue paketini sıraya koyuyor
Vue’ya WordPress’te DOM’un kurulum noktası hakkında bilgi verin VUE için WordPress’te DOM öğeleri sağlamak VUE uygulamasını bir WordPress sayfasında veya birkaç sayfada veya koşullu olarak ilişkilendirmek isteyebilirsiniz. Tüm VUE ihtiyaçları, seçtiğiniz WordPress sayfasındaki DOM öğeleridir. Bunun için, düzenlenmesi gereken gerekli şablon dosyasına karar vermek için hiyerarşi WordPress şablonunu kullanabilirsiniz. Örneğimde, belirli özel sayfa şablonlarını kullanan herhangi bir WordPress sayfasında bir arama uygulamasının görünmesini istiyorum. İhtiyaçlarınıza göre belirli sayfaları hedeflemek için sıradan bir sayfa şablonu kullanmak isteyebilirsiniz. Şablon Özel Şablonlar/Vue-Search-App-Template.php Şablonları Çocuğumun temalarına örneklerinden Vue için #WP-VUE-APP sağlar.
FC6EC65077819AAD1A33615EEC47DDF9’un özünü içerir Vue uygulamasını WordPress’e kaydettirerek WordPress’e Vue uygulaması hakkında bilgi vermek için WordPress’e Vue paketini kaydettirmeniz/sıralamanız gerekir. Ancak, geliştirme sırasında her değişiklikten sonra bir yapı dosyası üretmek mümkün değildir. Bunun için, daha önce gördüğünüz dinamik yapılardan yararlanabiliriz. Webpack geliştirme sunucusu çalıştığı sürece, WordPress’te bir Vue komut dosyası kaydetmek için http: // localhost: 8080/dist/Build.js dinamik bir geliştirme yolu kullanabiliriz. Webpack sunucusu ayrıca VUE paketini otomatik olarak yeniden dolduracak ve uygulama değiştirildiğinde sayfayı güncelleyecektir. Geliştirme sırasında WordPress’te dinamik bina yollarının kaydedilmesi
Bu, geliştirme sırasında yerel bir WordPress sunucusu ve bir webpack sunucusu çalıştırmanızın nedeni budur. Geliştirme tamamlandığında, NPM Run Build’ı çalıştırarak üretilen fiziksel dosyayı yansıtmak için yolu değiştirmelisiniz.
Geliştirme sonrası WordPress’e fiziksel oluşturma dosyalarını kaydedin
Ayrıca, son Vue Bundle hariç, Vue proje klasöründe WordPress temanızla gönderilmesi gereken hiçbir dosya yoktur. Sadece geliştirme sırasında ve bir Vue demeti yeniden oluşturmak için değişiklikler yapmanız gerektiğinde gereklidir. Temam örneğinde,/enqueue-skills.php dahil bir Vue paketi kaydettim
E786B9C302896B22EE4001A8D57AA02C’nin özünü içerir
Vue’yu son WordPress’teki Mount Point hakkında bilgilendirin, VUE uygulamasını WordPress’e yüklemek için, gereken tek şey Vue’ya kendilerini nereye monte etmeniz gerektiğini söylemektir. Bu, DOM WordPress öğesini VUE projenizdeki Main.js’deki EL seçeneğiyle belirleyerek yapılır. Veya $ Mount yöntemini de kullanabilirsiniz. Örneğimde, özel sayfa şablonumdan div #wp-vue-app kapsayıcısına bir uygulama koydum. ‘EL’ seçeneği seçeneğini kullanarak Vue’daki yükleme noktasını belirleyin
Ve bunun gibi, Vue başlangıç uygulaması WordPress’te oluşturulacak.
WordPress’te Yeni Başlayan Vue uygulamasını oluşturun Harika, Vue’nun yeni başlayan uygulamaları WordPress’e başarıyla enjekte edildiğinde, artık Vue ile neredeyse her şeyi inşa edebilirsiniz. Öyleyse, Vue arama uygulama ayrıntılarıma gidelim. WordPress’te Tek Sayfa Arama Uygulaması Oluşturun Makalenin başında akış şemasını görürseniz, bunu aşağıda gösterilen son arama uygulamasıyla ilişkilendirebilirsiniz:
WordPress’te Vue Arama Uygulaması Oluşturma Proje klasörünün yapısı bunu oluşturmak için, sadece Vue başlangıç uygulamasını bir temel olarak kullanmam gerekiyor. Vue projesinden spa/index.html ve src/varlıklardan kurtuldum ve aşağıdaki klasör yapısına vardım:
WordPress’te Vue Arama Uygulama Klasör Yapısı
Çocuk temasındaki dahil klasörü merak ediyorsanız, bunun nedeni yalnızca WordPress kancalarını belirlemek için function.php kullandığım ve her bir geri çağrıyı içerikler/içerik/içerik altındaki her geri çağrıyı tanımladığım için. Her şeyi tek bir dosya işlevine atmak için bu yaklaşımı tercih ederim.
CF0D04AA77A7A50D479BEEDB25D4E650’nin özünü içerir ESLINT ve ECMAScriptNext (isteğe bağlı) özellikleri için ek bağımlılıklar ekleme ESLINT’i (kesinlikle tavsiye ettiğim) veya Async/Weait gibi ESNEXT özelliklerini kullanmak istiyorsanız, projenize birkaç ek geliştirme paketi eklemeniz gerekir. ESLING’i WordPress ve Vue için yapılandırarak Eslint’i yapılandırmak için Eslint-Plugin-Vue ve Eslint-Config-WordPress’i yükledim. Bunu yapmak için, geliştirme sunucusunu (CTRL+C) durdurun ve VUE proje klasörünüzden aşağıdaki komutu çalıştırın: NPM yükleme-SAVE-DEV ESLINT-Plugin-Vue Vue NPM-SAVE-DEV Eslint-Config-WordPress Next , .Eslintrc.json dosyanıza aşağıdakileri ekleyin: “Genişler”: [“Eslint: Önerilen”, “WordPress”, “Eklenti: Vue/Önerilen”] WordPress için JavaScript kodlama standartlarını ve önceden belirlenmiş kuralını VUE/Stricly ile düzenleyecektir. -Vue’ye bağlı. VS Code gibi modern editörlerle, bu gerçekten hataları hızlı bir şekilde yakalamama ve düzeltmeme yardımcı olur: Visual Studio Kodunda ESLINT ile hataları yakalayın
Babylon ön ayar eklemek Async/Babil ön ayarını beklemek bu makalenin kapsamı dışındadır, ancak aşağıdakiler temel olarak VUE uygulamanızda ES7 Async/Wekait kullanmanıza izin verecektir. Bunun için, çalışarak BABEL-PRESTE-VUE-APP eklemelisiniz: NPM Yükleme-SAVE-DEV BABEL-FREU-VUE-APP Sonra, VUE-APP önceden ayarlanmış uygulamayı VUE proje klasörünüzdeki .Babelrc dosyasına ekleyin: ” Ön ayarlar “: [” env “, {” modüller “: false}],” aşama-3 “,” vue-app “] tamamlandıktan sonra, geliştirme sunucusunu NPM Run Dev ile başlatmayı unutmayın. Vue’nun çocuk temalarına örnek olarak sahip olduğum tüm bunlar sizin için yapılandırılmıştır, bu nedenle paketi yalnızca SPA dizininin içinden NPM yüklemeyi çalıştırarak yüklemeniz gerekir. Sonunda Vue Vue için mevcut yerel WordPress verileri oluşturmak, tarayıcınızda çalışan JavaScript’tir, bu nedenle Vue WordPress’teki herhangi bir veriye erişimi olmayacaktır. Vue uygulamaları için mevcut yerel WordPress verileri oluşturmak için, iyi bir eski WP_LOCALICAL_SCRIPT WP_SCRIPT işlevi kullanmanız gerekir. Bunu dahil/enqueue-scripts içinde yaptım. Yukarıdaki öz, tüm yorumlarımda yeterince açık olmalı, bu yüzden VUE uygulamam için sağladığım verilere odaklanacağım:
wpdata.template_directory_uri – Tema klasöründe statik varlıklar (resimler gibi) için dosya yolları oluşturmak için wpdata.rest_url – wp rest API’dan gönderiler almak için url
wpdata.app_path – göreceli bağlantılar yapmak için wordpress spa sayfası wpdata.post_categories – yayınları filtrelemek için bir onay kutusu oluşturmak için
Kaçarak, arama uygulamasından tek bir dosya bileşenini keşfedelim. Arama uygulamasının AppSplayComponent uygulama yapısıyla tek bir dosya bileşeniyle bir arama uygulaması oluşturmak, gerçekten yaptığım ilk bileşen AppDisPlayComponent idi. Yalnızca Fetch API JavaScript Fetch API ve WordPress Posts Kaynak Kaynağı -/WP/V2/Posts kullanarak yayın başlığını görüntülemek için çok temel bir bileşenle başladım. Başlangıç için ApplPostVersion AppDisplayPostVersion bileşeninin temel sürümü başlayacak
Ve WordPress sayfasında oluşturmak için, App.vue’deki tüm başlangıç içeriğini siliyorum ve aşağıda gösterildiği gibi AppDisPlayPost bileşenini arıyorum:
Çok temel uygulama. Bununla birlikte, hepsi ilk deneyde (hatta bundan sonra birkaç tane) çalışmaz, yani Vue Devtools’tan krom uzantısı beni kurtarmaya geldiğinde. Ben de yüklemenizi öneririm, çünkü bu, Vue uygulamanızı her şeyi bir konsola kaydetmekten daha fazla kullanıcı dostu bir arayüzle hata ayıklamanıza ve kontrol etmenize olanak tanır.
Vue Devtools ile Hata Ayıkla Vue uygulaması
Ayrıca WP REST API ile etkileşim kurmak için Postman gibi araçları kullanmanızı tavsiye ederim. Bu, yangın tepkisini anlamak ve daha kolay görülen bir formatta veri sağlamak için size çok zaman kazandıracaktır. Demek istediğim bu:
WordPress Rest API ile etkileşim kurmak için Postman gibi bir dinlenme istemcisi kullanma
Vue uygulamasında WordPress’ten gelen gönderiler ilk başta hazırlanmam için birkaç dakika gerektirdi, ancak Vue Devtools ve Postacı arasında birkaç turdan sonra bunu yapmaya hazırdım. Bu noktada, özel içerik eklemek için yangın tepkisini genişletmeye karar verdim. API REST’den varsayılan özel yanıt içeriği için WordPress API restoranının genişletilmesi oldukça eksiksizdir; Ancak, olasılık tüm ihtiyaçlarınızı karşılamayabilir. Örneğin, yazarın adı, yorumlar ve bir yayından üstün görüntüler gibi bilgileri görüntülemek isteyebilirsiniz. Postacı’daki (veya müşteri seçiminiz dinlenmesindeki) yayın rotasına başvurursanız, bunun varsayılan yanıtta doğrudan mevcut olmadığını göreceksiniz. Yangını genişletmek burada seçenek olmasına rağmen, yalnızca _embed = true kaynakları – wp/v2/direkler? _Embed = true parametreleri ekleyerek de alabilirsiniz. _Embed ile yangın, gömülebilir ile işaretlenmiş tüm meta verileri düzenleyecektir: sevkiyat yanıtında doğru. Vue arama uygulamam için, yangını genişletmeye karar verdim ve aşağıdaki özel içeriği ekledim: WordPress Rest API’sinden varsayılan yanıtı genişletin
Çocuğumun temasındaki AppDisplayPost bileşeninin son sürümünü görürseniz, varsayılan yanıtın bir parçası olmayan Vue_meta alanını kullandığımı göreceksiniz.Çocuk temasından/extend-api.php dahil/extend-api.php dahil register_rest_field işlevine eklendi.Oradaki kod oldukça temeldir ve yangının genişletilmesi hakkında daha fazla bilgi edinmek için API el kitabı dinlenmesinden değiştirme yanıtlarına bakın.Bununla birlikte, Mantığı AppGetPosts bileşenine göndermek için mantığı taşıyorum ve yalnızca her posta öğesinden gereken içeriği oluşturmak için AppDisPlayPost’u kullanıyorum.Rest Fire’dan veri tüketmek için AppGetPosts Bileşeni Veri alımı için mantığı ayırır, aynı zamanda sahne aracılığıyla uygulamalara devam etmek anlamına gelir.
Sonra, AppGetPosts’ta yayındaki her gönderi için AppDisplayPost diyorum.
34A0C9A1938594B4A1C7B5CA83AF32’nin özünü içerir
Ayrıca WordPress Rest API’dan yayın almak için orijinal Getch Fire yerine Axios’u kullanmaya karar verdim. API’dan verileri kullanmak için Axios’u kullanmak daha rahatım, ancak Ajax çağrıları yapmak için JQuery’yi (WordPress’e dahil edilen) kullanmayı da seçebilirsiniz. Not: Axios’u kullanmak için, Vue proje klasörünüze NPM Install Axios’u çalıştırarak üretim bağımlılığı olarak yüklemeniz gerekir. Sadece belirli bir WordPress Rest API alanını alarak, yakın zamanda _fields parametresini yalnızca yangın tepkisinden gereken alanları almak için kullanabileceğinizi keşfettim. Bu, özellikle JSON’un yanıtında içerik içerik istemediğinizde, yükün boyutunu önemli ölçüde azaltır. Bunu yapmak için, _fields parametresini, json yanıtına seçici olarak dahil etmek için _fields parametrelerini kullanan _fields parametrelerini kullanan değerler- wp/v2/direkler? _Fields parametresinin hala restoran el kitabına giden yolu bulması gerekiyor, bu yüzden izlemek isteyebilirsiniz. WordPress Rest API’sinden tüm yayınları şu anda alarak, WordPress Rest API’sinden tüm yayınları almanın bir yolu yoktur. Bunu yapmak için, gerekli veriler alınana kadar bir döngü çalıştırmalı ve API’ya bazı talepler yapmalısınız. API isteğinin miktarını hesaplamak için, koleksiyondaki toplam kayıt sayısını sağlayan sayfalama sayfalama parametresi = 100 ve X-WP-Total başlık alanını kullanıyorum. Mevcut PER_PAGE parametresi 100 nota ile sınırlıdır, bu nedenle 100’den fazla gönderi olduğunda yangına bazı istekler almamız gerekir. Bunu, aşağıdaki çekirdekteki AppGetPosts bileşeninden Get_Posts yönteminde çalışırken göreceksiniz: 8B67F44C78687F9322EBBB31B697517 çekirdeğini içerir.
Yukarıdaki özde, bileşen kurulduğunda get_posts otomatik olarak çağrılır. Yöntemi, beklemenin ifadesini içeren Aynchronous fonksiyonu olarak işaretlemek için ES7 Async/Await özelliğini kullandım. İlk AXIOS isteğinin Await – Const Response = Await Axios (…) ile işaretlendiğini göreceksiniz. Bu, bir sonraki kod satırının RUN’dan talep tamamlanana kadar önler. Bunu, ihtiyaç duyulan API isteği miktarını hesaplamak için X-WP-TOTAL başlığını almak için yaptım. İkinci beklemenin kullanımı sonunda, tüm vaatlerin vaatle tamamlanmasını beklediğidir. Tüm sayfada veri oluşturmadan önce. Ancak, şu şekilde mevcut olduktan hemen sonra verileri de oluşturabilirsiniz: Çekirdek 9BB57F1B71E4F903A1BB512B4299A43A içerir
Mevcut gerekli verilerle, hesaplanan özelliğe arama giriş kutusu ve filtre mantığını ekliyorum. Aşağıdaki özünde, FilterdResults’un AppDisplayPost bileşenini çağırmak için wppostları nasıl değiştirdiğine dikkat et. AppQuickSearch ve AppFiltersWitchs Bileşenleri AppGetPosts ile Kuyruk Veri Toplama ve Filtreleme ile, daha sonra kullanıcı girişini AppQuickSearch ana bileşenine taşıyorum ve zincir altındaki verilere devam etmek için öğretim yardımcıları kullanıyorum. WPData WPData WPData nesnelerini kullanarak filtre kategorisini oluşturmak için AppFiltersWitches’in yeni bir bileşenini yaptım. AppquickSearch ana bileşeni tarafından duyulması gereken OnFiltertoggle olaylarının özel etkinliğinin bileşenleri. Son olarak, tüm bileşenler AppquickSearch’te birleştirilmiştir
BF1F0E523D685910A115CAD858C087B0’ın özünü içerir Sonunda, sadece NPM Run Build Running tarafından üretilen son yapıyı sıraya koydum.
NPM Run Build ile son yapıyı üretin Şimdiye kadar varsa, kendi başvurunuzun geri kalanını keşfetmekte rahat hissedeceksiniz.Bileşenin en son sürümü daha fazlası var, ancak az önce gördüğünüz her şey üzerine inşa edilmiştir.Mide ve Keep-Client Bileşenlerini Keşfetme Uygulamayı sadece hızlı bir arama ile bitirebilmeme rağmen, Vue’nun midesini keşfedebilmeniz için diğer bileşenler ekledim ve çeşitli bileşenlerin öğretim yardımcıları yardımıyla nasıl kolayca yeniden kullanılabileceğini ekledim.Vue yönlendirici bu makalenin kapsamı dışındadır, ancak SPA/SRC/App-rouches.js’de mide için işlevselliği bulabilirsiniz.AppQuickSearch, AppCustomSearch ve navigasyon bağlantıları arasında eşleme sağlar.Sonunda WordPress sayfasında bir Vue yönlendirici kullanırsanız, Vue’nun ‘#’ URL’sini kullanacağını unutmayın.
Sayfayı simüle etmek için, yönlendirici bağlantısı arasında geçiş yaptığınızda yüklenmez. Hash’i hariç tutmaya çalışırsanız (App-routes.js hakkındaki yorumlarıma bakın), WordPress’in yeniden yazma yangını devralır ve 404 bulunamazsınız. App.Ve Bileşenleri Uygulama ve Yönlendirici-View Bileşenleri. Ayrıca, Bileşen Durumunu korumak ve ikisi arasında geçiş yaptığınızda AppQuickSearch ve AppCustomSearch oluşturmaktan kaçınmak için yönlendirici görüntüleme ekranının Keep-Clive’ye sarıldığını göreceksiniz. İşte burada! Sonuç olarak bu makaleyi yararlı bulursunuz. Burada yirmi on yedi çocuğun temasının bir parçası olarak indirebileceğiniz Vue arama uygulamamla oynamaktan çekinmeyin. Modern WordPress ve JavaScript’teki becerilerinizi geliştirmek ve geliştirmek için bir oyun alanı olarak kullanabilirsiniz. Vue.js’yi WordPress’e entegre ettiniz mi? Bize aşağıdaki yorumlarda anlatın.
Etiket:
Vue.js
WordPress Fire Rest
