كيفية إنشاء عرض توضيحي لموضوع WordPress تفاعلي باستخدام مخططات ساحة اللعب

نصيحة: في مثال موقع Twenty-Twenty-Five التجريبي، كان هناك 17 بديلًا في المجمل.

من المحتمل أن تسمح لك بيئة التطوير المتكاملة (IDE) بالعثور على السلسلة المحددة في ملف .xml الخاص بك، بغض النظر عن حجمه. قد ترى مراجع صور أخرى في الملف عند استخدام نفس الصورة بأحجام مختلفة.

أضفت صغيرة باش النصي إلى الريبو; يمكنك تعديله واستخدامه على مسؤوليتك الخاصة.

سيقوم مستورد WordPress بتغيير حجم الصور الجديدة من عناوين URL للمرفقات واستبدال المراجع في أماكن أخرى. ما عليك سوى تغيير كل مرجع للصورة مرة واحدة.

5. قم بإنشاء المخطط الخاص بك

الآن بعد أن أصبح المحتوى التجريبي جاهزًا، فقد حان الوقت لتكوين موقع Playground الخاص بك باستخدام Blueprint.

يحدد Blueprint كيفية إعداد Playground للعرض التوضيحي الخاص بك – ما هو الموضوع الذي سيتم تثبيته، وما المحتوى الذي سيتم استيراده، وما هي الخيارات التي سيتم تطبيقها.

فهم هيكل المخطط

يتكون ملف Blueprint من جزأين رئيسيين:

• إعدادات – توضع في جذر المستند.
• خطوات – الإجراءات المدرجة في مصفوفة يتم تشغيل Playground بالترتيب.

يمكنك معرفة المزيد في وثائق المخطط.

فيما يلي مخطط تفصيلي لملف JSON المبدئي:

{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
... more settings,

"steps": [
	{
        	"step":"installTheme" {
            }
    },
	{
            "step":"importWXR" {
            }
    }
	more steps... 
	]
}

السطر الأول(مخطط $) اختياري.

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

أضف الإعدادات الأساسية

الإعداد الأول هو “تسجيل الدخول”: صحيح.

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

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

قم بتنظيف محتوى WordPress الافتراضي

يتضمن كل تثبيت جديد لـ WordPress نموذجًا للمحتوى — منشورًا وتعليقًا وصفحة — والتي يمكن أن تتداخل مع العرض التوضيحي الخاص بك.

يمكنك إضافة خطوة إلى Blueprint لإزالة المحتوى عن طريق تنفيذ أمر WP-CLI:

      {
        "step": "wp-cli",
        "command": "wp site empty --yes"
      },

قم باستيراد المحتوى التجريبي الخاص بك

لاستيراد المحتوى على وجه التحديد، استخدم خطوة importWxr – باستخدام المجال Raw.githubusercontent.com للإشارة إلى ملف *.xml الخاص بك.

  {
     "step": "importWxr",
     "file": {
       "resource": "url",
       "url": "https://raw.githubusercontent.com/wptrainingteam/tt5-demo-blueprint/main/playgroundcontent.xml"
         }
  }

تثبيت وتفعيل الموضوع

بعد ذلك، قم بتثبيت وتنشيط السمة التي تريد عرضها.

يمكن أن يأتي من مستودع WordPress، أو ملف ZIP، أو دليل ملفات السمات.

يستخدم هذا المثال السمة الافتراضية Twenty-Twenty-Five:

    {
        "step": "installTheme",
        "themeData": {
            "resource": "wordpress.org/themes",
            "slug": "twentytwentyfive"
    },
    "options": {
        "activate": true
    }
    },

ضبط خيارات الموقع

قد ترغب أيضًا في تعيين بعض خيارات الموقع. يمكنك استخدام خطوة أو الاختصار لsetSiteOptions:

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

يوضح المقتطف أدناه كيفية تنفيذ هذه الإعدادات:

"setSiteOptions": {
       "blogname": "Twenty-Twenty-Five",
       "blogdescription": "The WordPress default theme",
       "show_on_front": "page",
       "page_on_front": 80,
       "page_for_posts": 26,
       "permalink_structure": "/%postname%/"

   }

الأرقام ل page_on_front و page_for_posts تطابق معرفات المنشورات في المحتوى المستورد الخاص بك.

يعمل هذا لأنه تم إفراغ الموقع قبل الاستيراد.

اختياري: إضافة المكونات الإضافية

يمكنك أيضًا تضمين المكونات الإضافية — على سبيل المثال، مجموعات الكتل أو WooCommerce.

فيما يلي الاختصار لتثبيت المكونات الإضافية “Block Visibility” و”Public Post Preview” و”Gutenberg” وتفعيلها.

لإضافة المزيد من المكونات الإضافية، ما عليك سوى إضافتها إلى المصفوفة:

{
"plugins": [ "block-visibility","public-post-preview", "gutenberg" ]
}

الجمع بين كل شيء

الآن وبعد أن أضفت كل خطوة، فقد حان الوقت لدمجها في ملف Blueprint كامل واحد.

يحدد JSON النهائي إعداد الموقع التجريبي بالكامل – بدءًا من تنظيف المحتوى الافتراضي وحتى تثبيت القالب الخاص بك واستيراد المنشورات وتعيين خيارات الموقع:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "login": true,
  "steps": [
    {
        "step": "wp-cli",
        "command": "wp site empty --yes"
    },
    {
      "step": "updateUserMeta",
      "meta": {
          "admin_color": "modern"
      },
      "userId": 1
    },
    {
        "step": "installTheme",
        "themeData": {
            "resource": "wordpress.org/themes",
            "slug": "twentytwentyfive"
        },
        "options": {
            "activate": true
        }
    },

    {
      "step": "importWxr",
                    "file": {
                            "resource": "url",
                            "url": "https://raw.githubusercontent.com/wptrainingteam/tt5-demo-blueprint/main/playground-content.xml"
}
    },
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "Theme Demo ",
        "blogdescription": "A preview of a theme",
        "show_on_front": "page",
                "page_on_front": 80,
                "page_for_posts": 26,
        "permalink_structure": "/%postname%/"
      }
    }
  ],
   "plugins": [ "block-visibility","public-post-preview", "gutenberg" ],
}

6. اختبر مخططك

قبل مشاركة العرض التوضيحي الخاص بك، اختبر Blueprint في Playground للتأكد من أن كل خطوة تعمل بشكل صحيح وأن المظهر الخاص بك يظهر على النحو المنشود.

افتح عنوان URL الخاص بـ Playground لبدء تشغيل الموقع التجريبي وتحقق مما يلي:

• يتم تثبيت الموضوع وتنشيطه بشكل صحيح.
• يتم عرض كافة الصفحات والمنشورات والقوائم من شاشة استيراد .xml.
• يتم تحميل الصور من مجلد GitHub /media.
• تعمل الروابط الدائمة وإعدادات الصفحة الأولى كما هو متوقع.

إذا كان هناك شيء يبدو خاطئًا، فراجع blueprint.json بحثًا عن الأخطاء المطبعية أو الفواصل المفقودة.

المخططات هي تعريفية، لذلك حتى مشكلة بناء الجملة الصغيرة يمكن أن تؤدي إلى مقاطعة الإعداد. أصلح أي مشكلات محليًا، وقم بتحميل الملف المصحح إلى GitHub، ثم قم بتحديث رابط Playground للاختبار مرة أخرى.

7. شارك مخططك

أخيرًا، قم بتحميل ملف blueprint.json الخاص بك إلى GitHub وشارك عنوان URL الخاص بـ Playground مع معلمة استعلام Blueprint.

يمكنك استخدام أداة تقصير عناوين URL مثل قليلا لتتبع الاستخدام.

على سبيل المثال:

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wptrainingteam/tt5-demo-blueprint/main/blueprint.json

العرض التوضيحي للموضوع الكامل هو متاح على جيثب ويتضمن:

• المحتوى المراد استيراده
• الصور والأصول في المجلد /media
• ملف blueprint.json
• البرنامج النصي Bash للمساعدة في استبدال عنوان URL للمرفق

نصيحة: ال وثائق المخططات يقدم العديد من الطرق لتكوين مثيل Playground الخاص بك لتلبية احتياجاتك أو احتياجات عملائك.

تعرف على المزيد حول المخططات والملعب

الآن بعد أن تعلمت كيفية استخدام Playground لعرض منتجاتك، استكشف هذه الأدلة على مدونة مطوري WordPress:

يمكنك أيضًا تطبيق هذه المعرفة في ستوديو ووردبريس، والذي يدعم الآن المخططات.