مقدمة إلى WordPress Playground (بما في ذلك حالات الاستخدام والتعليقات من Lead Dev)

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

👉 في هذا المنشور ، سألقي نظرة على مشروع WordPress Playground ، وأتحدث عن تاريخه ، وأريك كيفية استخدامه ، وأناقش إلى أين ستتجه هذه الأداة المثيرة بعد ذلك.

ما هو WordPress Playground

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

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

• تستخدم الأداة برنامج WebAssembly الثنائي لبناء مترجم PHP.
• بدلاً من MySQL ، هناك مكون إضافي لبرنامج WordPress يقوم بتشغيل SQLite.
• يستخدم خادم الويب تطبيقًا ذكيًا لـ JavaScript كعامل خدمة.

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

جولة سريعة في WordPress Playground

بمجرد التوجه إلى موقع WordPress Playground ، ستقوم الخدمة بإعداد نسخة من WordPress لك ، ويجب أن يستغرق الأمر بضع ثوانٍ فقط. هذا من الناحية الفنية ، على الرغم من وجود المزيد من الاحتمالات المنتظرة (كما سأنظر لاحقًا).

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

• قائمة لمساعدتك في اختيار إصدار معين من PHP أو WordPress.
• خيارات لاستيراد نماذج Playground وتصديرها للاستخدام في المستقبل.

عند اختيار إصدار PHP و WordPress الخاص بك ، يمكنك أيضًا اختيار التخزين المؤقت أو الدائم. يستخدم الأخير ملفات تعريف الارتباط للاحتفاظ بمثيل WordPress الخاص بك.

كما أقترح ، هناك طرق أخرى لتخصيص مثيل WordPress Playground الخاص بك ، والذي سأتناوله قريبًا. في غضون ذلك ، سيبدو باقي التثبيت مثل WordPress النموذجي. المكون الإضافي الوحيد الذي يثبته WordPress Playground هو المكون الإضافي لاستيراد المحتوى:

عند الحديث عن ذلك ، لا يوجد حل مثالي ، وهذا هو الحال أيضًا مع WordPress Playground. دعنا نتحدث أكثر عن هذا بعد ذلك.

قيود WordPress Playground

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

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

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

لماذا يوجد WordPress Playground

WordPress Playground جديد جدًا ولامع. في الواقع ، كان العرض الأول للمشروع في حالة الكلمة في نوفمبر 2022:

إن وتيرة المشروع السريعة - من المفهوم إلى الإدراك - هي نتيجة عمل مطور Automattic Adam Zielinski. كما ينص منشور المدونة التفصيلي الخاص به ، فقد أراد إيجاد طريقة لتثبيت WordPress دون سير عمل طويل أو وقت إعداد.

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

بحلول يونيو 2023 ، تم بث WordPress Playground مرة أخرى خلال الكلمة الرئيسية لشهر يونيو WordCamp Europe 2023 بواسطة Josepha Haden Chomphosy:

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

حيث يناسب WordPress Playground النظام البيئي للمنصة

قبل بضع سنوات ، قام فريق WP Sandbox ببناء Poopy.life - صندوق رمل في WordPress يتيح لك إنشاء تثبيتات جديدة عندما تحتاج إليها مجانًا. لم يدم هذا المشروع طويلاً ، على الرغم من أنه يمكنك أن ترى كيف يستمر المفهوم في WordPress Playground.

على عكس سابقاتها ، يمكن لـ WordPress Playground تقديم طريقة أفضل لدمج النظام الأساسي في كل جانب من جوانب المجتمع تقريبًا.

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

... من المرجح أن يبدأ مؤلفو الإضافات والأسواق في تقديم معاينات تفاعلية قائمة على Playground ؛ قد تضيف برامج تحرير الكود عبر الإنترنت دعم WordPress. قد تقدم شركات الاستضافة تجارب تأهيل تفاعلية حيث تبدأ من خلال تخصيص موقع WordPress حقيقي ...

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

يرى آدم أن WordPress Playground هو "... تجربة WordPress أكثر تفاعلية ..." و "... طريقة يسهل الوصول إليها للتعرف على WordPress." هذه الأنواع من حالات الاستخدام هي بالضبط ما يعنيه. في الواقع ، يمكنك بالفعل رؤية هذا عمليًا ، حيث تتضمن الصفحة الرئيسية لـ WordPress.org رابط جرب WordPress باستخدام Playground:

لأعمال التطوير ، يمكن أن يكون WordPress Playground هبة من السماء. على سبيل المثال ، يمكن أن يكون "... الأدوات القياسية التي يستخدمها مطورو الأدوات للبدء باستخدام WordPress ، وتجربة المواقع المؤقتة ، وإعداد مواقع التدريج ، ومعاينة طلبات السحب".

من المحتمل أن يصبح WordPress Playground طريقة فعلية لإطلاق WordPress ، خاصة لأغراض التطوير. توجد بالفعل طريقة لتشغيل WordPress وتحميله مع إضافة طلب سحب (PR) مكون إضافي خاص بـ Gutenberg ، مثل هذا:

سأترك الكلمات الأخيرة حول كيفية توافق WordPress Playground مع النظام البيئي العام للمنصة:

... الهدف النهائي هو مساعدة WordPress على أن يصبح نظام تشغيل الويب ...

للاستفادة من إمكانات Playground ، تحتاج إلى معرفة كيفية استخدامها. سأريك هذا بعد ذلك.

كيفية استخدام WordPress Playground (أربع نصائح)

في جوهرها ، يعد WordPress Playground سهل الاستخدام والعمل معه. ومع ذلك ، هناك الكثير من الحيل والنصائح والتقنيات المتقدمة لإنشاء التثبيت الدقيق الذي تريده.

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

1. استفد من سمات واجهة برمجة تطبيقات الاستعلام لتنفيذ مهام WordPress وتخصيص النظام الأساسي
2. بناء مخططات JSON لإنشاء تثبيتات WordPress مخصصة
3. تحكم في WordPress Playground باستخدام JavaScript API
4. استخدم WordPress Playground داخل Node.js

1. الاستفادة من سمات Query API لتنفيذ مهام WordPress وتخصيص النظام الأساسي

الطريقة الأساسية لتطبيق WordPress Playground هي باستخدام Query API ، وهو سهل الاستخدام. سيتم عرض التثبيت الخاص بك في iFrame ، بحيث يمكنك تضمينه في أي موقع تقريبًا باستخدام سطر من التعليمات البرمجية:

 <iframe src="https://playground.wordpress.net/"></iframe>

من هنا ، يمكنك تخصيص التثبيت الخاص بك باستخدام خيارات التكوين المخصصة داخل عنوان URL. هناك عدد قليل من الخيارات المتاحة الآن لتغطية معظم المهام الأساسية. على سبيل المثال ، يمكنك اختيار إصدار PHP ووضع الصفحة وخيار التخزين والمزيد.

الجانب الأكثر أهمية هو المكونات الإضافية والسمات التي تقوم بتثبيتها ، فهذه هي الطريقة الوحيدة للقيام بذلك في WordPress Playground:

 <iframe src="https://playground.wordpress.net/?plugin=otter-blocks&theme=neve&url=/wp-admin/post-new.php&mode=seamless"> </iframe>

سيقوم هذا المقتطف بتثبيت Otter Blocks و Neve ، وإظهار WordPress في وضع ملء الشاشة ، وفتحه في صفحة تحرير المنشور. تقوم بإدخالها في شريط العناوين المحاكى على الشاشة:

💡 إنها طريقة مرنة لتثبيت ما تحتاجه ، ويجب أن تكون على دراية به إذا كنت تعرف PHP.

2. إنشاء مخططات JSON لإنشاء تثبيتات WordPress مخصصة

هناك طريقة أخرى مألوفة لتخصيص WordPress Playground وهي من خلال JSON Blueprints API. هنا ، ستستخدم تنسيق JSON لإنشاء ملف تعريف موقع. ستفهم العملية إذا كنت تستخدم Varying Vagrant Vagrants (VVV) لتطوير WordPress المحلي.

 { "$schema": "https://playground.wordpress.net/blueprint-schema.json", "landingPage": "/wp-admin/", "preferredVersions": { "php": "8.0", "wp": "latest" }, "steps": [ { "step": "login", "username": "admin", "password": "password" } ] }

أعتقد أن هذه أكثر مرونة من استخدام Query API ، لأنك لا تحتاج إلى رمز (فقط JSON). علاوة على ذلك ، تجلب واجهة Blueprints API طلبات HTTP نيابة عنك. يمكنك أيضًا استخدام هذه في Node.js أيضًا (المزيد منها لاحقًا) ، على الرغم من أنه من الأسهل لصق المخطط في شريط العنوان المحاكى.

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

3. التحكم في WordPress Playground باستخدام JavaScript API

يوفر WordPress Playground واجهة برمجة تطبيقات JavaScript API الخاصة به والتي تتيح لك تشغيل مثيل والتحكم فيه بطريقة مشابهة للطرق الأخرى. للقيام بذلك ، ستحتاج إلى استخدام npm للحصول على حزمة @wp-playground/client . ستحتاج أيضًا إلى iFrame لعرض تثبيت WordPress الناتج.

إليك مجموعة من التعليمات البرمجية من وثائق WordPress Playground تعرض أقصر طريقة لاستخدام JavaScript API:

 <iframe ></iframe> <script type="module"> // Use unpkg for convenience import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js'; const client = await startPlaygroundWeb({ iframe: document.getElementById('wp'), remoteUrl: `https://playground.wordpress.net/remote.html`, }); // Let's wait until Playground is fully loaded await client.isReady(); </script>

باستخدام كائن client هذا ، يمكنك التحكم في موقع الويب بشكل أكبر باستخدام مخططات ووظائف JSON ، وعميل Playground API. يتيح لك هذا الأخير تشغيل كود PHP محدد ، وتقديم طلبات HTTP ، وتخصيص ملف PHP.ini ، وإدارة الملفات والأدلة ، وتقريبًا كل شيء آخر تتوقع تحقيقه.

4. استخدم WordPress Playground داخل Node.js

WebAssembly هي تقنية أساسية في WordPress Playground ، وبفضلها يمكنك استخدامها داخل Node.js. يفتح هذا الأداة لمساعدتك في التطوير لـ WordPress داخل برامج التحرير المستندة إلى VSCode باستخدام امتداد.

يتيح لك الامتداد تثبيت بيئة تطوير محلية بدون إعداد لا تحتاج إلى تبعيات مثل Apache و MySQL وغيرها. يمكنك بدء تشغيل خادم WordPress بنقرة واحدة من الشريط الجانبي:

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

مستقبل ملعب WordPress

بالنظر إلى أن WordPress Playground جديد - ناهيك عن الإثارة! - المشروع ، التنمية تجري بوتيرة سريعة. هذا يعني أن هناك الكثير من التطورات والتحديثات المثيرة للاهتمام تحدث طوال الوقت.

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

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

ومع ذلك ، يمكن لـ WordPress Playground تقديم المزيد. على سبيل المثال ، هناك المكون الإضافي Interactive Code Block الذي يتيح لك تشغيل PHP في المتصفح بفضل بنية Playground.

هناك أيضًا جهود لجعل WP CLI يعمل مع Playground:

... قضيت بعض الوقت ... تشغيل WP CLI في المتصفح باستخدام Playground. بالتفكير في المستقبل ، يمكن أن يعرض موقع WP CLI محطة طرفية تفاعلية تتيح لك تعلم واستكشاف أوامر WP CLI ...

بشكل عام ، يبدو أن المستقبل سيكون ثقيلًا على WordPress Playground:

... من المرجح أن يبدأ مؤلفو البرنامج المساعد والأسواق في تقديم معاينات تفاعلية قائمة على Playground ...

يبدو هذا تطبيقًا متواضعًا نظرًا لنطاق Playground على وجه العموم. قد يكون هذا علامة فارقة في WordPress كمنصة بنفس الطريقة التي كان بها محرر Block أو ابتكارات مماثلة.

الخلاصة 🧐

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

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

كيف ستساعد WordPress Playground مشاريعك على أن تصبح أفضل؟ دعنا نعرف أفكارك في قسم التعليقات أدناه!