اینتر من
درباره سایت
آخرین مطالب
- افزونه وردپرس دانلود به ازای ایمیل فارسی
- هدیه دادن به مشتریان در فروشگاه ووکامرس
- بسته شماره ۱ تخفیف گروهی راهنمای وردپرس
- هدیه دادن به مشتریان در فروشگاه ووکامرس
- ایجاد بارکد QR در وب سایت وردپرس
- تبدیل ارزهای مختلف در وردپرس توسط افزونه WP Currency Converter
- تبدیل ارزهای مختلف در وردپرس توسط افزونه WP Currency Converter
- ایجاد بارکد QR در وب سایت وردپرس
- آموزش استفاده از جیکوئری (jQuery) در وردپرس
- آموزش استفاده از Transients برای کش کردن در وردپرس
امکانات وب
جاوا اسکریپت (JavaScript) یکی از اجزای مهم در افزونه های وردپرسی است.
وردپرس در هسته خود از کتابخانه های جاوا اسکریپت زیادی استفاده کرده است و یکی از پرکاربردترین آنها جیکوئری (jQuery) است، چراکه استفاده از آن آسانتر است.
استفاده از jQuery
اسکریپت جی کوئری پس از اینکه صفحه درخواست شده به کاربر تحویل داده شد، در مرورگر اجرا می شود.
کد جی کوئری از دو بخش تشکیل می شود:
یک انتخابگر که مشخص می کند عملیات بر روی کدام المان HTML باید اجرا شود و یک اکشن یا رویداد که مشخص می کند کدها باید چه کاری را انجام دهند.
دستور زیر یک مثال ساده است:
|
jQuery.(selector).event(function); |
در اینجا رویداد می تواند کاری مانند کلیک کردن بر روی المانی که مشخص شده است، باشد.
در واقع در این حالت کاربر تا زمانی که بر روی آن المان مشخص شده کلیک نکند، کدهای جی کوئری اجرا نخواهند شد.
تمام کدهایی که در مثال های این بخش گفته می شود، فرض می کنیم با استفاده از فایلی به نام myplugin_settings.php در صفحه مدیریت افزونهتان نمایش داده می شوند.
پیشنهاد می کنیم ایجاد ، نصب و پیکربندی فروشگاه در وردپرس با ووکامرس –تب مالیات
کدهای زیر مربوط به یک جدول ساده با دکمه های رادیویی است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
</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> |
خروجی کدها چیزی مشابه با تصویر زیر خواهد بود.
از همین سری ایجاد افزونه وردپرس، در مقاله مربوط به Ajax یک تغییر از نوع ایجکس ایجاد خواهیم کرد که انتخاب کاربر را در جدول متای کاربر (usermeta) ذخیره خواهد کرد.
هرچند این مثال یک برنامه خیلی کاربردی نیست، اما گام های مهم را به شما نشان می دهد.
انتخاب کننده (Selector) و رویداد (Event)
انتخاب کننده جی کوئری همانند انتخاب کننده های CSS است و از “.class ” یا “#id ” استفاده می شود.
البته انتخاب کننده های بیشتری وجود دارند ولی دو مورد گفته شده بیشترین کاربرد را دارند.
در مثال فوق ما از کلاس “.pref” استفاده کرده ایم.
پس از اینکه انتخابگر را مشخص کردیم باید رویداد مربوط به آن را هم مشخص کنیم.
یعنی کدهای جی کوئری در چه حالتی باید از خود واکنش نشان دهند که بدین منظور می توانید بخش Events سایت جیکوئری را مشاهده کنید.
در این مثال ما از ‘change’ استفاده می کنیم تا گزینه انتخاب شده توسط دکمه رادیویی را بگیریم.
در نهایت کد ما به شکل زیر نوشته می شود:
|
$.(".pref").change(function(){ /*کدهای شما*/ }); |
داخل تابع می توانید کدهای خودتان را که پس از انتخاب و تغییر گزینه باید اجرا شوند را وارد کنید. در واقع کد بالا زمانی که تغییری در المان pref ایجاد شود، اجرا خواهد شد.
برچسب:
نویسنده: محمد رضا جوادیان