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

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

1. ایجاد یک افزونه ساده که وردپرس را به گراف فیس بوک متصل می کند

2. آشنایی با چگونگی کار کرد افزونه ها

3. شروع به استفاده از فیلترها

4. استفاده از قلاب ها

5. اضافه کردن اسکریپت ها و استایل ها

6. ایجاد یک صفحه تنظیمات برای افزونه

7. فراهم کردن قابلیت ترجمه قالب برای زبان های مختلف

این آموزش شما را با نحوه طراحی و توسعه افزونه ها آشنا می کند . برای شروع به یادگیری این آموزش باید مقداری با html و php آشنا باشید

پروژه طراحی یک افزونه ساده

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

 


برای نمایش کدها کلیک کنید
                      

 برای این پروژه باید مطمئن شویم که هر زمان یک مطلب وبلاگ مان نمایش داده می شود tagهای گراف به هدر وب سایتمان اضافه می شود.

کدهای سایت اکثرا از متادیتا ها و سایر اجزا اطلاعات پنهان تشکیل شده اند  که بین تگ های <head> و</head> در صفحه html اضافه می‌شود

بخش بعدی این آموزش در رابطه با به کارگیری این افزونه صحبت می کند

ایجاد یک افزونه جدید

اولین کاری که باید انجام دهید ایجاد یک پوشه برای ذخیره افزونه هست . به مسیر wp-content/plugins/  در محل نصب وردپرس بروید و یک پوشه به نام my-facebook-tags ایجاد کنید . به خاطر داشته باشید که slug افزونه شما همان نامی است که برای پوشه افزونه انتخاب می کنید. یک slug افزونه باید در بین تمام افزونه های وردپرس منحصر به فرد باشد و این یعنی نباید افزونه ای وجود داشته باشد که هم slug افزونه شما باشد برای این کار کافیست نام مورد نظر را در گوگل جستجو کنید تا مطمئن شوید نام تکراری را انتخاب نکرده اید.

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

اکنون با ایجاد پوشه my-facebook-tags یک فایل درون آن ایجاد کنید و آن را  my-facebook-tags.php بنامید . این فایل اصلی افزونه شما خواهد بود و نام آن باید دقیق هم با slug افزونه شما یکسان باشد که پسوند php به انتهای آن اضافه شده است  فایل اصلی افزونه را باز کنید و کدهای زیر را درون آن پیست کنید

 


برای نمایش کدها کلیک کنید
                      

 

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

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

افزونه ها چگونه کار می کنند

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

تقدیمی از طرف -------- .

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

تمامی قالبها باید  تابع wp_head() را به فایل هدر خود اضافه کنند . درون این تابع کدی وجود دارد که به وردپرس می گویند: اگر یک افزونه میخواهد تعدادی کد اینجا قرار دهد مجاز است . قلاب wp_head  به ما اجازه می دهد تا چیزهایی را در بخش هدر صفحه خودمان قرار دهیم که دقیقا همان چیزی که نیاز داریم.  بگذارید این موضوع را تست کنیم:


برای نمایش کدها کلیک کنید
                      

اولین خط کد بالا به وردپرس می‌گوید که ما میخواهیم تعدادی قابلیت را به قلاب wp_head با استفاده از تابع my_facebook_tags() اضافه کنیم .

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

به منظور تصحیح اجازه بدهید دو مورد را ذکر کنیم : دو نوع قلاب وجود دارد : actions و filters .

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

ما موضوع قلاب ها را در این آموزش بیش از این توضیح نمی دهیم آخرین چیزی که مایل هستم برای شما توضیح بدهم این هست که از لحاظ تکنیکی یک تابع   قلاب شده هر زمانی اجرا می شود که do_action() یا apply_filters() اجرا می شود .تابع wp_head()  شامل فراخوانی هایی به  توابع درون آن می شود،  این تابع خودش قلاب نیست

تکمیل افزونه

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


برای نمایش کدها کلیک کنید
                      

من  متا تگ ها را درون تابع به همین صورتی که هست paste می کنم . تنها چیزی که نیاز به تغییر دارد مقادیر است که مطمئن می سازد محتوای مطلبی که در حال نمایش است را منعکس می کنند.من از تگ is_single() استفاده می‌کنم تا مطمئن شوم تگ ها فقط زمانی اضافه می شود که درون صفحه نمایش یک مطلب قرار داریم .

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

قلاب مناسب برای طرح مناسب

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

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

اگر بخواهید به نویسنده یک مطلب زمانی که مطلب اش منتشر شد ایمیل را ارسال کنید چه می کنید؟ شاید دارید به اکشن ها فکر می کنید و می گویید هر زمان وردپرس یک مطلب را منتشر کرد فلان کار را انجام بده .پیدا کردن این نوع قلاب ها در سالهای اخیر خیلی ساده شده است ! آنها به خوبی نامگذاری شده اند:  user_register, publish_post, profile_update . اگر شما عبارت add user WordPress hook را در گوگل جستجو کنید احتمالاً به کلمه user_register برمی‌خورید .از این جای کار به بعد فقط می ماند خواندن داکیومنتیشن آن .  بیایید از قلاب publish_post  برای ارسال ایمیل به نویسنده یک مطلب زمانی که مطلب منتشر می شود استفاده کنیم .  کد ما را در زیر می بینید:


برای نمایش کدها کلیک کنید
                      

دقت کنید زمانی که از تابع add_action()  استفاده کردم دو پارامتر اضافی را هم تعیین کردم .پارامتر سوم , اولویت است که تعیین می کند این اکشن چه زمانی باید اجرا شود . شاید بخواهید چندین کد  و تابع را به یک قلاب مشخص متصل کنید و وردپرس دائما بخواهد از آنها استفاده کند .هرچه اولویت آن تابع بالاتر باشد آن اکشن دیرتر اجرا می شود

پارامتر چهارم تعیین می کند که چه تعداد آر گیومنت به توابع شما داده می شود . این یک مورد را شما باید تعیین کنید چرا که صرفاً از نام یک اکشن نمی‌توان به تعداد پارامترهای تابع آن پی برد درون تابع از ویژگی‌های مطلب استفاده کردم تا آدرس ایمیل نویسنده ها را به دست بیاورم و همچنین عنوان و لینک مطلب را . یک پیام کوتاه را ایجاد کردم و از تابع درونی وردپرس یعنی wp_mail() که برای ارسال ایمیل هست استفاده کردم تا یک ایمیل فوری را ارسال کنم .

من از کجا می دانستم این تابع وجود داره؟ گوگل! در حالیکه هیچ مانعی وجود ندارد که شما تابع ارسال ایمیل خودتان را بنویسید اما یک جستجوی سریع برای عبارت WordPress mail کار شما را  راحت می کند.

شروع کار با فیلترها

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

www.example.com/wp-admin

 از آنجایی که صرف نظر از پلاگین ما  یک  پیام خطا وجود دارد ما می خواهیم ان را اصلاح کنیم و این یعنی باید سراغ فیلتر برویم اتفاقاً یک فیلتر به نام login_errors وجود دارد. پس بیایید از ان استفاده کنیم و پیام آن را تغییر دهیم.

 


برای نمایش کدها کلیک کنید
                      

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

اضافه کردن اسکریپت و استایل

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


برای نمایش کدها کلیک کنید
                      

اکشنی که  استفاده کردیم به خوبی نامگذاری نشده است چراکه از   wp_enqueue_scripts  برای اضافه کردن هم اسکریپت و هم استایل استفاده می شود .درون تابع قلاب شده ما از wp_enqueue_style() استفاده کردیم برای اضافه کردن استایل مان  . اولین پارامتر slug  یا دستگیره اسکریپت است (نامگذاری آن به سلیقه شماست )  ، و پارامتر دوم آدرس url اسکریپت است  . استفاده از //url.com به جای http://url.com یک راهکار جالب است که به مرورگرها اجازه می دهد نسخه مناسب اسکریپت را دریافت کنند اگر شما از https استفاده می کنید نسخه https را دریافت خواهد کرد در غیر این صورت از نسخه مرسوم http استفاده خواهد کرد .

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


برای نمایش کدها کلیک کنید
                      

این فرایندها  بسیار شبیه هستند اما من از پارامترهای بیشتری در تابع wp_enqueue_script() استفاده کرده .پارمتر سوم وابستگی‌های اسکریپت را تعریف میکند. وردپرس تضمین می کند که تمام نیازمندیها و وابستگی ها را بارگزاری کند بنا بر این حتی اگر یک وابستگی را  بعدا قرار دهید  با هم در موقعیت و زمان صحیح  بارگزاری خواهد شد .پارامتر چهارم یک شماره ورژن است که خودتان آن را تعیین می کنید این پارامترها برای تابع wp_enqueue_style() هم برقرار است .

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

ایجاد صفحه تنظیمات برای افزونه

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

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

نگاهی به صفحه در wordpress codex بیندازید و با هر دو روش ساده و شی گرا آشنا شوید. اولین چیزی که انجام میدهیم ایجاد یک منو هست که قرار است تنظیمات را درون آن قرار دهیم.


برای نمایش کدها کلیک کنید
                      

دقت کنید که ما از یک action استفاده می کنیم . هر زمان که وردپرس قلاب admin_menu را ببیند تمام توابعی  را که به آن متصل شده اند اجرا می کند. ما خودمان یک تابع به آن اضافه می کنیم تا زمانی که منو ساخته می شود آن تا بع هم به حساب آید : add_menu_page()  برای ایجاد یک منوی سطح ۱ استفاده می کنیم این تابع تعدادی آرگیومنت می‌گیرد:

1. عنوان صحفه -  درون تگ عنوان صفحه استفاده می شود و در نوار مرورگر نمایش داده می شود

2. عنوان منو -  در منو در سمت راست قابل مشاهده است

3. صلاحیت  - سطح یوزری که امکان دسترسی این صفحه را دارد

4. slug منو  - عنوانی که در آدرس اینترنتی url صفحه استفاده می شود

5- تابع  -  نام تابعی که محتوای صفحه را ایجاد می کند

6. آیکون-  آدرس یک تصویر یا رشته Dashicons

7 - موقعیت -  موقعیت آیتم شما درون کل منو

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

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


برای نمایش کدها کلیک کنید
                      

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

پاسخ WordPress Codex است . در برخی مواقع قلابی که می‌خواهید استفاده کنید معلوم است در مواقع دیگر باید به دنبال آن بگردید در برخی شرایط میتوانید از قلاب های دیگری هم استفاده کنید در حالیکه عملکرد  و قابلیت ها باقی می ماند . در این موارد معمولاً یک راه پیشنهادی برای این کار وجود دارد : همیشه قبل از اینکه یک قلاب  را پیاده  سازی کنید درون Codex   جستجوی انجام دهید .خوب حالا با داشتن منوی مدیریت و رجیسترکردن تنظیمات اجازه دهید یک فرم برای نمایش صفحه طراحی کنیم  . کد زیر را درون تابع خالی  my_plugin_settings_page() پیست کنید.


برای نمایش کدها کلیک کنید
                      

سه چیز هست که هنگام ساخت فرم هایی از این دست به خاطر داشته باشیم:

1- از تابع settings_fields()  استفاده کنیم ، گروه‌ آپشن را به عنوان پارامتر اول وارد کنیم این کار باعث می شود تعدادی فیلد مخفی برای وردپرس ایجاد شود تا داده های شما را ذخیره کند

2-از نام آپشن هایی که در زمان ثبت آنها در پارامتر نام input ها تعریف کردیداستفاده کنید

3- مقدار یک فیلد را با استفاده از تابه get_option()  بگیرید  ، نام آپشن را به عنوان پارامتر اول به آن بدهید

با انجام این کارها فایل تنظیمات را ساختیم .  وردپرس  خودش هنگامی که از API آپشن ها استفاده می کنید همه مقادیر و   داده ها را ذخیره میکند .

 

فعال کردن قابلیت ترجمه یا چند زبانی

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

 


برای نمایش کدها کلیک کنید
                      

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

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

 

 


برچسب ها: