كيفية إنشاء تطبيقات React أعلى واجهة برمجة تطبيقات WordPress REST

تحديث 06/16/2017:
لقد قمت بتحديث المشروع لاستخدام ReactRouter 4 و Webpack 2. تم إعادة بناء بعض الأجزاء وتبسيطها. وشملت الروابط إلى الواجهة الأمامية رد فعل تجريبي وورد الخلفية التجريبي.

ووردبريس هو أداة قوية لإدارة المحتوى. لكن عندما يتعلق الأمر بالتطوير ، يمكن أن يكون الأمر محبطًا للغاية. إن مزيج WordPress المجنون من حلقات HTML و PHP غالبًا ما يكون غير سهل الفهم ويصعب صيانته.

هناك ضوء في نهاية النفق ، رغم ذلك! بدءًا من الإصدار 4.7 ، يأتي WordPress مع واجهة برمجة تطبيقات REST مضمّنة ، ولم تعد المكونات الإضافية مطلوبة. هذا يجعل من الأسهل استخدام WordPress بشكل صارم كخلفية تخزين بيانات أو CMS ، مع السماح بحل أمامي مخصص بالكامل من اختيارك.

لم تعد بحاجة إلى تثبيت WordPress محلي والتعامل مع إعداد vhosts. يمكن أن تقتصر عملية التطوير المحلية على بناء الواجهة الأمامية المتصلة بتثبيت WordPress المستضاف على خادم بعيد.

في هذه المقالة ، سأستخدم ReactJS لإنشاء الجزء الأمامي من التطبيق ، React Router للتوجيه ، و Webpack لتجميعه معًا. سأوضح لك أيضًا كيفية دمج الحقول المخصصة المتقدمة ، لأولئك منا الذين أصبحوا يعتمدون عليها كأداة لإنشاء حل بديهي لعملائنا.

المكدس يشبه هذا:
- ReactJs
- رد فعل راوتر v4
- البديل (لتنفيذ التدفق)
- Webpack v2

GitHub repo: https://github.com/DreySkee/wp-api-react
React frontend demo url: http://wp-api-react.surge.sh/
وورد الخلفية التجريبي URL: http://andreypokrovskiy.com/projects/wp-api-react/wp-admin
المستخدم: التجريبي
تمرير: wp-react-demo

إعداد مشروع

دعونا تسمية المشروع "wp-api-react". للمتابعة ، أول ما عليك فعله هو تضمين ذلك في package.json وتشغيل تثبيت npm:

قم بتثبيت webpack و webpack-dev-server على مستوى العالم أيضًا إذا لم تقم بذلك بالفعل:

npm i webpack webpack-dev-server -g

الآن في مجلد المشروع ، قم بإنشاء wepack.dev.js لتكوين التطوير و webpack.production.js مع التكوين لإنشاء المشروع للإنتاج.

الصق هذا في webpack.dev.config.js:

وهذا في webpack.production.config.js:

قم بإنشاء مجلد "src" في جذر المشروع وإنشاء index.html بداخله. سيتضمن ملف index.html مجموعة التعليمات البرمجية هذه:

الآن ، دعونا نضيف بعض المجلدات إلى المشروع. داخل مجلد "src" ، أنشئ مجلد "scripts" ، وداخل مجلد "script" ، أنشئ "مكونات" و "flux" وملف index.js. سيساعد هذا الهيكل في الحفاظ على تنظيم الملفات.

الآن يجب أن تبدو بنية المجلد كما يلي:

الفسفور الابيض بين المعهد-تتفاعل /
 - وحدات العقدة /
 - src /
 - - البرامج النصية /
 - - - المكونات /
 - - - الجريان /
 - - - index.js
 - - index.html
 - package.json
 - webpack.config.js

index.js هي نقطة الدخول إلى Webpack وستحتفظ بجميع المسارات الخاصة بالمشروع. لنقم بتضمين React و React Router وهيكل التوجيه الأساسي في الملف:

يشير index.js إلى المكون الرئيسي في عمليات الاستيراد. نحتاج إلى إنشائه في مجلد "المكونات". Home.js سيكون مكون القالب للصفحة الرئيسية. تضمين هذا في الملف:

إذا قمت بتشغيل npm ، ابدأ في الجهاز داخل مجلد المشروع وفتحت http: // localhost: 8080 / في المتصفح ، سترى رسالة "Hello world!". إذا بدأت في تغيير الملفات ، فسوف يقوم Webpack بإعادة تحميل الصفحة من أجلك.

الجريان مع البديل

الآن حان الوقت لتنفيذ التدفق باستخدام Alt. ستحتاج إلى إنشاء ثلاثة مجلدات جديدة داخل مجلد "التدفق": "بديل" و "مخازن" و "إجراءات":

الفسفور الابيض بين المعهد /
 - وحدات العقدة /
 - src /
 - - البرامج النصية /
 - - - الجريان /
 - - - - بديل /
 - - - - أفعال/
 - - - - متاجر /
 - - - المكونات /
 - - - - Home.js
 - - - index.js
 - - index.html
 - package.json
 - webpack.config.js

قم بإنشاء Alt.js داخل مجلد "alt" ولصقه في الملف:

كل ما يفعله هذا الملف هو تصدير مثيل Alt الذي سنستخدمه في المخازن والإجراءات.

قم بإنشاء DataActions.js في مجلد "الإجراءات". سيكون لهذا الملف كل المنطق للحصول على البيانات من نقاط نهاية واجهة برمجة تطبيقات WordPress REST. للتحدث إلى واجهة برمجة التطبيقات ، سنستخدم axios. تضمين هذا في DataActions.js:

لا تنس استبدال عنوان URL الخاص بتثبيت WordPress الخاص بك.

إنشاء DataStore.js في مجلد "مخازن". سيستمع هذا الملف إلى طريقة getAuccess () DataActions.js التي تُرجع البيانات من واجهة برمجة تطبيقات WordPress. وسوف ثم تخزين ومعالجة البيانات. الصق هذا في DataStore.js:

للحصول على البيانات من واجهة برمجة تطبيقات WordPress وإتاحتها للتطبيق ، يلزمك تضمين DataActions.js في index.js ولف وظيفة التجسيد في DataActions.getPages (). سيتم استخدام الاستجابة التي تم إرجاعها لاحقًا لإنشاء مسارات بشكل حيوي:

الآن في كل مرة يتم فيها بدء تشغيل التطبيق ، يقوم DataActions.getPages () باستدعاء نقطة نهاية WordPress API ويقوم بتخزين البيانات التي تم إرجاعها في DataStore.js.

للوصول إليه ، قم ببساطة بتضمين DataStore.js في أي مكون واتصل بالطريقة المناسبة. على سبيل المثال ، دعنا نحصل على جميع البيانات داخل ملف Home.js و console.log:

بعد أن يقوم Webpack بتحديث الصفحة ، سترى كائن البيانات المرتجعة في وحدة التحكم:

كائن {pages: Array [1] ، منشورات: Array [1]}

الطرق الديناميكية

الآن لا توجد طرق محددة في التطبيق بخلاف طريق الفهرس. إذا كانت لديك بعض الصفحات التي تم إنشاؤها في الواجهة الخلفية لـ WordPress ، فمن المحتمل أنك تريد أن تكون متاحة للواجهة الأمامية. لإضافة مسارات ديناميكية إلى React Router ، نحتاج إلى إضافة طريقة أخرى في index.js ، دعنا نسميها buildRoutes ():

قم بتضمين {this.buildRoutes (response)} داخل React Router مباشرة بعد . يتم تنفيذ الطريقة ببساطة عبر جميع الصفحات التي يتم إرجاعها بواسطة واجهة برمجة تطبيقات WordPress وإرجاع طرق جديدة. لاحظ كيف يضيف مكون "الصفحة الرئيسية" لكل مسار. هذا يعني أنه سيتم استخدام مكون "الصفحة الرئيسية" لكل مسار.

دعنا نقول في ووردبريس لديك صفحة مع سبيكة حول "حول". إذا ذهبت إلى الطريق لتلك الصفحة "/ حول" ، فسيتم تحميلها ولكنك سترى نفس رسالة "Hello World". في حالة احتياجك لقالب واحد فقط لكل صفحة ، يمكنك تركه كما هو والحصول على بيانات خاصة بالصفحة عن طريق الاتصال بـ DataStore.getPageBySlug (slug) وتوفير زر الصفحة الحالي.

في معظم الحالات ، رغم ذلك ، ستحتاج إلى قوالب متعددة لصفحات مختلفة.

قوالب الصفحة

من أجل استخدام قوالب الصفحة ، نحتاج إلى السماح لـ React بمعرفة القالب المطلوب استخدامه مع أي صفحة معينة. يمكننا استخدام سبيكة الصفحة التي يتم إرجاعها بواسطة API لتعيين قوالب لطرق مختلفة.

دعنا نفترض أن لدينا صفحتين مع الرخويات "الصفحة الرئيسية" و "حول". نحتاج إلى إنشاء كائن يعين شرائح الصفحة لرد فعل مسارات المكون. لنقم بتسمية قوالب الكائنات وإدراجها في index.js:

لقد أجرينا أيضًا تحديثات لأسلوب buildRoutes () للمطالبة بالمكون الصحيح. لا تنس إنشاء مكون About.js لتعيين سبيكة "about".

من أجل الحصول على بيانات خاصة بالصفحة ، كل ما عليك فعله هو استدعاء الأسلوب DataStore.getPageBySlug (slug) وتوفير سبيكة الصفحة الحالية:

يجعل() {
    واسمحوا الصفحة = DataStore.getPageBySlug ("حول") ؛
إرجاع (
        
            

تحليل {page.title.rendered}              )؛ }

الملاحة الديناميكية

سنقوم الآن بإضافة التنقل العالمي الذي سيعكس جميع روابط وورد بريس. قم أولاً بإنشاء مكون Header.js في مجلد "المكونات":

نحصل على جميع الصفحات من WordPress باستخدام DataStore.getAllPages () ، ثم نقوم بترتيبها حسب "menu_order" مع lodash و looping من خلالها لإطلاق "React Router" . لاحظ أنه يتم استبعاد مسار الصفحة الرئيسية من صفيف allPages وإدراجه كرابط منفصل.

قم بتضمين المكون Header.js في index.js وسترى التنقل الديناميكي المتضمن في كل صفحة:

الحقول المخصصة المتقدمة

معظم مطوري WordPress معتادون على البرنامج المساعد Advanced Field Fields. يجعل WordPress CMS قابلاً للتخصيص بالكامل وسهل الاستخدام. لحسن الحظ ، من السهل جدًا الوصول إلى بيانات ACF من خلال استخدام WordPress API.

للحصول على بيانات ACF من نقاط النهاية لواجهة برمجة التطبيقات ، نحتاج إلى تثبيت مكون إضافي آخر يسمى ACF to REST API. سيشمل هذا خاصية acf في الكائن الذي تم إرجاعه بواسطة API WordPress. يمكنك الوصول إلى حقول acf مثل:

يجعل() {
    واسمحوا الصفحة = DataStore.getPageBySlug ("حول") ؛
    واسمحوا acf = page.acf؛ // بيانات الحقول المخصصة المتقدمة
إرجاع (
        
            

تحليل {acf.yourCustomFieldName}              )؛ }

الخطوات التالية

حسنًا ، لقد قمنا بتغطية حالة الاستخدام الأكثر شيوعًا للاستفادة من مشرف WordPress CMS ، جنبًا إلى جنب مع واجهة React الأمامية.

قد تكون بعض الخطوات التالية لإضافة تصميم للمشروع في Less أو Sass. أو ربما توسيع ملف DataAction.js عن طريق إضافة استدعاءات نقطة نهاية API إضافية لسحب المزيد من البيانات مثل التعليقات والفئات والتصنيفات.

أوصي بشدة بالتحقق من كتيب WordPress REST API الرسمي ، حيث تم توثيق وظيفة API بشكل جيد. ستجد هناك معلومات حول CRUD ، ترقيم الصفحات ، المصادقة ، الاستعلام ، إنشاء نقاط نهاية مخصصة ، والمزيد. ستساعد هذه الموارد في توسيع ما أنشأناه هنا.

بقلم أندري بوكروفسكي - مطور أول في Gigareef

إذا وصلت إلى هذا الحد ، فقد تكون نوع المطور الذي سيكون لائقًا في Gigareef. نحن نبحث حاليًا عن مطورين موهوبين للعمل في مشاريع تتضمن مشاريع ReactJS / MEAN Stack / Handlebars / Node.

أرسل بريدًا إلكترونيًا إلى jobs@gigareef.com وأخبرنا قليلاً عن نفسك.

Gigareef ، حيث تزدهر التكنولوجيا