React JS لمستخدمي WordPress: مقدمة أساسية

لأكثر من 15 عامًا حتى الآن ، كان WordPress هو حل CMS الأكثر شيوعًا وكاملاً والذي يتيح لك إنشاء أي شيء من محفظة من صفحة واحدة إلى منصة تجارة إلكترونية كاملة. يستخدم WordPress PHP لجميع البنية التحتية الخلفية مثل التحديثات وواجهات برمجة التطبيقات والمصادقة وطبقة قاعدة البيانات ومعظم الواجهة الأمامية. ومع ذلك ، مثل الأطر الشائعة الأخرى ، تم إجبار WordPress أيضًا على التطور في الآونة الأخيرة.

نظرًا للإمكانات المتزايدة وقوة تطبيقات JavaScript للويب ، بالإضافة إلى تطبيقات سطح المكتب والأجهزة المحمولة الأصلية ، تحاول WP REST API سد الفجوة بين تراث نواة PHP في WordPress وظهور JavaScript. أعتقد أن هذه خطوة كبيرة لـ WordPress لسببين:

1. يمكن لمواقع WP الموجودة استخدام React / Vue أو مكتبة أخرى للواجهة الأمامية لإنشاء تجربة واجهة مستخدم أفضل.
2. على العكس من ذلك ، يحصل مطورو الويب على نظام CMS قياسي صناعي بدون رأس يمكن دمجه بسهولة مع المجموعة التي يختارونها.

هذا وضع يربح فيه الجميع. في هذه المقالة ، سنركز طاقتنا على بناء واجهة React للواجهة الخلفية لـ WordPress. لكن أولاً ، دعنا نلقي نظرة على WordPress REST API.

أساسيات WordPress REST API

بدأ تطوير WP REST API قبل بضع سنوات وتم تصميمه في البداية كمكوِّن إضافي مستقل. قدم WordPress v4.4 ، الذي يحمل الاسم الرمزي "Clifford" ، البنية التحتية الفعلية لـ REST API في قلب WordPress. ظهرت نقاط النهاية الفعلية في WordPress v4.7 ، والذي يحمل الاسم الرمزي "Vaughan". تتيح لك WP API استخدام WordPress كنظام CMS بدون رأس سهل الاستخدام ومستقر وصديق لـ JSON.

جسون

JSON هو التنسيق المفضل إذا كنت ستدمج WordPress مع حزمة JavaScript. يشبه JSON XML من حيث أنه يمنحنا القدرة على نقل البيانات بكفاءة باستخدام صيغة سهلة القراءة للغاية.

JSON هي في الواقع سلسلة تشتمل على تمثيل نصي لكائن JavaScript. يقوم بتخزين البيانات في مجموعة من أزواج القيمة الرئيسية. يمكن أن يبدو مثال JSON البسيط لمنشور WP كما يلي -

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

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

نقاط النهاية

نقاط نهاية WordPress متاحة جدًا للجمهور. إذا كنت تقوم بتشغيل أحدث إصدار من WordPress ، فأنت بحاجة ببساطة إلى إلحاق / wp-json / wp / v2 بنهاية عنوان URL. على سبيل المثال ، يمكنك الوصول إلى نقاط النهاية الأساسية على 127.0.0.1/wp-json/wp/v2 إذا قمت بإعداد مثيل WordPress في مضيفك المحلي. إذا كنت تريد تجميل الناتج ، فيمكنك استخدام امتداد عارض JSON الذي يجعل JSON يبدو جميلًا على متصفحك.

البيانات التي يتم عرضها على شاشتك هي في الأساس المحتوى بالإضافة إلى المعلومات الوصفية بتنسيق JSON. ما فعلته هنا هو تحديد مسار وطلبت من متصفحك جلب البيانات لك.

ماذا نعني بالطريق؟ المسار هو عنوان URL يتم تعيينه لطريقة معينة. يقرأ جوهر WordPress المسار ويفهم أن كل "/" يمثل مسارًا أو معلمة معينة يجب اتباعها.

على سبيل المثال ، يمكن أن تكون نقطة النهاية "/ wp-json / wp / v2 / posts / 1" ، حيث تطلب منشورًا بمعرف يعادل 1. تعد واجهات برمجة تطبيقات WordPress مفيدة لأنها واسعة جدًا. هذا يترجم إلى القدرة على أخذ أي بيانات من موقع الويب الخاص بك وتحويلها إلى نقطة نهاية. يتم دعم جميع الوظائف الأساسية في WordPress تقريبًا وسيتم أيضًا دعم جميع الميزات القادمة. فيما يلي قائمة بـ WordPress APIs المدعومة في لحظة كتابة هذا البرنامج التعليمي:

يمكن لمطوري السمات ، وكذلك مطوري المكونات الإضافية ، إنشاء نقاط نهاية مخصصة لتطبيقهم. إذا كنت ترغب في التحقق من جميع نقاط النهاية المختلفة المتاحة ، يمكنك تنزيل تطبيق مثل Postman. سيوفر لك هذا واجهة المستخدم الرسومية المصممة خصيصًا لاستكشاف واجهات برمجة التطبيقات. علاوة على ذلك ، يمكنك إجراء مكالمات API مباشرة لتطبيقات الطرف الثالث دون الحاجة إلى الاعتماد على المكونات الإضافية.

لنأخذ مثالا. يعد تحميل الملفات والاحتفاظ بنسخ متعددة منها مطلبًا أساسيًا لأي تطبيق ويب حديث. هذا صحيح بشكل خاص في حالة ملفات الوسائط. في WordPress ، هناك وفرة من المكونات الإضافية المتاحة التي يمكنها القيام بذلك نيابة عنك ؛ ومع ذلك ، قد تحتاج إلى إجراء مكالمات إلى خادم WordPress لاستخدامها.

باستخدام WP API ، يمكن استخلاص منطق معالجة الوسائط بعيدًا عن WordPress. يمكنك إجراء جميع مكالمات واجهة برمجة التطبيقات للجهات الخارجية مباشرة من الواجهة الأمامية وهو أمر رائع من حيث فصل الاهتمامات. يمكنك استخدام مكتبة مثل Cloudinary لمعالجة الصور وملفات الوسائط الأخرى أثناء التنقل ثم تحميلها على السحابة. بمجرد التحميل ، يمكن تخزين عنوان URL للصورة في الواجهة الخلفية لـ WP. الخيارات لا حصر لها ويمكنك دمج القطع معًا بأي طريقة تراها مناسبة.

دعنا الآن نرى كيفية توصيل الواجهة الخلفية لـ WordPress بـ React.

الشروع في استخدام React

React هي مكتبة تعريفية للواجهة الأمامية لبناء واجهات مستخدم وتطبيقات تفاعلية على الويب. باستخدام React ، يمكنك تكوين أجزاء أصغر مستقلة من التعليمات البرمجية القابلة لإعادة الاستخدام والمعروفة باسم المكونات. لنقم بإنشاء أول مكون لدينا عن طريق إنشاء مشروع React.

الطريقة الأكثر شيوعًا لإنشاء مشروع React هي تشغيل تطبيق create-react-app. توفر CRA بيئة مريحة لتعلم React وهي أفضل طريقة لبدء إنشاء تطبيق جديد من صفحة واحدة إذا كنت مبتدئًا. يقوم بإعداد بيئة التطوير الخاصة بك بحيث يمكنك استخدام أحدث ميزات JavaScript مثل ES6 و webpack. علاوة على ذلك ، يوفر تطبيق create-reaction-app تجربة مطور رائعة ويحسن تطبيقك للإنتاج.

يجب أن يكون لديك Node> = 8.x و npm> = 5.2 على جهازك. لإنشاء مشروع ، قم بتشغيل الأوامر التالية:


npx create-react-app wp-react-demo


ينشئ الأمر أعلاه نموذجًا معياريًا لتطبيقنا التفاعلي الذي أطلقنا عليه اسم wp-reaction-demo .


cd wp-react-demo
npm start


إذا سارت الأمور على ما يرام ، فيجب أن يكون قادرًا على خدمة التطبيق الذي تم إنشاؤه حديثًا على خادم تطوير على http: // localhost: 3000 /.

إذا كنت مهتمًا برؤية بنية الدليل التي تم إنشاؤها بواسطة تطبيق create-react-app ، فهذا ما يبدو عليه:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


يحتوي الدليل العام على جميع الأصول المطلوبة لبدء التطبيق. يشتمل دليل src على جميع ملفات JavaScript التي سنعمل عليها وستقضي الكثير من وقتك هناك.

عند زيارة localhost: 3000 ، يتم تحميل ملف index.html. إذا فتحت ملف public / index.html ، فلا يوجد الكثير هناك. لكنك ستجد هذا الخط في مكان ما في المنتصف:

<div id="root"></div>

هذه هي نقطة البداية حيث يعرض React شجرة المكون في جذر التطبيق.

ماذا يعني ذلك؟ توجه إلى دليل src وافتح index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

يحاول React العثور على عنصر بالمعرف "root" في المستند ثم يقوم بحقن ملف المكون في الجذر. في الواقع ، يتم تقديم مكون التطبيق ومن هنا يأتي شعار React الدوار. يمكنك التحقق من ذلك عن طريق فتح ملف src / App.js.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

هذا هو الأساس الذي يبدو عليه المكون. يعرض كل مكون جزءًا من واجهة المستخدم الخاصة بك. يمكنك تكوين مكون داخل مكون آخر وهكذا تحصل على هيكل شجرة مكون مثل هذا:

إذا كنت تتساءل عن سبب قدرتنا على استخدام HTML داخل العرض () ، فهذا هو سحر JSX. JSX هو امتداد لغوي لجافا سكريبت ويتيح لك استخدام HTML عادي في ملف جافا سكريبت. يمكنك قراءة المزيد عنها في المستندات الرسمية.

سأقوم بحذف كل محتوى HTML ثم استبدله بامتداد

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';