حذف رشتههای کوئری از فایلهای CSS و JS وردپرس یا حذف نسخه از فایلهای CSS و JS از سورس صفحه یکی از موارد مهم و تاثیر گذار در بحث کش سایت و بهینهسازی سرعت سایت و بارگذاری سریع صفحات سایت میباشد. حذف شماره ورژن از انتهای فایلهای CSS و JS حتی در بحث امنیت سایت هم مهم است و باعث جلوگیری از نفوذ هکرها و سوء استفاده از رخنههای امنیتی موجود در افزونهها و قالب قدیمی و حتی وردپرس شما میشود.
افزایش امنیت سایت با حذف رشتههای کوئری از فایلهای CSS و JS وردپرس
در بحث امنیت هسته وردپرس، اگر شما همواره از نسخه بهروز وردپرس استفاده میکنید، نمایش شماره نسخه وردپرس مشکلی ایجاد نمیکند. اما در صورت استفاده از نسخههای قدیمیتر وردپرس، هکرها ممکن است از آسیبپذیریهای امنیتی آن نسخه خاص سوءاستفاده کنند و به سایت شما نفوذ کنند. پس همیشه توصیه میشود نسخه وردپرس را بهروز نگه دارید و اگه سایتتان از آخرین نسخه استفاده نمیکند، نسخه را از چشم دیگران مخفی کنید.
این مورد امنیتی حتی برای نسخه افزونهها و قالب شما هم صادق است. بطور پیشفرض هر افزونه و قالبی شماره نسخه خودش را به انتهای آدرس هر کدام از فایلهای CSS و JS اضافه میکند و در سورس صفحه در هر کدام از صفحات و برگههای جلوی سایت آنها را نمایش میدهد.
اگر شما همواره از آخرین نسخه هر افزونهای استفاده میکنید و به اصطلاح همواره سریعا پس از انتشار هر نسخه جدید از افزونه و قالبی، آن را بر روی سایت خود بروزرسانی میکنید هیچ مشکلی وجود ندارد. اما اگر در بروزرسانی افزونهها و قالب سایت خود کند هستید یا به دلایل فنی مجبور به استفاده از نسخه خاصی از افزونه یا قالب هستید پس نمایش نسخه افزونه در انتهای فایلهای CSS و سورس کد صفحات شما میتواند راه نفوذ به سایت شما را برای هکرها هموار کند.
بهبود عملکرد و سرعت سایت با حذف نسخه از فایلهای CSS و JS از سورس صفحه
در امر توسعه وب و کاربران وردپرس، مدیریت کارآمد نحوه بارگذاری سایتت نقش مهمی در بهینهسازی عملکرد کلی آن سایت دارد. یکی از جاهایی که اغلب نادیده گرفته میشود، نحوه برخورد با query variables و version numbers از اسکریپتها (فایلهای JS) و استایلهای (فایلهای CSS) سایتت هست. بارگذاری بیمورد این موارد میتونه زمان بارگذاری سایتت رو افزایش بده و روی تجربه کاربری و سئو تأثیر بذاره. در این مقاله، بررسی میکنیم که چطور این نسخهها رو حذف کنیم و از بارگذاری بیمورد جلوگیری کنیم تا سایتت بلافاصله سرعت بیشتری بگیره.
درواقع به لحاظ عملکردی و بحث کش سایت، زمانی که نسخه فایلهای استایل (CSS) و جاوااسکریپت (JS) در انتهای آدرس آنها وجود داشته باشد، مرورگر نمیتواند آن فایلها را در حافظه کش خود ذخیره کند و هر بار سایت Refresh و یا مجدد بارگذاری شود باید تمام آن فایلها توسط مرورگر مجددا فراخوانی، دانلود و در نهایت بارگذاری شوند که در نهایت این کار باعث بالا رفتن تایم لود (Time Load) سایت وردپرسی شما می شود.
اگر تا به امروز به کدهای هر کدام از صفحات سایتت مراجعه کرده باشی، قطعا دیدی که در انتهای آدرس هر کدام از فایلهای CSS یا JS هر کدام از افزونهها و قالب سایت و حتی خود فایلهای وردپرس یک پارامتر به صورت ?ver=x.x.x
وجود دارد.
شما همین الان میتونین این مورد رو توی سایت وردپرسی خودت تست کنید. به یک صفحه دلخواه در جلوی سایتتون بروید و روی یک فضای خالی از صفحه راست کلیک کنید و روی “View Page Source” کلیک کنید. این صفحه جدید باز شده سورس کد صفحه شماست که کلی استایل CSS و اسکریپت JS از وردپرس و افزونهها و قالب سایتت با شماره نسخه میبینید. چیزی شبیه به کدهای زیر:
<link rel='stylesheet' .../style.min.css?ver=5.7.2' type='text/css' media='all' />
<link rel='stylesheet' .../style.min.css?ver=2.3.1' type='text/css' media='all' />
<link rel='stylesheet' .../theme.min.css?ver=2.3.1' type='text/css' media='all' />
<link rel='stylesheet' .../dashicons.min.css?ver=5.7.2' type='text/css' media='all' />
<link rel='stylesheet' .../admin-bar.min.css?ver=5.7.2' type='text/css' media='all' />
<link rel='stylesheet' href='.../wp-content/uploads/blocksy/css/global.css?ver=85303' media='all' />
<link rel='stylesheet' href='.../wp-includes/css/dashicons.min.css?ver=6.6.1' media='all' />
<link rel='stylesheet' href=.../wp-includes/css/admin-bar-rtl.min.css?ver=6.6.1' media='all' />
<script src=".../wp-content/plugins/flying-press/assets/admin.js?ver=4.14.4" ></script>
<script src=".../wp-includes/js/hoverintent-js.min.js?ver=2.2.1" ></script>
<script src=".../wp-includes/js/admin-bar.min.js?ver=6.6.1" ></script>
<script src=".../wp-content/plugins/seo-by-rank-math/js/rank-math.js?ver=1.0.227.1" ></script>
<script src=".../wp-content/plugins/woocommerce/assets/sourcebuster.min.js?ver=9.2.3" ></script>
همانطور که در انتهای آدرس تمامی فایلهای CSS و JS میبینید یک پارامتر ?ver=x.x.x
که بیانگر نسخه وردپرس یا ان افزونه و قالب است وجود دارد.
حذف نسخه فایلهای CSS و JS در وردپرس با تکه کد PHP
با استفاده از تکه کدهای زیر به راحتی میتوانید شماره نسخه فایلهای CSS و JS را به راحتی از انتهای آنها حذف کنید. تفاوتی نمیکند پارامتر ?ver=x.x.x در انتهای فایلهای CSS و JS هسته وردپرس باشد و یا فایلهای CSS و JS افزونهها و پوستهای که روی سایت خودتان نصب کردید.
شما میتوانید از هر کدام از کد های زیر استفاده نمایید. برای استفاده از این کدها کافی است آنها را کپی کرده و در فایل functions.php قالب یا پوسته فرزند قالب خود قرار دهید و یا طبق روش “افزودن کد سفارشی PHP و CSS و JS به وردپرس” به راحتی از این کدها در افزونههایی همچون FluentSnippets و Code Snippets و WPCode استفاده نمایید.
/** Remove Version Query Strings from Scripts/Styles **/
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
// remove wp version param from any enqueued scripts
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
// remove wp version number from scripts and styles
function remove_css_js_version( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_css_js_version', 9999 );
add_filter( 'script_loader_src', 'remove_css_js_version', 9999 );
/** Remove Version from Style and Script **/
function wpcode_snippet_remove_query_strings_split( $src ) {
$output = preg_split( "/(&ver|\?ver)/", $src );
return $output ? $output[0] : '';
}
add_action( 'init', function () {
if ( ! is_admin() ) {
add_filter( 'script_loader_src', 'wpcode_snippet_remove_query_strings_split', 15 );
add_filter( 'style_loader_src', 'wpcode_snippet_remove_query_strings_split', 15 );
}
} );
//Remove Query Variables Version Numbers from Style Scripts
function wpturbo_remove_script_version( $src ){
return remove_query_arg( 'ver', $src );
}
add_filter( 'style_loader_src', 'wpturbo_remove_script_version', 15, 1 );
add_filter( 'script_loader_src', 'wpturbo_remove_script_version', 15, 1 );
این کدها به لحاظ ماهیتی هیچ تفاوتی با هم ندارند و همگی یک کار را انجام میدهند، تنها شیوه کد نویسی آنها کمی باهم متفاوت است.
اگر بخواهیم بطور خلاصه به بررسی تکه کد آخر بپردازیم باید بگوییم که:
هدف قطعه کد ما این است که version query string را از منابع اسکریپتها و استایلها حذف کند. این امر به ویژه برای بهینهسازی عملکرد سایت وردپرسی ما مفید است زیرا اساسا به کش فایلها کمک کند.
قسمت اولیه اسکریپت ارائه شده تابعی را تعریف میکند:
wpturbo_remove_script_version($src)
آرگومان $src
آدرس URL منبع اسکریپت یا استایل اضافه شده را نشان میدهد.
در داخل این تابع، تابع دیگری را فرا میخوانیم:
remove_query_arg('ver', $src)
تابع remove_query_arg()
یک تابع داخلی وردپرس است که query arguments را از یک URL حذف میکند. در مورد ما، آرگومان پرسش ‘ver’ را حذف میکند که مخفف نسخه است.
بنابراین، هنگامی که تابع wpturbo_remove_script_version($src)
فراخوانی میشود، URL منبع یک اسکریپت یا یک استایل را بدون رشته پرسش نسخه برمیگرداند.
دو خط آخر کد ارائه شده، این تابع جدیداً تعریف شده، wpturbo_remove_script_version($src)
، را به عنوان یک فیلتر روی دو قلاب وردپرس اضافه میکند: style_loader_src
و script_loader_src
.
این کد در واقع به وردپرس میگوید که هر زمان سبکها و اسکریپتها را بارگذاری میکند، تابع wpturbo_remove_script_version
را اعمال کند.
تابع add_filter
چهار پارامتر میپذیرد، اما در این مورد و این تکه کد php ما فقط از سه مورد استفاده میشود.
پارامتر اول نام قلاب فیلتر است، style_loader_src
، که نشان میدهد تابع هنگام بارگذاری سبکها اعمال میشود. پارامتر دوم نام تابعی است که باید اجرا شود.
پارامتر سوم اولویت تابع را تنظیم میکند، زیرا ترتیب اجرای توابع متصل به این رویداد است. هرچه عدد کمتر باشد، تابع زودتر اجرا میشود. در اینجا، روی 15 تنظیم شده است.
پارامتر آخر تعداد پارامترهایی را که تابع میپذیرد مشخص میکند. در این مورد، ما آن را مشخص نمیکنیم زیرا پیشفرض 1 است که تعداد پارامترهایی است که wpturbo_remove_script_version
میپذیرد.
بنابراین با استفاده از این قطعه کد، میتوانید پارامترهای نسخه را از URLهای اسکریپتها و سبکهای اضافه شده حذف کنید و به طور بالقوه مکانیزمهای کش مرورگر را بهبود بخشید و وبسایت خود را سرعت بخشید.
اکنون اگر منبع یکی صفحات سایتتان را مشاهده کنید، خواهید دید که عبارت ?ver=x.x.x
یا همان شماره نسخه از تمامی استایلها (فایلهای CSS) و اسکریپتها (فایلهای JS) سایت شما حذف شده است.
هر سوال و مشکلی در خصوص حذف نسخه فایلهای CSS و JS در وردپرس داشتید را در قسمت کامنتهای همین مقاله مطرح کنید تا سریعا پاسخگو و راهنمای شما باشیم.