سلام خدمت دوستان در این مطلب روش صحیح استفاده از کتابخونه jquery رو بررسی کنیم. بعضاً میبینیم تازه کار ها برای طراحی قالب وردپرس بطور مستقیم از تگ script برای فراخوانی کتابخانه جی کوئری استفاده میکنن اما این کار اشتباه است چرا ...

 

اشکال کار

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

روش اشتباه استفاده از جی کوئری تو فایل قالب:

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.js"></script>
//OR
<script type="text/javascript" src="<?php get_template_directory_uri(); ?>/js/jquery.js"></script>

 

 

راه حل :

یه فایل جی کوئری تو هسته وردپرس وجود داره که تمام قالب ها و افزونه ها میتونن به صورت مشترک همون فایلو صدا بزنن این فایل داخل دایرکتوری wp-includes/js/jquery قرار داره

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

 

روش صحیح استفاده: داخل فایل header.php قالب قبل از wp_head() از کد زیر استفاده کنید:

<?php wp_enqueue_script("jquery"); ?>
 
<?php wp_head(); ?>

روش دیگه اینکه از طریق فایل functions.php قالب خود این کتابخانه رو فراخونی کنید:

function my_template_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_template_jquery' );

 

جلوگیری از تداخل جی کوئری

برای امنیت استفاده از جی کوئری و برای جلوگیری از تداخل با کتابخانه های جاوا اسکریپتی که از علامت $ استفاده میکنند بهتره اول این تداخل احتمالی را از بین ببرید تا خیالتون راحت باشه.
برای از بین بردن تداخل کافیه از متد noConflict استفاده کنید:

مثال:

var $j = jQuery.noConflict();
 
$j(function(){
 
//کد های جیکوئری از اینجا شروع میشود
$j("#sidebar li a").hover(function(){
$j(this).stop().animate({
paddingLeft: "20px&"
}, 400);
}, function() {
$j(this).stop().animate({
paddingLeft: 0
}, 400);
});
//
});

 

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

 

خب حالا چجوری از کتابخانه سرور گوگل استفاده کنیم؟ اونم به صورتی که تمام افزونه های سایت از همون یکی استفاده کنند؟

گفتیم که به صورت پیشفرض اون فایل جی کوئری اصلی داخل هسته وردپرس وجود داره. پس ما اول باید بگیم از این فایل استفاده نکن و بجاش از فایلی که مد نظر ماست استفاده کن. اینطوری تمام افزونه ها هم از فایل جدید استفاده میکنند. یعنی منبع جی کوئری سایت رو تغییر میدیم.

برای این کار کد زیر رو داخل فایل functions.php اضافه کنید:

 

add_action(' wp_enqueue_script','setupScripts');
function setupScripts(){
wp_dequeue_script('jqeury');
wp_deregister_script('jquery');
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js',array(),'1.2',true);
}

موفق و سربلند باشید.

منبع : 7learn