آیا می خواهید یاد بگیرید که چگونه صفحات سبک JavaScript و CSS را به درستی در وردپرس اضافه کنید؟ بسیاری از کاربران DIY معمولاً این اشتباه را می کنند که مستقیماً اسکریپت ها و شیوه نامه های خود را در پلاگین ها و تم ها فراخوانی می کنند. در این مقاله ، ما به شما نحوه افزودن صحیح JavaScript و صفحه سبک در وردپرس را نشان خواهیم داد. این به ویژه برای کسانی که تازه شروع به یادگیری قالب وردپرس و توسعه پلاگین می کنند بسیار مفید خواهد بود.
اشتباه رایج هنگام افزودن اسکریپت ها و صفحه های سبک در وردپرس h4>
بسیاری از موارد جدید افزونه های وردپرس و توسعه دهندگان قالب اشتباه می کنند که اسکریپت های خود را به صورت مستقیم اضافه می کنند یا CSS داخلی را به پلاگین ها و مضامین خود اضافه می کنند.
برخی به اشتباه از عملکرد wp_head برای بارگذاری اسکریپت ها و صفحه های سبک خود استفاده می کنند.
گرچه کد فوق آسانتر به نظر می رسد ، اما روش غلطی برای افزودن اسکریپت ها در وردپرس است و در آینده منجر به درگیری های بیشتری می شود.
به عنوان مثال ، اگر جی کوئری را به صورت دستی بارگیری کنید و پلاگین دیگری جی کوئری را از طریق روش مناسب بارگیری کند ، در این صورت جی کوئری دو بار بارگیری می شود. اگر در هر صفحه بارگیری شود ، این امر بر وردپرس تأثیر منفی خواهد گذاشت. سرعت و عملکرد .
همچنین ممکن است که این دو نسخه مختلف باشند که همچنین می توانند باعث درگیری شوند.
با این گفته ، بیایید نگاهی به روش صحیح افزودن اسکریپت و صفحه سبک بیندازیم.
چرا اسکریپت ها و سبک ها را در وردپرس متناسب کنید؟ h4>
وردپرس دارای یک جامعه توسعه دهنده قوی است. هزاران نفر از سراسر جهان برای WordPress تم و پلاگین ایجاد می کنند.
برای اطمینان از اینکه همه چیز به درستی کار می کند و هیچ کس پا روی انگشتان پای دیگر نمی گذارد ، وردپرس دارای یک سیستم جذاب است. این سیستم روشی قابل برنامه ریزی برای بارگذاری صفحات سبک JavaScript و CSS را فراهم می کند.
با استفاده از توابع wp_enqueue_script و wp_enqueue_style ، به وردپرس می گویید چه موقع یک پرونده را بارگیری کند ، کجا را بارگیری کند و چه وابستگی هایی به آن دارد.
این سیستم همچنین به توسعه دهندگان این امکان را می دهد تا از کتابخانه های جاوا اسکریپت داخلی که همراه وردپرس هستند استفاده کنند تا چندین بار اسکریپت شخص ثالث را بارگیری کنند. این زمان بارگیری صفحه را کاهش می دهد و به شما کمک می کند تا با تم ها و پلاگین های دیگر درگیری نداشته باشید.
چگونه اسکریپت ها را به درستی در وردپرس متناسب کنیم؟ h4>
بارگیری صحیح اسکریپت ها در وردپرس بسیار آسان است. در زیر مثالی از کد آورده شده است که می توانید آن را در پرونده پلاگین های خود یا در تم خود قرار دهید توابع.php .
؟ php
تابع wpb_adding_script () {
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_scriptts'، 'wpb_adding_scriptts')؛
؟>
توضیح :
ما با ثبت اسکریپت خود از طریق تابع wp_register_script () شروع کردیم. این تابع 5 پارامتر را می پذیرد:
- $ handle – هندل نام منحصر به فرد اسکریپت شماست. به ما “متن_عجب آور من” گفته می شود
- $ src – src محل اسکریپت شماست. ما از تابع plugins_url برای بدست آوردن آدرس اینترنتی صحیح پوشه پلاگین های خود استفاده می کنیم. هنگامی که وردپرس این موضوع را پیدا کرد ، پس از آن به دنبال نام پرونده amazing_script.js ما در آن پوشه است.
- $ deps – deps برای وابستگی است. از آنجا که اسکریپت ما از jQuery استفاده می کند ، jQuery را در قسمت وابستگی اضافه کرده ایم. اگر وردپرس از قبل در سایت بارگیری نشده است ، به طور خودکار بارگیری می شود.
- $ ver – این شماره نسخه اسکریپت ما است. این پارامتر لازم نیست.
- $ in_footer – ما می خواهیم اسکریپت خود را در پاورقی بارگیری کنیم ، بنابراین مقدار را درست قرار داده ایم. اگر می خواهید اسکریپت را در هدر بارگذاری کنید ، آن را نادرست می دانید.
پس از ارائه تمام پارامترها در wp_register_script ، ما فقط می توانیم اسکریپت را در wp_enqueue_script () فراخوانی کنیم که همه چیز را اتفاق می افتد.
آخرین مرحله استفاده از wp_enqueue_scripts اکشن قلاب به صورت واقعی اسکریپت را بارگیری کنید. از آنجا که این یک کد کد است ، ما آن را درست زیر همه موارد دیگر اضافه کرده ایم.
اگر این مورد را به طرح زمینه یا افزونه خود اضافه می کردید ، می توانید این عملکرد را در جایی که اسکریپت مورد نیاز است قرار دهید. با این کار می توانید رد پای حافظه افزونه خود را کاهش دهید.
حال ممکن است برخی از خود بپرسند که چرا ما مرحله اضافی را برای ثبت اسکریپت و سپس اجرای آن ادامه می دهیم؟ خوب ، این به سایر مالکان سایت اجازه می دهد اسکریپت شما را بدون تغییر کد اصلی افزونه خود ، از سیستم ثبت کنند.
به درستی سبک ها را در وردپرس ایجاد کنید h4>
درست مانند اسکریپت ها ، شما همچنین می توانید صفحه سبک های خود را ایجاد کنید. به مثال زیر نگاه کنید:
به جای استفاده از wp_enqueue_script ، ما اکنون از wp_enqueue_style برای افزودن صفحه سبک خود استفاده می کنیم.
توجه داشته باشید که ما برای هر دو سبک و اسکریپت ها از wp_enqueue_scripts اکشن هوک استفاده کرده ایم. علی رغم نام ، این عملکرد برای هر دو کار می کند.
در مثالهای بالا ، از تابع plugins_url برای نشان دادن مکان اسکریپت یا سبکی که می خواستیم ایجاد کنیم استفاده کرده ایم.
اما اگر از تابع اسکریپت enqueue در طرح زمینه خود استفاده می کنید ، به جای آن از get_template_directory_uri () استفاده کنید. اگر با طرح زمینه کودک کار می کنید ، از get_stylesheet_directory_uri () استفاده کنید.
در زیر یک کد کد زیر آورده شده است:
امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه می توانید به درستی وردپرس و jacvascript را اضافه کنید. همچنین ممکن است بخواهید کد منبع برترین افزونه های وردپرس استفاده کنید.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/.