no-img
نرم افزار افزایش بازدید سایت پرشیا آی پی persia IP

چگونه به درستی اسکریپت ها و استایل ها را به وردپرس اضافه کنیم پرشیاآی‌پی persiaip.ir


نرم افزار افزایش بازدید سایت پرشیا آی پی persia IP

ادامه مطلب

ZIP
چگونه به درستی اسکریپت ها و استایل ها را به وردپرس اضافه کنیم پرشیاآی‌پی persiaip.ir
zip
۱۳۹۶-۱۰-۱۰

چگونه به درستی اسکریپت ها و استایل ها را به وردپرس اضافه کنیم پرشیاآی‌پی persiaip.ir



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

چگونه به درستی اسکریپت ها و استایل ها را به وردپرس اضافه کنیم پرشیاآی‌پی persiaip.ir gif base64 R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs

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

اکثر توسعه دهندگان پلاگین و قالب های وردپرس در حال اشتباه هستند که به صورت مستقیم استایل ها و اسکریپت ها رو به صورت مستقیم از قالب یا پلاگین فراخوانی می کنند.برخی هم به اشتباه تابع 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() برای آدرس دهی استفاده کنید . یک مثال در زیر برای شما آوردیم

شاید برایتان جالب باشد!  جلوگیری از ثبت نام با ایمیل موقت در وردپرس

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

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

[منبع:talarwp]



موضوعات :
وردپرس

دیدگاه ها


پاسخ دهید

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

یک × یک =