مقدمه
با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن به ویژه کاربرانی که به سیستم مدیریت محتوای قدرتمند وردپرس علاقمند هستند.
به ” دوره متخصص وردپرس ” خوش آمدید!
در این دوره قرار است توسعه و ارتقاء پلاگین های وردپرس را به صورت جامع و کامل بیاموزیم.
فرقی نمی کند که در شرف نوشتن اولین پلاگین خود هستید و یا این که پنجاهمین پلاگین خود را می نویسید! امیدوارم این دوره برایتان مفید باشد.
در این جلسه با آموزش استفاده از jQuery در ساخت پلاگین به سر فصل جاوا اسکریپت می پردازیم.
آموزش استفاده از jQuery در ساخت پلاگین
اسکریپت jQuery پس از دریافت صفحه وب وردپرس در مرورگر کاربر اجرا می شود.
یک عبارت اصلی جی کوئری دارای دو بخش است:
- انتخاب کننده ای که تعیین می کند کدام عناصر HTML کد برای آن اعمال می شود
- یک عمل یا رویداد ، که مشخص می کند کد چیست یا چه عکس العملی را نشان می دهد.
عبارت رویداد اصلی به شرح زیر است:
مثال :
| jQuery.(selector).event(function); |
هنگامی که رویدادی ، مانند کلیک ماوس ، در یک عنصر HTML که توسط انتخاب کننده انتخاب می شود رخ می دهد ، تابعی که درون مجموعه نهایی پرانتز تعریف شده باشد ، انجام می شود.
تمام نمونه های کد زیر بر اساس این محتوای صفحه HTML است.
فرض کنید که آن را در صفحه تنظیمات مدیریت افزونه شما ، 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> |
خروجی می تواند چیزی شبیه به تصویر زیر در صفحه تنظیمات شما باشد.
آموزش استفاده از jQuery در ساخت پلاگین
در جلسه آموزشی مرتبط با AJAX ، مبادله ای AJAX ایجاد خواهیم کرد که باعث می شود در انتخاب کاربر در usermeta صرفه جویی شود.
این کار موجب می شود که بتوانیم تعدادی پست برچسب خورده با عنوان انتخاب شده را اضافه نماییم.
گرچه فرآیند بالا چندان کاربردی نیست اما تمام مراحل را نشان نمی دهد.
کد jQuery یا می تواند در یک فایل خارجی حضور داشته باشد یا به صفحه داخل یک بلوک <script> منتقل شود.
ما بر روی تغییر پرونده های خارجی تمرکز خواهیم کرد زیرا گذر از مقادیر از PHP نیاز به توجه ویژه دارد.
همین کد می تواند به صفحه منتقل شود.
Selector and Event گزینشگر و رویداد
گزینشگر همان فرم انتخاب کنندگان CSS است: “.class” یا “#id”.
گرچه جز دو مورد بالا فرم های گوناگونی موجود هستند؛ اما این دو مورد بیش از سایرین مورد استفاده قرار می گیرند.
در این مثال ما از کلاس “.pref” استفاده خواهیم کرد.
رویدادهای احتمالی دیگری نیز وجود دارد ، یکی از مواردی که احتمالاً از آن استفاده خواهید کرد ، “click” است.
در مثال ما از “change” برای گرفتن یک دکمه رادیویی استفاده خواهیم کرد.
توجه داشته باشید که رویدادهای jQuery اغلب متفاوت از رویدادهای JavaScript نامگذاری می شوند.
پس از اینکه ما یک تابع ناشناس خالی را اضافه کنیم ، عبارت مثال ما به صورت زیر خواهد بود.
مثال :
| $.(".pref").change(function(){ /*do stuff*/ }); |
هر وقت یک عنصر “pref” کلاس تغییر کند؛ “do stuff” رخ می دهد.
نکته
این قطعه کد و تمام نمونه های موجود در این صفحه برای نشان دادن استفاده از AJAX به کار می رود.
این کد برای محیط های تولید مناسب نیست زیرا عملیات مرتبط با آن از قبیل sanitization ، امنیت ، رسیدگی به خطا ، و intentionally عمداً حذف شده اند.
همواره در تولید کدهای خود به این موارد توجه نمایید.
کلام آخر
در این جلسه شما را با jQuery و استفاده از آن در ساخت پلاگین آشنا کردیم.
در جلسه بعدی به مبحث Ajax در ساخت پلاگین می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
