Power a blog using the WordPress API

पिछले कुछ वर्षों में, वर्डप्रेस के लिए एक आराम एपीआई के विकास ने डेवलपर्स के लिए नए दरवाजे खोले हैं। डेवलपर्स जो पहले PHP में एक वर्डप्रेस-संचालित प्रोजेक्ट लिखने के लिए सीमित रहे थे, में अब अधिक लचीलापन और नियंत्रण है कि वे अपनी वेबसाइट के साथ प्रौद्योगिकी के ढेर तक कैसे पहुंच सकते हैं।

इसका मतलब है कि शानदार वर्डप्रेस नियंत्रण पैनल के सभी फायदों को बनाए रखना संभव है, जिसे लोकप्रिय द्वारा बेहद लचीला बनाया गया है वर्डप्रेस प्लगइन्स जैसे उन्नत कस्टम फ़ील्ड, और एक पूरी तरह से कस्टम निर्मित फ्रंटेंड है जो केवल वर्डप्रेस के साथ इंटरैक्ट करता है जब इसकी आवश्यकता होती है।

[2 9] ट्यूटोरियल फ़ाइलें डाउनलोड करें

इस में वर्डप्रेस ट्यूटोरियल हम वर्डप्रेस बाकी एपीआई को एक साधारण ब्लॉग ऐप में कैसे कार्यान्वित करने के बारे में खोज करेंगे, जो वर्तमान में स्थानीय जेसन फ़ाइल का उपयोग अपने डेटा स्रोत के रूप में उपयोग कर रहा है, और लोकप्रिय जावास्क्रिप्ट ढांचे का उपयोग करके एकल-पृष्ठ अनुप्रयोग (एसपीए) के रूप में बनाया गया है Vue.js । इसमें वूएक्स के कार्यान्वयन को शामिल किया जाएगा, जिसका उपयोग हम उस डेटा को स्टोर करने के लिए उपयोग करते हैं जो हम एक वर्डप्रेस से अनुरोध करते हैं जो हमारे कार्य और उत्परिवर्तन विधियों के संयोजन का उपयोग करके करते हैं।

एक बार पूरा हो जाने पर, आपको एक दुबला, सरल स्पा बनाना चाहिए, जिसमें vue.js की सभी प्रतिक्रियाशीलता है, जबकि वर्डप्रेस द्वारा पुनर्प्राप्त और प्रबंधित पदों को प्रदर्शित करते हुए।

अधिक भयानक एपीआई के लिए अन्वेषण करने के लिए, हमारे गाइड को सर्वश्रेष्ठ में देखें जावास्क्रिप्ट एपीआई , एचटीएमएल एपीआई तथा Google एपीआई ।

01. वर्कस्पेस और निर्भरता सेट अप करें [6 9]

पहले चीजें पहले, आपको चाहिए प्रोजेक्ट की फाइलें डाउनलोड करें और उन्हें अपने पसंदीदा संपादक में खोलें।

कंसोल में, सीडी में वेबसाइट-टेम्पलेट और प्रोजेक्ट की नोड निर्भरताओं को स्थापित करने के लिए नीचे दिए गए कमांड को चलाएं (यदि आपके पास नोड स्थापित नहीं है, पहले ऐसा करो )। हम पूरी तरह से काम करेंगे एसआरसी यहां से निर्देशिका।

npm install

02. वूएक्स स्थापित करें [6 9]

इसके बाद, नीचे दिए गए आदेश का उपयोग करके, हम स्थापित करेंगे वुएक्स , जो vue.js अनुप्रयोगों के लिए एक राज्य प्रबंधन पैटर्न और पुस्तकालय है। यह सभी वीयू घटकों के लिए एक केंद्रीय सूचना स्टोर के रूप में कार्य करेगा जो वर्डप्रेस एपीआई से प्राप्त डेटा पर निर्भर करता है। प्रतिक्रिया से परिचित डेवलपर्स के लिए, वूएक्स प्रवाह से भारी प्रेरित है।

[8 9]

03. विकास सर्वर प्रारंभ करें [6 9]

कंसोल में, विकास सर्वर शुरू करने के लिए नीचे दिए गए आदेश को चलाएं। यह vue.js प्रोजेक्ट को संकलित करेगा क्योंकि वर्तमान में यह एक यूआरएल को खड़ा है और असाइन करता है ताकि आप इसे एक्सेस कर सकें। यह आमतौर पर है लोकलहोस्ट: 8080 ।

यह एक बड़ा फायदा लाता है लाइव रीलोडिंग है, इसलिए एक बार जब आप ऐप में परिवर्तन करते हैं और सहेजते हैं, तो आपके ब्राउज़र में पृष्ठ मैन्युअल रूप से पुनः लोड करने की आवश्यकता के बिना खुद को अपडेट करेगा।

npm run dev

04. वूएक्स स्टोर बनाएं [6 9]

में एसआरसी , एक निर्देशिका कहा जाता है दुकान और इसके भीतर एक नई फ़ाइल कहा जाता है index.js । यह तब होगा जहां हमारे वूएक्स स्टोर को परिभाषित किया जाएगा। यद्यपि इससे पहले कि हम इसे प्राप्त करें, हमें पहले यह सुनिश्चित करने की ज़रूरत है कि हमारे vue.js ऐप अपने अस्तित्व से अवगत है। ऐसा करने के लिए, खुला Main.js और स्टोर को आयात करें और नीचे दिए गए स्निपेट में इसे एक निर्भरता के रूप में शामिल करें।

 'वू' से आयात वीयू
'./App' से ऐप आयात करें
'./router' से राउटर आयात करें
'./store' से आयात स्टोर
Vue.config.productiontip = गलत
/ * eslint- नो-न्यू * / अक्षम करें
नया vue ({
  एल: '#App',
  राउटर,
  दुकान,
  टेम्पलेट: '& lt; ऐप / & gt;',
  घटक: {ऐप}
}) 

05. स्टोर मचान बनाएं और एक्सिस इंस्टॉल करें [6 9]

AJAX अनुरोधों को सरल बनाने में हमारी सहायता करने के लिए हमारी दुकान वर्डप्रेस एपीआई के लिए बनाई जाएगी, हम एक्सियोस इंस्टॉल करेंगे, जो एक वादा आधारित HTTP क्लाइंट है। ऐसा करने के लिए, एक अलग कंसोल विंडो खोलें, पर नेविगेट करें वेबसाइट-टेम्पलेट निर्देशिका और रन एनपीएम इंस्टॉल एक्सिस - सेव ।

इसके बाद, चलिए एक नई खाली वूएक्स स्टोर ऑब्जेक्ट को इंस्टेंट करके स्टोर को मचान करना शुरू करते हैं। फिलहाल, यह कुछ भी नहीं कर रहा है, लेकिन कम से कम vue इसके बारे में जागरूक होना चाहिए।

 'एक्सियोस' से एक्सिओस आयात करें
'VUE' से आयात vue
'Vuex' से vuex आयात करें
VUE.USE (VUEX)
कॉन्स स्टोर = नया vuex.store ({
  राज्य: {},
  क्रियाएं: {},
  उत्परिवर्तन: {}
})
निर्यात डिफ़ॉल्ट स्टोर 

06. पोस्ट स्टेट बनाएं [6 9]

वूएक्स में, राज्य वस्तु में आवेदन जानकारी होती है, जो इस मामले में वर्डप्रेस पोस्ट डेटा होगा जिसे हम एपीआई का उपयोग करके पकड़ लेंगे। इस ऑब्जेक्ट के भीतर, पोस्ट नामक एक नई संपत्ति बनाएं और इसे शून्य का मान असाइन करें।

 राज्य: {
  पद: शून्य
} 

07. GetPosts कार्रवाई बनाएँ [6 9]

वूएक्स में, क्रियाएं मुख्य तरीका हैं जिनमें एसिंक्रोनस अनुरोधों को संभाला जाता है। ये आमतौर पर स्टोर में परिभाषित विधियां हैं, जिन्हें ऐप द्वारा आवश्यकतानुसार भेजा जा सकता है।

खाली में कार्रवाई ऑब्जेक्ट, आइए परिभाषित करें यदि हमारी पोस्ट स्थिति अभी भी शून्य है, तो एक्सियोस का उपयोग वर्डप्रेस एपीआई को अजाक्स अनुरोध करने के लिए किया जाता है और पोस्ट की एक सूची वापस कर दी जाती है। एक बार जब हमें सकारात्मक प्रतिक्रिया मिली है, तो हम वादे को हल करेंगे और पोस्ट का उपयोग करके प्रतिबद्ध करेंगे भंडारपोस्ट परिवर्तन।

 GetPosts: फ़ंक्शन (संदर्भ) {
  नया वादा वापस करें ((हल, अस्वीकार) = & gt; {
  यदि (context.state.posts) {
  संकल्प ()
  }
  अन्य {
  axios.get ('http://lukeharrison.net/
  वेब डिज़ाइनर / डब्ल्यूपी-जेएसओएन / डब्ल्यूपी / वी 2 / पोस्ट ')
  .then ((प्रतिक्रिया) = & gt; {
  context.commit ('storeposts',
  Response.Data)
  संकल्प ()
  })। पकड़ ((त्रुटि) = & gt; {
  अस्वीकार (त्रुटि);
  });
  }
  })
} 

08. स्टोरपोस्ट उत्परिवर्तन बनाएं [6 9]

वूएक्स द्वारा पेश की गई एक और अवधारणा उत्परिवर्तन है, जो आमतौर पर स्टोर में परिभाषित विधियां भी हैं। उत्परिवर्तन एक वूएक्स स्टोर में राज्य बदलने का एकमात्र तरीका है, जो डिबगिंग के दौरान राज्य को आसानी से ट्रैक करने की अनुमति देता है।

खाली में म्यूटेशन वस्तु, चलो परिभाषित करते हैं भंडारपोस्ट विधि हमने पिछले चरण में संदर्भित किया है और इसे किसी भी डेटा के साथ राज्य वस्तु में पोस्ट संपत्ति को ओवरराइड करने के लिए पेलोड के रूप में प्राप्त किया है।

 स्टोरपोस्ट (राज्य, प्रतिक्रिया) {
   राज्य.पोस्ट = प्रतिक्रिया} 

09. लोडपोस्ट लोड पर ट्रिगर करें [6 9]

हमने कार्रवाई और उत्परिवर्तन विधियां बनाई हैं जो वर्डप्रेस एपीआई से पदों को पकड़ती हैं और उन्हें वूएक्स राज्य में प्रतिबद्ध करती हैं, लेकिन अब हमें वास्तव में इस प्रक्रिया को कहीं भी ट्रिगर करने की आवश्यकता है। शीर्ष स्तर VUE.JS घटक में App.vue , नीचे स्निपेट जोड़ें।

बनाया था() एक जीवन चक्र हुक है जो जल्द ही वू घटक लोड पर बनाया गया कोड ट्रिगर करता है, जबकि वैश्विक का उपयोग $ स्टोर चर हमें हमारे वूएक्स स्टोर की सामग्री तक पहुंचने और प्रेषित करने की अनुमति देता है GetPosts चरण 7 से कार्रवाई।

 बनाया गया () {
   इस। $ store.dispatch ('getposts')} 

10. अद्यतन पथ अद्यतन करें [6 9]

[17 9]

[18 9]

यदि आप क्रोम या फ़ायरफ़ॉक्स में काम कर रहे हैं और है [1 9 1] Vue.js devtools एक्सटेंशन

वापस ऐप में, में /components/posts/posts.vue , टेम्पलेट एचटीएमएल को इस डेटा को इंगित करने की आवश्यकता है, इसलिए चलिए कुछ विशेषता पथों को ट्विक करें।

 'post.title' को 'post.title.rendered' स्विच करें
 'Post.preview' को 'post.acf.preview' पर स्विच करें
 'Post.previewiewimage' को 'post.acf.header_image_small' पर स्विच करें 

11. अद्यतन वी-लूप [6 9]

पोस्ट घटक में, उपयोग में एक vue.js निर्देश है V- के लिए । यह सभी पदों के माध्यम से लूप करता है और प्रत्येक व्यक्ति के लिए पोस्ट घटक का एक उदाहरण प्रिंट करता है, उन्हें एक सूची में प्रदर्शित करता है।

हमें इस निर्देश को पारित पथ को अपडेट करने की आवश्यकता है क्योंकि यह अभी भी स्थानीय डमी परीक्षण डेटा का उपयोग कर रहा है। Vuex Store में हमारे संग्रहीत पोस्ट को इंगित करने के लिए नीचे दिए गए स्निपेट के निर्देश के लिए V- के निर्देश को अपडेट करें।

 वी-फॉर = "इस में पोस्ट करें। $ Store.state.posts" 

12. कुछ हाउसकीपिंग करें [6 9]

वर्डप्रेस पोस्ट की एक सूची अब प्रदर्शित होनी चाहिए। जैसा कि हम अब स्थानीय पोस्ट डेटा का उपयोग नहीं कर रहे हैं, आइए हटाएं SRC / डेटा । फिर पद घटक में, हटा दें पद: postdata.data घटकों में संपत्ति स्थानीय डेटा स्टोर और फिर पोस्टडाटा आयात।

13. पोस्ट लेखक को ठीक करें [6 9]

आप देख सकते हैं कि प्रत्येक पोस्ट के लिए लेखक एक संख्या के रूप में दिखाई दे रहा है। ऐसा इसलिए है क्योंकि वर्डप्रेस एपीआई एक नाम के बजाय एक लेखक आईडी देता है। हमें पूर्ण लेखक जानकारी के लिए वर्डप्रेस क्वेरी करने के लिए इस आईडी का उपयोग करने की आवश्यकता है। आइए हमारी पोस्ट जानकारी के साथ, हमारे वूएक्स स्टोर में इसे स्टोर करने के लिए एक जगह बनाकर शुरू करें स्टोर / index.js ।

 राज्य: {
  लेखक: अशक्त,
  पद: नल} 

14. GetAuthors कार्रवाई बनाएँ [6 9]

पदों के साथ, हम एक कार्रवाई करेंगे /store/index.js वर्डप्रेस एपीआई क्वेरी करने के लिए AJAX अनुरोध को ट्रिगर करने के लिए। एक बार सफल प्रतिक्रिया प्राप्त होने के बाद, वादा तब हल हो जाएगा और ट्रिगर करेगा भंडारज्ञता उत्परिवर्तन, जिसे हम आगे बनाएंगे।

 GetAuthors: समारोह (संदर्भ) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / उपयोगकर्ता ')
  .then (कार्य (प्रतिक्रिया) {
  context.commit ('storeauthors',
  Response.Data)
  })
} 

15. स्टोरेथर्स म्यूटेशन बनाएं [6 9]

वूएक्स स्टोर के उत्परिवर्तन वस्तु के भीतर, बनाएँ भंडारज्ञता नीचे दिए गए स्निपेट का उपयोग कर उत्परिवर्तन। की तरह भंडारपोस्ट चरण 8 से, यह पेलोड को अपने स्टोर के राज्य में लेखकों की संपत्ति के मूल्य के रूप में निर्धारित करता है और इसे सेट करता है।

 स्टोरधारकों (राज्य, प्रतिक्रिया) {
  राज्य.अधिकों = प्रतिक्रिया} 

16. लोड पर गेटाउथर्स ट्रिगर करें [6 9]

जैसे ही ऐप लोड होने के बाद हमें वर्डप्रेस से लेखक की जानकारी प्राप्त करने की आवश्यकता है। चलो शीर्ष स्तर घटक में संशोधन करें App.vue फिर से और प्रेषण गेटाउथर्स उसी में कार्रवाई बनाया था() जीवन चक्र हुक के रूप में GetPosts कार्रवाई।

 बनाया गया () {
  यह। $ STORE.DISPATCH ('GetAuthors')
   इस। $ store.dispatch ('getposts')} 

17. GetUserName विधि बनाएँ [6 9]

अब हम लोड पर लेखक की जानकारी के लिए वर्डप्रेस पूछ रहे हैं, हमें बस इतना करना है कि हमारे पोस्ट घटक में एक विधि परिभाषित करें जो हमें एक लेखक आईडी पास करने और बदले में नाम प्राप्त करने देता है। नीचे दिए गए स्निपेट को मौजूदा के नीचे पोस्ट घटक के विधियों की वस्तु में कॉपी करें getsinglepost तरीका।

 GetUSERNAME: फ़ंक्शन (USERID) {
  var उपयोगकर्ता नाम = 'अज्ञात';
  यह। $ Store.State।
  लेखक। फ़िल्टर (फ़ंक्शन (उपयोगकर्ता) {
  यदि (user.id === उपयोगकर्ता) {
  USERNAME = USER.NAME
  }
  });
  वापसी उपयोगकर्ता नाम;
} 

18. गेटसरनाम विधि को कॉल करें [6 9]

अब हमें सिर्फ कॉल करने की आवश्यकता है GetUSERNAME । अभी भी पोस्ट घटक में, टेम्पलेट में, लेखक विशेषता के संदर्भ को प्रतिस्थापित करें post.author तो यह नीचे स्निपेट को दर्शाता है। लेखक का नाम अब प्रत्येक पोस्ट के लिए सही ढंग से प्रदर्शित होना चाहिए।

: लेखक = "getUsername (post.author)" 

19. ब्लॉग लोडिंग [6 9]

चूंकि हम पोस्ट डेटा को असीमित रूप से लोड कर रहे हैं, अनुरोध पूरा होने से पहले एक पल है जहां एप्लिकेशन खाली है। इसका मुकाबला करने के लिए, हम एक लोडिंग स्थिति को लागू करेंगे जो तब तक सक्रिय होता है जब तक कि ब्लॉग पूरी तरह से आबादी न हो। पोस्ट घटक में, खोलने के ठीक बाद नीचे स्निपेट पेस्ट करें & lt; स्क्रिप्ट और जीटी; आइकन आयात करने के लिए टैग हम उपयोग करेंगे।

 '@ / घटक / प्रतीक / आइकन' से आयात आइकन
'./../../ से लोड लोडिंग
संपत्ति / img / loading.svg '

20. घटक सूची में आइकन जोड़ें [6 9]

इसके बाद, अभी भी पोस्ट के भीतर, घटकों ऑब्जेक्ट्स में आइकन का संदर्भ जोड़ें। यह हमारे हाल ही में आयातित आइकन घटक के बारे में पता चला है।

 घटक: {
   आइकन,
   पोस्ट} 

21. लोडिंग तत्व बनाएं [6 9]

अब हमें केवल लोडिंग तत्वों को पोस्ट टेम्पलेट में जोड़ने की आवश्यकता है ताकि यह पृष्ठ पर दिखाई देता है। सबसे पहले, दो divs के चारों ओर स्निपेट में दूसरा div लपेटें वी-आईएफ यह सुनिश्चित करने के लिए निर्देश कि लोडिंग पूरी होने तक कोई पोस्ट दिखाई नहीं दे रही है।

फिर इसके ऊपर स्निपेट से पहला div जोड़ें। इसमें लोडिंग आइकन और ए शामिल हैं वी-आईएफ निर्देश, जिसका अर्थ है कि यह केवल उस बिंदु तक दिखाई देगा जहां ऐप पूरी तरह से लोड हो गया है। एक बार हो जाने के बाद, लोडिंग को अब लागू किया जाना चाहिए।

 & lt; div v-if = "! यह। $ Store.state.posts"
कक्षा = "यू-संरेखित केंद्र" & gt;
   & lt; आइकन वर्ग = "सी-आइकन-लोडिंग"
   उपयोग = "लोडिंग" & gt; & lt; / आइकन & gt;
& lt; / div & gt;
& lt; div v-if = "यह। $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. सिंगल पोस्ट एट्रिब्यूट पथ अपडेट करें [6 9]

एकमात्र चीज जो करने के लिए बाकी है, यह सुनिश्चित करने के लिए कि एकल पोस्ट सही ढंग से सेट हो जाएं ताकि वे वूएक्स स्टोर में वर्डप्रेस पोस्ट डेटा का उपयोग कर रहे हों। पहला कदम पोस्ट घटक टेम्पलेट में विशेषता पथों को अद्यतन करना है v-if = "this.type === 'एकल'" डीआईवी, जो एकल पदों के प्रदर्शन को संभालता है।

 'सिंगलपोस्ट.टाइल' को 'सिंगलपोस्ट.टाइल' पर स्विच करें
 'GetUSERNAME (सिंगलपोस्ट)' के लिए 'सिंगलपोस्ट.अधिकार' स्विच करें
 'सिंगलपोस्ट.फ्रमेज' को 'सिंगलपोस्ट.एसीएफ.हेडर_इमेज' पर स्विच करें
 'सिंगलपोस्ट' 'सिंगलपोस्ट को स्विच करें। Content.Rendered '

23. रिफैक्टर GetSinglePost विधि [6 9]

हमें पोस्ट घटकों को फिर से शुरू करने की भी आवश्यकता है getsinglepost तरीका। इसे एक वादा वापस करने की आवश्यकता है जो प्रेषित करता है GetPosts कार्रवाई। अनुवर्ती तब फिर फ़ंक्शन, हम यूआरएल में पारित एक स्लग मिलान के साथ एक प्रविष्टि के लिए वूएक्स स्टोर की पोस्ट खोजेंगे। यदि पाया जाता है, तो हम डेटा को हमारे घटक के स्थानीय राज्य में कॉपी करेंगे और वादा को हल करेंगे। यदि यह नहीं मिला है, तो वादा अस्वीकार कर दिया जाएगा।

 GetSinglePost: फ़ंक्शन () {
   नया वादा लौटाएं
   ((संकल्प, अस्वीकार) = & gt; {
  इस। $ store.dispatch ('getposts')
  .then (() = & gt; {
  var foundpost = false;
  यह। $ store.state.posts।
  फ़िल्टर ((पोस्ट) = & gt; {
  अगर (post.slug ===
  यह। $ ROUC.PARAMS.SLUG) {
  यह। सिंगलपोस्ट = पोस्ट;
  फाउंडपोस्ट = सत्य; }
  });
  फाउंड्पोस्ट? संकल्प (): अस्वीकार ();
  })
  })
} 

24. REFACTOR पोस्ट () हुक [6 9]

इसके बाद, हमें रिफैक्टर की आवश्यकता है बनाया था() पोस्ट घटक में लाइफसाइक्ल हुक। यदि हमें एक पोस्ट प्रदर्शित करने की आवश्यकता है, तो हुक को कॉल करना चाहिए getsinglepost पिछले चरण से विधि, और यदि इसका वादा अस्वीकार कर दिया गया है, तो उपयोगकर्ता को 404 'पृष्ठ नहीं मिला' पृष्ठ पर भेजें। यह उन परिदृश्यों के लिए है जहां उपयोगकर्ता यूआरएल में एक गैर-मौजूद पोस्ट स्लग दर्ज करते हैं।

 बनाया गया () {
  यदि (यह .type === 'एकल') {
  thit.getsinglepost ()। फिर (अशक्त, () = & gt; {
  यह। $ राउटर.पश ({नाम: 'PagenotFound'})
  });
  }
} 

25. V- यदि निर्देश जोड़ें [6 9]

अंतिम चरण नीचे स्निपेट को पोस्ट घटक में जोड़ने के लिए है v-if = "this.type === 'एकल'" टेम्पलेट में div। इस निर्देश का अर्थ है कि पोस्ट केवल तब प्रदर्शित होगा जब स्थानीय पोस्ट डेटा द्वारा उपलब्ध कराया गया getsinglepost विधि आबादी है। यह घटक को समय-समय पर प्रतिपादन और इस प्रकार त्रुटियों का कारण बनने से रोकना है।

 वी-आईएफ = "सिंगलपोस्ट" 

26. ऐप का निर्माण [6 9]

अब सब कुछ काम करने के साथ, कंसोल में, रद्द करें एनपीएम रन देव कमांड या एक नया कंसोल खोलें और अपने सर्वर पर अपलोड करने के लिए एक उत्पादन तैयार संस्करण उत्पन्न करने के लिए नीचे दिए गए कमांड को चलाएं। यह दिखाई देगा जिले निर्देशिका।

 एनपीएम रन बिल्ड 

यह आलेख वेब डिज़ाइनर, रचनात्मक वेब डिज़ाइन पत्रिका - विशेषज्ञ ट्यूटोरियल, अत्याधुनिक रुझान और मुक्त संसाधनों की पेशकश के अंक 268 में दिखाई दिया। [35 9] अब वेब डिजाइनर की सदस्यता लें।

अधिक पढ़ें:

[2 9] 32 सर्वश्रेष्ठ मुफ्त वर्डप्रेस थीम्स