اضافه کردن صحیح کدهای استایل و جاوااسکریپت در وردپرس

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

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

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

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

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

<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'کدهای مربوط به اسکریپت'; } ?><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

در نگاه اول ممکن است کد بالا آسان به نظر برسد، اما این کد روش اشتباهی برای بارگذاری کدهای مورد نظر در وردپرس است و در آینده باعث ایجاد تداخل بیشتر در سیستم می شود.

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

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

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

چرا باید استایل ها و اسکرپیت ها را در وردپرس صف بندی (Enqueue) کرد؟

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

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

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

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

چگونه می توان اسکریپت ها را به طور صحیح فراخوانی کرد؟

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

<?php function wpnovin_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', 'wpnovin_adding_scripts' ); ?><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

توضیحات مربوط به کد بالا:

ما با ثبت اسکریپت خود با استفاده از تایع wp_register_script() شروع کرده ایم. این تابع ۵ پارامتر زیر را قبول می کند:

• $handle: نام یکتا اسکرپیت شما است. یعنی قبلا فایلی با این عنوان ایجاد نشده است. نامی که ما در کد بالا استفاده کرده ایم “my_amazing_script” است.
• $src: محل قرارگیری فایل شما است. ما در اینجا از تابع plugins_url استفاده می کنیم تا آدرس صحیح پوشه مربوط به پلاگین را دریافت کنیم. به محض اینکه وردپرس آدرس پوشه پلاگین را دریافت کند، به دنبال فایلی به نام amazing_script.js در آن پوشه خواهد گشت.
• $deps: مربوط به وابستگی است. از آنجایی که اسکریپت مورد نظر ما از jQuery استفاده می کند، ما jQuery را در قسمت وابستگی در کد بالا اضافه کرده ایم.
• $ver: این مربوط به نسخه اسکریپتی است که ما از آن استفاده می کنیم. این پارامتر ضروری نیست.
• $ln_footer: ما میخواهیم اسکریپت خود را در فوتر بارگذاری کنیم، خب برای این منظور مقدار این پارامتر را true قرار داده ایم. اگر شما می خواهید این اسکریپت را در هدر سایت خود بارگذاری کنید، مقدار این پارامتر را false قرار بدید.

بعد از تهیه پارامترهای لازم در تایع wp_register_script، می توانیم از تایع wp_enqueue_script() برای فراخوانی اسکریپت مورد نظر در وردپرس استفاده کنیم.

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

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

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

نحوه صحیح فراخوانی استایل ها در وردپرس

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

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

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

دقت داشته باشید که ما از هوک wp_enqueue_scripts برای فراخوانی هر دو یعنی هم استایل ها و هم اسکریپت ها استفاده می کنیم. علی رغم نام یکسان آن، این تابع برای هر دو یعنی استایل ها و اسکریپت ها کار می کند.

در مثال های بالا، ما از تابع plugins_url برای دریافت محل قرارگیری اسکریپت یا استایلی که میخواهیم آنرا فراخوانی کنیم استفاده می کنیم.

اما اگر شما از تابع مربوط به فراخوانی اسکریپت ها در قالب خود استفاده میکتید، به راحتی با استفاده از get_template_directory_uri() می توانید این کار را انجام دهید. اگر از child theme استفاده میکنید، در آن صورت باید از get_stylesheet_directory_uri() استفاده کنید.

کد زیر یک نمونه از کاربرد آن است:

<?php function wpnovin_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', 'wpnovin_adding_scripts' ); ?>

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