نحوه اضافه کردن جاوا اسکریپت ها و استایل ها به وردپرس
آیا دوست دارید نحوه اضافه کردن جاوا اسکریپت ها و استایل ها به وردپرس را یاد بگیرین؟ بسیاری از کاربران اغلب اسکریپت ها و استایل های خود را مستقیماً در افزونه ها و قالب ها فراخوانی می کنند که این روش اشتباهی است. امروز در وردپرس داغ، ما به شما نحوه به درستی اضافه کردن جاوا اسکریپت ها و استایل ها در وردپرس را نشان می دهیم. این مقاله به ویژه برای کسانی مفید است که به تازگی شروع به یادگیری طراحی قالب وردپرس و توسعه افزونه کرده اند.
اشتباه رایج هنگام افزودن اسکریپت ها و استایل ها در وردپرس
بسیاری از توسعه دهندگان جدید افزونه ها و قالب های وردپرس، اشتباهاً اسکریپت ها و استایل ها را به صورت درونی یا مستقیم به افزونه ها و قالب های وردپرسی خود اضافه می کنند.
بعضی ها به اشتباه از تابع wp_head برای بارگذاری اسکریپت ها و استایل های خود استفاده می کنند.
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
در حالی که کد بالا ممکن است ساده تر به نظر بیاد، ولی راه اشتباهی برای اضافه کردن اسکریپت ها در وردپرس است و منجر به تداخل زیادی در آینده می شود.
به عنوان مثال، اگر شما به صورت دستی از یک جی کوئری استفاده کرده اید و یک پلاگین دیگر جی کوئری را از طریق روش مناسب استفاده کند، مشاهده میکنید که دوبار جی کوئری استفاده شده فراخوانی می شود. اگر این جی کوئری در هر صفحه بارگذاری شده باشد، این کار باعث تاثیر منفی در سرعت و عملکرد وردپرس می شود.
همچنین ممکن است دو نسخه متفاوت از یک جی کوئری باشند که همچنین می تواند باعث ایجاد تداخل در سایت شما شود.
پس بهتره بیایید نگاهی به راه درست اضافه کردن اسکریپت ها و استایل ها بیندازیم.
چرا باید از اسکریپت ها و استایل های منحصر بفرد در وردپرس استفاده کرد؟
وردپرس یک جامعه توسعه دهنده بزرگ وقوی دارد. هزاران نفر از سراسر جهان، قالب ها و افزونه های وردپرس را توسعه می دهند.
برای اطمینان از این که همه چیز به درستی کار می کند و هیچ مشکل خاصی وجود نداشته باشد، وردپرس دارای یک سیستم منحصر بفرد است. این سیستم یک راه قابل برنامه ریزی برای بارگیری جاوا اسکریپت ها و استایل های CSS فراهم کرده است.
با استفاده از توابع wp_enqueue_script و wp_enqueue_style، هنگام بارگذاری یک فایل، جایی که آن فایل باید بارگذاری شود و وابستگی های آن چیست را به وردپرس یادآور شوید.
این سیستم همچنین به توسعه دهندگان اجازه می دهد که از کتابخانه های ساخته شده در جاوا اسکریپت که همراه با وردپرس هستند، به جای بارگیری چندین باره یک اسکریپت شخص ثالث استفاده شوند. این موضوع زمان بارگذاری صفحه را کاهش می دهد و به جلوگیری از تداخل با سایر قالب ها و افزونه ها کمک می کند.
به چه صورت اسکریپت های منحصر بفرد را به وردپرس اضافه کنیم؟
بارگیری اسکریپت به درستی در وردپرس بسیار آسان است. کد نمونه ای در پایین است که شما می توانید در فایل افزونه های خود و یا فایل functions.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” نامیده ایم.
- $deps – برای اتصال متعلقات است از آنجا که اسکریپت ما از jQuery استفاده می کند، ما jQuery را در قسمت متعلقات اضافه کردیم. اگر در حال حاضر jQuery در سایت بارگیری نشده است، وردپرس به صورت خودکار آن را بارگذاری می کند.
- $src – محل اسکریپت شما است. ما از تابع plugins_url برای استفاده از آدرس مناسب پوشه plugins استفاده می کنیم. هنگامی که وردپرس یک مرتبه آن را پیدا کند، آن را به نام filename amazing_script.js در آن پوشه می شناسد.
- $ver – این پارامتر مربوط به نسخه اسکریپت ما است. این پارامتر مورد نیاز نیست.
- $in_footer – ما می خواهیم اسکریپت ها را در پایین صفحه بارگذاری کنیم، بنابراین ما مقدار این پارمتر را true قرار می دهیم. اگر میخواهید اسکریپت ها را در هدر صفحه بارگذاری کنید، مقدار پارامتر را false وارد کنید.
پس از ارائه تمامی پارامترهای موجود در wp_register_script، ما فقط می توانیم اسکریپت ها را در wp_enqueue_script () فراخوانی کنیم چون باعث می شود که همه اسکریپت ها اجرا شوند.
آخرین مرحله استفاده از عملگر wp_enqueue_scripts برای بارگذاری اسکریپت است. از آنجا که این یک کد نمونه است، ما نمونه ای دلخواه را در پایین درج کرده ایم.
اگر شما این عملگر را در افزونه یا قالب خود اضافه کرده اید، می توانید این عملگر را در جایی که اسکریپت واقعا مورد نیاز است قرار دهید. این کار به شما کمک می کند که حافظه پلاگین خود را کاهش دهید.
در حال حاضر برخی ها ممکن است تعجب کنند که چرا ما قصد داریم ابتدا اسکریپت را ثبت کنیم و سپس آن را معرفی کنیم؟ خوب، این کار به شما کمک می کند بدون اینکه در کد اصلی افزونه یا قالب خود تغییر ایجاد کنید اسکریپت را در صورت لزوم به سادگی حذف کنید.
نحوه درست اضافه کردن استایل های منحصر بفرد در وردپرس
این کار درست شبیه اضافه کردن اسکریپت ها، همچنین شما می توانید استایل های خود را درون برگه های استایل قرار دهید. به مثال زیر نگاه کنید:
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 برای اضافه کردن فایل استایل استفاده می کنیم.
توجه داشته باشید که ما از عملگر wp_enqueue_scripts برای استایل و اسکریپت استفاده کرده ایم. با وجود نام این تابع، این تابع برای استایل و اسکریپت کار می کند.
در مثال بالا، ما از تابع plugins_url برای اشاره به مکان اسکریپت یا استایل مورد نظر خود استفاده کردیم.
با این حال، اگر از تابع enqueue_scripts در قالب خود استفاده می کنید، پس به سادگی از get_template_directory_ur () استفاده کنید. اگر شما بر روی یک زیر قالب کار می کنید، پس از get_stylesheet_directory_ur () استفاده کنید.
مثل کد زیر:
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' );
ما امیدواریم که مقاله امروز وردپرس داغ به شما کمک کند تا چگونگی درست اضافه کردن جاوا اسکریپت و استایل های خود را در وردپرس یاد بگیرید.
