تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات

تبلیغات
تبلیغات تبلیغات

افزودن css و جاوا اسکریپت سفارشی به قالب وردپرس

مقالات,آموزش,ترفند , وردپرس

افزودن css و جاوا اسکریپت سفارشی به قالب وردپرس

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

 

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

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

 

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

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

 

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

 

قرار دادن صحیح اسکریپت در صف

بارگذاری صحیح اسکریپت در وردپرس بسیار آسان است. در زیر یک کد میبینید که میتوانید آنرا در فایل افزونه یا تابع قالب کپی کنید. فایل php اسکریپت را بدرستی در وردپرس بارگذاری میکند:

توضیح:

ما با ثبت نام اسکریپت خود از طریق تابع () wp_register_script شروع میکنیم. این تابع 5 پارامتر را میپذیرد:

  • handle$: یک نام منحصر به فرد برای اسکریپت است. که ما آنرا “my_amazing_script” مینامیم.
  • src$: مکان اسکریپت میباشد. ما از تابع آدرس افزونه برای بدست آوردن آدرس صحیحی از فولدر افزونه استفاده میکنیم. پس از اینکه وردپرس آنرا پیدا کرد سپس به دنبال فایل amazing_script.js در فولدر میگردد.
  • deps$: این پارامتر برای وابستگی میباشد. از آنجا که اسکریپت از جی کوئری استفاده میکند ما جی کوئری را در بخش وابستگی اضافه میکنیم. وردپرس بصورت خودکار جی کوئری را اگر در سایت در حال بارگذاری نباشد بار گذاری میکند.
  • ver$: این پارامتر نسخه ی اسکریپت ما را نشان میدهد. این پارامتر مورد نیاز نمیباشد.
  • in_footer$: میخواهیم اسکریپت را در فوتر بارگذاری کنیم بنابراین برای درست بودن باید ارزش تعیین کنیم. اگر بخواهید اسکریپت را در هدر بارگذاری کنید پس به شما میگوید نادرست است.

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

 

در صف قرار دادن صحیح سی اس اس

درست مثل اسکریپت ها میتوانید سی اس اس خود را در صف قرار دهید. به مثال زیر توجه کنید:

توجه کنید که ما از قلاب عمل wp_enqueue_scripts هم برای اسکریپت و هم برای سبک استفاده کرده ایم. پس این تابع برای هر دو حالت کار میکند. در مثال بالا ما از  plugins_url برای اشاره کردن به مکان اسکریپت و یا سبک که میخواهیم در صف قرار دهیم استفاده کرده ایم. با این حال اگر از تابع اسکریپت صف در قالب خود استفاده میکنید پس از ()get_template_directory_uri استفاده کنید. اگر با قالب کودک کار میکنید از () get_stylesheet_directory_uri استفاده کنید مانند مثال زیر:

موفق باشید


دانلود


جایگاه ویژه تبلیغ شما در این مکان / برای اطلاعات بیشتر کلیک کنید >

هاست
مطلب مفیدی بود ؟

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=47137
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
3,525افزونه ریدایرکت لینک های وردپرس 5sec Redirect تاریخ : 2017/11/24
2,792نحوه تغییر آدرس پیش‌ فرض جستجو در وردپرس تاریخ : 2018/07/3
7,659پوسته تفریحی Aggregate فارسی برای وردپرس تاریخ : 2017/08/5
7,954افزونه بکاپ گیری خودکار از وردپرس با UpdraftPlus Backup and Restoration تاریخ : 2016/02/17
1,572نمایش جدیدترین کاربران در وردپرس بدون افزونه تاریخ : 2019/04/26
1,372تغییر آدرس آرشیو نویسنده در وردپرس تاریخ : 2019/09/19
5,703افزودن پست تایپ به حلقه مطالب وردپرس تاریخ : 2014/12/9
5,331کاهش حجم تصاویر در وردپرس با افزونه Optimus تاریخ : 2017/06/15
4,372تعیین پوسته پیشفرض در وردپرس با فایل Config تاریخ : 2014/05/1
1,808حذف پیام بروزرسانی وردپرس از پیشخوان تاریخ : 2019/03/5
1,324آموزش تغییر نشانی سایت در وردپرس تاریخ : 2019/10/20
16,065تغییر ظاهر مدیریت وردپرس با افزونه Material WP تاریخ : 2020/04/13
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات