تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
اسکریپت مدیریت هاست رایگان 0 پاسخ 18 بازدید افزونه Coins MarketCap 1 پاسخ 292 بازدید درخواست پلاگین 4 پاسخ 541 بازدید اسکریپت vfm 5 پاسخ 645 بازدید تغییر جهت محتوا در وردپرس 1 پاسخ 324 بازدید افزونه ساخت شماره مجازی 14 پاسخ 1177 بازدید درخواست افزونه 1 پاسخ 519 بازدید بهترین رباط اینستاگرام 0 پاسخ 2 بازدید درخواست قالب با سبک کندو 1 پاسخ 780 بازدید به هم ریختگی سایت بعد از نصب قالب 2 پاسخ 735 بازدید
تبلیغات
تبلیغات تبلیغات

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

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

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

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

 

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

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

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

 

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

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

 

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

 

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

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

توضیح:

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

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

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

 

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

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

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=47137
کلمات کلیدی پست :
مطالب مرتبط
13,890دانلود قالب ایران وب سرور برای وردپرس تاریخ : 2017/03/27
9,339دانلود مجموعه افزونه های سایت WPMUDEV بروزرسانی خرداد 95 تاریخ : 2016/06/10
5,776افزونه برای ایجاد تقویم در وردپرس Sugar Event Calendar تاریخ : 2018/11/16
21,877افزونه ساخت تایم لاین در وردپرس Cool Timeline Pro نسخه 2.7 تاریخ : 2017/12/10
5,344پوسته کاریابی وردپرس و ووکامرس Jobseek تاریخ : 2018/12/10
7,269افزونه وردپرس جلوگیری از ارسال اسپم Anti-Splog تاریخ : 2017/04/4
4,600حل مشکل بازگشت وردپرس به صفحه نصب ۵ دقیقه‌ای تاریخ : 2018/12/4
5,188قالب وردپرس ساختمانی و دکوراسیون Remould تاریخ : 2018/11/24
7,792ساخت پیش نمایش انواع فایل در وردپرس با افزونه Embed Any Document تاریخ : 2017/05/30
8,001اشتراک گذاری آسان مطالب با افزونه Sociable تاریخ : 2016/04/7
18,362افزونه گالری تصاویر NextGEN Gallery برای وردپرس تاریخ : 2016/02/15
12,196افزونه ایجاد باکس لینک های مفید در وردپرس Useful Links Collections تاریخ : 2019/02/6
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات