اخیراً ، یکی از خوانندگان ما از ما پرسید که چگونه می توانند JavaScript را در وردپرس به پایین ببرند تا نمره سرعت صفحه Google خود را افزایش دهند. خوشحالیم که آنها پرسیدند ، زیرا صادقانه می خواستیم در این مورد بنویسیم. پیش از این ، ما در مورد چگونگی به درستی جاوا اسکریپت ها و سبک های CSS را در وردپرس اضافه کنید.” در این مقاله ، ما به شما نشان خواهیم داد که چگونه جاوا اسکریپت ها را در وردپرس به پایین منتقل کنید ، بنابراین می توانید زمان بارگذاری سایت و سرعت صفحه Google خود را بهبود بخشید.
مزایای انتقال جاوا اسکریپت به پایین h4>
JavaScript یک زبان برنامه نویسی سمت مشتری است. این توسط مرورگر وب کاربر اجرا می شود و توسط سرور وب شما اجرا نمی شود. وقتی JavaScript را در قسمت بالا قرار می دهید ، مرورگرها ممکن است قبل از بارگذاری بقیه صفحه ، JavaScript را اجرا یا پردازش کنند. وقتی JavaScript به پایین منتقل می شود ، وب سرور شما سریع صفحه را رندر می کند و سپس مرورگر کاربر JavaScript را اجرا می کند. از آنجا که همه رندرهای سمت سرور قبلاً انجام شده اند ، جاوا اسکریپت در پس زمینه بارگذاری می شود و سرعت بارگذاری کلی را سریعتر می کند.
با این کار نمره سرعت شما در هنگام آزمایش با سرعت صفحه Google یا Yslow بهبود می یابد. گوگل و سایر موتورهای جستجو اکنون سرعت صفحه را به عنوان یکی از ماتریس های عملکرد هنگام نمایش نتایج جستجو در نظر می گیرند. این بدان معنی است که وب سایت هایی که سریعتر بارگیری می شوند ، در نتایج جستجو برجسته تر ظاهر می شوند.
روش مناسب افزودن اسکریپت در وردپرس h4>
وردپرس دارای یک سیستم قدرتمند ایجاد پیام است که به توسعه دهندگان قالب و پلاگین اجازه می دهد اسکریپت های خود را در صف اضافه کرده و در صورت لزوم بارگیری کنند. اسکریپت ها و سبک ها به درستی می توانند سرعت بارگذاری صفحه شما را به میزان قابل توجهی بهبود بخشند.
برای نشان دادن یک مثال اساسی ، ما کمی JavaScript را به یک قالب وردپرس اضافه خواهیم کرد. JavaScript خود را در پرونده .js ذخیره کرده و آن پرونده .js را در فهرست js موضوع خود قرار دهید. اگر موضوع شما دایرکتوری برای JavaScript ندارد ، پس یکی ایجاد کنید. پس از قرار دادن فایل اسکریپت ، پرونده توابع.php طرح زمینه خود را ویرایش کنید و این کد را اضافه کنید:
تابع wpb_adding_script () {
wp_register_script ('my-amazing-script'، get_template_directory_uri (). '/js/my-amazing-script.js'،''''1.1'، true)؛
wp_enqueue_script ('متن-شگفت انگیز من')؛
}
add_action ('wp_enqueue_scriptts'، 'wpb_adding_scriptts')؛
در این کد ، ما از تابع wp_register_script () استفاده کرده ایم. این عملکرد دارای پارامترهای زیر است:
برای افزودن اسکریپت در صفحه یا پایین صفحه وردپرس ، تنها کاری که باید انجام دهید این است که پارامتر $ in_footer را روی true تنظیم کنید.
ما همچنین از تابع دیگری get_template_directory_uri () استفاده کرده ایم که URL پوشه الگو را برمی گرداند. این تابع باید برای ایجاد و ثبت اسکریپت ها و سبک ها در تم های وردپرس استفاده شود. برای پلاگین ها از تابع plugins_url () استفاده خواهیم کرد.
مشکل:
مشکل این است که بعضی اوقات افزونه های وردپرس JavaScript خود را به صفحات داخل
یا داخل بدنه صفحه اضافه می کنند. به منظور انتقال آن اسکریپت ها به پایین ، باید پرونده های پلاگین خود را ویرایش کرده و اسکریپت ها را به درستی به پایین منتقل کنید.
یافتن منبع جاوا اسکریپت h4>
سایت خود را در مرورگر وب باز کنید و منبع صفحه را مشاهده کنید. پیوند به فایل JavaScript را مشاهده خواهید کرد که محل و مبدا فایل را نشان می دهد. به عنوان مثال ، تصویر زیر به ما می گوید که اسکریپت ما متعلق به افزونه ای به نام “test-plugin101” است. فایل اسکریپت در فهرست js قرار دارد.
گاهی اوقات خواهید دید که JavaScript مستقیماً به صفحه اضافه شده و از طریق یک پرونده جداگانه .js به آن پیوند داده نشده است. در این صورت ، باید تمام افزونه های خود را یکی یکی غیرفعال کنید. بعد از غیرفعال کردن هر پلاگین ، صفحه را تازه کنید تا زمانی که یکی از موارد اضافه شده اسکریپت به صفحات خود را پیدا کنید. اگر حتی بعد از غیرفعال کردن تمام افزونه ها ، جاوا اسکریپت از بین نرفت ، سعی کنید به یک موضوع دیگر بروید تا ببینید آیا جاوا اسکریپت توسط موضوع شما اضافه شده است یا خیر.
ثبت و Enquue Scripts
هنگامی که افزونه یا موضوعی را که در حال افزودن جاوا اسکریپت است در بخش عنوان پیدا کردید ، مرحله بعدی این است که بدانید پلاگین از کجا فراخوانی پرونده می کند. در یکی از پرونده های 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 قالب خود ثبت کنید. به این آموزش .
جدا از انتقال اسکریپت ها به پاورقی ، شما همچنین باید از استفاده کنید پلاگین رسانه های اجتماعی و تصاویر بارانی تنبل . در کنار آن باید از W3 Total Cache و MaxCDN برای بهبود سرعت سایت شما.
امیدواریم که این مقاله به شما کمک کند تا جاوا اسکریپت ها را در وردپرس به پایین برسانید و سرعت صفحه خود را بهبود ببخشید. برای س questionsال و بازخورد لطفاً در زیر نظر دهید
منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-move-javascripts-to-the-bottom-or-footer-in-wordpress/.