آموزش جامع Blueprints وردپرس : ساختن پیش‌نمایش زنده افزونه از صفر تا صد!

بیایید با یک صحنه آشنا شروع کنیم: شما ساعت‌ها، روزها و شاید هفته‌ها برای ساخت یک افزونه وردپرس عالی وقت گذاشته‌اید. کدها تمیز هستند، رابط کاربری جذبه و همه چیز بی‌نقص کار می‌کنه. حالا افزونه رو توی مخزن وردپرس منتشر می‌کنید و منتظر می‌مونید…

اما اتفاقی که انتظارش رو داشتید نمی‌افته. نصب‌ها کمه. کاربرا در بخش نظرات می‌پرسن: «آیا این افزونه با قالب من سازگاره؟»، «آیا می‌تونه این کار خاص رو انجام بده؟»، «نصبش سخته؟».

شما هم جواب می‌دید، توضیح می‌دید، اسکرین‌شات می‌ذارید… اما باز هم شک و تردید باقی می‌مونه.

حالا تصور کنید همین صحنه رو با یک تفاوت بزرگ: بالای صفحه افزونه شما، یک دکمه درخشان به نام «Live Preview» یا «دموی زنده» وجود داره. کاربر با یک کلیک، وارد یک محیط کامل وردپرسی می‌شه که افزونه شما رویش نصب و فعال‌سازی شده. می‌تونه تنظیمات رو ببینه، باهاش کار کنه و حس واقعی کار با افزونه شما رو تجربه کنه.

اینجا دیگه نیازی به توضیح نیست. افزونه شما خودش حرفش رو می‌زنه!

این جادوی واقعی Blueprints وردپرس هست. 🪄

در وردپرس ایرانی، ما همیشه دنبال راه‌هایی هستیم که به شما کمک کنه حرفه‌ای‌تر بشید و از بقیه متمایز بشید. امروز می‌خوایم یکی از همین راه‌های قدرتمند رو بهتون معرفی کنیم که می‌تونه نرخ نصب افزونه شما رو متحول کنه.

🤔 Blueprint دقیقاً چیه؟ اینقدر ساده که باورش سخته!

فرض کن می‌خوای برای دوستت یه کیک شکلاتی فوق‌العاده درست کنی. به جای اینکه همه مراحل (خرید مواد، آماده کردن فر، مخلوط کردن، پختن) رو از اول براش توضیح بدی، یه دستور پخت کامل و مرحله به مرحله بهش می‌دی. دوستت فقط کافیه طبق اون دستور عمل کنه تا به همون نتیجه برسه.

Blueprint دقیقاً همون «دستور پخت» برای یک محیط وردپرسه. این یه فایل متنی ساده با فرمت JSON هست که به یک ابزار جادویی به نام WordPress Playground می‌گه:

«سلام Playground! لطفاً یه وردپرس خالی برای من آماده کن. نسخه‌ش این باشه، این افزونه رو روش نصب و فعال کن، وارد پیشخوان شو با این مشخصات، و آخر سر هم این صفحه رو به کاربر نشون بده.»

WordPress Playground هم مثل یک سرآشپز حرفه‌ای، تمام این دستورات رو در چند ثانیه اجرا می‌کنه و یک نمونه کامل و قابل تعامل از سایت شما رو آماده می‌کنه. همه اینها در مرورگر کاربر اتفاق می‌افته و نیازی به هیچ سرور یا نصبی نداره.

😎 پیش نمایشی از این قابلیت

برای اینکه بهتر این موضوع رو درک کنید و نیازش درون افزونه‌تون رو متوجه بشید. پیشنهاد میکنم سری به این افزونه بزنید

https://fa.wordpress.org/plugins/creative-wp-login-page/

این افزونه توسط آژانس وردپرس ایرانی تولید شده و این قابلیت درونش قرار گرفته و میتونید وارد لینک بالا بشید و سپس روی دکمه Live preview کلیک کنید

🎯 چرا این قابلیت اینقدر مهم و باحاله؟ (بیشتر از یک دموی ساده)

1. اعتماد می‌سازه، سریع و محکم: بزرگترین مانع برای نصب یک افزونه، «عدم اطمینان» است. وقتی کاربر بتونه خودش لمس کنه و تست کنه، این مانع کاملاً از بین می‌ره. شما عملاً بهش می‌گید: «نگران نباش، بیا و خودت ببین چقدر عالیه!»
2. از صد‌ها رقیب متمایزت می‌کنه: تو مخزن وردپرس که پر از افزونه‌های مشابهه، داشتن یه دکمه «دموی زنده» مثل اینه که مغازه شما تو یک خیابان شلوغ، نورپردازی خاص و درب ورودی جذابی داشته باشه. چشم هر کاربری رو می‌گیره.
3. نرخ نصب رو به شدت بالا می‌بره: کاربری که ۵ دقیقه با دموی افزونه شما بازی کرده و قابلیت‌هاش رو حس کرده، با اطمینان بسیار بیشتری دکمه «نصب» رو می‌زنه. این یه آمار مهمه که مستقیماً روی موفقیت افزونه شما تأثیر می‌ذاره.
4. بار پشتیبانی رو کم می‌کنه: خیلی از سوالات کاربران درباره «آیا این قابلیت وجود داره؟» یا «چطوری کار می‌کنه؟» با یک بازدید از دموی زنده جواب داده می‌شه. این یعنی شما وقت کمتری برای پاسخ به سوالات تکراری صرف می‌کنید.

👷‍♂️ آناتومی یک فایل Blueprint: نگاهی به داخل جعبه جادو!

حالا فایلی که در ابتدای بحث اشاره کردیم رو با هم باز کنیم و ببینیم داخلش چی هست. این بهترین راه برای یادگیریه.

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/admin.php?page=cwlp-settings",
  "preferredVersions": {
    "php": "8.2",
    "wp": "latest"
  },
  "siteOptions": {
    "blogname": "Creative WP Login Page"
  },
  "phpExtensionBundles": [
    "light"
  ],
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "creative-wp-login-page"
      },
      "options": {
        "activate": true
      }
    }
  ]
}

شاید کدهای بالا برای کسی که تازه شروع کرده، گنگ باشه پس در ادامه عملکرد هر بخش رو بهتون متوضیح میدیم:

• $schema: این مثل یه شناسنامه برای فایل شماست. به Playground می‌گه که این فایل از چه قوانینی پیروی می‌کنه. همون اولین خط رو کپی کنید، دست‌نخورده بذاریدش.
• landingPage: این یکی از مهم‌ترین بخش‌هاست! بعد از اینکه همه چیز آماده شد، کاربر رو به کدوم صفحه ببریم؟ اینجا مشخص شده که کاربر باید مستقیماً به صفحه تنظیمات افزونه «Creative WP Login Page» بره. این یه حرکت هوشمندانه است چون کاربر رو مستقیماً به قلب عملکرد افزونه می‌بره.
• preferredVersions: اینجا به Playground می‌گیم که از چه نسخه‌ای از PHP و وردپرس استفاده کنه. مشخص کردن نسخه PHP (اینجا 8.2) خیلی مهمه، چون اگه افزونه شما به نسخه خاصی نیاز داشته باشه، دموی شما هم همون نسخه رو لود می‌کنه و درست کار می‌کنه.
• siteOptions: اینجا می‌تونید تنظیمات اولیه سایت رو مشخص کنید. مثلاً اینجا اسم سایت رو از «My WordPress Site» به «Creative WP Login Page» تغییر دادن تا برند افزونه توی دموی زنده به چشم بیاد. یه حرکت حرفه‌ای دیگه!
• phpExtensionBundles: [“light”]: این یه نکته پیشرفته و خیلی باحاله! به Playground می‌گه که یه نسخه سبک از PHP رو لود کنه. این باعث می‌شه دموی شما سریع‌تر آماده بشه، مخصوصاً برای کاربرانی که اینترنت ضعیف‌تری دارن. عالیه!
• steps: این قلب تپنده Blueprint شماست. اینجا مراحل کار رو به ترتیب مشخص می‌کنیم:
  1. “step”: “login”: اولین قدم، وارد شدن به پیشخوان وردپرس با یوزرنیم admin و پسورد password هست. این به کاربر اجازه می‌ده که تنظیمات افزونه رو ببینه و باهاش کار کنه.
  2. “step”: “installPlugin”: اینم که مشخصه! می‌گه افزونه‌ای با اسلاگ creative-wp-login-page رو از مخزن رسمی وردپرس (wordpress.org/plugins) دانلود و نصب کن.
  3. “options”: { “activate”: true }: این یه گزینه هوشمندانه‌ست. به جای اینکه یه مرحله جداگانه برای فعال‌سازی تعریف کنیم، اینجا گفتیم که بلافاصله بعد از نصب، افزونه رو هم فعال کن. تموم!

🔧 راهنمای قدم به قدم: اولین Blueprint خودتون رو بسازید!

خب، حالا که با منطق پشت پرده آشنا شدیم، بیایید با هم دست به کار بشیم و قدم به قدم اولین Blueprint خودمون رو برای مخزن وردپرس بسازیم. همراه وردپرس ایرانی باشید تا این مسیر رو با هم طی کنیم.

مرحله ۱: ساخت فایل blueprint.json
یک فایل متنی جدید با نام blueprint.json بسازید. می‌تونید از کد بالا به عنوان نقطه شروع استفاده کنید و اون رو برای افزونه خودتون شخصی‌سازی کنید. از یک ویرایشگر کد مثل VS Code استفاده کنید تا خطاهای احتمالی JSON رو بهتون نشون بده.

مرحله ۲: آپلود فایل به مکان درست
این فایل رو باید در پوشه‌ی assets در مخزن SVN خودتون آپلود کنید. این نکته خیلی مهمه: پوشه assets در کنار پوشه‌های trunk و tags قرار داره، نه داخل اون‌ها! دقیقا در کنار تصاویر مرتبط با اسکرین شات و … افزونه باید قرار بگیره و در داخل یک پوشه به نام blueprints

ساختار باید اینجوری باشه:

your-plugin-name/
├── assets/
│   ├── blueprints/
│        └── blueprint.json   <-- اینجا آپلود میشه!
├── branches/
├── tags/
└── trunk/
    └── your-plugin-files...

مهم: حتماً your-plugin-name رو با نام واقعی اسلاگ افزونه خودتون جایگزین کنید.

مرحله 3: صبر کنید! (سخت‌ترین مرحله!)
حالا همه کارها انجام شده. اما صبر کنید! چون تمام این فایل‌ها روی سرورهای CDN وردپرس کش (Cache) میشن، ممکنه چند ساعت (گاهی تا ۶ ساعت در زمان‌های پرترافیک) طول بکشه تا دکمه «Live Preview» روی صفحه افزونه شما نمایش داده بشه. نگران نباشید، این طبیعیه.

💡 نکات پیشرفته‌تر برای حرفه‌ای‌ها

• پیکربندی اولیه افزونه: آیا می‌خواهید چند تنظیم اولیه افزونه خودتان را از قبل انجام دهید؟ می‌توانید با استفاده از step از نوع runPHP کدهای PHP مورد نیاز برای به‌روزرسانی گزینه‌ها در دیتابیس را اجرا کنید. این کمی پیشرفته‌تر است اما بسیار قدرتمند است.
• ایجاد محتوای نمونه: اگر افزونه شما با نوشته‌ها یا محصولات کار می‌کند، می‌توانید در Blueprints چند نوشته یا محصول نمونه هم بسازید تا کاربر بتواند عملکرد افزونه را در یک شرایط واقعی‌تر ببیند.
• اشکال‌زدایی (Debugging): اگر دموی شما کار نکرد، اول از همه آدرس فایل blueprint.json رو مستقیماً در مرورگرتون باز کنید و مطمئن بشید که در دسترسه و بدون خطا لود می‌شه. بعد از اون، محتوای JSON رو با ابزارهای آنلاین اعتبارسنجی (JSON Validator) چک کنید تا مطمئن بشید از نظر ساختاری درست است.

🎖️ جمع‌بندی نهایی: وقت عمله!

Blueprints دیگر یک ویژگی شیک و اضافی نیست؛ یک ابزار استراتژیک برای موفقیت افزونه شما در دنیای رقابتی امروز است. این قابلیت به شما اجازه می‌دهد که با اعتماد به نفس، بهترین خود را به نمایش بگذارید، شک کاربران را از بین ببرید و نرخ نصب خود را به شکل چشمگیری افزایش دهید.

در وردپرس ایرانی، معتقدیم که موفقیت در دنیای وردپرس فقط با کدنویسی خوب به دست نمیاد، بلکه با هوشمندی در بازاریابی و ارائه بهترین تجربه به کاربرانه ممکنه. Blueprints دقیقاً همین ابزار هوشمندانه است.

دیگر بهانه‌ای برای باقی ماندن در صفحات دوم و سوم مخزن وردپرس وجود ندارد. همین امروز اولین Blueprint خود را بسازید و تفاوت را احساس کنید.

امیدواریم این راهنمای جامع به شما کمک کرده باشه. برای یادگیری ترفندهای بیشتر و عمیق‌تر شدن در دنیای وردپرس، همیشه می‌تونید به مقالات و آموزش‌های ما در وردپرس ایرانی سر بزنید. ما اینجا هستیم تا همراه شما باشیم.