Frontity هو إطار الواجهة الأمامية الجديد لإنشاء مواقع WordPress سريعة
كان WordPress أكثر أنظمة إدارة المحتوى شيوعًا لفترة طويلة الآن. لا يقتصر الأمر على تشغيله على 30٪ من مواقع الويب على الإنترنت فحسب ، بل إنه يضم أيضًا مجتمعًا ضخمًا من المساهمين الذين يحافظون على نظام WordPress البيئي حيًا وقويًا.
WordPress هو في الأساس برنامج خادم يستند إلى PHP. هناك الآلاف من التحسينات والإضافات المخصصة لـ WordPress والتي تكون بشكل أساسي في شكل مكونات إضافية تعتمد على PHP. وبالتالي ، ليس من المستغرب أن تكون هناك محاولات عديدة لدمج أطر غير PHP مع WordPress ، وخاصة إطارات Javascript التي تستحوذ بسرعة على مساحة الواجهة الأمامية في تطوير الويب.
أحد هذه الأطر التي تتسلق المخططات حقًا هو إطار عمل React.js لـ WordPress المسمى Frontity. تم تطويره من قبل شركة ناشئة مقرها في إسبانيا. استمر تطوير المواجهة منذ عامين. ومع ذلك ، فقد ظهرت مؤخرًا أخبارًا عندما جمعت مليون يورو جولة بقيادة الشركة التي تقف وراء WordPress ، آلي وشركة رأس المال الاستثماري KFund. لفهم السبب وراء ذلك ، من المهم أولاً فهم ماهية إطار عمل Frontity وما هي الفوائد التي يجلبها.
ما هي المواجهة؟
قبل أن نتعرف على Frontity ، من الضروري معرفة البنية الأساسية لـ WordPress. كما تعلم ، WordPress هو برنامج خادم يستند إلى PHP. يتطلب برنامج خادم مثل Apache أو Nginx لخدمة الطلبات ، وبرنامج قاعدة بيانات مثل MySQL لتخزين البيانات (المنشورات والصفحات والمستخدمون وما إلى ذلك).
هندسة WordPress
بمجرد أن تفتح ، قل الصفحة الرئيسية لموقع WordPress على الويب ، ستتصل index.php ملف في الخلفية ، والذي سيعيد HTML و CSS و JS للصفحة الرئيسية التي سيتم عرضها بعد ذلك في المتصفح. وبالتالي ، تعمل PHP كواجهة بوابة مشتركة (CGI) لموقع الويب ، وبالتالي فإن أي نوع من التحسينات على الواجهة الأمامية يجب أن يكون مستندًا إلى PHP.
العمارة الأمامية
نظرًا لأن Frontity هو ملف رد فعل باسed framework ، فلنتحدث قليلا عن React JS أولا. React هو إطار عمل جافا سكريبت للواجهة الأمامية تم تطويره ونشره بواسطة Facebook. إنها تحظى بشعبية كبيرة نظرًا لسهولة استخدامها في إنشاء واجهات مستخدم سريعة ومستقرة وسريعة الاستجابة. تعمل React كوحدة نمطية Node JS وبالتالي يجب أن يعتمد موقع الويب الذي يستخدم React على خادم Node JS.
الآن ، إذا كنت تريد استخدام إطار عمل جافا سكريبت خالص مثل React لتحسين الواجهة الأمامية ، أي إنشاء سمات مخصصة ، فسيكون القيام بذلك مرهقًا. والسبب هو أن إطار عمل مثل React يعمل جنبًا إلى جنب مع Node ، والذي يبدأ خادمًا خاصًا به. وكما ذكرنا سابقًا ، يعمل WordPress مع خادم PHP CGI على الواجهة الخلفية. وبالتالي ، لا توجد طريقة مباشرة لإنشاء سمات وواجهات مستخدم مخصصة باستخدام React for WordPress.
ومع ذلك ، هناك طريقة لاسترداد البيانات من قاعدة بيانات WordPress عن بعد. يمكن القيام بذلك باستخدام WordPress REST API ، والتي تم دمجها بالكامل في WordPress الأساسي منذ إصدار WP 4.7 وما بعده. إذا تمكنا من جلب بيانات WordPress عن بُعد ، فهذا يعني أنه يمكننا الآن عرض البيانات التي تم جلبها كما نريد. يستخدم المستخدمون REST API لفترة طويلة لتطوير تطبيقات مخصصة وصفحات ويب للوصول إلى بيانات WordPress مباشرة من قاعدة البيانات. يشار إلى هذا النوع من أنظمة إدارة المحتوى (CMS) أيضًا باسم مقطوعة الرأس CMS.
تعتمد المواجهة على هذا المفهوم بالذات. يتصل بقاعدة بيانات WordPress عبر REST API ، ويهتم بتحليل وتنظيم البيانات المستردة. يترك لك الموضوع الذي ترغب في استخدامه لعرض موقع الويب. نظرًا لأنه يعتمد على React ، يمكن استخدام أي سمة React لموقع الويب. يمكنك أيضًا تطوير المظهر المخصص الخاص بك إذا اخترت ذلك. ستظل الواجهة الأمامية لـ WordPress المستندة إلى PHP مستخدمة من قبل المنشئين / المشرفين لإنشاء محتوى أو تغيير الإعدادات. ولكن سيتم استخدام الواجهة الأمامية المستندة إلى الواجهة على أنها الصفحة الرئيسية للموقع.
وبالتالي ، في إعداد Frontity ، سيكون هناك خادمان مطلوبان: أحدهما هو خادم WordPress ، الذي يحتوي على REST API قيد التشغيل ويعيد بيانات WordPress ، والثاني هو خادم Node JS الذي يقوم بتشغيل Frontity لاستدعاء REST API وعرض البيانات باستخدام React .
الطريق الى الامام؟
مع قيام الشركة التي تقف وراء WordPress بجمع مليون يورو وتقديم React تجربة مستخدم ثرية إلى WordPress ، فلن يكون من المبالغة القول إن Frontity هي الطريق إلى الأمام لمواقع الويب الحديثة التي تعمل بنظام WordPress. سيستمر استخدام واجهة مستخدم WordPress كلوحة تحكم لإنشاء المحتوى بينما سيتم نقل جزء العرض إلى خادم Frontity.
يمكنك قراءة المزيد عن Frontity هنا. إذا كان لديك موقع ويب WordPress وترغب في تجربة Frontity ، فيمكنك اتباع الخطوات المذكورة هنا للقيام بذلك.