نحوه انتقال کدهای جاوا اسکریپت از هدر به فوتر

Move JavaScript files from the header to the footer

نحوه انتقال فایل های جاوا اسکریپت از هدر به فوتر چگونه است؟ چه مزایایی دارد و دلیل انجام این کار چیست ؟

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

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

مزایای انتقال جاوا اسکریپت به فوتر:

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

جابه جایی فایل های JavaScript از هدر به فوتر ،باعث می شود نمره سرعت شما هنگام آزمایش با سرعت صفحه Google یا Yslow بهبود یابد.

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

شما کاربران عزیزکافی است تا فایل فانکشن قالب functions.php خود را باز کرده و قطعه کد زیر را در آن قرار دهید:

function remove_head_scripts() { remove_action('wp_head', 'wp_print_scripts'); remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); add_action('wp_footer', 'wp_print_scripts', 5); add_action('wp_footer', 'wp_enqueue_scripts', 5); add_action('wp_footer', 'wp_print_head_scripts', 5); } add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

یافتن منبع جاوا اسکریپت

سایت خود را در مرورگر وب باز کنید و منبع صفحه را مشاهده کنید. پیوند به فایل JavaScript را مشاهده خواهید کرد که محل و مبدا فایل را نشان می دهد. به عنوان مثال ، تصویر زیر به ما می گوید که اسکریپت ما متعلق به افزونه ای به نام "test-plugin101" است. پرونده اسکریپت در فهرست js قرار دارد.

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

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

ثبت و Enquue اسکریپت ها:

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

اگر افزونه یا قالب برای اضافه کردن فایل JavaScript از قبل استفاده می کند ، تمام کاری که شما باید انجام دهید این است که عملکرد wp_register_script را در پلاگین یا قالب خود تغییر دهید و برای پارامتر $ in_footer درست کنید. مثل این:

wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

بیایید فرض کنیم که افزونه یا طرح زمینه شما JavaScript خام را در هدر یا بین محتوا اضافه می کند. کد خام جاوا اسکریپت را در پرونده های پلاگین یا قالب پیدا کنید ، جاوا اسکریپت را کپی کرده و در یک پرونده .js ذخیره کنید. همانطور که در بالا نشان داده شده است ، از تابع wp_register_script () استفاده کنید تا جاوا اسکریپت را به پایین منتقل کنید.

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

نکته ۲: انتقال فایل های JavaScript به پاورقی برای هر سایت وردپرسی جواب نمی دهد.برای پیاده سازی این امر،حتما باید از قالب استاندارد و اصل در سایت وردپرسی خود استفاده کرده باشید. چنان چه خواهان استانداردسازی قالب خود هستید حتما با کارشناسان ما در سایت wpir تماس بگیرید.

نحوه انتقال کدهای جاوا اسکریپت از هدر به فوتر

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