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

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

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

 

ایجاد یک ابزارک

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

مشاهده می کنید که کلاس WP_Widget چند تابع برای ایجاد ابزارک ها را ارائه می دهد که هر کدام از آنها وظیفه و هدف خاصی را دارد .

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

در طی ایجاد این ابزارک به شما نشان می دهیم که داده های متنی چگونه در یک ابزارک وردپرس ذخیره می شوند .

برای شروع از قلاب اکشن widgets_init استفاده می کنیم . این قلاب اکشن بعد از ثبت ابزارک های پیش فرض وردپرس اجرا می شود .

قلاب widgets_init باعث می شود که تابع سفارشی در زمان ایجاد ابزارک اجرا شود . در مثال بالا تابع سفارشی rwpp_widgetexample_register_widgets() می باشد .

سپس از تابع register_widget() برای ثبت ابزارک استفاده شده است . این تابع یک پارامتر که نام کلاس است را دریافت می کند . در کد بالا از نام کلاس rwpp_widgetexample_widget_my_info استفاده شده است .

توسط تابع register_widget() می توانید به هر تعدادی که نیاز دارید ، ابزارک ثبت و ایجاد کنید .

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

بعد از ثبت ابزارک ، باید کلاس ابزارک را کدنویسی کنیم .

در کد بالا مشاهده می کنید که در هنگام ایجاد کلاس rwpp_widgetexample_widget_my_info از کلاس WP_Widget گسترش داده (extends) شده است .

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

ابتدا یک آرایه به نام $widget_ops برای نگهداری گزینه های ابزارک ایجاد شده است .

این آرایه گزینه های نام کلاس و توضیحات را در خود نگهداری می کند .

به خاطر اینکه ستون های کناری یا sidebar ها همه ابزارک ها را در یک المان ul یا unordered list نمایش می دهند ، گزینه نام کلاس به تگ <li> ابزارک اضافه می شود .

هر ابزارک یکتا در ناحیه های نمایش ابزارک به عنوان یک تگ <li> یا list item نمایش داده می شود ، بنابراین با اضافه کردن نام کلاس (classname) یا شناسه (id) به هر ابزارک ، می توانید به سادگی استایل و ظاهر دلخواه را به هر ابزارک اعمال کرد .

گزینه توضیحات (description) هم در صفحه نمایش کل ابزارک ها که از طریق منوی “نمایش / ابزارک ها” قابل دسترس است ، برای توضیح ابزارک نمایش داده می شود .

بعد از ایجاد گزینه های آرایه ، آنها را به WP_Widget ارسال می کنیم .

مقدار اول (rwpp_widgetexample_widget_my_info) شناسه یا id تگ <li> ابزارک است .

مقدار دوم نام ابزارک است که در صفحه نمایش/ابزارک ها نمایش داده می شود .

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

و مقدار سوم یا آخر نیز آرایه ای است که در خطوط قبلی با گزینه های نام کلاس و توضیحات پُر شده بود .

در گام بعدی نیاز است که شما فرم تنظیمات مربوط به ابزارک را ایجاد کنید .

ابزارک مورد نظر ما می تواند سه مقدار را دریافت کند : عنوان (Title) ، فیلم مورد علاقه (Favorite movie) و آهنگ مورد علاقه (Favorite song) .

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

سپس مقادیر نمونه مقداردهی می شوند . این مقادیر همان تنظیمات ابزارک هستند که ذخیره شده اند .

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

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

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

دقت داشته باشید که نیازی به اضافه کردن تگ <form> یا دکمه submit در بخش تنظیمات ابزارک نیست ، زیرا کلاس اصلی ابزارک یعنی WP_Widget عملیات ذخیره و … را برای شما انجام می دهد .

همچنین مطمئن شوید که مقادیر فیلدها را قبل از نمایش با استفاده از تابع esc_attr() رد کرده باشید (escape) .

اکنون زمان ذخیره تنظیمات ابزارک بوسیله تابع update از کلاس widget است . ابتدا به کد زیر نگاه کنید .

مشاهده می کنید که کلاس widget همه عملیات ذخیره سازی را برای شما مدیریت می کند .

تنها کافیست برای هر تنظیم ابزارک مقادیر $new_instance را ارسال کنید .

همیشه مطمئن شوید که داده های وارد شده توسط کاربر را بوسیله توابع موجود در وردپرس و php را پاکسازی (sanitize) کنید . در اینجا از تابع strip_tags() که در php وجود دارد ، استفاده شده است .

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

برای اینکار از تابع widget که در کلاس widget موجود است ، استفاده می کنیم .

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

این متغییر مقادیر سراسری پوسته مانند $before_widget و $after_widget را در خود نگهداری می کند .

این مقادیر می توانند در زمان ثبت ناحیه های ابزارک (sidebar)  تعریف شده باشند .

از مقادیر  $before_widget و $after_widget می توانید برای سفارشی سازی بخش ابزارک ها مانند اضافه کردن تگ های دلخواهی مانند تگ <div> استفاده کنید .

سپس متغیر $title را برای نگهداری عنوان ابزارک تنظیم می کنیم .

همچنین برای اعمال و تنظیم کردن عنوان ابزارک از فیلتر widget_title استفاده می کنیم . با این کار سایر توسعه دهندگان می توانند در صورت نیاز تغییراتی را روی عنوان ابزارک را داشته باشند .

برای تنظیم متغیرهای $movie و $song از یک عملگر (operator) سه تایی استفاده کرده ایم . در این دستور به صورت ساده گفته شده است که اگر متغیر $movie خالی بود با مقدار “&nbsp;” و در غیر اینصورت با مقدار $instance[‘movie’] پر شود .

اکنون که تمام متغیرهای تنظیمات ابزارک تعریف شده اند و مقادیر آنها نیز جمع آوری شده است ، باید آنها را نمایش دهیم .

ابتدا متغیر $title را نمایش می دهیم .

دقت کنید که متغیر $title باید همیشه در بین متغیرهای $before_title و $after_title  نمایش داده شود . این متغیرهای سراسری می توانند توسط توسعه دهندگان در هنگام تعریف ناحیه های ابزارک تعریف شوند .

پس از نمایش مقدار متغیر $title ، مقادیر movie و song را نمایش می دهیم .

در پایان فراموش نکنید که نمایش ابزارک را با متغیر عمومی $after_widget تمام کنید .

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

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

در بخش زیر تصاویر مربوط به ابزارک ایجاد شده را مشاهده می کنید :

 

 

 

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