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

چگونه می توان یک افزونه ساده وردپرسی نوشت؟

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

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

هزاران افزونه رایگان و غیر رایگان برای وردپرس وجود دارد. مخزن رسمی وردپرس در حال حاضر 60,030 افزونه در خود جای داده است (در زمان نوشتن این مقاله). علاوه بر این، مخازن دیگری مانند CodeCanyon نیز برای تهیه و نصب افزونه ها وجود دارند که می توان هزاران افزونه premium را از آنها تهیه نمود.

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

تصویر(1)

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

نوشتن یک افزونه ساده وردپرسی

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

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

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

تصویر(2)

همچنین بر اساس هدف ایجاد یک افزونه، ممکن است چند فایل CSS برای تعیین شکل ظاهری یا فایل های دیگری مانند JavaScript و تصاویر نیز در آن وجود داشته باشند، لذا آشنایی اندک با زبان های اسکریپت نویسی نیز می تواند مفید باشد. در نهایتا باید کدی که نوشته می شود با استاندارد های وردپرس همخوانی داشته باشد تا در آینده، افزونه ساده وردپرسی با مشکلی روبرو نشود.

جهت نوشتن یک افزونه ساده وردپرسی، به چه ابزاری نیاز است؟

در ابتدا باید متذکر شد که افزونه نوشته شده را در سایت اصلی خود نصب و بررسی نکنید. زیرا اگر اشتباهی در افزونه ساده وردپرسی وجود داشته باشد، می تواند سایت اصلی را با خطر روبرو نماید. بهتر است افزونه را در یک سایت تست که در همان سرویس هاست یا سیستم لوکال قرار دارد، نصب و بررسی کنید. برای نوشتن و اصلاح کدها به یک ویرایشگر متن همچون ++Notepad یا VSCode نیاز خواهد بود و اگر ویرایشگر هاست شما مانند ویرایشگر فایل Cpanel باشد نیز مناسب است.

همچنین برای تسریع در فرایند ایجاد افزونه ساده وردپرسی، می توان از ابزارهای آنلاینی مانند Pluginplate یا Plugin Boilerplate استفاده کرد. این ابزارها با دریافت اطلاعات اولیه، یک فایل زیپ شامل کدهای پایه و پوشه های مورد نیاز را در اختیار شما قرار خواهند داد.

سایت Pluginplate برای ایجاد افزونه ساده وردپرسی

تصویر(3)

انواع افزونه های وردپرس

افزونه ها می توانند وظایف متعددی را برعهده بگیرند. آنچه تقریبا همه افزونه ها به همراه خود دارند، افزودن قابلیت های جدید به وردپرس است. از انواع افزونه ها می توان به موارد زیر اشاره نمود:

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

افزونه ها شامل چه اجزایی هستند؟

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

  • فایل اصلی افزونه
  • پوشه ها
  • اسکریپت ها (JavaScript)
  • استایل ها (CSS)
  • فایل هایی برای سازماندهی کد

فایل اصلی افزونه

وجود فایل اصلی برای اجرای افزونه الزامی است. این فایل حاوی کدهای php و دارای کدهای کامنت شده می باشد که توضیحاتی پیرامون افزونه را در اختیار وردپرس قرار می دهند. برای نمونه، در تصویر(4) کدهای کامنت شده افزونه Akismet قابل مشاهده است.

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

تصویر(4)

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

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

تصویر(5) 

اطلاعات دیگر افزونه، در فایل readme.txt ذخیره می شود. از این فایل برای نمایش اطلاعات بیشتر پیرامون افزونه استفاده می گردد. اطلاعاتی مانند گزارش بروزرسانی ها و حتی نحوه نصب افزونه، در فایل readme.txt قابل مشاهده است.

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

ساختار پوشه ها

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

  • پوشه css برای فایل ها استایل
  • پوشه script جهت قرار دادن فایل های جاوا اسکریپت
  • پوشه include که شامل فایل های لازم در سازماندهی افزونه است.
  • پوشه templates که الگوهای مختلف یک افزونه در آن قرار می گیرند.
  • پوشه assets برای فایل های صوتی و تصویری 
  • پوشه i18n جهت قرار دادن فایل های بین المللی 

البته ممکن است برای افزونه های پیچیده و بزرگتر، نیاز به پوشه های دیگری نیز باشد. برای نمونه، افزونه woocommerce شامل پوشه هایی برای پکیج ها، نمونه اطلاعات و موارد متعدد دیگر است. همچنین زیر پوشه هایی برای جداسازی فایل های ادمین و بلوک های دیگر نیز دارد:

پوشه ها و فایل های مهم یک افزونه ساده وردپرسی

تصویر(6)

پوشه های اسکریپت و استایل ها

اگر خروجی یک افزونه ساده وردپرسی در بخش فرانت سایت (برای کاربران) یا حتی در داشبورد سایت (برای مدیران، نویسندگان و غیره) نیاز به اعمال تنظیمات نمایشی خاصی دارد، باید از کدهای استایل استفاده نمود. از سوی دیگر اگر افزونه دارای عملکرد های مبتنی بر اسکریپت ها باشد، به پوشه ای جهت نگهداری اسکریپت ها نیز نیاز خواهد بود.

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

فایل های include

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

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

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

روش های اجرای کدهای افزونه ساده وردپرسی

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

  • فراخوانی با استفاده از توابع
  • اجرا از طریق action hook و filter hook
  • پیاده سازی بر اساس کلاس ها

روش فراخوانی با توابع

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

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

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

تصویر(7)

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

محدودیت هایی برای این روش وجود دارد که عبارتند از: 

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

فراخوانی توابع به وسیله اتصال آنها به hook، بسیار بهتر است.

اجرا از طریق action hook و filter hook

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

action hook ها خالی از کد هستند. وقتی وردپرس به action hook ها رجوع می کند هیچ عمل خاصی صورت نمی پذیرد مگر این که تابعی به آن hook متصل شده باشد.

filter hook ها دارای کدی هستند که تا زمان اتصال تابعی به آن، اجرا خواهد شد. در این صورت کدی که در تابع وجود دارد، به جای کد موجود در hook، اجرا می شود. این یعنی می توان کدی در یک افزونه ساده وردپرسی قرار داد اما آن را به وسیله افزونه دیگری غیر فعال کرد یا کدی نوشت که اجرای آن موجب لغو اجرای کد پیش فرض یک filter hook در وردپرس گردد.

افزونه ساده وردپرسی و اجرا از طریق Filter Hook و Action Hook 

تصویر(8)

hook ها به سه روش قابل فراخوانی هستند:

  1. به وسیله وردپرس: هسته وردپرس دارای صدها hook است که در زمان های مختلفی اجرا می شوند. انتخاب این موضوع که توابع موجود در افزونه با کدام hook اجرا شوند، وابسته به زمان اجرای آن hook و عملکرد آن توابع است.
  2. به وسیله قالب: بسیاری از قالب ها hook هایی ارائه می کنند که طراحان سایت بتوانند به وسیله آنها محتوا یا ظاهر خاصی را طراحی و تولید کرده و در بخش هایی از قالب قرار دهند. هر قالب وردپرس دارای wp_head hook و wp_footer hook است. ترکیب این مورد با tag های شرطی، امکان اجرای کدی خاص در صفحه ای خاص را فراهم خواهد کرد.
  3. به وسیله افزونه شما یا سایر افزونه ها: ممکن است نویسنده افزونه یک action hook به آن بیافزاید و کدی را برای عملکردی خاص، در یک فایل موجود در include ها قرار دهد تا در زمان لازم، آن کد به hook افزوده شود. همچنین می توان یک filter hook نوشت که امکان لغو خود توسط اجرای تابعی دیگر را داشته باشد. از سوی دیگر اگر افزونه ای نوشته شود که افزونه دیگری را پوشش دهد، می توان توابع نوشته شده را به hook ها موجود در آن افزونه، متصل نمود.

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

کلاس ها

کلاس ها برای تولید ویژگی های پیچیده استفاده می شوند. مانند ابزارک ها و شخصی سازهای عناصر سایت که از API های وردپرس استفاده می کنند.

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

ایجاد یک افزونه ساده وردپرسی در چهار مرحله

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

جهت نصب وردپرس در هاست، می توانید از آموزش نصب وردپرس استفاده نمایید.

  1. ساختن پوشه و فایل

یک پوشه به نام افزونه خود در مسیر wp-content/plugins/ ساخته و سپس یک فایل php با همان نام ایجاد نمایید. لازم است تا نام پوشه افزونه و نام فایل دارای یک پیشوند خاص باشند تا آن را از دیگر افزونه ها متمایز ساخته و احتمال هم نام شدن آن با دیگر افزونه های وردپرس و ایجاد تداخل را کاهش دهد. 

افزونه ساده وردپرسی و ایجاد فایل های مرتبط در هاست

تصویر(9)

اکنون فایل php را باز کرده و متن زیر را در آن قرار دهید. شما می توانید تمامی بخش های آن را با توجه به مشخصات فردی، نام و هدف افزونه خود تغییر دهید:

<?php

/*

Plugin Name: example new post

Plugin URI: https:/example.com

Description: This plugin registers a new post type in WordPress

Version: 1.0

Author: example example

Author URI: https://example.com

License: GPLv2 or later

Text Domain: example

*/
 

اگر این اطلاعات را ذخیره کنید و سپس به بخش افزونه های نصب شده در وردپرس وارد شوید، با تصویر زیر روبرو خواهید شد: 

افزونه ساده وردپرسی و نمایش اطلاعات اعتباری این افزونه

تصویر(10)

می توان این افزونه ساده وردپرسی را فعال نمود اما در این حالت هیچ عملی انجام نخواهد داد.

  1. افزودن تابع

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

function example_register_post_type() {

$labels = array( 

'name' => __( 'Host' , 'example' ),

'singular_name' => __( 'Host' , 'example' ),

'add_new' => __( 'New Host' , 'example' ),

'add_new_item' => __( 'Add New Host' , 'example' ),

'edit_item' => __( 'Edit Host' , 'example' ),

'new_item' => __( 'New Host' , 'example' ),

'view_item' => __( 'View Host' , 'example' ),

'search_items' => __( 'Search Hosts' , 'example' ),

'not_found' => __( 'No Hosts Found' , 'example' ),

'not_found_in_trash' => __( 'No Hosts found in Trash' , 'example' ),

);

$args = array(

'labels' => $labels,

'has_archive' => true,

'public' => true,

'hierarchical' => false,

'supports' => array(

'title', 

'editor', 

'excerpt', 

'custom-fields', 

'thumbnail',

'page-attributes'

),

'rewrite' => array( 'slug' => 'Hosts' ),

'show_in_rest' => true

);

register_post_type( 'Host', $args );

}

add_action( 'init', 'example_register_post_type' );

این کد شامل تمامی برچسب های لازم به همراه مقادیر آنها است. در این کد از روش active hook استفاده شده است. این hook به وسیله add_action تحت hook پیش فرض وردپرس به نام init فعال خواهد شد. در آخرین خط از کد بالا، تابع اصلی افزونه(example_register_post_type) به hook وردپرس افزوده شده است. 

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

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

تصویر(11)

  1. افزودن استایل یا  اسکریپت

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

برای نمونه یک پوشه به نام css در مسیر افزونه خود بسازید. سپس فایلی با نام example.css در آن ایجاد کرده و کد زیر را در آن قرار دهید: 

body {
background-color: coral;
}

اکنون باید این فایل را در پست های ایجاد شده از طریق افزونه، لود نمایید. بدین منظور کد زیر را به ابتدای کدهای فایل اصلی افزونه اضافه نمایید: 

function example_styles() {
wp_enqueue_style( 'Host', plugin_dir_url( __FILE__ ) . 'css/example.css' );
}
add_action( 'wp_enqueue_scripts', 'example_host_styles' );

اگر کدهای جدید را در فایل قرار داده و ذخیره کنید، تغییری در صفحه ادمین دیده نخواهد شد اما اگر یکی از پست هایی که به وسیله این افزونه ساخته شده اند را باز نمایید، پس زمینه آن پست به رنگ coral خواهد بود:

افزونه ساده وردپرسی و تغییر پس زمینه ویرایشگر

تصویر(12)

  1. استفاده از فایل های include 

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

برای نمونه، می توان کدهای لازم برای یک فرم نظرسنجی را در فایلی به نام feedback.php ذخیره کرده و این فایل را در پوشه ای به نام includes در مسیر اصلی افزونه قرار داد. سپس برای فراخوانی این فایل، می توان کد زیر را به فایل اصلی افزونه اضافه و ذخیره نمود: 

include( plugin_dir_path( __FILE__ ) . 'includes/feedback.php' );

دیگر نیازی به فراخوانی این فایل های php به وسیله hook های وردپرس نخواهد بود زیرا با include آنها عملا تمام محتوای فایل php در فایل اصلی افزونه قرار گرفته و همراه آن اجرا خواهد شد.

جمع بندی

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

اشتراک گذاری:

نظرات

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *