چگونه اولین افزونه خود را بسازید

این راهنما به شما نحوه استفاده از create-woo-extension برای ایجاد یک افزونه WooCommerce را آموزش می‌دهد. مزایای مختلفی در استفاده از create-woo-extension نسبت به ایجاد دستی آن از ابتدا وجود دارد، از جمله:

کد تکراری کمتری برای نوشتن وجود دارد و وابستگی‌های کمتری برای تنظیم دستی لازم است.

ویژگی‌های مدرن مانند Blocks به طور خودکار پشتیبانی می‌شوند و تست واحد، linting و پیکربندی Prettier IDE آماده استفاده هستند.

پس از راه‌اندازی افزونه، به شما نشان خواهیم داد که چگونه فوراً یک محیط توسعه را با استفاده از wp-env راه‌اندازی کنید .

الزامات

قبل از شروع، به ابزارهای زیر نیاز دارید که روی دستگاه شما نصب شده باشند:

• Node.js با NPM
• داکر (برای استفاده از wp-env باید در حال اجرا باشد)
• Composer

این راهنما همچنین فرض می‌کند که شما با کار با خط فرمان آشنا هستید.

بوت‌ استرپ کردن افزونه شما

ترمینال خود را باز کنید و اجرا کنید

 npx @wordpress/create-block -t @woocommerce/create-woo-extension my-extension-name

اگر می‌خواهید یک نام افزونه سفارشی تنظیم کنید، می‌توانید آن را my-extension-nameبا هر slug جایگزین کنید. لطفاً توجه داشته باشید که slug شما نباید هیچ فاصله‌ای داشته باشد.

اگر پیامی مشابه Need to install the following packages: دیدید @wordpress/create-block@4.34.0. Ok to proceed?، را فشار دهید Y.

پس از اینکه بسته، تولید افزونه شما را به پایان رساند، با استفاده از دستور زیر به پوشه افزونه بروید:

 cd my-extension-name

سپس باید وابستگی‌های افزونه را با استفاده از نصب کنید npm install و آن را با استفاده از بسازید npm run build.

تبریک! شما به تازگی یک افزونه ووکامرس ایجاد کرده‌اید! افزونه شما ساختار فایل زیر را خواهد داشت:

• my-extension-name
  • block.json– شامل فراداده‌هایی است که برای ثبت بلوک‌های سفارشی شما در وردپرس استفاده می‌شود. اطلاعات بیشتر.
  • build– نسخه ساخته شده افزونه شما که با استفاده از npm run build تولید شده است. شما نباید مستقیماً هیچ یک از فایل‌های موجود در این پوشه را تغییر دهید.
  • composer.json– شامل فهرستی از وابستگی‌های PHP شما است که توسط Composer ارجاع داده می‌شوند.
  • composer.lock– این فایل به شما امکان می‌دهد زمان و نحوه به‌روزرسانی این وابستگی‌ها را کنترل کنید.
  • includes– هدف اصلی پوشه “includes” در توسعه PHP، ذخیره کدها یا فایل‌های قابل استفاده مجدد است که باید در بخش‌های مختلف یک پروژه گنجانده شوند یا مورد نیاز باشند. این یک قرارداد توسعه‌دهندگان PHP است.
  • languages– شامل فایل‌های POT است که برای بومی‌سازی افزونه شما استفاده می‌شوند.
  • my-extension-name.php– نقطه ورود افزونه شما که افزونه شما را در وردپرس ثبت می‌کند.
  • node-modules– به شما کمک می‌کند تا بلوک‌های سازنده برنامه خود را تشکیل دهید و کد ساختاریافته‌تری بنویسید
  • package.json– قلب یک پروژه Node محسوب می‌شود. این بخش، متادیتا را ثبت می‌کند، وابستگی‌های تابعی را نصب می‌کند، اسکریپت‌ها را اجرا می‌کند و نقطه ورود برنامه شما را تعریف می‌کند.
  • README.md– مقدمه و مروری بر آموزش‌های درخواست شما. هرگونه دستورالعمل ویژه، به‌روزرسانی از سوی نویسنده و جزئیات مربوط به درخواست را می‌توانید در اینجا به صورت متنی بنویسید.
  • src– دایرکتوری ریشه را تمیز نگه می‌دارد و جدایی واضحی بین کد منبع و سایر دارایی‌ها ایجاد می‌کند.
  • tests– می‌تواند تست‌های واحد را برای برنامه شما نگه دارد، آنها را از فایل‌های منبع جدا نگه می‌دارد
  • vendor– وابستگی‌های پروژه و کدهای شخص ثالثی که شما ننوشته‌اید را نگه می‌دارد
  • webpack.config.js– وب‌پک یک بسته‌بند ماژول است. هدف اصلی آن بسته‌بندی فایل‌های جاوا اسکریپت برای استفاده در مرورگر است.

راه‌اندازی محیط توسعه‌ دهنده

ما استفاده از آن را wp-envبرای راه‌اندازی محیط‌های توسعه محلی توصیه می‌کنیم. می‌توانید اطلاعات بیشتری در مورد wp-env را اینجا کسب کنید . اگر wp-env را به صورت محلی نصب نکرده‌اید، می‌توانید آن را با استفاده از npm -g i @wordpress/env .

پس از نصب wp-env، و در حالی که هنوز در my-extension-nameپوشه خود هستید، wp-envدستور start را اجرا کنید. پس از چند ثانیه، یک سایت آزمایشی وردپرس با ووکامرس و افزونه نصب شده شما اجرا خواهد شد.localhost:8888 .

اگر نام سفارشی برای افزونه خود تعیین نکرده‌اید، می‌توانید wp-admin/admin.php?page=wc-admin&path=%2Fmy-extension-nameبه صفحه تنظیمات ایجاد شده توسط /src/index.js مراجعه کنید. ترکیب نام کاربری/رمز عبور پیش‌فرض برای / wp-envاست .adminpassword .