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

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

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

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

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

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

همچنین ممکن است، این دو ورژن با هم متفاوت باشند ،  و باعث ناسازگاری هایی شوند .بر اساس آنچه گفته شد بیایید نگاهی بر روش صحیح اضافه کردن اسکریپت ها و  استایل ها به وردپرس بیاندازیم.

چرا با استفاده از سیستم Enqueue اسکریپت ها و استایل ها رو به وردپرس اضافه کنیم

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

جهت اطمینان از این که همه چیز بدرستی کار می کند، و هیچکس جا پای جا کسی نگذارد، وردپرس یک سیستم enqueuing دارد. این سیستم یک روش قابل برنامه ریزی برای بارگذاری جاوا اسکریپت ها و CSS Stylesheet ها تهیه می کند.

با استفاده از توابع wp_enqueue_script و wp_enqueue_style شما به وردپرس می گویید که کی یک فایل را بارگذاری کند، کجا بارگذاری اش کند، و وابستگی هایش چیست.

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

چگونه به درستی اسکریپت ها را به وردپرس اضافه کنیم

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

توضیح :

ما لبتدا کار رو با register کردن اسکریپت مان از طریق تابع wp_register_script شروع کردیم. این تابع پنج پارامتر قبول می کند.

  • $handle نام منحصر به فرد اسکریپت تان می باشد. مال ما ‌” my_amazin_script “ نامیده می شود.
  • $src –  مکان اسکریپت شما می باشد. ما در حال استفاده از تابع plugins_url هستیم تا URL صحیح را از فولدر افزونه بگیریم. زمانی که وردپرس آن را پیدا  کند، سپس آن فولدر را برای اسمی که ما انتخاب کردیم( در اینجا amazing script.js )  جست و جو خواهد کرد.
  • $deps برای dependency است. چون که اسکریپت ما JQuery را استفاده می کند،‌ما JQuery را در ناحیه dependency اضافه کرده ایم. وردپرس Jquery را اگر هنوز در سایت بارگذاری نشده باشد، بصورت خودکار بارگذاری می کند.
  • $ver  – این ورژن اسکریپت ما می باشد، این پارامتر ضروری نیست.
  • $in_footer :  ما می خواهیم اسکریپتمان را در footer بارگذاری کنیم. بنابراین ما مقدار این متغیر را برابر true تنظیم کرده ایم. اگر شما می خواهید اسکریپت را در هدر(header) بارگذاری کنید، پس شما باید مقدار آن را به false تغییر دهید .

بعد از وارد کردن همه پارامتر ها به درستی درwp_register_script ، ما فقط باید آن را در wp_enqueue_script فراخوانی کنیم تا کار انجام شود.

در آخرین مرحله با استفاده از action hook روبه رو اسکریپت و در صفحه بارگزاری میکنیم : wp_enqueue_scripts

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

الان ممکنه این سوال برای شما پیش بیاید که چرا ما باید ابتدا یک اسکریپت رو Register کنیم بعد اون رو اضافه ( enqueue ) کنیم . خوب این به وب مستر های دیگه اجازه میده که اسکریپت شما رو deregister کنن بدون اینکه مجبور باشن کد اصلی پلاگین شما رو ویرایش کنند .

روش صحیح اضافه کردن استایل ها به وردپرس

درست مثل اسکریپت ، شما میتوانید استایل ها را به وردپرس تان اضافه کنید ، البته با کمی تفاوت . به مثال زیر تو جه کنید .

به جای استفاده از wp_enqueue_script ، الان ما از wp_enqueue_style برای اضافه کردن استایل ها استفاده می کنیم . به این نکته توجه کنید که ما از یک action به نام  wp_enqueue_scripts برای اضافه کردن استایل ها و اسکریپت ها استفاده کردیم . برخلاف اسم این action ، می توانیم از اون برای هر دو ، هم استایل و هم اسکریپت استفاده کنیم .

در مثال بالا ، ما از تابع plugins_url برای اشاره به آدرس اسکریپت و استایلی که می خواستیم اضافه کنیم استفاده کردیم . اگرچه اگر شما از تابع enqueue scripts در پوسته ی خود استفاده می کنید .پس به آسانی میتونید از تابع get_template_directory_uri() برای آدرس دهی دقیق به فایل استایل یا اسکریپت به جای plugins_uri استفاده کنید .

اگر در حال کدنویسی یک child theme هستید بهتر است از تابع get_stylesheet_directory_uri() برای آدرس دهی استفاده کنید . یک مثال در زیر برای شما آوردیم

امیدواریم که در این پست یاد گرفته باشید چگونه استایل ها و اسکریپت ها رو به صورت صحیح به پوسته ی خود اضافه کنید .

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

برای دریافت آخرین مطالب,محصولات و تخفیف های ویژه ما به کانال تلگرام تالار وردپرس بپیوندید
hadi

دیدگاه بگذارید

avatar
  Subscribe  
اطلاع رسانی از

محبوب ترین پکیج ها

با سلام خدمت همه شما دوستان و عزیزان.بعد از مدت ها با یک پکیج جدید و بسیار کارآمد در خدمت شما هستم.در این پکیج همونطور که از عنوانش پیداست در مورد ورود به بازار کسب و کار اینترنتی در ایران بحث و آموزش های متنوع و کاربردی انجام گرفته که برای افرادی که به کسب […]

شروع کسب و کار اینترنتی با وردپرس

با عرض سلام و خسته نباشید خدمت همه دوستان و کاربران عزیز تالار وردپرس.بالاخره پکیج حرفه ای شروع کسب و کار اینترنتی با وردپرس آماده شدو هم اکنون شما می تونید از این پکیج حرفه ای استفاده کنید.این پکیج همانطور که از اسمش پیداست برای شروع یک کسب و کار خوب با وردپرس هستش و […]

آموزش سئو وردپرس

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

محبوب ترین قالب ها

قالب وردپرس فروش فایل استوری تالار وردپرس طراحی شده و برای شما کاربران عزیز آماده فروش می باشد.این قالب زیبا و کاربر پسند با امکانات بسیار مناسب و ساده در اختیار شما قرار گرفته است و از طراحی و رنگ بندی خوبی برخوردار می باشد.این قالب وردپرس مانند سایر قالب های تالار وردپرس دارای پنل تنظیمات اختصاصی […]

قالب وردپرس دانلود

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

قالب وردپرس فیلم و سریال

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