كيفية إنشاء تطبيق ويب حديث باستخدام WordPress و React

ادمج قوة واجهة React الأمامية مع نظام إدارة المحتوى الأكثر شهرة على الإنترنت

هل ترغب في الحصول على مزايا React SPA الحديثة ، ولكن هل تحتاج إلى خلفية خلفية مألوفة؟ في هذه المقالة ، سنتعرف على كيفية إعداد واجهة برمجة تطبيقات REST لـ WordPress ، بما في ذلك أنواع المنشورات والحقول المخصصة ، وكيفية جلب هذه البيانات داخل React.

في الآونة الأخيرة ، كنت أعمل على تطبيق React لأحد العملاء عندما قاموا بنشر هذا السؤال علي: "هل يمكننا استخدامه مع WordPress؟"

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

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

محتويات

الجزء 1: معلومات أساسية

  • ما هو CMS مقطوعة الرأس؟
  • ما الذي يجب علي معرفته للمتابعة؟
  • الاختصارات الرئيسية
  • أين يمكنني مشاهدة بيانات JSON الخاصة بـ WordPress؟

الجزء 2: وورد

  • إضافة نوع منشور مخصص
  • تغيير نص عنصر نائب العنوان
  • إضافة حقل مخصص إلى نوع المنشور المخصص الخاص بك
  • إتاحة الحقول المخصصة كـ JSON
  • تقييد بيانات JSON المرئية

الجزء 3: رد الفعل

  • وعود في جافا سكريبت
  • طريقة الجلب
  • التعامل مع الوعود

مثال عامل في رد الفعل

خاتمة

الجزء 1: معلومات أساسية

ما هو CMS مقطوعة الرأس؟

في الماضي ، كان استخدام CMS مثل WordPress يعني أنه كان عليك بناء الواجهة الأمامية باستخدام PHP.

الآن ، مع CMS مقطوعة الرأس ، يمكنك بناء الواجهة الأمامية الخاصة بك مع أي تقنيات تريد ؛ هذا بسبب فصل الواجهة الأمامية والجهة الخلفية عبر واجهة برمجة التطبيقات. إذا كنت تريد إنشاء SPA (تطبيق من صفحة واحدة) باستخدام React أو Angular أو Vue ، والتحكم في المحتوى باستخدام CMS مثل WordPress ، فيمكنك!

ما الذي يجب علي معرفته للمتابعة؟

ستحصل على أقصى استفادة من هذه المقالة إذا كان لديك:

  • بعض المعرفة حول كيفية عمل CMS مثل WordPress ، وقليلا من PHP ، وفكرة حول كيفية إعداد مشروع WordPress أساسي على جهاز الكمبيوتر الخاص بك ؛
  • فهم جافا سكريبت ، بما في ذلك ميزات اللغة ES6 + وبناء جملة فئة React.

الاختصارات الرئيسية

البرمجة مليئة بالمصطلحات ، لكنها تجعل مناقشة بعض المفاهيم في هذه المقالة أسرع بكثير. إليك ملخص سريع للمصطلحات التي سنستخدمها:

  • CMS - نظام إدارة المحتوى. فكر في ووردبريس ، دروبال ، جملة ، ماغنيتو.
  • SPA - تطبيق من صفحة واحدة. بدلاً من إعادة تحميل كل صفحة بالكامل ، يقوم تطبيق SPA بتحميل المحتوى ديناميكيًا. يتم تحميل الكود الأساسي (HTML ، CSS و JavaScript) للموقع مرة واحدة فقط. اعتقد رد فعل ، فيو ، الزاوي.
  • API - واجهة برمجة التطبيقات. بعبارات بسيطة ، سلسلة من التعاريف ، توفرها الخدمة للسماح لك بأخذ بياناتها واستخدامها. خرائط جوجل لديها واحد. متوسطة واحدة. والآن ، يأتي كل موقع من مواقع WordPress مع واجهة برمجة التطبيقات المدمجة.
  • REST - نقل الحالة التمثيلية. نمط من بنية الويب يستند إلى طرق طلب HTTP: GET و PUT و POST و DELETE. واجهة برمجة التطبيقات المدمجة في WordPress هي واجهة برمجة تطبيقات REST أو "RESTful".
  • HTTP - بروتوكول نقل النص التشعبي. مجموعة القواعد المستخدمة لنقل البيانات عبر الويب. تم تحديده في بداية عناوين URL كـ http أو https (الإصدار الآمن).
  • JSON - تدوين كائن JavaScript. على الرغم من أنه مستمد من JavaScript ، إلا أنه تنسيق مستقل عن اللغة لتخزين ونقل البيانات.

في هذه المقالة ، نستخدم WordPress كـ CMS لدينا. وهذا يعني برمجة الخلفية في PHP واستخدام REST API الخاص بـ WordPress لتقديم بيانات JSON إلى الواجهة الأمامية.

أين يمكنني مشاهدة بيانات JSON الخاصة بـ WordPress؟

قبل الوصول إلى الأشياء الجيدة ، يمكنك ملاحظة سريعة حول المكان الذي يمكنك فيه العثور على بيانات JSON على موقع WordPress الخاص بك. في الوقت الحاضر ، يتوفر لكل موقع من مواقع WordPress بيانات JSON المتاحة (ما لم يقم مالك الموقع بتعطيلها أو تقييد الوصول إليها). يمكنك إلقاء نظرة على JSON الرئيسي لموقع WordPress عن طريق إلحاق / wp-json باسم نطاق الجذر.

لذلك ، على سبيل المثال ، يمكنك إلقاء نظرة على JSON لـ WordPress.org من خلال زيارة https://wordpress.org/wp-json. أو ، إذا كنت تدير موقع WordPress محليًا ، فيمكنك رؤية JSON الخاص به من خلال اتباع localhost / yoursitename / wp-json.

للوصول إلى بيانات منشوراتك ، اكتب localhost / yoursitename / wp-json / wp / v2 / posts. بالنسبة إلى تنسيق منشور مخصص ، يمكنك التبديل بالتنسيق الجديد (مثل الأفلام) بدلاً من النشرات. ما يبدو الآن ككتلة نصية غير قابلة للقراءة هو بالضبط ما سيسمح لنا باستخدام WordPress باعتباره CMS مقطوع الرأس!

الجزء 2: وورد

لإعداد REST API الخاص بك ، سيحدث معظم ما تحتاج إلى فعله في ملف jobs.php الخاص بك. سأفترض أنك تعرف كيفية إعداد مشروع WordPress والوصول إليه باستخدام المضيف المحلي ، ولكن إذا كنت تريد بعض المساعدة في ذلك ، فإنني أوصي بهذا المقال (هذا ما اعتدت عليه لبدء البرمجة مع WordPress).

بالنسبة لمعظم المشروعات ، سترغب في استخدام نوع منشور مخصص ، لذلك دعونا نبدأ بتعيين واحد.

إضافة نوع منشور مخصص

دعنا نقول أن موقعنا يتعلق بالأفلام ، ونريد نوع منشور يسمى "الأفلام". أولاً ، نريد التأكد من تحميل نوع منشورات "الأفلام" في أسرع وقت ممكن ، لذلك سنعلقها على خطاف init ، وذلك باستخدام add_action:

add_action ('init' ، 'movies_post_type') ؛

أنا أستخدم movies_post_type () ، لكن يمكنك استدعاء وظيفتك ما تريد.

بعد ذلك ، نريد تسجيل "الأفلام" كنوع نشر ، باستخدام وظيفة register_post_type ().

قد يبدو الجزء التالي من الشفرة ساحقًا ، لكنه بسيط نسبيًا: تتطلب وظيفتنا الكثير من الحجج المضمنة للتحكم في وظيفة نوع المنشور الجديد ، ومعظمها تشرح نفسها بنفسها. سنقوم بتخزين هذه الوسائط في صفيف args $ الخاصة بنا.

يمكن أن تأخذ إحدى حججنا ، التسميات ، العديد من الحجج المختلفة الخاصة بها ، لذلك نقوم بتقسيم ذلك إلى صفيف منفصل ، تسميات $ ، مما يتيح لنا:

من بين أهم الحجج "الدعم" و "التصنيفات" ، لأن هذه العناصر تتحكم في حقول البريد الأصلية التي يمكن الوصول إليها في نوع المنشور الجديد.

في الكود أعلاه ، اخترنا ثلاثة "دعم" فقط:

  • "اللقب" - عنوان كل مشاركة.
  • "محرر" - محرر النصوص الأساسي ، الذي سنستخدمه لوصفنا.
  • "الصورة المصغرة" - صورة المنشور المميزة.

للاطلاع على القائمة الكاملة لما هو متاح ، انقر هنا للحصول على الدعم ، وهنا للحصول على التصنيفات.

يمكنك أيضًا إنشاء أداة WordPress من أدوات مفيدة لمساعدتك في ترميز أنواع المنشورات المخصصة ، مما يجعل العملية أسرع كثيرًا.

تغيير نص عنصر نائب العنوان

إذا كان نص العنصر النائب للعنوان "أدخل العنوان هنا" مضللاً نوعًا ما لنوع المنشور المخصص ، فيمكنك تعديله في وظيفة منفصلة:

إضافة حقل مخصص إلى نوع المنشور المخصص الخاص بك

ماذا لو كنت تريد حقلًا لا يأتي محددًا مسبقًا بواسطة WordPress؟ على سبيل المثال ، دعنا نقول أننا نريد حقلًا خاصًا يسمى "النوع". في هذه الحالة ، ستحتاج إلى استخدام add_meta_boxes ().

من أجل ، نحتاج إلى ربط وظيفة جديدة بخطاف add_meta_boxes الخاص بـ WordPress:

add_action ('add_meta_boxes'، 'genre_meta_box')؛

داخل وظيفتنا الجديدة ، نحتاج إلى استدعاء وظيفة add_meta_box () WordPress ، مثل:

الوظيفة genre_meta_box () {
  add_meta_box (
    "إشعار العالمي،
    __ ("النوع" ، "موقع الموقع") ،
    "genre_meta_box_callback،
    'أفلام'،
    'جانب'،
    'منخفض'
  )؛
}

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

الدالة genre_meta_box_callback () {
  وظيفة عالمية $؛
  $ custom = get_post_custom ($ post-> ID)؛
  $ genre = $ custom ["genre"] [0]؛
  ؟>
  
  <؟ PHP
}؛

أخيرًا ، لن يحفظ حقلنا المخصص قيمته إلا إذا أخبرنا بذلك. لهذا الغرض ، يمكننا تحديد وظيفة جديدة save_genre () وإرفاقها في ربط save_post الخاص بـ WordPress:

وظيفة save_genre () {
  وظيفة عالمية $؛
  update_post_meta ($ post-> ID ، "printer_category" ،
  $ _POST [ "printer_category"])؛
}؛
add_action ('save_post' ، 'save_genre') ؛

معًا ، يجب أن يبدو الرمز المستخدم لإنشاء الحقل المخصص كما يلي:

إتاحة الحقول المخصصة كـ JSON

مشاركاتنا المخصصة متاحة تلقائيًا في صورة JSON. بالنسبة لنوع منشور "الأفلام" ، يمكن العثور على بيانات JSON الخاصة بنا على localhost / yoursitename / wp-json / wp / v2 / movies.

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

أولاً ، سنحتاج إلى إرفاق وظيفة جديدة بخطاف rest_api_init:

add_action ('rest_api_init'، 'register_genre_as_rest_field')؛

بعد ذلك ، يمكننا استخدام الدالة register_rest_field () المضمنة ، مثل:

الدالة register_genre_as_rest_field () {
  register_rest_field (
    'أفلام'،
    "النوع"،
    مجموعة مصفوفة(
      'get_callback' => 'get_genre_meta_field' ،
      'update_callback' => لاغٍ ،
      'المخطط' => لاغٍ ،
    )
  )؛
}؛

هذه الوظيفة تأخذ مجموعة مع الحصول على وتحديث رد الاتصال. لحالة استخدام أكثر وضوحا مثل هذا ، يجب أن نحتاج فقط إلى تحديد "get_callback":

الدالة get_genre_meta_field (كائن $ ، $ field_name ، قيمة $) {
  return get_post_meta ($ object ['id']) [$ field_name] [0]؛
}؛

ككل ، إليك الرمز الضروري لتسجيل حقل مخصص.

إتاحة عناوين URL للصور المميزة مثل JSON

من خارج الصندوق ، لا يتضمن REST API من WordPress عنوان URL لصورك المميزة. لتسهيل الوصول إلى هذا ، يمكنك استخدام الكود التالي:

عامل تصفية WordPress rest_prepare_posts ديناميكي ، حتى نتمكن من تبديل نوع المنشور المخصص بدلاً من "المنشورات" ، مثل rest_prepare_movies.

تقييد بيانات JSON المرئية

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

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

بعد القيام بذلك ، بمجرد إضافة بعض الأفلام باستخدام الواجهة الخلفية لـ WordPress ، ولدينا كل ما نحتاجه لبدء جلب البيانات إلى React!

الجزء 3: رد الفعل

لجلب البيانات الخارجية في جافا سكريبت ، تحتاج إلى استخدام الوعود. من المحتمل أن يكون لهذا آثار على الطريقة التي تريد بها هيكلة مكونات React ، وفي حالتي (تحويل مشروع React موجود) ، كان علي إعادة كتابة قدر لا بأس به من التعليمات البرمجية.

وعود في جافا سكريبت

تُستخدم الوعود في JavaScript للتعامل مع الإجراءات غير المتزامنة - الأشياء التي تحدث خارج ترتيب التنفيذ المعتاد خطوة بخطوة أو "متزامن" (بعد الرفع).

والخبر السار هو أن جافا سكريبت غير المتزامن أسهل بكثير مما كانت عليه. قبل ES6 ، كنا نعتمد على وظائف رد الاتصال. إذا كانت عمليات الاسترجاعات المتعددة ضرورية (وكثيراً ما كانت) ، فإن التعشيش سيؤدي إلى رمز كان من الصعب جدًا قراءته وتوسيع نطاقه وتصحيحه - وهي ظاهرة تُعرف أحيانًا باسم جحيم معاودة الاتصال أو هرم العذاب!

تم تقديم الوعود في ES6 (أو ES2015) لحل هذه المشكلة ، وشهدت ES8 (أو ES2018) إدخال المزامنة ... تنتظر ، كلمتين أساسيتين مما يزيد من تبسيط الوظائف غير المتزامنة. ولكن لأغراضنا ، فإن الأسلوب الأكثر أهمية القائم على الوعد هو جلب ().

طريقة الجلب

كانت هذه الطريقة متاحة منذ Chrome 40 ، وهي بديل سهل الاستخدام لـ XMLHttpRequest ().

إحضار fetch () وعدًا ومن ثم فهو "قادر على ذلك" ، وهذا يعني أنه يمكنك استخدام الأسلوب then () لمعالجة النتيجة.

يمكنك إضافة جلب إلى طريقة داخل مكون فئة React ، مثل:

fetchPostData () {
  جلب ( `HTTP: // المضيف المحلي / yoursitename / الفسفور الابيض بين سلمان / الفسفور الابيض / V2 / أفلام per_page = 100`؟)
  .ثم (استجابة => response.json ())
  . ثم (myJSON => {
  // المنطق يذهب هنا
})؛
}

في الكود أعلاه ، هناك شيئان مهمان:

  • أولاً ، نتصل بعنوان URL مع الفلتر؟ per_page = 100 تم إلحاقه في النهاية. بشكل افتراضي ، لا يعرض WordPress سوى 10 عناصر لكل صفحة ، وغالبًا ما أجد نفسي أرغب في زيادة هذا الحد.
  • ثانياً ، قبل معالجة بياناتنا ، نستخدم طريقة .json (). تُستخدم هذه الطريقة في المقام الأول بالنسبة إلى إحضار () ، وتقوم بإرجاع البيانات كتعهد وتوزع النص الأساسي كـ JSON.

في معظم الحالات ، نريد تشغيل هذه الوظيفة بمجرد تثبيت مكون React الخاص بنا ، ويمكننا تحديد ذلك باستخدام طريقة componentDidMount ():

componentDidMount () {
  this.fetchPostData ()؛
}

التعامل مع الوعود

بمجرد عودة الوعد ، يجب أن تكون حريصًا في التعامل معه في السياق الصحيح.

عندما حاولت استخدام الوعود لأول مرة ، قضيت بعض الوقت في محاولة لتمرير تلك البيانات إلى متغيرات خارج نطاق الوعد. فيما يلي بعض القواعد البسيطة:

  • في React ، أفضل طريقة لاستخدام الوعود هي عبر الدولة. يمكنك استخدام this.setState () لتمرير بيانات الوعد إلى حالة المكون الخاص بك.
  • من الأفضل معالجة البيانات وترتيبها وترتيبها ضمن سلسلة من أساليب () ثم تتبع الجلب الأولي (). بمجرد اكتمال أي معالجة ، من الأفضل ممارسة إضافة البيانات إلى الحالة ضمن طريقة (+) النهائية.
  • إذا كنت تريد استدعاء أي وظائف إضافية لمعالجة وعدك (بما في ذلك داخل التجسيد ()) ، فمن الممارسات الجيدة منع تشغيل الوظيفة حتى يتم حل الوعد.
  • لذلك ، على سبيل المثال ، إذا كنت تفي بوعدك إلى this.state.data ، فيمكنك تضمين شرط مشروط داخل الجسم لأي وظائف تعتمد عليه ، على النحو التالي. هذا يمكن أن يمنع مزعج السلوك غير المرغوب فيه!
myPromiseMethod () {
  if (this.state.data) {
    // عملية الوعد هنا
  } آخر {
    // ما يجب القيام به قبل أن ينجح الجلب
  }
}

مثال عامل في رد الفعل

دعنا نقول أننا نرغب في اختيار الاسم والوصف و featured_image ونوع نوع منشور WordPress المخصص الذي حددناه في الجزء 1.

في المثال التالي ، سنحضر هذه العناصر الأربعة لكل فيلم ونعرضها.

كما هو الحال دائمًا مع برامج React التعليمية ، قد تبدو مجموعة التعليمات البرمجية التالية مخيفة ، لكنني آمل أن يبدو الأمر أكثر بساطة عندما نقوم بتقسيمه.

منشئ (الدعائم)

في هذه الطريقة ، ندعو super (props) ، ونحدد حالتنا الأولية (كائن بيانات فارغ) ونربط ثلاث طرق جديدة:

  • fetchPostData ()
  • renderMovies ()
  • populatePageAfterFetch ()

componentDidMount ()

نريد جلب البيانات الخاصة بنا بمجرد تثبيت المكون ، لذلك سنتصل بـ fetchPostData () هنا.

fetchPostData ()

نقوم بجلب JSON من عنوان URL الخاص بنا ، بتمرير .json () في أول طريقة .then ().

في الطريقة الثانية. () ، نستخلص القيم الأربع التي نريدها لكل إدخال فيلم قمنا بإحضاره ثم نضيفها إلى كائن newState الخاص بنا.

ثم نستخدم this.setState (newState) لإضافة هذه المعلومات إلى this.state.data.

renderMovies ()

الشرطية إذا كان (this.state.data) يعني أن الوظيفة لن تعمل إلا بعد جلب البيانات.

هنا ، نأخذ مجموعة من جميع أفلامنا التي تم جلبها من this.state.data وننقلها إلى الوظيفة populatePageAfterFetch ().

populatePageAfterFetch ()

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

قيمة movie.description ليست نصًا عاديًا ، لكنها علامة HTML. لعرض هذا ، يمكننا أن نستخدم بشكل خطير SetInnerHTML = {{__ html: movie.description}}.

ملاحظة: السبب الذي يجعل هذا الأمر "خطيرًا" هو أنه إذا تم اختطاف بياناتك لاحتواء نصوص XSS ضارة ، فسيتم تحليلها أيضًا. نظرًا لأننا نستخدم الخادم / نظام إدارة المحتوى الخاص بنا في هذه المقالة ، فلا داعي للقلق. ولكن إذا كنت تريد تطهير HTML الخاص بك ، فقم بإلقاء نظرة على DOMPurify.

يجعل()

أخيرًا ، نحن نتحكم في المكان الذي ستظهر به بياناتنا المقدمة عن طريق استدعاء طريقة renderMovies () ضمن علامات

المختارة. لقد نجحنا الآن في جلب البيانات من موقع WordPress الخاص بنا وعرضها!

خاتمة

بشكل عام ، آمل أن تجعل هذه المقالة عملية ربط واجهة React الأمامية بنهاية WordPress غير مؤلمة قدر الإمكان.

مثل الكثير في البرمجة ، فإن ما يمكن أن يبدو مخيفًا أن يبدأ بسرعة يصبح الطبيعة الثانية مع الممارسة!

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