برای من و امثال من که حوصله سر و کله زدن با کدهای خام جاوااسکریپت را نداریم جی کوئری(jquery) یک معجزه است. تازه وقتی خود وردپرس هم به صورت پیشفرض یک نسخه از جی کوئری را درون خود دارد چرا نباید از آن استفاده کنیم.

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

همانطور که گفتم پیش فرض جی کوئری در وردپرس وجود دارد. پس مثل پروژه هایی که با php خام کد می زنیم، لازم نیست فایل های جی کوئری را لود کنیم چون از قبل وجود دارند.

روش استفاده از کدهای جی کوئری در وردپرس

قاعدتا ما کدهای جی کوئری را داخل یک فایل با فرمت js می‌نویسیم. قبلا در در مطلب ساخت پلاگین توضیح دادم که برای لود کردن یک فایل js داخل صفحه، از اکشن wp_enqueue_scripts و تابع wp_enqueue_scripts استفاده می‌کنیم.

برای این که یادآوری شود اینجا یک مثال میزنم. فرض کنیم یک فایل به اسم custom.js داریم و قرار است آن را لود کنیم.

add_action('wp_enqueue_scripts', 'load_custom_scripts');
function load_custom_scripts() {
          wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array());
 }

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

باید به وردپرس بگوییم که در این فایل از jquery استفاده می‌شود.

در کد بالا پارامتر آخر تابع wp_enqueue_script یک آرایه خالی قرار داده شده. این پارامتر مشخص می کند که کد ما چه وابستگی هایی دارد. منظور از وابستگی این است که از چه کتابخانه یا پکیج هایی استفاده میکند. اینجا چون قرار است از جی کوئری استفاده کنیم داخل این آرایه اسم jquery را باید بنویسیم.

پس در نهایت تابع wp_enqueue_script به این شکل درمی‌آید.

wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array('jquery'));
 }

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

الان وقت نوشتن کد های جی کوئری است.

روش درست نوشتن جی کوئری در وردپرس

حتما یادتان ههست که خارج از وردپرس همیشه به این شکل کدهای جی کوئری را مینوشتیم:

$(document).ready(function() {  
$("p").css("color", "red");  
});

اما این در وردپرس جواب نمی‌دهد. اینجا به جای علامت $ باید از عبارت کامل jQuery استفاده کنیم:

jQuery(document).ready(function() {  
jQuery("p").css("color", "red");  
});

تکرار مداوم عبارت jQuery برای نوشتن هر تابع قطعا اذیت کننده است. خوشبختانه وردپرس یک راه حل برای این هم در نظر گرفته تا از همان $ خودمان وجود دارد. برای این کار باید به این شکل کد بنویسیم:

قبل از selector (که در مثال بالا document است )حتما باید از jQuery استفاده کنیم. برای پارامتر داخل پرانتز function علامت $ بگذاریم. حالا همه جا داخل این function می شود از $ استفاده کرد و وردپرس هیچ ایرادی به ما نخواهد گرفت:

jQuery(document).ready(function($) {  
$("p").css("color", "red");  
}

دردسر آپدیت های جدید وردپرس با جی کوئری

از نسخه 5.5 وردپرس تصمیم گرفت که جی کوئری را از نسخه های قدیمی به جدید آپدیت کند. خیلی از پلاگین ها و قالب ها داشتند از همان نسخه قبلی استفاده میکردند و تغییر یکباره باعث می‌شد خیلی از این پلاگین وقالب ها با مشکل جدی روبرو شوند.

تیم توسعه وردپرس برای حل این مشکل یک پلاگین به نام Test jQuery Updates منتشر کرد تا توسعه دهندگان، پلاگین ها و قالب های خودشان را با آن تست کنند و برای تغییرات آماده شوند.

با این حال بعد از آپدیت وردپرس به نسخه 5.5 بازهم مشکلات زیادی برای کاربران به وجود آمد. این بار وردپرس Enable jQuery Migrate Helper منتشر کرد تا کاربران پلاگین وقالب هایی که دچار مشکل شده بودند به صورت موقت مشکلشان با آپدیت جی‌کوئری برطرف شود.

اما به هر حال برنامه نویس‌ها باید پلاگین و قالب های خودشان را سازگار کنند چون از نسخه 5.7 دیگر خبری از نسخه های قدیمی jquery در وردپرس نخواهد بود.