Napájení blogu pomocí aplikace WordPress API

V posledních několika letech rozvoj odpočinku API pro WordPress otevřel nové dveře pro vývojáře. Vývojáři, kteří byli dříve omezeni na psaní projektu WordPress-poháněný projekt v PHP nyní mají větší flexibilitu a kontrolu v tom, jak se mohou přistupovat k technologickému stohu svých webových stránek-to-být.

To znamená, že je možné udržet všechny výhody brilantního ovládacího panelu WordPress, který je vyroben extrémně flexibilní populární Wordpress Plugins. jako jsou pokročilé vlastní pole a mají zcela vlastní postavenou frontend, který pouze spolupracuje s WordPress, když potřebuje.

• Stáhněte si tutoriálové soubory

V tomhle Wordpress tutorial. Budeme zkoumat, jak implementovat API Opent WordPress do jednoduchého blogu aplikace, která v současné době používají místní soubor JSON jako zdroj dat, a je postaven jako jedna stránka aplikace (SPA) pomocí oblíbeného rámce JavaScriptu Vue.js. . To bude zahrnovat implementaci Vuexu, které budeme používat k ukládání dat, které žádáme od WordPressu pomocí kombinace jeho akcí a mutačních metod.

Po dokončení, měli jste vytvořit štíhlé, jednoduché lázně, které mají veškerou reaktivitu Vue.js, zatímco zobrazení příspěvků získaných z a řízených aplikací WordPress.

Pro další úžasné API prozkoumejte, podívejte se na naše průvodce podle nejlepšího JavaScript API , Html apis a Google Apis. .

01. Nastavte pracovní prostor a závislosti

První věci, měli byste Stáhněte soubory projektu a otevřete je ve vašem preferovaném editoru.

Ve konzole, CD do Webové stránky šablony a spusťte příkaz níže pro instalaci závislostí uzlu projektu (pokud nemáte nainstalovaný uzel, to první ). Budeme pracovat čistě v SRC. adresář odtud ven.

npm install

02. Nainstalujte Vuex.

Dále pomocí příkazu níže, budeme nainstalovat Vuex. , což je stav státního řízení a knihovna pro aplikace Vue.js. To bude fungovat jako ústřední úložiště informací pro všechny komponenty VUE, které závisí na datech, které obdržíme od aplikace WordPress API. Pro vývojáře obeznámené s reakcí, Vuex je silně inspirován tavením.

npm install vuex --save

03. Spusťte vývojový server

V konzole spusťte příkazový příkaz pro spuštění vývojového serveru. To bude zkompilovat projekt Vue.js, protože v současné době znamená a přiřadí k adrese URL, abyste jej mohli přistupovat. To je obvykle localhost: 8080. .

Jednou s největší výhodou je, že je živé překládky, takže jakmile provedete změny v aplikaci a uložit, stránka ve vašem prohlížeči se bude aktualizovat bez nutnosti ručně znovu načíst.

npm run dev

04. Vytvořit obchod Vuex

v SRC. , vytvořte adresář s názvem ukládat A v něm se nazývá nový soubor index.js. . To bude tam, kde bude definován náš obchod VUEX. Ačkoli dříve, než se dostaneme k tomu, musíme poprvé ujistit, že naše aplikace Vue.js je si vědom její existence. Chcete-li to udělat, otevřete Main.js. a importovat obchod a zahrnout jej jako závislost, jako v níže uvedeném úryvku.

 Import VUE z "VUE"
Importovat aplikaci z './app'
Importovat router z './router'
Dovozní úložiště z './store'
Vue.config.productiontip = false.
/ * ESLINT-DISABLE NO-NEW * /
Nový VUE ({
  El: '#app',
  router,
  ukládat,
  Šablona: '& l; app / gt;',
  Komponenty: {app}
}) 

05. Vytvořit úložiště lešení a nainstalujte axios

Abyste nám pomohli zjednodušit požadavky AJAX Náš obchod bude dělat WordPress API, nainstalujeme Axios, což je klient HTTP založeného na slibu. Chcete-li to provést, otevřete samostatné okno konzoly, přejděte na Webové stránky šablony Adresář a běh NPM Instalovat Axios - Uložit .

Dále začněte s lešením obchodu instantováním nového objektového objektu Vuex Store. V tuto chvíli to nedělá nic, ale alespoň si je třeba si uvědomit.

 Importní axios z "axiosu"
Importovat VUE z "VUE"
Import Vuex z 'Vuex'
Vue.use (Vuex)
CONST Store = New Vuex.store ({
  Stát: {},
  Akce: {},
  mutace: {}
})
Exportovat výchozí úložiště 

06. Vytvořte stav příspěvků

Ve VUEX, objekt stát drží informace o aplikaci, které v tomto případě budou Wordpress Post Data, kterou chytíme pomocí API. V tomto objektu vytvoříte novou vlastnost s názvem Příspěvky a přiřaďte ji hodnotu null.

 Stav: {
  Příspěvky: NULL.
} 

07. Vytvořit akci getposts

Ve Vuexu jsou akce hlavním způsobem, ve kterých jsou zpracovány asynchronní požadavky. Jedná se typicky metody definované v obchodě, které pak mohou být odeslány podle požadavků aplikace.

V prázdném akce Objekt, pojďme definovat jeden tam, kde je naši příspěvky stav stále null, axios se používá k provedení požadavku AJAX na API WordPress a vrátit seznam příspěvků. Jakmile jsme obdrželi pozitivní odpověď, pak budeme vyřešit slib a spáchat příspěvky pomocí Storposts. mutace.

 Getposts: Funkce (kontext) {
  vrátit nový slib ((vyřešit, odmítnout) = & gt; {
  Pokud (kontext.state.posts) {
  odhodlání()
  }
  Jinak {
  axios.get ('http://lukeharrison.net/
  Webdesigner / WP-JSON / WP / V2 / příspěvky ')
  .then ((odpověď) = & gt; {
  Context.commit ('Storposts',
  Response.data)
  odhodlání()
  }). Úlovek ((chyba) = & gt; {
  odmítnout (chyba);
  });
  }
  })
} 

08. Vytvořit mutaci skladu

Další koncept zavedený Vuex je mutace, které jsou také typicky způsoby definované v obchodě. Mutace jsou jediný způsob, jak změnit stav v obchodě VUEEX, který umožňuje snadné sledování stavu při ladění.

V prázdném mutace Objekt, pojďme definovat Storposts. Metoda, kterou jsme odkazovali v předchozím kroku a učinit ji přepsat post majetku ve státním objektu s jakýmikoli údaji, že mutace obdrží jako užitečné zatížení.

 Storposts (stát, odpověď) {
   State.posts = Reakce} 

09. Trigger getposts akce na zatížení

Vytvořili jsme akci a mutační metody, které uchopují příspěvky z aplikace WordPress API a spáchali je do Vuex státu, ale nyní musíme skutečně spouštět tento proces někde. V nejvyšší úrovni vue.js komponenty App.Vue. , Přidejte pod úryvek níže.

Vytvořeno () je hák pro životní cyklus, který spouští kód, jakmile je komponenta VUE vytvořena na zatížení, při použití globálního $ Store. Proměnná nám umožňuje přístup k obsahu našeho obchodu Vuex a odeslání getposts. akce z kroku 7.

 Vytvořeno () {
   To. $ Store.Dispatch ('getposts')} 

10. Aktualizovat cesty atributů

Pokud pracujete v Chrome nebo Firefoxu a máte Vue.js Devtools Extension. (Pokud ne, doporučuji, abyste to udělali, protože je to velmi užitečné), měli byste být nyní schopni vidět načtené sloupky Wordpress Základní stát pod Vuex. Tab.

Zpět na aplikaci, v /components/posts/posts.vue. HTML šablony potřebuje poukázat na tato data, takže pojďme vyladit několik atributů.

 Switch 'post.title' na 'post.title.Rendered'
 Switch 'post.preview' na 'post.acf.preview'
 Přepínač 'post.previewImage' do 'post.acf.header_image_small' 

11. Aktualizujte V-for Loop

V komponentech příspěvků je v používání směrnice vue.js v-for. . Tyto smyčky přes všechny příspěvky a pro každého z nich vytiskne instanci post komponenty, zobrazující je v seznamu.

Musíme aktualizovat cestu předané této směrnici, protože je stále používat místní fiktivní testovací data. Aktualizujte směrnici V-pro ERIPPET, abyste ukázali na naše uložené příspěvky v obchodě VUEX.

 v-for = "příspěvek v tomto. $ Obchod.state.posts" 

12. Udělejte si úklid domácností

Nyní se zobrazí seznam sloupků WordPress. Protože už nepoužíváme místní poštovní data, smažete SRC / Data. . Pak v komponstristy příspěvků odstraňte Příspěvky: postdata.data. Vlastnost v komponentách Místní úložiště dat a pak import Postdata.

13. Fix Post Author

Můžete si všimnout, že pro každý příspěvek se autor zobrazuje jako číslo. Je to proto, že aplikace WordPress API vrátí ID autora, spíše než jméno. Musíme použít toto ID pro dotaz aplikace WordPress pro úplné informace o autorovi. Začněme vytvořením místa pro uložení v našem obchodě Vuex, vedle našich příspěvků obchod / index.js. .

 Stav: {
  Autoři: Null,
  Příspěvky: null} 

14. Vytvořte akci GetAuthors

Stejně jako u příspěvků vytvoříme akci /store/index.js. Spustit požadavek AJAX k dotazu aplikace WordPress API. Jakmile je přijata úspěšná odpověď, slib bude pak vyřešit a spouštět Storeauthors. mutace, kterou vytvoříme dál.

 GetAuthors: Funkce (kontext) {
  axios.get ('http://lukeharrison.net/
  Webdesigner / WP-JSON / WP / V2 / uživatelé)
  .then (funkce (odpověď) {
  Context.commit ('Storeauthors',
  Response.data)
  })
} 

15. Vytvořit mutaci storátů

V rámci mutací objektu obchodu VUEX vytvořte Storeauthors. mutace pomocí úryvku níže. Stejně jako s Storposts. Od kroku 8 to přebírá užitečné zatížení jeho prošel a nastavuje jej jako hodnotu vlastnictví autorů v našem státě.

 Storeauthors (stát, odpověď) {
  State.Authors = odezva} 

16. Trigger GetAuthors na zatížení

Musíme získat informace o autorovi z WordPress, jakmile aplikace začne načíst. Změnit komponentu nejvyšší úrovně App.Vue. znovu a odeslání getAuthors. akce Vytvořeno () háček životního cyklu jako getposts. akce.

 Vytvořeno () {
  To. $ Store.Dispatch ('GetAuthors')
   To. $ Store.Dispatch ('getposts')} 

17. Vytvořit metodu getusername

Nyní jsme dotazováni WordPress pro informace o autorovi na zatížení, vše, co musíme udělat, je definovat metodu v našich příspěvcích komponentu, která nám umožňuje předat ID autora a získat jméno na oplátku. Zkopírujte úryvek níže do objektů komponenty příspěvků pod existenci GetsingLepost. metoda.

 Getusername: Funkce (UserID) {
  var username = 'neznámý';
  To. $ Store.state.
  Autoři.Filter (funkce (uživatel) {
  Pokud (user.id === userID) {
  Uživatelské jméno = User.name.
  }
  });
  vrátit uživatelské jméno;
} 

18. Call Getusername Method

Teď prostě musíme zavolat getusername. . Stále v komponentu Příspěvky, v šabloně, nahraďte odkaz na atribut autora post.Author. Tak to odráží úryvek níže. Jméno autora by nyní mělo být správně zobrazeno pro každý příspěvek.

: Autor = "Getusername (post.author)" 

19. Blog Loading.

Když načteme poštovní data asynchronně, je zde okamžik před dokončením požadavku, kde je aplikace prázdná. Chcete-li to čelit, budeme realizovat stav načítání, který je aktivní, dokud je blog plně obydleno. Ve složce příspěvků vložte pod úryvkem pod otvorem & lt; scénář a gt; TAG pro import ikon budeme používat.

 Import Ikona z '@ / komponenty / Ikony / Ikony'
import načítání z './../../
Aktiva / IMG / Loading.SVG '

20. Přidat ikonu do seznamu komponentů

Dále, stále v rámci příspěvků přidejte odkaz na ikonu v objektů součástí. Díky tomu je příspěvková komponenta vědoma naší nedávno importované ikonové komponenty.

 Komponenty: {
   ikona,
   Příspěvek} 

21. Vytvořit nakládací prvky

Nyní prostě musíme přidat načítání prvků do šablony příspěvků, takže se zobrazí na stránce. Za prvé, zabalte druhou Div v úryvku kolem dvou divů v-jestliže Směrnice, aby se ujistil, že žádné příspěvky nevykazují, dokud není načítání dokončeno.

Pak přidejte první Div od úryvku nad ním. To obsahuje ikonu načítání a a v-jestliže Směrnice, což znamená, že bude viditelná pouze do okamžiku, kdy je aplikace plně naložena. Po provedení by mělo být zatížení realizováno.

 & lt, div v-if = "! To. To. $ Store.State.posts"
třída = "u-align-center" & gt;
   

22. Aktualizujte cesty pro jednotlivé příspěvkové atributy

Jediná věc, kterou má udělat, je, aby se ujistil, že jednotlivé příspěvky jsou správně nastaveny tak, aby používali data Wordpress Post v obchodě VUEX. Prvním krokem je aktualizovat cesty atributů v šabloně komponent sloupků v rámci v-if = "this.type === 'single'" div, který zpracovává zobrazení jednotlivých příspěvků.

 Switch 'singlpost.title' na 'singpost.title.Rendered'
 Switch 'singpost.author' to 'getusername (singlePost.author)'
 Switch 'singpost.fullimage' na 'singpost.acf.header_image'
 Switch 'SinglePost.Content' na 'SimplePost. Content.Rendered '

23. Refactor GetSingSingPost Metoda

Musíme také refaktor komponenty sloupků GetsingLepost. metoda. Potřebuje vrátit slib, který odesílá getposts. akce. V návaznosti pak Funkce, budeme hledat příspěvky obchodu Vuex Store pro záznam se slimákem odpovídajícím, který byl předán v adrese URL. Pokud jste zjistili, kopírujeme data do místního státu naší komponenty a vyřešte slib. Pokud to není nalezeno, slib bude odmítnut.

 GetSingingLepost: Funkce () {
   vrátit nový slib
   ((vyřešit, odmítnout) = & gt; {
  To. $ Store.Dispatch ('getposts')
  .then (() = & gt; {
  var foundpost = false;
  To. $ Store.State.posts.
  Filtr ((pošta) = & gt; {
  Pokud (post.slug ===
  to. $ route.params.slug) {
  Tento.singlePost = post;
  foundpost = true; }
  });
  Foundpost? Vyřešení (): Odmítnutí ();
  })
  })
} 

24. Refactor Příspěvky vytvořené () hák

Dále potřebujeme refaktor Vytvořeno () Životní cyklus v komponentě. Pokud potřebujeme zobrazit jeden příspěvek, hák by měl zavolat GetsingLepost. Metoda z předchozího kroku a pokud je jeho slib odmítnut, pošlete uživatele na stránku 404 'stránky nebyla nalezena. To je třeba účtovat scénáře, kde uživatelé zadají neexistující příspěvek Slug v URL.

 Vytvořeno () {
  Pokud (this.Type === 'Single') {
  this.getsingLepost (). Pak (null, () = & gt; {
  To. $ router.Push ({Jméno: 'Pagenotfound'})
  });
  }
} 

25. Přidejte směrnici v-pokud

Posledním krokem je přidat úryvek níže na post komponentu v rámci v-if = "this.type === 'single'" Div v šabloně. Tato směrnice znamená, že příspěvek se zobrazí pouze v případě, že místní poštovní data zpřístupněná GetsingLepost. metoda je osídlena. To je zastavit vue předčasně vykreslování komponenty a tím způsobuje chyby.

 V-If = "SOWPOST" 

26. Sestavte aplikaci

Nyní se vším, co pracuje v konzole, zrušte NPM běží dev. Příkaz nebo otevřete novou konzolu a spusťte níže uvedený příkaz, abyste vytvořili verzi připravenosti výroby pro nahrání na vlastní server. To se zobrazí v dist.da adresář.

 NPM Run Build 

Tento článek se objevil v problému 268 webového designéra, časopis Creative Web Design - nabízet odborné konzultace, špičkové trendy a volné zdroje. Přihlásit se k odběru webového designéra.

Přečtěte si více:

• 32 Nejlepší WordPress Témata
• 10 Top WordPress Zdroje
• . \ T Nejlepší platformy zdarma blogování