چگونه به طور صحیح کد جی کوئری در وردپرس اضافه

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

از آنجایی که یکی از پرکاربردترین کتابخانه‌های جاوا اسکریپت است، امروز در حال بحث در مورد چگونگی اضافه کردن اسکریپت‌های جی کوئری به تم یا افزونه های وردپرس.

درباره حالت سازگاری jQuery

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

همانطور که احتمالاً می دانید ، وردپرس همراه با جی کوئری موجود است.

نسخه jQuery در وردپرس همچنین دارای " حالت سازگاری که مکانیسمی برای جلوگیری از درگیری با سایر کتابخانه های جاوا اسکریپت است.

بخشی از این مکانیسم دفاعی بدان معنی است که شما می استفاده از $به طور مستقیم مانند سایر پروژه ها امضا کنید.

در عوض ، هنگام نوشتن کد jQuery برای وردپرس ، باید از آن استفاده کنید jQuery.

در اینجا نمونه ای از آن کد آورده شده است:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

مشکل این است که نوشتن یک میلیون بار jQuery بیشتر طول می کشد ، خواندن آن را دشوار می کند و می تواند اسکریپت شما را سنگین کند.

خبر خوب؟

با چند تغییر ، شما دوباره می توانید از نماد دلخواه دلار کوچک ما استفاده کنید.

به هر حال ، اگر هستید جدید برای جی کوئری ، علامت $ فقط یک نام مستعار برای jQuery () است ، سپس یک نام مستعار برای یک عملکرد است.

ساختار اصلی به این شکل است: $(selector).action(). علامت دلار jQuery را تعریف می کند… پرسش های “(انتخاب کننده)” یا عناصر HTML را پیدا می کند… و در آخر ”jQuery () عمل” عملی است که باید روی عناصر انجام شود.

بازگشت به نحوه کار ما در مورد مشکل سازگاری ما ... در اینجا چند گزینه مناسب وجود دارد:

1. ورود به حالت خفا جی کوئری

اولین راه برای دستیابی به حالت سازگاری ، دزدکی حرکت کردن در کد است.

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

مانند مثال زیر:

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

اگر می خواهید اسکریپت خود را در هدر اضافه کنید (که در صورت امکان باید از آن اجتناب کنید ، در مورد موارد زیر) ، می توانید با عبور از $در طول راه

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. حالت "بدون تعارض" را وارد کنید

روش آسان دیگر برای جلوگیری از هجی کردن jQuery تغییر حالت است "بدون تعارض" و از یک میانبر متفاوت استفاده کنید.

در این مورد: $jبه جای پیش فرض $.

تنها کاری که باید انجام دهید این است که آن را در بالای فیلمنامه خود اعلام کنید:var $j = jQuery.noConflict();

خوب، اکنون درباره نوشتن کد جی کوئری معتبر برای وردپرس اطلاعات بیشتری دارید، بیایید آن را به ما اضافه کنیم وب سایت.

نحوه اضافه کردن اسکریپت های jQuery به وردپرس

یکی از ساده ترین راه ها برای افزودن اسکریپت های jQuery به وردپرس ، فرآیندی به نام 'setting است صف انتظار '.

برای یک وب سایت از HTML کلاسیک استفاده می کنیم  <link> مورد برای افزودن اسکریپت ها. وردپرس در نهایت همان کار را انجام می دهد ، اما ما برای رسیدن به این هدف از توابع ویژه WP استفاده خواهیم کرد.

به این ترتیب ، همه وابستگی های ما را برای ما مدیریت می کند (با تشکر WP!)

اگر در حال کار روی یک موضوع هستید ، می توانید از این تابع استفاده کنید  wp_enqueue_script() در خود  functions.php فایل.

در اینجا به نظر می رسد:

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

این عملکرد طول می کشد پنج استدلال:

1. $ handle - یک دسته منحصر به فرد است که می توانید از آن برای مراجعه به اسکریپت استفاده کنید.
2. $src – محل فایل اسکریپت.
3. $ deps - آرایه ای از وابستگی ها را مشخص می کند.
4. $ ver - شماره نسخه اسکریپت شما.
5. $ in_footer - به وردپرس اجازه می دهد تا اسکریپت را در کجا قرار دهد.

* نکته ای که باید به آن توجه کنید  $in_footer به این معنی است که به طور پیش فرض اسکریپت ها در هدر بارگیری می شوند.

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

افزودن اسکریپت به مدیر وردپرس

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

مثلا PAR:

عملکرد my_admin_scriptts ()
wp_enqueue_script ('my-great-script'، plugin_dir_url (__فایل__) '/js/my-great-script.js'، array ('jquery')، '1.0.0'، true)؛
}
add_action ('admin_enqueue_scriptts'، 'my_admin_scriptts')؛

به جای ورود به سیستم ، wp_enqueue_scriptsما باید استفاده کنیم admin_enqueue_scripts.

نحوه لغو jQuery از وردپرس

اما اگر می خواهید از نسخه دیگری از jQuery از نسخه پیش بارگذاری شده توسط وردپرس استفاده کنید ، چه می کنید؟

می توانید آن را صف کنید ... اما این بدان معناست که دو نسخه از jQuery در صفحه وجود دارد.

برای جلوگیری از این اتفاق باید نسخه WP را لغو ثبت کنیم.

در اینجا به نظر می رسد:

// شامل jQuery سفارشی است
تابع shapeSpace_include_custom_jquery () {

wp_deregister_script ('jquery');
wp_enqueue_script(
   'jquery', 
   'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
   array(), 
   null, 
   true);
}
 add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

این کار به راحتی استفاده از  wp_deregister_script () برای ثبت jQuery از WP ، سپس شامل اسکریپت jQuery که می خواهید اضافه کنید.

در مثال بالا ، ما از کتابخانه jQuery به میزبانی گوگل ، اما بدیهی است که آن را با URL اسکریپت خود جایگزین خواهید کرد.

آیا نباید قبل از صف بندی آنها را ذخیره کنید؟

اگر می خواهید اسکریپت های خود را به جای بارگیری مستقیم در صفحات خود ، در صورت لزوم بارگیری کنید - می توانید اسکریپت را زودتر ذخیره کنید.

مثلاً در  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

پس از انجام این کار ، می توانید اسکریپت ها را در صورت نیاز در صف قرار دهید:

add_action ('wp_enqueue_scriptts'، 'enqueue_front_scriptts')؛

add_action ('admin_enqueue_scriptts'، 'enqueue_back_scriptts')؛

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

با استفاده از برچسب های مشروط

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

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

نگاهی به اسناد متنهای صف  برای اطلاعات بیشتر در وردپرس Codex.

با استفاده از پلاگین ها jQuery را به وردپرس اضافه کنید

دایرکتوری افزونه های WP همچنین شامل بسیاری از افزونه های جالب است که می توانید از آنها برای درج اسکریپت ها در پست ها، صفحات یا خود استفاده کنید. مضامین وردپرس.

در اینجا چند نمونه از افزونه های معروف JavaScript / jQuery آورده شده است: زمینه های پیشرفته سفارشی , سفارشی ساده CSS و JS , سبک های اسکریپت n et تمیز کردن منابع

پروژه جی کوئری خود را ایجاد کنید

درک بهتر jQuery تنها تأثیرگذارتر کار شما خواهد بود. چه برای وب سایت خود و چه برای پروژه های مشتری.

jQuery به دلیل سادگی بسیار شناخته شده است ، و همانطور که (امیدوارم) در این مقاله آموخته باشید ، اضافه کردن اسکریپت های ساده jQuery به وردپرس به راحتی به شرط تهیه پای ، ساده است.

بله ، در مقایسه با استفاده از HTML وانیلی کمی سربار وجود دارد ، اما مزیت مدیریت شفافیت و شفافیت نیز وجود دارد.

نه تنها این ، با استفاده از ترفندهای کوچکی مانند دور زدن سازگاری پیش فرض jQuery WP ، در وقت ، تلاش و کد نفوذ زیادی صرفه جویی خواهید کرد.