• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

18 8888 ۳ فروردین ۹۳

به نام خدا

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

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

اشکال کار

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

راه حل

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

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

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

 

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

 

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

 

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

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

مثال:

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


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

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

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

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

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

موفق باشین

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    بهرام(۲۰ تیر ۱۳۹۳)

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

  • ‏‏
    بهرام(۲۰ تیر ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      حامد مودی(۱ شهریور ۱۳۹۳)

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

  • ‏‏

    باسلام خدمت شما….
    ببخشید من یه سوال خیلی کلیدی و مهم از شما داشتم درمورد قرار گرفتن یک استایل یا کدهای جی کوئری در یک قالب وردپرس…مثلا من کدهای مربوط به منوی موضوعات بالای سایتی مثل سایت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 گرفته اند:










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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram