نحوه ایجاد ویجت وردپرس سفارشی

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

برای افزودن آگهی ها ، تبلیغات ، فرم های ثبت نام در خبرنامه و سایر عناصر به وب سایت خود می توانید از ابزارک ها استفاده کنید.

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

Creating a custom WordPress widget

توجه: این آموزش برای کاربران وردپرس DIY است که در حال یادگیری توسعه و کدگذاری وردپرس هستند.

ویجت وردپرس چیست؟ h4>

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

آنها را به عنوان ماژول هایی در نظر بگیرید که با استفاده از یک رابط کشیدن و رها کردن ساده می توانید عناصر مختلف را اضافه کنید.

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

Adding widgets in WordPress

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

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

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

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

آموزش فیلم h4>

مشترک شدن در WPBeginner

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

ایجاد ویجت سفارشی در وردپرس h4>

اگر در حال یادگیری کدگذاری وردپرس هستید ، به یک محیط توسعه محلی نیاز خواهید داشت. می توانید نصب وردپرس بر روی رایانه خود ( Mac یا Windows).

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

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

همچنین می توانید کد را در قالب پرونده functions.php . با این حال ، فقط در صورت فعال بودن آن تم خاص در دسترس خواهد بود.

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

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

بیایید شروع کنیم.

ایجاد یک ابزارک اصلی وردپرس h4>

وردپرس دارای یک کلاس داخلی ابزارک وردپرس است. هر ابزارک جدید وردپرس کلاس ویجت وردپرس را گسترش می دهد.

در کتابچه راهنمای توسعه دهنده وردپرس 18 روش ذکر شده است که می تواند با کلاس ویجت WP .

با این حال ، بخاطر این آموزش ، ما روی روشهای زیر تمرکز خواهیم کرد.

  • __construction (): این بخشی است که در آن ویجت ID ، عنوان و توضیحات را ایجاد می کنیم.
  • widget: این جایی است که ما خروجی تولید شده توسط ویجت را تعریف می کنیم.
  • فرم: این قسمت از کد جایی است که ما فرم را با گزینه های ویجت برای backend ایجاد می کنیم.
  • بروزرسانی: این بخشی است که ما گزینه های ابزارک را در پایگاه داده ذخیره می کنیم.

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

// ایجاد ویجت
کلاس wpb_widget گسترش WP_Widget {

// قسمت سازه
تابع __construction () {

}
 
// ایجاد جلوی ویجت
ابزارک عملکرد عمومی ($ args ، $ instance) {

}
         
// ایجاد ابزارک Backend
فرم عملکرد عمومی ($ instance) {

}
     
// ویجت به روزرسانی و جایگزینی نمونه های قدیمی با موارد جدید
به روزرسانی عملکرد عمومی ($ new_instance ، $ old_instance) {

}

// کلاس wpb_widget در اینجا پایان می یابد
}

قطعه نهایی کد جایی است که ما در واقع ابزارک را ثبت کرده و در داخل وردپرس بارگیری می کنیم.

تابع wpb_load_widget () {
    Register_widget ('wpb_widget')؛
}
add_action ('widget_init'، 'wpb_load_widget')؛

حالا بیایید همه اینها را با هم جمع کنیم تا یک ابزارک اساسی وردپرس ایجاد کنیم.

می توانید کد زیر را در پلاگین یا پرونده funksion.php طرح زمینه خود کپی و جایگذاری کنید.


// ایجاد ویجت
کلاس wpb_widget گسترش WP_Widget {
 
تابع __construction () {
پدر و مادر :: سازنده __ (
 
// شناسه پایه ابزارک خود
'wpb_widget' ،
 
// نام ویجت در UI ظاهر می شود
__ ('WPBeginner Widget'، 'wpb_widget_domain')،
 
// توضیحات ویجت
آرایه ('description' => __ ('نمونه ویجت بر اساس آموزش WPBeginner' ، 'wpb_widget_domain') ،)
)
}
 
// ایجاد جلوی ویجت
 
ابزارک عملکرد عمومی ($ args ، $ instance) {
$ title = apply_filters ('widget_title'، $ instance ['title'])؛
 
// قبل و بعد از استدلال های ویجت توسط مضامین تعریف می شوند
echo $ args ['before_widget']؛
if (! خالی ($ عنوان))
echo $ args ['before_title']. عنوان $ $ args ['after_title']؛
 
// این جایی است که کد را اجرا می کنید و خروجی را نمایش می دهید
echo __ ('سلام ، جهان!' ، 'wpb_widget_domain')؛
echo $ args ['after_widget']؛
}
         
// ویجت باطن
فرم عملکرد عمومی ($ instance) {
if (Isset ($ instance ['عنوان']))) {
$ title = $ instance ['عنوان']؛
}
دیگر {
$ title = __ ("عنوان جدید" ، "wpb_widget_domain")؛
}
// فرم مدیر ویجت
؟>

پس از افزودن کد ، باید به صفحه Appearance »Widgets بروید. Widget جدید WPBeginner را در لیست ابزارک های موجود مشاهده خواهید کرد. باید این ابزارک را به یک نوار کناری بکشید و رها کنید.

Demo widget

این ابزارک فقط یک قسمت فرم برای پر کردن دارد ، می توانید متن خود را اضافه کنید و برای ذخیره تغییرات خود بر روی دکمه ذخیره کلیک کنید.

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

Previewing your custom widget

حالا بیایید کد را دوباره مطالعه کنیم.

ابتدا "wpb_widget" را ثبت کردیم و ابزارک سفارشی خود را بارگیری کردیم. بعد از آن ما تعریف کردیم که آن ویجت چه کاری انجام می دهد و نحوه نمایش ویجت به صورت پایان کار انجام می شود.

در آخر ، نحوه مدیریت تغییرات ایجاد شده در ویجت را تعریف کردیم.

اکنون چند مورد وجود دارد که ممکن است بخواهید بپرسید. به عنوان مثال ، هدف wpb_text_domain چیست؟

وردپرس از gettext برای مدیریت ترجمه و بومی سازی استفاده می کند. این wpb_text_domain و __e به gettext می گوید که یک رشته را برای ترجمه در دسترس قرار دهد. به چگونگی پیدا کردن می توانید تم های آماده وردپرس را پیدا کنید .

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

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/.

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