Power A blog a WordPress API használatával

Az elmúlt években a Wordpress számára a pihenő API fejlesztése új ajtókat nyitott a fejlesztők számára. A fejlesztők, akik korábban kizárólagosan írás egy WordPress-meghajtású projekt PHP most már nagyobb rugalmasságot és ellenőrzést, hogyan tudják megközelíteni a technológiai stack saját website-to-be.

Ez azt jelenti, hogy lehetséges megőrizni a Brilliant WordPress kezelőpanel minden előnyét, amely rendkívül rugalmas a népszerű WordPress plugins Mint például a fejlett egyéni mezők, és teljesen egyedi épített frontend, amely csak a WordPress-szel kölcsönhatásba lép, ha szükséges.

• Töltse le a bemutató fájlokat

Ebben WordPress bemutató A WordPress Rest API-t egy egyszerű blogalkalmazásba kívánjuk megvalósítani, amely jelenleg egy helyi JSON fájlt használ az adatforrásként, és egyoldalas JavaScript keretrendszerrel (SPA) épül fel Vue.js . Ez magában foglalja a VUEX megvalósítását, amelyet az adatok tárolására használunk a Wordpress-től, a cselekvési és mutációs módszerek kombinációjával.

Miután befejeztük, létre kellett volna létrehoznod egy sovány, egyszerű gyógyfürdőt, amely a Vue.js reaktivitásával rendelkezik, miközben a WordPress által kezelt álláshelyek megjelenítése és kezelése.

A félelmetes API-k felfedezéséhez nézzük meg a legjobb útmutatót JavaScript Apis , HTML API-k és Google Apis .

01. A munkaterület és a függőségek beállítása

Először is, először Töltse le a projekt fájljait és nyissa meg őket az előnyben részesített szerkesztőben.

A konzolban CD-ben weboldal-sablon és futtassa az alábbi parancsot a projekt csomópont-függőségeinek telepítéséhez (ha nincs telepítve, csináld ezt először ). Pusztán fogunk dolgozni a src Könyvtár innen ki.

npm install

02. Telepítse a VUEX-t

Ezután az alábbi parancs használatával telepítjük Vuex , amely egy állami menedzsment minta és könyvtár a Vue.js alkalmazásokhoz. Ez központi információs tárolóként működik minden olyan VHE komponenshez, amely a WordPress API-tól kapott adatoktól függ. A reakciót ismerő fejlesztők számára a VUEX erősen inspirálódik a fluxus által.

npm install vuex --save

03. Indítsa el a fejlesztési kiszolgálót

A konzolban futtassa az alábbi parancsot a fejlesztési kiszolgáló elindításához. Ez összeállítja a VUE.js projektet, ahogy jelenleg áll, és hozzárendeli az URL-hez, így hozzáférhet. Ez általában LocalHost: 8080 .

Egy nagy előny Ez az élő újratöltés, így miután módosítja az alkalmazás és a mentés, az oldal a böngésző frissíti magát anélkül, hogy szükség van manuálisan újratöltésre.

npm run dev

04. VUEX tároló létrehozása

Ban ben src , hozzon létre egy hívott könyvtárat bolt és belül egy új fájl hívott index.js . Ez lesz, ahol a VUEX áruházunk meghatározása lesz. Bár mielőtt eljutnunk, először meg kell győződnünk arról, hogy a Vue.js alkalmazásunk tisztában van annak létezésével. Ehhez nyitva main.js és importálja a boltot, és függőséget, mint az alábbi részleteket.

 Az "VUE" importálása
Alkalmazás importálása a "./app" -ról
Import router a './Router'
Import Store "./Store"
Vue.config.productiontip = FALSE
/ * ESLINT-tiltás nem új * /
Új VUE ({
  EL: '#App',
  router,
  bolt,
  Sablon: '& LT; App / & Gt;
  Alkatrészek: {app}
}) 

05. Hozzon létre tárolási állványzatot és telepítse axios

Ahhoz, hogy segítsen nekünk egyszerűsíteni az AJAX kéréseket, üzletünk lesz a WordPress API-hoz, telepítjük axios, amely egy ígéret alapú HTTP kliens. Ehhez nyissa meg a külön konzol ablakot, navigáljon a weboldal-sablon könyvtár és futás NPM telepítése Axios - Mentés .

Ezután kezdjük állni a boltot az új üres VuEX áruház objektumának előkészítésével. Jelenleg nem csinál semmit, de legalábbis tudatában kell lennie.

 Axios importálása az "axios" -tól
Import VUE az "VUE" -ről
Import VUEX a "VUEX"
VUE.USE (VUEX)
const store = új vuex.Store ({
  állapot: {},
  Műveletek: {},
  Mutációk: {}
})
Alapértelmezett tároló exportálása 

06. Hozzon létre hozzászólásállapotokat

A VUEX-ben az állami objektum alkalmazza az alkalmazásinformációt, amely ebben az esetben az API-t használó WordPress postaadatok lesz. Ebben az objektumon belül hozzon létre egy új tulajdonságot, és hozzárendeli a null értékét.

 Állam: {
  Hozzászólások: null
} 

07. GetPosts akció létrehozása

A VUEX-ben az Asynchronous kérések kezelése a műveletek. Ezek jellemzően a boltban definiált módszerek, amelyeket ezután az alkalmazás igényelhet.

Üres cselekvések Az objektum, akkor határozzuk meg az egyiket, ahol a hozzászólásállapotunk még mindig null, az Axios egy AJAX kérés végrehajtására szolgál a WordPress API-nak, és visszaadja a bejegyzések listáját. Miután pozitív választ kaptunk, akkor megoldjuk az ígéret és elkötelezi az állásokat a Tartozékok mutáció.

 GetPosts: funkció (kontextus) {
  Új ígéret visszaadása ((megoldja, elutasítja) = & gt; {
  ha (kontextus.state.posts) {
  elhatározás()
  }
  más {
  Axios.get ('http://lukeharrison.net/
  Webdesigner / WP-JSON / WP / V2 / POSTS ')
  .hen ((válasz) = & gt; {
  kontextus.comMit ("Storeposts",
  válasz.data)
  elhatározás()
  }). fogás (hiba) = & gt; {
  Elutasítás (hiba);
  });
  }
  })
} 

08. Hozzon létre stadposts mutációt

A VUEX által bevezetett másik koncepció mutációk, amelyek szintén jellemzően a boltban vannak meghatározva. A mutációk az egyetlen módja annak, hogy megváltoztassák az állapotot a VUEX áruházban, amely lehetővé teszi az állam számára, hogy könnyen nyomon kövesse a hibakeresés során.

Üres mutációk Tárgy, határozzuk meg a Tartozékok Az előző lépésben hivatkozott módszer, és hogy felülbírálja az állami objektumot az állami objektumban, a mutáció hasznos terhelésként kapja meg.

 Storeposts (állam, válasz) {
   state.posts = válasz} 

09. TRIBGER GETPOSTS ACTION on Load

Létrehoztuk azokat a cselekvési és mutációs módszereket, amelyek megragadják a WordPress API-t, és elkötelezzük magukat a VUEX állapotba, de most már valahol meg kell valósítanunk ezt a folyamatot. A felső szinten Vue.js komponens App.Vue , Adja hozzá az alábbi részleteket.

létrehozott () egy olyan életciklus horog, amely kódot vált ki, amint az VUE komponens terhelésre kerül, miközben a globális használatát használja $ Store A változó lehetővé teszi számunkra, hogy elérjük a VUEX áruházunk tartalmát, és elküldjük a getposts a 7. lépésben.

 létrehozott () {
   Ez. $ store.dispatch ('GetPosts')} 

10. Az attribútum útvonalak frissítése

Ha Chrome-ban vagy Firefoxban dolgozik, és van a Vue.js devtools kiterjesztés (Ha nem, azt javaslom, hogy úgy tegye, mintha nagyon hasznos), most már képes lássa a betöltött wordpress bejegyzéseket Alapállapot alatt Vuex Tab.

Vissza az alkalmazáshoz /components/posts/posts.Vue , A HTML sablonnak erre az adatokra kell mutatnia, ezért csípje meg néhány attribútumútot.

 Kapcsolja be a "Post.Title" -t a "Post.Title.rendeled" -re
 Kapcsolja be a "Post.Preview" -t a "post.acf.preview" -re
 Kapcsolja be a "poszt.previewimage" -t a 'post.acf.header_image_small' 

11. Frissítse a V-for Loop-t

A hozzászólás összetevőjében van egy VUE.JS irányelv a használatban V-for . Ez a hurkok az összes hozzászóláson keresztül, és mindegyikre kinyomtatja a post komponens példányát, megjeleníti őket egy listában.

Frissíteni kell az ezen irányelvnek átadott utat, mivel még mindig a helyi dummy tesztadatokat használja. Frissítse az V-for Irodrációt az alábbi részletekre annak érdekében, hogy a Vuex Store-ban tárolt állásainkra mutasson.

 V-for = "poszt ebben. $ Store.state.posts" 

12. Tegyen néhány háztartást

A WordPress-bejegyzések listáját most meg kell jeleníteni. Mivel már nem használjuk a helyi postafiókokat, töröljük SRC / adatok . Ezután a hozzászólás összetevőjében távolítsa el a Hozzászólások: PostData.data Tulajdon az összetevőkben Helyi Adatbolt, majd a PostData import.

13. Fix Post szerző

Megjegyezheti, hogy minden egyes hozzászóláshoz a szerző számként jelenik meg. Ez azért van, mert a WordPress API visszaadja a szerzői azonosítót, nem pedig nevet. Ezt az azonosítót kell használnunk a WordPress lekérdezéséhez a teljes szerzőinformációhoz. Kezdjük úgy, hogy létrehozzunk egy helyet, hogy ezt a Vuex Store-ban tároljuk, a postafiókunk mellett tárolja / index.js .

 Állam: {
  Szerzők: NULL,
  Hozzászólások: null} 

14. GetAuthors akció létrehozása

Mint a hozzászólásokhoz, létrehozunk egy cselekvést /STORE/INDEX.JS AJAX kérelmet a WordPress API lekérdezésére. Miután sikeres válasz érkezett, az ígéret ezután megoldja és kiváltja a raktárkészülékek mutáció, amit a következőre hozunk létre.

 GetAuthors: funkció (kontextus) {
  Axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / felhasználók)
  .hen (funkció (válasz) {
  kontextus.comMit ("StoreAleutors",
  válasz.data)
  })
} 

15. CreateAlors mutáció

A VUEX áruház mutációs tárgyában hozza létre a raktárkészülékek mutáció az alábbi részletek segítségével. Mint a Tartozékok A 8. lépésben ez megteszi a hasznos terhelést, és meghatározza, hogy a szerzők tulajdonságainak értéke a boltunk állapotában.

 StoreAlors (állam, válasz) {
  state.authors = válasz} 

16. TRIPGER GETAUTHORS a terhelésen

Meg kell kapnunk a szerzőinformációt a WordPress-ről, amint az alkalmazás betöltődik. Módosítsuk a felső szintű összetevőt App.Vue újra és küldje el a getauthors cselekvés ugyanaz létrehozott () életciklus horog, mint a getposts akció.

 létrehozott () {
  Ez. $ store.dispatch ('GetAuthors')
   Ez. $ store.dispatch ('GetPosts')} 

17. Getusername módszer létrehozása

Most már lekérdezzük a WordPress szerzőinformációt a terhelésről, mindössze annyit kell tennie, hogy meg kell határoznunk egy olyan módszert, amely lehetővé teszi a hozzászólás összetevőjében, amely lehetővé teszi számunkra, hogy átadjon egy szerzőigazolót és kapjon egy nevet cserébe. Másolja az alábbi részleteket a Posts komponens módszerei objektumába, a meglévő alatt Getinglepost módszer.

 GetUperName: Funkció (UserID) {
  VAR USERNAME = 'Unknown';
  Ez. $ store.state.
  szerzők.filter (funkció (felhasználó) {
  ha (user.id === userid) {
  username = user.name
  }
  });
  küldje vissza a felhasználónevet;
} 

18. CALL GETUPERNAME MÓDSZER

Most csak meg kell hívnunk getusername . Még mindig a hozzászólás összetevőjében, a sablonban cserélje ki a szerző attribútum hivatkozását post.author Tehát tükrözi az alábbi részleteket. A szerző neve most már helyesen jelenítse meg az egyes bejegyzést.

: Szerző = "GetUphorName (Post.author)" 

19. Blog betöltése

Mivel a közzétételi adatokat aszinkron módon töltjük be, van egy pillanat, mielőtt a kérés befejeződik, ahol az alkalmazás üres. Ennek ellensúlyozásához egy olyan rakodási állapotot valósítunk meg, amely aktív, amíg a blog teljesen lakott. A Posts-komponensben illessze be az alábbi részletet a nyílás után & lt; script & gt; címke az ikonok importálásához.

 Import ikon a '@ / Components / Icons / Icons'
Behozatali betöltés './../../
eszközök / img / loing.svg '

20. Adja meg az ikont az alkatrészek listájához

Ezután, még mindig a bejegyzéseken belül, adjon hozzá egy utalást az ikonok objektumainak ikonjára. Ez teszi a hozzászólásokat a közelmúltban importált ikonkomponensünknek.

 Komponensek: {
   ikon,
   Post} 

21. Loading Elemek létrehozása

Most csak hozzá kell adnunk a rakodóelemeket a posta sablonhoz, így megjelenik az oldalon. Először is, tekerje meg a második div-t a két részben a két DIRS körül a V-, ha irányelvek annak biztosítására, hogy nincs hozzászólás, amíg a betöltés befejeződik.

Ezután adja hozzá az első div-t a fenti fölött. Ez tartalmazza a betöltési ikont és a V-, ha Irányelv, ami azt jelenti, hogy csak akkor lesz látható, amíg az alkalmazás teljesen betöltött. Miután elvégezték, a betöltést most végre kell hajtani.

 & lt; div v-if = "! Ez. $ Store.state.posts"
osztály = "U-Align-Center" & gt;
   & lt; Icon Class = "C-Icon-Loading"
   Használja = "betöltés" & gt; & lt; / ikont & gt;
& lt; / div & gt;
& lt; div v-if = "Ez. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Update Update Egyetlen attribútum útvonalak

Az egyetlen dolog, amit meg kell tennie, hogy az egyetlen bejegyzések helyesen vannak-e beállítva, így a VUEX áruházban a WordPress posta adatait használják. Az első lépés az, hogy frissítse az attribútum útvonalakat a Posts-összetevő sablonban a v-if = "this.Type ===" Egyetlen "" div, amely kezeli az egyetlen hozzászólás megjelenítését.

 Kapcsolja be az "SinglePost.Title" -t az "SinglePost.Title.rendered" -re
 Kapcsolja be az "SinglePost.Author" -t a "GetUpost.Authorhoz"
 Kapcsolja be az "singlepost.fullimage" -t az "single post.acf.header_image" -re
 Kapcsolja be az "SinglePost.content" -t az "SinglePost" -ra. Content.Vered '

23. REFACTOR GETSPOST módszer

Továbbra is vissza kell adnunk a hozzászólásokat Getinglepost módszer. Vissza kell adnia egy ígéretet, amely felesíti a getposts akció. A nyomon követésben azután függvény, akkor keressen a Vuex áruház állások egy bejegyzést csiga összevetjük egy telt az URL. Ha megtalálható, átmásoljuk az adatokat a komponens helyi államunkra, és megoldjuk az ígéretet. Ha nem található, az ígéret elutasításra kerül.

 GetingLepost: Funkció () {
   visszatérjen az új ígéret
   ((Megoldás, elutasítás) = & gt; {
  Ez. $ store.dispatch ('getposts')
  .hen (() = & gt; {
  varedapost = FALSE;
  Ez. $ store.state.posts.
  Szűrés ((POST) = & gt; {
  ha (post.slug ===
  ez. $ route.params.slug) {
  ez.SingLepost = Post;
  alappost = igaz; }
  });
  Alappost? Megoldás (): Elutasítás ();
  })
  })
} 

24. A létrehozott refactor bejegyzések () horog

Ezután vissza kell adnunk a létrehozott () Lifecycle horog a hozzászólás összetevőjében. Ha egy bejegyzést kell megjeleníteni, a horognak hívnia kell a Getinglepost Módszer az előző lépésben, és ha az ígéretét elutasítja, küldje el a felhasználónak a 404 'oldalra nem található oldalra. Ez a számla az eseteket, amikor a felhasználó belép egy nem létező bejegyzést csiga az URL-t.

 létrehozott () {
  ha (ez.Type === "single") {
  this.getsinglepost (). Ezután (null, () = & gt; {
  Ez. $ router.push ({name: 'Pagenotfound'}))
  });
  }
} 

25. Add hozzá V-HA IRÁNYELVET

Az utolsó lépés az alábbi részletek hozzáadása az alábbiakban a Post komponenshez a v-if = "this.Type ===" Egyetlen "" div a sablonban. Ez az irányelv azt jelenti, hogy a hozzászólás csak akkor jelenik meg, ha a helyi postai adatok a Getinglepost A módszer lakott. Ez az, hogy megállítsák az elvégzést, és így hibákat okoznak.

 V-IF = "SinglePost" 

26. Építsd meg az alkalmazást

Most mindent dolgozó, a konzolban törölje a npm dev Parancs, vagy megnyit egy új konzol, és futtassa az alábbi parancsot, hogy létrehozzon egy gyártási kész verziót a saját szerverre való feltöltéshez. Ez megjelenik a liszt Könyvtár.

 NPM Run Build 

Ez a cikk a Web Designer, a Creative Web Design Magazine 268-as számában jelent meg, amely szakértői oktatóanyagokat, élvonalbeli trendeket és szabad erőforrásokat kínál. Iratkozzon fel most a webes tervezőre.

Olvass tovább:

• 32 Legjobb Ingyenes WordPress témák
• 10 Top WordPress erőforrások
• A A legjobb ingyenes blogoló platformok