جاوا اسکریپت و استایل در وردپرس را به درستی در وردپرس اضافه کنیم ، در این مقاله ، ما به شما نحوه افزودن صحیح JavaScript و صفحه استایل در وردپرس را نشان خواهیم داد. این به ویژه برای کسانی که تازه شروع به یادگیری قالب وردپرس و توسعه پلاگین می کنند بسیار مفید خواهد بود.
گرچه کد فوق آسانتر به نظر می رسد ، اما روش غلطی برای افزودن اسکریپت در وردپرس است و منجر به درگیری های بیشتری در آینده می شود.
به عنوان مثال ، اگر جی کوئری را به صورت دستی بارگیری کرده و افزونه دیگری جی کوئری را از طریق روش مناسب بارگیری می کند ، پس جی کوئری دو بار بارگیری می شود. اگر در هر صفحه بارگیری شود ، این امر تأثیر منفی بر سرعت و عملکرد وردپرس خواهد داشت .
همچنین ممکن است که این دو نسخه متفاوت باشند که همچنین می توانند باعث درگیری شوند.
با این اوصاف ، بیایید نگاهی به روش صحیح افزودن اسکریپت ها و صفحه های استایل بیندازیم.
توضیح:
ما با ثبت اسکریپت خود از طریق
به جای استفاده
ما امیدواریم که این مقاله به شما کمک کند یاد بگیرید که چگونه به درستی جاوا اسکریپت و استایل را در وردپرس اضافه کنید.
اشتباه معمول هنگام افزودن اسکریپت ها و صفحه های استایل در وردپرس
بسیاری از افزونه ها و توسعه دهندگان قالب جدید وردپرس اشتباه می کنند که مستقیماً اسکریپت های خود را اضافه می کنند یا CSS درون خطی را به پلاگین ها و تم های خود اضافه می کنند. برخی به اشتباه از اینwp_headتابع برای بارگذاری اسکریپت ها و شیوه نامه های خود استفاده می کنند.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
چرا اسکریپت ها و استایل ها را در وردپرس متناسب می کنید؟
وردپرس دارای یک جامعه توسعه دهنده قوی است. هزاران نفر از سراسر جهان برای WordPress تم و پلاگین ایجاد می کنند. برای اطمینان از اینکه همه چیز به درستی کار می کند و هیچ کس پا روی انگشتان پای دیگر نمی گذارد ، وردپرس دارای یک سیستم جذاب است. این سیستم روشی قابل برنامه ریزی برای بارگذاری صفحات استایل JavaScript و 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()تابع شروع کردیم. این تابع 5 پارامتر را می پذیرد:
- $ handle - Handle نام منحصر به فرد اسکریپت شما است. به ما "my_amazing_script" گفته می شود
- $ src - src محل اسکریپت شماست. ما از تابع plugins_url برای بدست آوردن آدرس اینترنتی صحیح پوشه پلاگین های خود استفاده می کنیم. هنگامی که وردپرس این موضوع را پیدا کرد ، سپس به دنبال نام فایل amazing_script.js ما در آن پوشه می گردد.
- $ deps - deps برای وابستگی است. از آنجا که اسکریپت ما از jQuery استفاده می کند ، jQuery را در قسمت وابستگی اضافه کرده ایم. اگر وردپرس از قبل روی سایت بارگیری نشده است ، به طور خودکار بارگیری می شود.
- $ ver - این شماره نسخه اسکریپت ما است. این پارامتر لازم نیست
- $ in_footer - ما می خواهیم اسکریپت خود را در پاورقی بارگیری کنیم ، بنابراین مقدار را درست قرار داده ایم. اگر می خواهید اسکریپت را در هدر بارگذاری کنید ، آن را نادرست می دانید.
wp_register_script، ما فقط می توانیم اسکریپت را فراخوانی کنیم wp_enqueue_script()که در آن همه چیز اتفاق می افتد.
آخرین مرحله استفاده از wp_enqueue_scripts action hook برای بارگذاری اسکریپت است. از آنجا که این یک کد کد است ، ما آن را درست زیر همه موارد دیگر اضافه کرده ایم.
اگر این مورد را به طرح زمینه یا افزونه خود اضافه می کردید ، می توانید این عملکرد را در جایی که اسکریپت مورد نیاز است قرار دهید. با این کار می توانید رد پای حافظه افزونه خود را کاهش دهید.
حال ممکن است برخی از خود بپرسند که چرا ما مرحله اول را برای ثبت اسکریپت و سپس پیاده سازی آن ادامه می دهیم؟ خوب ، این به سایر دارندگان سایت اجازه می دهد بدون تغییر کد اصلی افزونه ، اسکریپت شما را از لیست خارج کنند.
به طرز صحیحی از استایل ها در وردپرس استفاده کنید
درست مانند اسکریپت ها ، شما همچنین می توانید صفحه استایل های خود را ایجاد کنید. به مثال زیر نگاه کنید:<?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برای افزودن صفحه استایل خود استفاده می کنیم.
توجه داشته باشید که ما از wp_enqueue_scriptsاکشن قلاب برای استایل ها و اسکریپت ها استفاده کرده ایم. علی رغم نام ، این عملکرد برای هر دو کار می کند.
در مثال های بالا ، ما از plugins_urlتابع برای نشان دادن مکان اسکریپت یا استایلی که می خواهیم استفاده کنیم استفاده کرده ایم.
با این حال ، اگر از تابع اسکریپت های enqueue در طرح زمینه خود استفاده می کنید ، پس به راحتی از 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' );
?>
