اضاف کردن جاوا اسکریپت به وردپرس

اضاف کردن جاوا اسکریپت به وردپرس

اضاف کردن جاوا اسکریپت به وردپرس

آیا می خواهید بدانید که چگونه به درستی جاوا اسکریپت ها و شیوه های CSS را به وردپرس اضافه کنید؟ بسیاری از کاربران اغلب اشتباه می کنند که مستقیما اسکریپت ها و شیوه نامه های خود را در پلاگین ها و تم ها فراخوانی می کنند. در این مقاله، ما به شما نحوه به درستی اضافه کردن جاوا اسکریپت ها و css را به وردپرس به شما نشان می دهیم. این به ویژه برای کسانی که فقط شروع به یادگیری تم وردپرس و توسعه پلاگین مفید است.

اضاف کردن جاوا اسکریپت به وردپرس

اضاف کردن جاوا اسکریپت به وردپرس
اضاف کردن جاوا اسکریپت به وردپرس

اضاف کردن جاوا اسکریپت به وردپرس

 

اشتباه رایج هنگام افزودن اسکریپتها و صفحات Stylesheet در وردپرس

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

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

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

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

اضاف کردن جاوا اسکریپت به وردپرس

اسکریپت ها و سبک های Enqueue در وردپرس؟

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

با استفاده از توابع wp_enqueue_script و wp_enqueue_style، میتوانید این کار را انجام دهید .

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

نحوه درست کردن اسکریپت ها در وردپرس؟

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

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

پس از ارائه تمامی پارامترها در wp_register_script، ما فقط می توانیم اسکریپت را در wp_enqueue_script () که همه چیز را انجام می دهد، فراخوانی کنیم.

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

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

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

اضاف کردن جاوا اسکریپت به وردپرس
اضاف کردن جاوا اسکریپت به وردپرس

اضاف کردن جاوا اسکریپت به وردپرس

درستی سبک ها css درEnqueue وردپرس

درست مانند اسکریپت ها، شما همچنین می توانید سبک های خود را بر روی کاغذ قرار دهید. به مثال زیر نگاه کنید:

<?php
function wpb_adding_styles() {
wp_register_style(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, __FILE__));
wp_enqueue_style(‘my_stylesheet’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’ );
?>

به جای استفاده از wp_enqueue_script، ما اکنون از wp_enqueue_style برای اضافه کردن css استفاده می کنیم.

توجه داشته باشید که ما از قلاب عمل wp_enqueue_scripts برای هر دو css و اسکریپت استفاده کرده ایم. با این وجود نام، این تابع برای هر دو کار می کند.در مثال بالا، ما از تابع plugins_url برای اشاره به مکان اسکریپت یا سبک مورد نظر خود استفاده کردیم.

با این حال، اگر از تابع skype enqueue در موضوع خود استفاده می کنید، به جای استفاده از get_template_directory_ur () استفاده کنید. اگر شما با یک موضوع کار می کنید، میتوانید از get_stylesheet_directory_ur () استفاده کنید.

در زیر یک کد مثال است:

<?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’ );
?>

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

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

مطالب مرتبط

4 Comments

ارسال یک پاسخ

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

Time limit is exhausted. Please reload CAPTCHA.