روش صحیح و اصولی استفاده از jQuery در وردپرس

به واقع جی کوئری یکی از معدود کتابخانه های موفق جاوا اسکریپتی است که توانسته پس از گذشت مدت زمان طولانی از معرفی آن (در سال ۲۰۰۶) همچنان جایگاه خود را در بین توسعه دهندگان وب حفظ کند. اگر با جاوا اسکریپت Pure کد زده باشید درک خواهید کرد که jQuery تا چه اندازه فرآیند توسعه وب را سریعتر کرده است.

طبق تعریفی که توسط وب سایت jQuery ارائه شده است:

جی کوئری کتابخانه ای سریع، کوچک و دارای ویژگی های متعددی است که به کمک آن می توانید وظایفی همچون مدیریت رویدادها، فراخوانی های Ajax، ایجاد انیمیشن، جستجو و تغییر المان های HTML و … را بدون توجه به نوع مرورگر پیاده سازی کنید.

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

جی کوئری و وردپرس

اولین نسخه وردپرس در سال ۲۰۰۳ و تقریبا ۳ سال زودتر از jQuery معرفی گردید، ۸ سال طول کشید تا وردپرس در نسخه ۳٫۸٫۱ این کتابخانه قدرتمند را به پلتفرم خود اضافه کند. برای بررسی این موضوع به دایرکتوری wp-includes/js/jquery در محل نصب وردپرس مراجعه کنید.

دایرکتوری jquery

اما صرف وجود فایل های فوق در دایرکتوری وردپرس بدان معنی نیست که می توانید به صورت پیش فرض از آنها استفاده کنید. برای فراخوانی و استفاده از jQuery باید یکسری کارهای مقدماتی انجام دهید که در ادامه بررسی خواهیم کرد، اما قبل از آن بهتر است با مفهوم حالت سازگاری یا Compatibility Mode آشنا شوید.

حالت سازگاری به چه معناست؟

همانطور که می دانید یکی از ویژگی های قدرتمند وردپرس امکان نصب تعداد زیادی قالب و افزونه است که هر کدام از آنها امکانات متنوعی به این سیستم مدیریت محتوا اضافه می کنند. از طرفی ممکن است توسعه دهندگان این افزونه ها از کتابخانه های جاوا اسکریپتی نظیر MooTools یا Prototype در فرآیند توسعه خود استفاده کرده باشند که باعث تداخل یا Conflict با سایر افزونه ها شود. به همین علت وردپرس برای حفظ پایداری خود کتابخانه جی کوئری را در حالت سازگار یا Compatible لود می کند تا از بروز هر گونه تداخل بین افزونه ها جلوگیری نماید.

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

$( 'button' ).click( function() {
	  $( '#message' ).hide();
})

 

و به جای $ باید از jQuery استفاده کنید.

jQuery( 'button' ).click( function() {
	  jQuery( '#message' ).hide();
})

 

اما این شیوه فراخوانی ممکن است برای اکثر افرادی که به $ خو گرفته اند تجربه ای ناخوشایند باشد، خوشبختانه می توانید با اعمال تغییراتی همچنان از $ به جای jQuery استفاده کنید. این تغییرات بسته به مکان فراخوانی اسکریپت (هدر یا فوتر صفحه وب) متفاوت می باشد.

شیوه فراخوانی در Header صفحه وب.

jQuery( document ).ready( function( $ ) {	
	  $( 'button' ).click( function() {
	    $( '#message' ).hide();
	  })	
});

 

شیوه فراخوانی در Footer صفحه وب(روش پیشنهادی).

(function( $ ) {
	  $( 'button' ).click( function() {
	    $( '#message' ).hide();
	  })
})( jQuery );

چگونه jQuery را به صفحه وب لینک کنیم؟

اکثر توسعه دهندگان، کتابخانه جی کوئری و فایل های جاوا اسکریپت را مستقیما و بدین صورت در فایل های header.php یا footer.php قالب فراخوانی می کنند که اشتباه است.

<script src="<?php echo get_template_directory_uri(); ?>/jquery-3.2.1.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/scripts.js"></script>

 

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

پس از آشنایی با مد سازگاری یک فایل جاوا اسکریپت با هر نامی که دوست دارید در قالب وب سایت تان ایجا کنید، بهتر است از یک دایرکتوری با نام js برای نگهداری اسکریپت های مربوط به پروژه خود استفاده نمائید، ساختاری شبیه به این:

yourTheme/js/custom.js

سپس در فایل custom.js به عنوان مثال کدهای زیر را قرار می دهیم.

(function( $ ) {
    $( '#mailerlite-1-field-email' ).attr( 'placeholder' , 'آدرس ایمیل' );
})( jQuery );

 

پس از آن خطوط زیر را به فایل functions.php اضافه می کنیم.

function my_theme_scripts() {
    wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js',
                        array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

به آرگومان آخر تابع wp_enqueue_script مقدار true پاس داده شده است، با اینکار وردپرس اسکریپت مربوطه را در فوتر سایت فراخوانی خواهد کرد. همچنین مقدار ‘jquery’ به عنوان آرگومان سوم این تابع ارسال شده که نشان می دهد ابتدا باید کتابخانه jquery و سپس فایل custom.js بارگذاری شود، عملا با اینکار بین اسکریپت های موردنظرمان وابستگی ایجاد کردیم.

در صورتی که پس از انجام مراحل بالا کد جی کوئری شما اجرا نشد به کمک ابزار Developer Tools مرورگر کروم یا فایرفاکس(کلید F12) از عدم وجود خطایی مشابه تصویر زیر مطمئن شوید.

خطای جی کوئری

ورژن های مختلف jQuery

وردپرس در حال حاضر از جی کوئری نسخه ۱٫۱۲٫۴ استفاده می کند، برای مشاهده این موضوع از Page View Source مرورگر وب استفاده کنید.

<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

 

برای فراخوانی و استفاده از نسخه های بالاتر jQuery توابع wp_deregister_script و wp_register_script را در ابتدای my_theme_scripts(در بالا بررسی کردیم) قرار دهید، در این مثال از ورژن ۳٫۲٫۱ جی کوئری استفاده می کنیم.

function my_theme_scripts() {
    if ( ! is_admin() ) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array(), '3.2.1', true );
    }
    wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js',
        array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

به هیچ عنوان این تغییرات را به بخش مدیریت وردپرس اعمال نکنید، ممکن است بسیاری از قابلیت های اصلی وردپرس به ورژن فعلی آن وابسته باشد، به همین دلیل با تابع is_admin این وضعیت را بررسی کردیم. پس از دانلود نسخه مدنظرتان(jQuery Download) آن را در دایرکتوری js قرار داده و به کمک تابع wp_register_script ورژن جدید را ثبت کنید.

به جای دانلود فایل jQuery می توانید از آدرس CDN هم استفاده کنید.

wp_register_script( 'jquery','https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js', array(), '3.2.1', true );

جمع بندی

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

شما می توانید jQuery را مستقیما در بخش هدر یا فوتر سایت فراخوانی کنید، اما توصیه می کنیم به هیچ عنوان اینکار را انجام ندهید.

نظرات و سوالات کاربران
  1. با عرض سلام و ادب.
    متشکرم که این آموزش را قرار دادید. برای من کاربردی بود.
    اما مشکلم اینجاست وقتی که این کد را در فایل function.php اصلی wordpress قرار میدهم بعد از مدتی به طور خودکار آن را حذف میکند و مجبورم که آن را در فایل function.php پوسته قرار دهم. آیا راهی نیست که این ویرایش را در فایل اصلی انجام دهم.
    متشکرم.

    1. سلام دوست عزیز، شما باید تغییرات مدنظرتون رو در فایل functions.php مربوط به قالب وب سایت تون اضافه کنید، به هیچ عنوان نباید فایل های اصلی و هسته ای وردپرس رو تغییر بدید چرا که بعد از هر بار آپدیت وردپرس تغییرات شما حذف خواهد شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *