بناء مشروع أو تطبيق أمامي يعمل بنظام WordPress CMS

يتطلب إنشاء تطبيق الواجهة الأمامية الذي يعمل بنظام WordPress معرفة WP REST API و AngularJS. يمكنك إنشاء أي تطبيق باستخدام WordPress كخلفية. يمكنك التحرر من القالب التقليدي ونموذج المسؤول المشهور في WordPress.

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

سوف تحتاج إلى مساعدة من wireframes لبناء تطبيق الواجهة الأمامية الذي يعمل بنظام WordPress.

نظرة عامة على المشروع

حان الوقت لفهم المتطلبات والتخطيط للمشروع بأكمله. أول شيء نحتاجه هو سرد الصفحات وصفحات الفردي للمشاركات والمستخدمين والفئات.

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

ما يلي هو الشكل الذي يجب أن يبدو عليه قالب المنشور الفردي.

تتوفر معظم الميزات التي لدينا في الإطار السلكي مع WP REST API ، ولكن هناك بعض الميزات الإضافية التي يتعين علينا إضافتها بمفردنا مثل رابط الصورة المميزة وأسماء الفئات وأسماء المؤلفين.

دعنا نخطو خطوة إلى الأمام ونحلل كيف يجب أن تبدو الإطارات الشبكية للفئات والمشاركات. هذه هي الطريقة التي يجب أن يبدو بها قالب الفئات.

هذه هي الطريقة التي يجب أن يبدو بها نموذج المستخدمين.

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

المتطلبات

قبل أن تبدأ بالمشروع ، تحتاج إلى تثبيت بعض التطبيقات.

1. Node.js للعمل مع أوامر معينة.

2. GulpJS للتحسين و Git للاستنساخ

3. تثبيت WordPress مع البرنامج المساعد WP REST API

في سطر أوامر Github ، يجب عليك كتابة ما يلي لاستنساخ مستودع حزمة HTML -

استنساخ $ git https://github.com/bilalvirgo10/quiescent-rest-api-html.git

مسار $ cd / إلى / مستنسخ / مستودع

سيقوم السطر التالي بتثبيت وحدات Node.js.

تثبيت $ npm

سيستغرق التثبيت بعض الوقت ثم تنفيذ المصدر باستخدام الأمر $ gulp. سيؤدي هذا إلى إنشاء مجلد باسم "dist" حيث يتم الاحتفاظ بجميع ملفات المصدر المترجمة.

حان وقت إنشاء البرنامج المساعد المصاحب -

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

الميزات هي الصورة المميزة للمنشور ، واسم المؤلف للمنشور مع صورة المؤلف من حساب Gravatar وأخيرًا قائمة الفئات لكل منشور.

انتقل إلى مجلد wp-content / plugins الخاص بك وقم بتسميته بنفس اسم المكون الإضافي الخاص بك. على سبيل المثال ، نحن نذهب مع رفيق هادئ.

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

/ **
 * اسم البرنامج المساعد: رفيق هادئ
 * الوصف: البرنامج المساعد للعمل مع سمة Quiescent WP REST API
 * المؤلف: بلال شهيد
 * عنوان URL للمؤلف: http://imbilal.com
 * /

بناء الحقل المخصص للصورة المميزة

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

/ **
 * تعديل استجابة كائن Post
 * /
الوظيفة quiescent_modify_post_response () {
    // إضافة حقل للصورة المميزة
    register_rest_field ('post'، 'quiescent_featured_image'، مصفوفة (
        'get_callback' = 'quiescent_get_featured_image' ،
        'update_callback' = فارغ ،
        "المخطط" = فارغ
    )) ؛
}
add_action ('rest_api_init'، 'quiescent_modify_post_response') ؛

الكود التالي مخصص لإعطاء اسم للحقل المخصص للصورة المميزة واسترداد الصورة.

/ **
 * وظيفة لاسترداد ارتباط الصورة المميز
 * /
function quiescent_get_featured_image ($ post، $ field_name، $ request) {
    $ attachment_id = $ post ['features_media']؛
    $ attachment_info = wp_get_attachment_image_src ($ attachment_id، 'quiescent_post_thumbnail')؛
    إرجاع $ attachment_info [0]؛
}

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

الكود التالي لإنشاء حجم مخصص للصورة المميزة. تم الاحتفاظ بالحجم عند 712 × 348 بكسل.

**
 * اضافة حجم الصورة للصورة المميزة
 * /
الوظيفة quiescent_add_image_size () {
    add_image_size ('quiescent_post_thumbnail'، 712، 348، true) ؛
}
add_action ('init'، 'quiescent_add_image_size')؛

احفظ الملف لأنه تمت إضافة الحقل المخصص الأول ، وسيتبقى اثنان آخران.

المنشورات ذات الصلة: صورة الغلاف مقابل الصورة المميزة في محرر قوالب WordPress

بناء الحقول المخصصة للمستخدمين والفئات

فيما يلي رمز إضافة الحقل لإظهار اسم المؤلف.

// إضافة حقل لاسم المؤلف
register_rest_field ('post'، 'quiescent_author_name'، مصفوفة (
    'get_callback' = 'quiescent_get_author_name' ،
    'update_callback' = فارغ ،
    "المخطط" = فارغ
)) ؛

/ **
 * وظيفة لاسترداد اسم المؤلف
 * /
الوظيفة quiescent_get_author_name ($ post، $ field_name، $ request) {
    return get_the_author_meta ('display_name'، $ post ['author']) ؛
}

الكود التالي هو لإضافة أسماء الفئات.

// إضافة حقل للفئات
register_rest_field ('post'، 'quiescent_categories'، مصفوفة (
    'get_callback' = 'quiescent_get_categories' ،
    'update_callback' = فارغ ،
    "المخطط" = فارغ
)) ؛

/ **
 * وظيفة لاسترداد الفئات
 * /
وظيفة quiescent_get_categories ($ post، $ field_name، $ request) {
    return get_the_category ($ post ['id']) ؛
}

احفظ الحقل والآن لدينا quiescent_featured_image و quiescent_author_name و quiescent_categories باعتبارها الحقول المخصصة الثلاثة المختلفة للميزات غير الموجودة في نموذج القصدير الجاهز.

إحضار صورة Gravatar Pn تنسيق 207 × 207 بكسل

آخر شيء مفقود هو صورة المؤلف من Gravatar. الكود التالي مخصص لذلك فقط.

/ **
 * تعديل الاستجابة لكائن المستخدم
 * /
الوظيفة quiescent_modify_user_response () {
     
}
add_action ('rest_api_init'، 'quiescent_modify_user_response') ؛

/ **
 * تعديل الاستجابة لكائن المستخدم
 * /
الوظيفة quiescent_modify_user_response () {
    // إضافة حقل لأفاتار 207 × 207
    register_rest_field ('user'، 'quiescent_avatar_url'، مصفوفة (
        'get_callback' = 'quiescent_get_user_avatar' ،
        'update_callback' = فارغ ،
        "المخطط" = فارغ
    )) ؛
}

/ **
 * استرجاع الصورة الرمزية للمستخدم
 * /
الوظيفة quiescent_get_user_avatar ($ user، $ field_name، $ request) {
    $ args = مجموعة (
        "الحجم" = 207
    ) ؛
     
    إرجاع get_avatar_url ($ user ['id']، $ args)؛
}

الآن ، كل ما عليك فعله هو إنشاء قوالب ومسارات وخدمات للموارد وإكمال إنشاء واجهة أمامية مدعومة من WordPress بسهولة.