استفاده صحیح از جی کوئری در قالب و افزونه وردپرس

- visibility ١٨ mode_comment

به نام خدا

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

info نکته :

با عرض معذرت به خاطر تاخیر زیاد، کد تصحیح شد.

اشکال کار

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

راه حل

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

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

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

 

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

 

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

 

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

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

مثال:

بهینه سازی جی کوئری در وردپرس

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

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

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

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

چند نکته بود که گفتم خدمت شما ارائه بدم...

موفق باشین

comment دیدگاه کاربران
mehran jon

آقا حامد عالی بود.
من از روش غلط استفاده میکردم که الان یاد گرفتم.
موفق باشی حامدخان.

حامد مودی

خوشحالم دوست عزیز
شما هم موفق باشی

rezad91

سلام ببخشید من می خواستم بدونم که اگر از روش آخر استفاده کنم دیگه نیازی به استفاده از روشهای نخست نیست
یا حق

وحید صالحی

سلام
خیر دوست عزیز نیازی نیست…

بهرام

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

بله کفایت میکنه.

بهرام

من هم از همون روش اشتباه که گفتید استفاده میکردم اما الان wp_enqueue_script( ‘jquery’ ) رو جایگزینش کردم ج نداد. بعد روش بهینه سازی آخر رو هم که گفتید با اونم تست کردم (کد هارو به فانکشن اضافه کردم) اون هم جواب نداد. میشه راهنماییم کنید لطفا

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

محسن

من یه چیز رو متوجه نشدم الان من احتیاج دارم لینک فایل جاوا رو قرار بدم توی قالب ولی کجای این کد و چجوری بذارم خالیش رو گذاشتم تاثیری نداشت

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

yashar43

باسلام خدمت شما….
ببخشید من یه سوال خیلی کلیدی و مهم از شما داشتم درمورد قرار گرفتن یک استایل یا کدهای جی کوئری در یک قالب وردپرس…مثلا من کدهای مربوط به منوی موضوعات بالای سایتی مثل سایتhttp://pcnano.ir/را دارم که جی کوئری و ثابت هست میخواستم این کدهارا در قسمت مخصوص منوی موضوعات خودم مثلا مثل قالب سایت http://eramdownload.com/ که منوی آن در زیر هدر سایت همان قسمت مربوط نرم افزار.موبایل.. زرد آبی رنگ هستش جایگذین کنم تا به صورت سایت نانو بشه باید در کجا و به چه صورت قرار بدم تا حالت نمایش منوی من مثل سایت نانو باشه و بهم نریزه وحالت آن عوض نشه..
لطفا من را دراین راه راهنمایی کنید ضروریه ممنون میشم…
باتشکر فراوان از شما….یاحق

امین

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

وحید صالحی

توی آموزش توضیح داده شده طبق اون عمل کنید…

آرمان

سلام
من از یه کد بالا بر توی سایتم استفاده کردم که از 4 تا کد js استفاده میکنه.وقتی از این کد توی سایتم استفاده میکنم خیلی جاهای دیگه ی سایت مثل سرچ باکس و امثال اون که شاید با جیکوئری کار میکنن از کار میافتن،چیکار باید بکنم؟تست کردم 2 تا از jsها مشکل ایجاد میکنن یکیش
jquery-1.11.1.min.js هستش و دیگری sss.min.js (که ظاهرا مربوط به اصل کد باید باشه)
لــــــــــــــــــــــــــــطـفا راهنماییم کنید[خیلی ضروری برام] 😥

وحید صالحی

اگر در انتهای فایل هایی که در بالا اشاره کردی که اجرا نمیشن مقدار true قرار داره این رو به مقدار false تغییر بدید و قبل از سایر فایل ها فایل jquery-1.11 رو فراخوانی کنید

آرمان

سلام
1-منظور شما از انتهای فایل کجاست؟ این فایل های js بیش از صد خطه.
2-منظورتون انتهای فایل query-1.11 هست یا sss.min.js ؟

آرمان

بهتره که اینطوری بگم: توی فایل query-1.11 این موارد مقدار true گرفته اند:



و در فایل sss.min.js این موارد مقدار true گرفته اند:










ببخشید طولانی شد.لطفا بی جوابم نزارید چون خیلی براش وقت گذاشتم.ممنون

وحید صالحی

سلام دوست عزیز سوالتون رو در انجمن مطرح کنید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.