آموزش استفاده از جی‌کوئری (jQuery) در وردپرس

///آموزش استفاده از جی‌کوئری (jQuery) در وردپرس

آموزش استفاده از جی‌کوئری (jQuery) در وردپرس

سایر بخش های سری آموزشی " ایجاد افزونه وردپرس "

جاوا اسکریپت (JavaScript) یکی از اجزای مهم در افزونه های وردپرسی است.

وردپرس در هسته خود از کتابخانه های جاوا اسکریپت زیادی استفاده کرده است و یکی از پرکاربردترین آنها جی‌کوئری (jQuery) است، چراکه استفاده از آن آسان‌تر است.

 

استفاده از jQuery

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

کد جی کوئری از دو بخش تشکیل می شود:

یک انتخاب‌گر که مشخص می کند عملیات بر روی کدام المان HTML باید اجرا شود و یک اکشن یا رویداد که مشخص می کند کدها باید چه کاری را انجام دهند.

دستور زیر یک مثال ساده است:

jQuery.(selector).event(function);

 

در اینجا رویداد می تواند کاری مانند کلیک کردن بر روی المانی که مشخص شده است، باشد.

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

تمام کدهایی که در مثال های این بخش گفته می شود، فرض می کنیم با استفاده از فایلی به نام myplugin_settings.php در صفحه مدیریت افزونه‌تان نمایش داده می شوند.

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

</pre>
<form id="radioform">
 <table>
  <tbody>
   <tr>
    <td><input class="pref" checked="checked" name="book" type="radio" value="Sycamore Row" />Sycamore Row</td>
    <td>John Grisham</td>
   </tr>
   <tr>
    <td><input class="pref" name="book" type="radio" value="Dark Witch" />Dark Witch</td>
    <td>Nora Roberts</td>
   </tr>
  </tbody>
 </table>
</form>
<pre>

 

خروجی کدها چیزی مشابه با تصویر زیر خواهد بود.

pdh-ajax-example

 

از همین سری ایجاد افزونه وردپرس، در مقاله مربوط به Ajax یک تغییر از نوع ایجکس ایجاد خواهیم کرد که انتخاب کاربر را در جدول متای کاربر (usermeta) ذخیره خواهد کرد.

هرچند این مثال یک برنامه خیلی کاربردی نیست، اما گام های مهم را به شما نشان می دهد.

 

انتخاب کننده (Selector) و رویداد (Event)

انتخاب کننده جی کوئری همانند انتخاب کننده های CSS است و از “.class ” یا “#id ” استفاده می شود.

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

در مثال فوق ما از کلاس “.pref” استفاده کرده ایم.

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

یعنی کدهای جی کوئری در چه حالتی باید از خود واکنش نشان دهند که بدین منظور می توانید بخش Events سایت جی‌کوئری را مشاهده کنید.

در این مثال ما از ‘change’ استفاده می کنیم تا گزینه انتخاب شده توسط دکمه رادیویی را بگیریم.

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

$.(".pref").change(function(){
    /*کدهای شما*/
});

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

نویسنده: |۱۳۹۵/۵/۱۸ ۱۹:۴۳:۱۳۱۸ مرداد ۱۳۹۵|ساخت افزونه وردپرس, سری آموزشی|فاقد دیدگاه

درباره نویسنده:

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

نظر شما چیست