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

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


مرحله 1: افزونه ویجت خود را ایجاد کنید

اخیراً افزونه ای به نام “Freelancer Widgets Bundle” ایجاد کردم ، و برخی از من از من پرسیدند چگونه چنین افزونه ای را ایجاد کنم ، بنابراین تصمیم گرفتم این پست را بنویسم قدم اول ایجاد افزونه است. و همانطور که خواهید دید ، این سخت ترین بخش نیست. یک افزونه کد اضافی است که پس از فعال کردن آن به وردپرس اضافه می شوید. وردپرس یک حلقه را از طریق یک پوشه ایجاد می کند تا همه افزونه های موجود را بازیابی کند و آنها را در بخش پشتی لیست کند. برای ایجاد افزونه ، به ویراستاری مانند Coda (Mac) یا Dreamweaver (PC & Mac) نیاز دارید. من به شما توصیه می کنم افزونه خود را در یک نصب محلی وردپرس ایجاد کنید ، ایجاد خطا در یک سرور زنده می تواند در صورت بروز خطا مشکلاتی ایجاد کند. لطفاً ، لطفاً صبر کنید تا افزونه ما را قبل از قرار دادن میزبان خود آزمایش کنید.

اکنون پوشه wp-content / plugins را باز کنید. در اینجا می خواهید افزونه خود را اضافه کنید. یک فهرست جدید ایجاد کنید و آنرا “افزونه widget” بنامید (در واقع ، این نام می تواند هر آنچه که می خواهید باشد). حتی اگر افزونه ما فقط یک فایل واحد داشته باشد ، همیشه بهتر است از یک پوشه برای هر افزونه استفاده کنید. در دایرکتوری خود ، یک پرونده جدید با نام “widget-plugin.php” ایجاد کنید (این نام نیز قابل تغییر است) ، و آن را باز کنید. اکنون می خواهیم اولین خط کد خود را اضافه کنیم. تعریف یک افزونه تحت وردپرس از قوانینی پیروی می کند که می توانید بخوانید اینجا در کد. در اینجا نحوه تعریف وردپرس یک افزونه آورده شده است:

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

پرونده خود را ذخیره کنید. فقط با اضافه کردن کد به پرونده widget-plugin.php ما یک افزونه ایجاد کرده ایم! خوب ، اکنون این افزونه کاری نمی کند ، اما وردپرس آن را تشخیص می دهد. برای اطمینان از این موضوع ، به اداره خود بروید و از فهرست "افزونه ها" بروید. اگر افزونه شما در لیست افزونه ها ظاهر می شود خوب است ، در غیر این صورت حتماً دستورالعمل های من را رعایت کرده و دوباره امتحان کنید. اکنون می توانید افزونه را فعال کنید.

مرحله 2: ویجت را ایجاد کنید

اکنون می خواهیم ویجت خود را ایجاد کنیم. این ویجت یک کلاس PHP خواهد بود که کلاس اصلی WordPress را گسترش می دهد WP_Widget. در اصل ، ویجت ما به این صورت تعریف می شود:

// کلاس ویجت
کلاس My_Custom_Widget WP_Widget را گسترش می دهد

// سازنده اصلی
عملکرد عمومی __construct ()
/ * ... * /
}

// فرم ویجت (برای باطن)
فرم عملکرد عمومی ($ مثال)
/ * ... * /
}

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

// نمایش ویجت
ابزارک عملکرد عمومی ($ آرگومان ، به عنوان مثال) {
/ * ... * /
}

}

// ویجت را ثبت کنید
عملکرد my_register_custom_widget ()
Register_widget ('My_Custom_Widget')؛
}
add_action ('widgets_init'، 'my_register_custom_widget')؛

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

  1. سازنده, برای شروع ویجت
  2.  تابع شکل () برای ایجاد فرم ویجت در دولت
  3. تابع بروزرسانی (), برای ذخیره داده های ویجت در طول نسخه
  4. و تابع ویجت () برای نمایش محتوای ویجت در قسمت جلویی

1 - سازنده

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

// سازنده اصلی
عملکرد عمومی __construct ()
پدر و مادر :: __ ساخت (
'my_custom_widget',
__ ("ویجت سفارشی من" ، "text_domain"),
آرایه(
'customize_selective_refresh' => درست است,
)
)؛
}

لطفاً از __ () نام نام ویجت استفاده نکنید ، این عملکرد توسط وردپرس برای ترجمه استفاده می شود. من واقعاً توصیه می کنم همیشه استفاده کنید این توابع, تا موضوع شما کاملاً قابل ترجمه باشد. و استفاده از پارامتر "customize_selective_refresh" اجازه می دهد تا ویجت در زیر تجدید شود ظاهر> سفارشی سازی هنگام ویرایش ویجت بنابراین به جای تازه کردن کل صفحه فقط ویجت هنگام ایجاد تغییرات تازه می شود.

2 - تابع فرم ()

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

// فرم ویجت (برای باطن)
فرم عملکرد عمومی ($ مثال)

// پیش فرض ویجت را تنظیم کنید
$ پیش فرض = آرایه (
'عنوان' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
)؛

// تنظیمات فعلی را با پیش فرض تجزیه کنید
عصاره (wp_parse_args ((آرایه) $ مثال ، $ پیش فرض))؛ ؟>


"name ="get_field_name ("کادر انتخاب")؛ ؟> "type =" کادر انتخاب "مقدار =" 1 " />

این کد به سادگی 5 فیلد را به ویجت (عنوان ، متن ، متن ، انتخاب و کادر انتخاب) اضافه می کند. بنابراین ابتدا پیش فرضهای مربوط به ویجت خود را تعیین می کنید ، سپس عملکرد بعدی تنظیمات فعلی را که با ابزار پیش فرض برای ویجت خود ذخیره کرده اید تجزیه می کند (بنابراین هر تنظیماتی که وجود ندارد به پیش فرض برگردد ، مانند وقتی برای اولین بار ویجت را اضافه می کنید. نوار کناری شما) و آخر html برای هر قسمت است. هنگام افزودن فیلدهای فرم به استفاده از esc_attr () توجه کنید ، این کار به دلایل امنیتی انجام می شود. هر زمان که یک متغیر تعریف شده توسط کاربر را در سایت خود تکرار کنید ، باید مطمئن شوید که برای اولین بار ضد عفونی شده است.

3 - عملکرد به روزرسانی ()

عملکرد () به روز رسانی () بسیار ساده است. از آنجا که توسعه دهندگان اصلی WordPress یک API ابزارک واقعا قدرتمند اضافه کردند ، ما فقط باید این کد را برای بروزرسانی هر قسمت اضافه کنیم:

// تنظیمات ویجت را به روز کنید
به روز رسانی عملکرد عمومی ($ new_instance ، $ old_instance)
$ نمونه = $ old_instance؛
$ მაგალითად ['عنوان'] = صادر کننده ($ new_instance ['عنوان'])؟ wp_strip_all_tags ($ new_instance ['عنوان']): ''؛
$ მაგალითად ['text'] = صادر کننده ($ new_instance ['متن'])؟ wp_strip_all_tags ($ new_instance ['text']): ''؛
$ shembull ['textarea'] = صادر ($ new_instance ['textarea'])؟ wp_kses_post ($ new_instance ['textarea']): ''؛
$ shembull ['checkbox'] = صادر ($ new_instance ['کادر انتخاب'])؟ 1: نادرست؛
$ მაგალითად ['Select'] = صادر ($ new_instance ['انتخاب'])؟ wp_strip_all_tags ($ new_instance ['انتخاب']): ''؛
به عنوان مثال $ بازگردید؛
}

همانطور که می بینید همه کاری که باید انجام دهیم بررسی هر تنظیمات است و اگر خالی نیست آن را در بانک اطلاعات ذخیره کنید. به استفاده از توابع wp_strip_all_tags () و wp_kses_post () توجه کنید ، اینها برای از بین بردن داده ها قبل از افزودن به پایگاه داده استفاده می شوند. هر زمان که هر کاربر محتوای ارسال شده را در یک پایگاه داده وارد می کنید ، باید مطمئن شوید که هیچ کد مخرب ندارد. اولین تابع wp_strip_all_tags همه چیز را به جز متن اصلی حذف می کند ، بنابراین می توانید از آن برای هر زمینه استفاده کنید که مقدار نهایی یک رشته باشد و عملکرد دوم wp_kses_post () همان تابعی است که برای محتوای ارسال استفاده می شود و همه برچسب ها را علاوه بر HTML اصلی مانند پیوندها حذف می کند. ، دهانه ها ، شکافها ، تصاویر و غیره.

4 - تابع ویجت ()

تابع ویجت () عملکردی است که محتوا را در وب سایت تولید می کند. این همان چیزی است که بازدید کنندگان شما خواهند دید. این عملکرد می تواند برای شامل کلاس های CSS و برچسب های خاص برای مطابقت کامل با نمایش موضوع شما تنظیم شود. در اینجا کد وجود دارد (لطفاً توجه نکنید که این کد به راحتی متناسب با نیاز شما قابل تغییر است):

// نمایش ویجت
ابزارک عملکرد عمومی ($ آرگومان ، به عنوان مثال) {

عصاره ($ args)؛

// گزینه های ویجت را بررسی کنید
$ عنوان = صادر کننده ($ مثال ['عنوان'])؟ اعمال_فیلترها ('widget_title'، $ shembull ['عنوان']): ''؛
$ text = صادر ($ مثال ['متن'])؟ $ shembull ['text']: ''؛
$ textarea = isset ($ mînak ['textarea'])؟ $ mînak ['textarea']: ''؛
$ Select = صادر ($ مثال ['انتخاب'])؟ $ shembull ['select']: ''؛
$ checkbox =! خالی (به عنوان مثال $ "[جعبه کادر"])؟ $ نمونه ["کادر انتخاب"]: false؛

// قلاب اصلی WordPress قلاب قبل از ویجت (همیشه درج کنید)
echo $ Before_widget؛

// نمایش ویجت
پژواک
'؛ // در صورت تعریف عنوان عنصر ویجت را نمایش دهید اگر (عنوان $) { قبل از عنوان echo $. عنوان $ $ after_title؛ } // نمایش فیلد متن اگر (متن $) پژواک

" متن $ "

'؛ } // نمایش فیلد textarea if ($ textarea) { پژواک

" $ textarea. "

'؛ } // نمایش فیلد انتخاب اگر ($ انتخاب کنید) { پژواک

" $ را انتخاب کنید "

'؛ } // در صورت صحت کادر تأیید چیزی را نمایش دهید اگر (کادر تأیید $) { پژواک

چیزی عالی

'؛ } پژواک
'؛ // قلاب بعد از ویجت هسته وردپرس (همیشه شامل) echo $ after_widget؛ }

این کد پیچیده نیست ، تنها چیزی که باید به خاطر داشته باشید اینست که بررسی کنید متغیر تنظیم شده است ، اگر نمی خواهید و اگر می خواهید آن را چاپ کنید ، یک پیام خطا دریافت خواهید کرد.

کد پلاگین کامل ویجت

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

مشاهده کد کامل در Github

نتیجه

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map