آموزش پروژه‌محور پلاگین‌نویسی وردپرس | ساخت افزونه ورود ثبت نام پیامکی مشابه دیجی‌کالا و فروش در ژاکت + لندینگ فروش

در این قسمت، اولین قدم برای شروع پروژه، آماده‌سازی محیط توسعه و راه‌اندازی سرور مجازی روی سیستم خودمان است. ما ابتدا نرم‌افزار WAMP را نصب می‌کنیم و با پیاده‌سازی پیش‌نیازهای ضروری ویندوز، از پایداری و سلامت محیط اطمینان حاصل می‌کنیم. در نهایت، صحت نصب و عملکرد صحیح سرویس‌های Apache و MySQL را بررسی می‌کنیم تا مطمئن شویم یک بستری استاندارد و بدون خطا برای نصب وردپرس و شروع اصلی کار داریم.

در این قسمت، به سراغ نصب و راه‌اندازی هسته وردپرس روی سیستم می‌رویم. ابتدا فایل‌های وردپرس را دانلود و در مسیر دایرکتوری www در ومپ قرار می‌دهیم، سپس دیتابیس اختصاصی پروژه را در phpMyAdmin ایجاد می‌کنیم. با وارد کردن اطلاعات دیتابیس در وردپرس، مراحل نصب را با موفقیت پشت سر می‌گذاریم تا در نهایت یک سایت وردپرسی خام و کاملاً آماده برای شروع فرآیند پلاگین‌نویسی داشته باشیم.

در این قسمت، محیط کدنویسی خودمان را با نصب VS Code راه‌اندازی می‌کنیم و اکستنشن‌های ضروری مثل HTML CSS Support، PHP Intelephense، Prettier و WordPress Snippets را اضافه می‌کنیم تا یک فضای استاندارد و بهینه برای توسعه افزونه داشته باشیم. سپس چند افزونه حرفه‌ای را بررسی می‌کنیم تا با ساختار کلی پلاگین‌ها در وردپرس آشنا شویم. در نهایت، پوشه پروژه را ایجاد کرده و پوشه‌های اصلی شامل admin، core، fonts، images، languages و public را می‌سازیم و فایل پایه افزونه با نام (digilogin.php) را قرار می‌دهیم تا ساختار اولیه پروژه کاملاً آماده باشد.

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

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

در این قسمت با تفاوت (__FILE__)، (__DIR__)، (plugin_dir_path) و (plugin_dir_url) آشنا می‌شویم تا دقیق بدانیم مسیر فایل‌ها و آدرس آن‌ها در وردپرس چه تفاوتی با هم دارند. سپس دو ثابت اصلی (DIGILOGIN_PLUGIN_DIR) و (DIGILOGIN_PLUGIN_URL) را در فایل اصلی افزونه تعریف می‌کنیم تا در ادامه، هم برای لود فایل‌ها و هم برای استفاده از فایل‌های (CSS)، (JS) و تصاویر از آن‌ها به شکل استاندارد استفاده کنیم. در نهایت فایل (classes.php) را به‌روزرسانی می‌کنیم تا مسیر کامل فایل‌ها را بر اساس این ثابت‌ها بسازد و بارگذاری کلاس‌ها به‌درستی انجام شود.

در این قسمت، به سراغ پیاده‌سازی منوی اختصاصی افزونه در پیشخوان وردپرس می‌رویم و با استفاده از اکشن admin_menu در متد سازنده کلاس پایه، تابع add_menu_page را برای ساخت منوی «دیجی لاگین» با آیکون اختصاصی فراخوانی می‌کنیم. سپس با اتصال این منو به یک تابع بازگشتی، مسیر لود فایل‌های مدیریتی را مشخص می‌کنیم. در نهایت، فایل (settings.php) را در پوشه admin ایجاد و فراخوانی می‌کنیم تا بستر لازم برای طراحی و نمایش بخش تنظیمات افزونه به صورت کاملاً استاندارد فراهم شود.

در این قسمت، ساختار پنل مدیریت افزونه را یک مرحله جلوتر می‌بریم و با استفاده از هوک admin_enqueue_scripts فایل‌های CSS و JavaScript مورد نیاز بخش ادمین را به‌صورت استاندارد در وردپرس بارگذاری می‌کنیم. سپس متد enqueue_admin_assets را در کلاس پایه اضافه می‌کنیم تا مسیر فایل‌های استایل و اسکریپت از طریق ثابت‌های افزونه مدیریت شود. در نهایت، فایل‌های (style-admin.css) و (script-admin.js) را ایجاد می‌کنیم تا زیرساخت لازم برای طراحی ظاهری و افزودن تعاملات بخش تنظیمات افزونه آماده شود.