افزونه نویسی یا ساختن افزونه در وردپرس (پلاگین نویسی)

افزونه نویسی یا ساختن افزونه در وردپرس (پلاگین نویسی)

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

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

پلاگین وردپرس چیست و چگونه کار می‌کند؟

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

در واقع وردپرس به گونه‌ای طراحی شده است که توسعه‌دهندگان می‌توانند بدون تغییر هسته اصلی سایت، امکانات جدیدی به آن اضافه کنند. افزونه‌ها دقیقاً همین کار را انجام می‌دهند؛ به عبارت دیگر پلاگین‌ها از طریق Hookها، Shortcodeها، Widgetها و توابع داخلی وردپرس، بخشی از عملکرد سایت را تغییر می‌دهند یا قابلیت‌های جدیدی به آن اضافه می‌کنند.

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

نقش افزونه‌ها در توسعه وردپرس

افزونه وردپرس یا پلاگین (Plugin) در حقیقت مجموعه‌ای از چند فایل‌ برنامه‌نویسی است که به سایت وردپرسی قابلیت جدیدی اضافه می‌کند، بدون اینکه نیازی به تغییر فایل‌های اصلی وردپرس باشد؛ به عبارت دیگر، هر زمان بخواهید قابلیتی به سایت اضافه کنید که به‌صورت پیش‌فرض در وردپرس وجود ندارد، معمولاً باید از افزونه استفاده کنید؛ مثل افزونه‌های ساخت فرم تماس، اتصال درگاه پرداخت، کش و افزایش سرعت، عضویت کاربران و اتصال به API پیامک.

یکی از مهم‌ترین مزیت‌های طراحی افزونه وردپرس این است که کاملاً مستقل از قالب سایت هستند؛ یعنی حتی اگر قالب سایت تغییر کند، افزونه همچنان فعال و بدون تغییر باقی خواهد ماند.

 Hooks در وردپرس چیست؟

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

ساختار وردپرس به گونه‌ای است که در قسمت‌های مختلفی امکان اضافه کردن کدهای سفارشی را برای توسعه‌دهندگان فراهم کرده است. این قسمت‌ها که امکان توسعه قابلیت‌ها بدون تغییر هسته وردپرس را فراهم می‌کنند، Hook نام دارند.

به‌طور کلی Hookها به دو دسته تقسیم می‌شوند:

Action Hook

از Action Hookها زمانی استفاده می‌شود که بخواهید در یک بخش مشخص یا در یک زمان مشخص، قابلیت جدیدی را اضافه کنید؛ مثلاً بعد از انتشار یک پست یا هنگام ورود کاربر.

برای انجام این کار، شما باید ابتدا یک تابع تعریف ‌کنید و بعد آن را به Hook موردنظر متصل می‌کنید تا در زمان مناسب اجرا شود.

Filter Hook

Filterها برای تغییر یا فیلتر کردن داده‌ها استفاده می‌شوند؛ یعنی قبل از اینکه اطلاعات نمایش داده شوند یا در دیتابیس ذخیره شوند، می‌توانید آن‌ها را تغییر دهید. برای مثال شما می‌توانید قبل از نمایش عنوان محتوایتان، عبارت «آموزش:» را اضافه کنید.

 Shortcode چیست؟

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

احتمالاً تا الان کدهایی شبیه [contact-form] این را دیده‌اید؛ این‌ها همان Shortcode ها هستند. با استفاده از Shortcode می‌توانید فرم تماس را نمایش دهید، یک دکمه سفارشی بسازید، اطلاعات خاصی را از دیتابیس نمایش دهید یا به‌صورت خودکار آخرین مطالب سایت را نمایش دهید.

 Widget چیست؟

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

 نکته: Widgetها قبلاً یکی از مهم‌ترین بخش‌های توسعه وردپرس بودند، اما در حال حاضر به دلیل ظهور ویرایشگر Gutenberg و Blockها، استفاده از Widgetها کمتر شده است. با این حال هنوز در بسیاری از پروژه‌ها و قالب‌ها کاربرد دارند.

قبل از شروع پلاگین نویسی به چه مهارت‌هایی نیاز داریم؟

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

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

آشنایی با PHP

مهم‌ترین مهارت در افزونه نویسی وردپرس، PHP است. هسته وردپرس با زبان PHP نوشته شده و تقریباً تمام پلاگین‌های وردپرس نیز با همین زبان نوشته می‌شوند؛ بنابراین لازم است که برای ساخت یک افزونه وردپرس با مفاهیمی مثل موارد زیر آشنا باشید:

• متغیرها و آرایه‌ها؛
• شرط‌ها و حلقه‌ها؛
• توابع؛
• کار با فرم‌ها؛
• کار با فایل‌ها؛
• برنامه‌نویسی شی‌گرا (OOP).

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

 HTML و CSS

هر افزونه‌ای که رابط کاربری داشته باشد، به HTML و CSS نیاز دارد. حتی اگر هدف شما فقط کد نویسی افزونه باشد، باز هم باید بتوانید ساختار خروجی صفحات را طراحی کنید. در طراحی پلاگین وردپرس معمولاً از HTML و CSS برای موارد زیر استفاده می‌شود:

• طراحی فرم‌ها؛
• ساخت صفحه تنظیمات افزونه؛
• طراحی پنل مدیریت؛
• استایل‌دهی به خروجی افزونه؛
• طراحی Widgetها و باکس‌های سفارشی.

نکته: افزونه شما باید علاوه بر عملکرد فنی درست، ظاهر مطلوبی هم داشته باشد تا کاربر تجربه خوبی از حضور در سایت شما داشته باشد؛ این موضوع همان تجربه کاربری است که احتمالاً تاکنون بارها درباره آن شنیده‌اید.

 JavaScript و Ajax

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

Ajax نیز این امکان را فراهم می‌کند که افزونه بدون Reload شدن صفحه، اطلاعات را بین مرورگر و سرور ردوبدل کند. این موضوع هم سرعت سایت را بهتر می‌کند و هم تجربه کاربری را چندین پله ارتقا می‌دهد.

 آشنایی با ساختار وردپرس

نکته مهمی که باید بدانید این است که فقط بلد بودن PHP برای ساخت پلاگین وردپرس کافی نیست و شما باید ساختار داخلی وردپرس را هم بشناسید.

برای مثال باید بدانید:

• Hookها چگونه کار می‌کنند؟
• وردپرس چگونه قالب‌ها و افزونه‌ها را بارگذاری می‌کند؟
• توابع داخلی وردپرس چه کاربردی دارند؟

به همین دلیل است که آشنایی با WordPress API و توابع داخلی وردپرس باعث می‌شود افزونه شما با سایر افزونه‌ها هماهنگ‌تر کار کند، امنیت بالاتری داشته باشد و در آپدیت‌های بعدی وردپرس دچار مشکل نشود.

 کار با دیتابیس MySQL

از آنجا که وردپرس تمام اطلاعات سایت را داخل دیتابیس MySQL ذخیره می‌کند، بسیاری از افزونه‌ها برای ذخیره یا خواندن اطلاعات باید به دیتابیس متصل باشند.

به‌طور نمونه ذخیره تنظیمات افزونه، ثبت اطلاعات کاربران، ساخت فرم‌های سفارشی، گزارش‌گیری و ذخیره سفارش‌ها، همگی نیازمند کار با دیتابیس هستند. البته وردپرس توابع آماده‌ای برای کار با دیتابیس دارد؛ با این حال، همچنان آشنایی با SQL و ساختار وردپرس اهمیت زیادی دارد. یکی از مهم‌ترین دلایل هم این است که اگر کوئری‌های دیتابیس بهینه‌سازی نشده باشند، افزونه ممکن است باعث کاهش سرعت سایت یا حتی ایجاد مشکلات امنیتی شود.

 ابزارهای موردنیاز برای ساخت افزونه وردپرس

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

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

محیط توسعه

برای ساخت یک پلاگین وردپرس، باید ابتدا وردپرس را روی سیستم شخصی خود اجرا کنید. به این محیط، Local Development Environment یا محیط توسعه محلی گفته می‌شود. مهم‌ترین مزیت این کار این است که بدون نیاز به اینترنت یا هاست واقعی می‌توانید افزونه خود را طراحی، تست و دیباگ کنید. معروف‌ترین ابزارها برای راه‌اندازی محیط توسعه محلی عبارت‌اند از:

XAMPP

XAMPP یکی از محبوب‌ترین ابزارهای اجرای محیط توسعه محلی است که شامل Apache، PHP، MySQL و phpMyAdmin می‌شود و تقریباً هر چیزی که برای اجرای وردپرس نیاز دارید را در اختیارتان قرار می‌دهد.

از مهم‌ترین مزایای XAMPP می‌توان به موارد زیر اشاره کرد:

• رایگان و متن‌باز؛
• مناسب برای ویندوز، لینوکس و مک؛
• کنترل کامل روی نسخه PHP و دیتابیس؛
• مناسب برای توسعه‌دهندگان حرفه‌ای‌تر.

بعد از نصب XAMPP کافی است وردپرس را داخل پوشه htdocs قرار دهید و از طریق مرورگر پروژه را اجرا کنید.

LocalWP

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

از مهم‌ترین مزایای LocalWP می‌توان به موارد زیر اشاره کرد:

• رابط کاربری ساده؛
• ساخت سریع سایت وردپرسی؛
• تغییر نسخه PHP تنها با چند کلیک؛
• مناسب برای مبتدی‌ها و فریلنسرها؛
• دارای SSL و MailHog داخلی.

 بهترین ادیتورهای کدنویسی

برای اینکه کدنویسی شما تمیز و حرفه‌ای باشد، حتماً باید از یک ادیتور مناسب استفاده کنید. با استفاده از ادیتورهای حرفه‌ای می‌توانید کارهایی مانند تکمیل خودکار کد، دیباگ و مدیریت فایل‌ها را انجام دهید.

VS Code

Visual Studio Code محبوب‌ترین ادیتور بین توسعه‌دهندگان وردپرس است. مهم‌ترین ویژگی‌های VS Code عبارت‌اند از:

• رایگان و سبک؛
• پشتیبانی عالی از PHP؛
• افزونه‌های فراوان برای وردپرس؛
• Git داخلی؛
• قابلیت دیباگینیگ؛
• تکمیل خودکار هوشمند.

PhpStorm

PhpStorm یک IDE حرفه‌ای برای توسعه PHP است که امکانات بسیار پیشرفته‌ای دارد. PhpStormمزایای متعددی دارد که مهم‌ترین آن‌ها عبارت‌اند از:

• تحلیل هوشمند کد؛
• دیباگینگ حرفه‌ای؛
• پشتیبانی کامل از وردپرس.

اگر قصد دارید به‌صورت حرفه‌ای وارد حوزه کاری ساخت افزونه‌های وردپرس شوید، PhpStorm بهترین گزینه برای شما خواهد بود؛ هرچند نسبت به VS Code سنگین‌تر و غیر رایگان است.

 فعال‌سازی حالت Debug در وردپرس

یکی از موضوعاتی که باید در خصوص پلاگین نویسی در وردپرس بدانید، این است که خطاها کاملاً طبیعی هستند. به همین دلیل وردپرس قابلیتی به نام WP_DEBUG دارد که خطاها را نمایش می‌دهد.

برای فعال‌سازی Debug باید فایل wp-config.php را ویرایش کنید و مقدار زیر را تغییر دهید:

define ('WP_DEBUG',true);

برای ذخیره خطاها در فایل لاگ هم می‌توانید از این تنظیمات استفاده کنید:

define ('WP_DEBUG_LOG',true);
define ('WP_DEBUG_DISPLAY',false);

این کار باعث می‌شود خطاها داخل فایل زیر ذخیره شوند:

wp-content/debug.log

فعال بودن حالت دیباگ چند مزیت مهم دارد که عبارت‌اند از:

• خطاهای PHP را سریع‌تر پیدا می‌کنید؛
• می‌توانید ناسازگاری افزونه‌ها را تشخیص دهید؛
• می‌توانید عملکرد کدهای خود را بررسی کنید.

 آموزش ساخت اولین افزونه وردپرس

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

 انتخاب نام مناسب برای افزونه

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

برای مثال فرض می‌کنیم نام افزونه ما My First Plugin است. همچنین بهتر است یک Prefix اختصاصی برای توابع خود انتخاب کنید که با سایر افزونه‌ها تداخل نداشته باشد.

 ساخت پوشه افزونه

حالا باید وارد مسیر زیر شوید:

wp-content/plugins

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

my-first-plugin

در وردپرس هر افزونه داخل پوشه مخصوص خود قرار می‌گیرد و تمام فایل‌های مربوط به آن نیز داخل همین مسیر ذخیره می‌شوند.

 ایجاد فایل اصلی Plugin

داخل پوشه افزونه، یک فایل PHP با همان نام ایجاد کنید:

my-first-plugin.php

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

 افزودن Plugin Header

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

کد زیر را داخل فایل my-first-plugin.php قرار دهید:

<?php
/**
* Plugin Name: My First Plugins
* Plugin URI: https://exmaple.com
* Description: اولین رزومه من
* Version: 1.0.0
* Author: Yourname
* License: GPL2
*/

مهم‌ترین بخش این قسمت Plugin Name است. اگر این مقدار وجود نداشته باشد، وردپرس افزونه شما را شناسایی نمی‌کند.

 فعال‌سازی افزونه در پیشخوان وردپرس

بعد از ذخیره فایل، وارد پیشخوان وردپرس شوید، به بخش «افزونه‌ها» بروید، افزونه جدید خود را پیدا کنید و روی «فعال کردن» کلیک کنید. اگر همه چیز درست انجام شده باشد، افزونه بدون خطا فعال می‌شود.

در این مرحله شما رسماً اولین پلاگین وردپرس خود را ساخته‌اید؛ هرچند هنوز هیچ عملکرد خاصی ندارد.

نوشتن اولین تابع در افزونه

حالا وقت آن است که اولین قابلیت افزونه را بنویسیم. برای انجام این کار، کد زیر را به فایل افزونه اضافه کنید:

<?php
function show_message()
{
return "سلام این اولین افزونه من است";
}

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

 اتصال تابع با Hook

در وردپرس برای اجرای توابع باید آن‌ها را به Hookها متصل کنیم. برای مثال می‌توانیم محتوایی را به انتهای نوشته‌ها اضافه کنیم:

در این مثال، از Filter Hook استفاده کردیم تا محتوای نوشته را دریافت ‌کنیم، متن دلخواه را به آن اضافه ‌کنیم و در نهایت خروجی نهایی را به وردپرس بر‌گردانیم.

 ساخت اولین Shortcode

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

برای انجام این کار باید کد زیر را به افزونه اضافه کنید:

<?php
function mfp_shortcode()
{
return "سلام این اولین شورت کد من است";
}
add_shortcode('my_shortcode','mfp_shortcode')

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

[my_shortcode]

بعد از قرار دادن شورتکد، متن تعریف‌شده توسط افزونه نمایش داده می‌شود.

 تست افزونه در وردپرس

در آخر باید افزونه را تست کنید تا مطمئن شوید همه چیز درست کار می‌کند. برای تست:

• یک نوشته جدید بسازید؛
• شورتکد را داخل محتوا قرار دهید؛
• صفحه را مشاهده کنید؛
• عملکرد Hookها را بررسی کنید؛
• خطاهای احتمالی را از طریق Debug بررسی کنید.

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

 ساخت یک افزونه واقعی: نمایش زمان مطالعه مطالب

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

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

 هدف افزونه چیست؟

هدف این افزونه این است که تعداد کلمات هر نوشته را محاسبه کند و بر اساس میانگین سرعت مطالعه کاربران، زمان تقریبی مطالعه را نمایش دهد. این قابلیت باعث بهبود تجربه کاربری، افزایش نرخ تعامل کاربران، حرفه‌ای‌تر شدن ظاهر محتوا و اطلاع‌رسانی بهتر به مخاطب می‌شود.

 ساخت فایل افزونه

ابتدا داخل مسیر:

wp-content/plugins

یک پوشه با نام:

estimate-reading-time

بسازید.

سپس فایل اصلی افزونه را ایجاد کنید:

estimate-reading-time.php

 نوشتن کد تخمین زمان مطالعه

در مرحله بعد باید اطلاعات افزونه و منطق اصلی آن را بنویسیم. کد اولیه افزونه عبارت است از:

<?php
/**
* Plugin Name: Estimate Rading Time
* Plugin URI: https://hamedfarahabadi.ir
* Description: نمایش زمان تقریبی مطالعه مطالب
* Version: 1.0.0
* Author: hamedfarahabadi
* License: GPL2
*/

حالا تابع اصلی افزونه را اضافه می‌کنیم:

function ert_calculate_reading_time($content) {

    $text = strip_tags($content);

    $word_count = str_word_count($text);

    $reading_time = ceil($word_count / 200);

    $message = '<p>زمان تقریبی مطالعه: ' . $reading_time . ' دقیقه</p>';

    return $message . $content;
}

 محاسبه تعداد کلمات محتوا

در این افزونه برای محاسبه تعداد کلمات باید از تابع زیر استفاده کنیم:

str_word_count()

همچنین قبل از شمارش کلمات، باید تگ‌های HTML حذف ‌شوند؛ چون کدهای HTML نباید در محاسبه تعداد کلمات لحاظ شوند.

strip_tags($content);

    $message = '<p>زمان تقریبی مطالعه: ' . $reading_time . ' دقیقه</p>';

       return $message . $content;

    add_filter('the_content', 'ert_calculate_reading_time');