در این مثاله آموزش وردپرس یکی از روش های تاثیر گزار برای افزایش سرعت سایت وردپرس با انتقال کد های نوشته شده جاوا اسکریپت به پایین صفحه را آموزش خواهیم دادکه علاوه بر اینکه موجب میشود تا سایت شما بسیار سریعتر لود شود، بدلیل اعمال این تغییرات،محدودیتی برای شما ایجاد نمیکند و خیلی از افزونه های افزایش سرعت به همین طریق عمل میکنند.
فواید انتقال کد های جاوا اسکریپت به پایین صفحه برای افزایش سرعت وردپرس
خب جاوا اسکریپت از زبان هایی هست که در مرورگر کاربر اجرا میشود زمانی که کاربری به سایت شما وارد میشود مرورگر کاربر شروع میکنه از بالا سطر به سطر خوندن کد ها و زمانی که شما کدهای جاوا اسکریپتتون رو در بالا قرار دهید قبل از اینکه اجزای اصلی سایت شما بارگذاری بشه مرورگر شروع میکنه به خوندن کد های جاوا اسکریپت و خب اجزای اصلی سایت دیر تر به کاربر نمایش داده میشه اما اگه کد های جاوا اسکریپت در پایین صفحه قرار بگیرن ابتدا سایت لود میشه و سرور به سرعت صفحه رو به کابر ارائه میده و سپس میره سراغ کد های جاوا اسکریپت اما از جایی که رندرهای سرور تموم شده پس زمان بارگذاری کد های جاوا اسکریپت هم سریع تر خواهد شد.
روش افزایش سرعت وردپرس از طریق تغییر مکان فایل های js یه خوبی که داره اینه که امتیاز سرعت ساتتون رو هنگام تست با گوگل بهبود میبخشه
اگه به ویژگی هایی که لازمه سایتتون داشته باشه تا برای موتور های جستجویی مثل google بهینه تر به نظر بیاد توجه کنید میبینید که موتور های جستجو سرعت لود سایت براشون خیلی مهمه بطوری که سرعت لود سایت رو به عنوان کارایی ماتریس زمان نمایش نتیجه جستجو در نظر میگیرند پس هر چه سرعت سایتتون بیشتر باشه برای موتور های جستجو بهینه تر خواهد بود
افزایش سرعت وردپرس با انتقال فایل های js به پایین صفحه
و اما روش انتقال کد های جاوا اسکریپت به پایین صفحه
همونطور که میدونید سایت هایی که با وردپرس طراحی شدند این اجازه رو دارند که کد ها و اسکریپت هایی که دوست دارند رو در قالب وردپرس خودشون اضافه کنند.
که این کار در بهبود و افزایش سرعت سایت نقش به سزایی داره.
برای اینکه منظورمو بهتر متوجه بشید یه مثال میزنم براتون فرض کنید میخوایم یک کد جاوا اسکریپت رو به قالب وردپرس فعال سایت اضافه کنیم خب برای این کار دنبال فایلی با پسوند .js باشید زیرا کد های جاوا اسکریپت با این پسوند ذخیره میشن.
معمولا در فایل هر قالب وردپرس پوشه ای برای این فایل ها در نظر میگیرند اما در صورت موجود نبودن میتونید یکی بسازید و فایل اسکریپتتون رو داخلش قرار بدید.
سپس از فایل functions.php موجود در ریشه قالبتون یک نسخه پشتیبان تهیه کنید که در صورت خطا مشکلی براتون پیش نیاد و بتونید فایل رو به صورت اولش برگردونید سپس کد زیر را به فایلتون اضافه کنید:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );در کد بالا از تابع wp_register_script() استفاده کردیم که دارای ورودی های زیر است:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
خب برای اینکه اسکریپتتون در پایین صفحه اضافه بشه توجه داشته باشید که پارامتر یا همان ورودی $in_footer رو به درستی وارد کرده باشید.
همچنین اگر به کد توجه داشته باشید از تابع دیگری هم با عنوان get_template_directory_uri() هم استفاده کردیم که این تابع آدرس رو برای دایرکتوری قالب وردپرس فعال سایت رو بهمون میده.
از دیگر موارد استفاده این تابع در وردپرس برای اسکریپت های ثبت نام و غیره است.
همچنین برای افزونه ها هم از تابع plugins_url() استفاده میکنیم.
در افزایش سرعت وردپرس با انتقال فایل های js ممکن است که مشکلاتی برای شما پیش بیاید مانند:
یزمانی که شما گاها افزونه های وردپرسیتونو در قسمت head صفحه قرار میدید یا حتی در بدنه قالب وردپرس سایتتون برای اینکه کد های جاوا اسکریپتتون به پایین صفحه بره باید کدهای مربوظ به افزونه رو ادیت کنید و اسکریپت رو به انتهای صفحه انتقال بدید.
برای اینکه بتونید منبع کدهای جاوا اسکریپت رو در سایت پیدا کنید ابتدا وارد قسمت page source یا همان قسمت سورس کد صفحه بشید .(در صحفه کلید خودتون کلید های Ctrl+U را بزنید)
کدهای جاوا اسکریپت درون تگ های </script> <script> قرار میگیرند و src نیز مشخصه ی url یا مکان قرار گیری اون فایل هستش.
به طور مثال به عکس زیر توجه کنید آدرس فایل جاوا اسکریپت که مربوط به پلاگین test-plugin101 هست در دایرکتوری مخصوص فایل های جاوا اسکریپت قرار گرفته به نام js.
finding-source
برای قرارگیری کد های جاوا اسکریپت در قالب دو راه وجود داره یا مستقیما خود کد ها رو مینویسن یا اسکریپت ها رو در فایل جداگانه ای مینویسند و به فایل اصلی پیوست میدن.
زمانیکه کد های جاوا اسکریپت در فایل اصلی قرار داشت میتونید با روشن و خاموش کردن افرونه بفهمید که کدام اسکریپت ها مخصوص کدام افزونه هاست با ناپدید و پدید شدن آنها!
خب پس از اینکه فهمیدید کدوم اسکریپت ها برای کدوم افزونه هاست باید مکانی رو که پلاگین برای فایل صدا زده میشه رو هم پیدا کنید.
برای دیدن فایل های .js به یکی از فایل های مربوط به افزونه یا قالبتون برید.
اگه دیدید که در فایل افزونه یا قالب که به زبان php است برای اضافه کردن اسکریپت ها استفاده میشه باید از تابع wp_register_script که در بالا هم بهتون معرفی کردم استفاده کنید و پارامتر in_footer رو مانند کد زیر تغییر دهید:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);اگه افزونه یا قالب وردپرس سایتتون اسکریپت ها رو به بالا یا بین محتوا اضافه کرد مشکلی نیست!
اسکریپت مربوط به افزونه یا قالبتون رو پیدا کنید و در دایرکتوری مخصوص فایل های اسکریپت (js) ذخیره کرده و دوباره از تابع wp_register_script برای انتقال اسکریپت ها به انتهای صفحه استفاده کنید.
[scrolling_box title=’مطالب بیشتر درباره افزایش سرعت وردپرس’ display=’tag’ tag=’522′]
با تشکر از همراهی شما با این قسمت از آموزش وردپرس اگر در رابطه با این پست سوال یا مشکلی دارید در قسمت نظرات اعلام بکنید تا راهنمایی شوید. در صورتی که نیاز به قالب وردپرس دارید میتوانید به دسته بندی قالب وردپرس مراجعه بکنید.
