آموزش حذف کدهای اضافی css در وردپرس

وردپرس یک سیستم مدیریت محتوا است که در طراحی سایت کاربرد دارد؛ پس از طراحی سایت و روی کار آمدن سایت، شما باید به حذف CSS های اضافی در وردپرس بپردازید. منظور از CSS های اضافی یا unused CSS، CSS بدون استفاده در وردپرس است که عملاً کاربردی ندارد، اما می‌تواند نمایش یک صفحه را بیش از حد انتظار به طول انجامد، که این فرآیند برای یک سایت به عنوان ضعف کاربری تلقی می‌شود. از این رو قصد داریم در ادامه این مطلب به تمام نکات مربوط به چگونگی حذف کدهای CSS وردپرس بپردازیم و در رابطه با افزونه‌های کاربردی برای این منظور نیز صحبت کنیم.

CSS های اضافی در وردپرس شامل چه کدهایی می‌شود؟

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

البته لازم به ذکر است که طولانی بودن مدت زمان بارگزاری یک سایت می‌تواند در رتبه‌بندی موتورهای جستجوگر تأثیر داشته باشد و سبب نتیجه عکس و نامطلوب در جایگاه سئو شود. برای اینکه از CSS های اضافی دردسرساز آگاه شوید و از کدهایی که به سایت شما آسیب می‌زنند اطلاع پیدا کنید، باید از ابزار Google Pagespeed Insights بهره ببرید. در واقع این نوع ابزار به شما از تأثیر کدهای CSS بر روی سایت خبر می‌دهد.

پس از یافتن کدهای CSS بدون استفاده که تنها کارایی آن‌ها آسیب رساندن به سایت شما است، می‌توانید برای حذف کردن کدهای CSS اضافی در وردپرس اقدام کنید.

چطور CSS های بدون استفاده را حذف کنیم؟

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

جهت حذف unused CSS در وردپرس روش‌های متعددی ارائه می‌شود که دو روش مذکور در ادامه هوشمندانه‌ترین نوع آن‌ها را به خود اختصاص داده‌اند. روش اول حذف کدهای CSS وردپرس با استفاده از افزونه wp- rocket صورت می‌گیرد و روش دوم آن از طریق افزونه asset cleanup pro اجرا می‌شود. به این موضوع در مقاله آموزش وردپرس اشاره کوتاهی داشتیم اما در این مقاله به تفضیل می‌پردازیم.

روش اول: حذف کردن CCS اضافی با استفاده از افزونه wp- rocket

به افرادی که مبتدی هستند و اطلاعات کمی در حیطه سایت وردپرس دارند، توصیه می‌شود برای حذف CSS بدون استفاده در وردپرس از افزونه wp- rocket استفاده کنند. این روش بسیار ساده است که در عین سهولت انجام کار، شما را قادر به ایجاد تحول عظیم در سایت و افزایش سرعت آن خواهد ساخت‌.

اولین قدم برای انجام این مورد این است که افزونه wp rocket نصب و فعال شود. بعد از فعال کردن این افزونه باید به بخش تنظیمات مربوط به افزونه مراجعه کنید و به تب File Optimization سری بزنید.

در مرحله بعدی، باید به قسمت فایل‌های CSS مراجعه کنید و تیک مربوط به گزینه Optimize CSS delivery را فعال کنید. این گزینه چنین کاربردی دارد که با فعال شدن سبب می‌شود تا کدهای CSS که به نمایش دادن صفحه ارتباط دارند، نشان داده شوند. با فعال شدن گزینه Optimize CSS delivery، کدهای حافظه کش یا حافظه پنهان تقریباً خالی می‌شوند و در ادامه افزایش سرعت و بهبود عملکرد وبسایت مشاهده می‌شود و یا حتی می‌توان با استفاده از ابزارهایی مانند Google Pagespeed Insights این ارتقای کیفیت را اندازه‌گیری کرد.

قابل توجه است که با استفاده از افزونه wp rocket می‌توان رشته‌های کوئری موجود در فایل‌های استاتیک حذف کرد، همچنین فایل‌های Google Fonts را ترکیب کرده و HTML هم کوچک‌تر و کوتاه‌تر شود. عمدتاً تمام این تکنیک‌ها در انتها به بهبود عملکرد سایت و افزایش سرعت آن می‌انجامند که در واقع نظر مثبت کاربران به سمت سایت معطوف می‌شود که این مورد می‌تواند ارتقای امتیاز سئو را به همراه داشته باشد.

از دیگر امکانات افزونه wp rocket می‌توان به Minify CSS Files اشاره کرد که به وسیله آن می‌توان کدهای مرتبط با CSS را کوتاه‌تر کرد یا ادغام نمود. در نتیجه این فرآیند، سرعت سایت به علت کاهش درخواست‌های HTTP افزایش پیدا می‌کند.

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

در نتیجه تمام این بررسی می‌توانیم بگوییم که افزونه wp rocket یک روش ساده و عالی است که در جهت حذف CSS های اضافی در وردپرس به کار می‌رود.

روش دوم: حذف unused CSS در وردپرس با استفاده از افزونه asset cleanup pro

روش دیگری که در حذف کدهای CSS وردپرس شناخته می‌شود، استفاده از افزونه‌ای با عنوان asset cleanup pro است که کمی پیشرفته‌تر و حرفه‌ای‌تر عمل می‌کند، اما فوق‌العاده قدرتمند و کاربردی است و به وسیله آن شما قادر به حذف unused CSS در وردپرس خواهید بود. اما در ابتدا موظف هستیم که تذکر دهیم، این روش پیچیدگی‌هایی دارد که باید تحت مراقب و دقت انجام شوند تا به سایت شما آسیبی نرسد.

همان‌طور که می‌دانید، قدم اول نصب و فعال‌سازی افزونه asset cleanup pro است؛ سپس باید وارد قسمت setting یا تنظیمات شوید و به بخش آزمایشی Test Mode مراجعه کنید. در این بخش نیز باید گزینه Enable Test Mode را فعال کنید.

فعال کردن گزینه Enable Test Mode برای شما امکان تنظیمات مختلف و بدون تأثیرگذاری در نمایش و استفاده کاربران را فراهم می‌آورد که در ادامه باید به صفحه CSS / JS Manager وارد شده و فایل‌های CSS یا جاوا اسکریپت را که بدون قصد و بلااستفاده هستند را غیرفعال کنید. افزونه در این مرحله از کار، ابتدا صفحه اصلی را بررسی و جستجو می‌کند، نتیجه این بررسی چنین ظاهر می‌شود که تمام فایل‌های CSS و Javascript بارگذاری‌ شده در آن صفحه نمایش داده می‌شوند. با اسکرول کردن به سمت پایین، می‌توانید کدها و پرونده‌های بارگیری شده را بررسی کنید. از طریق این بررسی اگر فایلی را مشاهده کردید که بلااستفاده است و نیازی به آن وجود ندارد، می‌توانید کد یا فایل بلااستفاده را حذف کرده و unload کنید.

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

شاید لازم است که به Test Mode نیز اشاره کنیم؛ بررسی مجدد وبسایت که به منظور جلوگیری از آسیب رسیدن به صفحات صورت می‌گیرد. در این حالت شما می‌توانید پس از حذف فایل‌های CSS و Javascript بلااستفاده، به قسمت setting مراجعه کنید و حالت آزمایشی یا همان Test Mode را خاموش و غیرفعال کنید. برای اینکه تغییرات ذخیره شوند، باید روی دکمه بروزرسانی همه تنظیمات کلیک کنید. در ادامه می‌توانید برای اطمینان از بهبود عملکرد و نتیجه حذف فایل‌های بدون استفاده از ابزارهایی مانند Google Pagespeed Insights استفاده به عمل آورید.

بهینه‌سازی افزونه به صورت دستی

مدیریت چگونگی بارگذاری فایل افزونه‌های مختلف در سایت، باید توسط کاربران پیشرفته وردپرس صورت بگیرد. البته که لازمه این نوع کنترل وجود دانش برنامه‌نویسی و قسمتی از مهارت‌های اشکال‌زدایی است. تابع Wp_Enqueue_Style and Wp_Enqueue_Script روش مناسب برای بارگذاری اسکریپت‌ها و شیوه‌نامه در وردپرس است.

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

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

نحوه حذف کدهای اضافه جهت افزایش سرعت سایت وردپرس

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

شما می‌توانید با پیدا کردن مدیریت شیوه‌نامه و اضافه کردن این کد به فایل functions.php قالب خود یا یک افزونه سایت آن را لغو کنید.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles()

{

wp_deregister_style( 'gdwpm_styles-css' );

}

بسیاری از استایل‌هایی که درون این تابع هستند را می‌توانید مجدداً لغو کنید. البته فراموش نکنید که لغو کردن این شیوه‌نامه‌ها بر ویژگی‌های افزونه وبسایت شما تأثیر می‌گذارد.

پیشنهاد می‌شود که برای حذف کدهای اضافه جهت افزایش سرعت سایت وردپرس از دو افزونه asset cleanup pro و wp rocket که در دو روش مجزا شرح داده شدند، استفاده کنید.

مدیریت فایل‌های CSS فقط روی صفحات خاص

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

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); 
function my_deregister_javascript()

{

if ( !is_page('Contact') )

 { wp_deregister_script( 'contact-form-7' );

 }

}

این کد اسکریپت قادر است فرم تماس 7 را بر روی تمام صفحات به‌ جز صفحه تماس غیرفعال می‌کند.

افزونه DPPP

افزونه dppp برای مدیریت فایل‌های CSS به معنای افزونه غیر فعال کردن پلاگین تعریف می‌شود که مخفف عبارت لاتین Deactivate Plugins Per Page است. افزونه dppp یکی از بهترین افزونه‌های وردپرس است که می‌تواند سایتی با سرعت بالا بسازد. برای کسب این سرعت تنها باید پلاگین‌ها را در صفحات وردپرسی که به آن‌ها نیاز ندارند، غیرفعال کنید. در واقع منظور مدیریت فایل‌های CSS یا همان حذف CSS بدون استفاده در وردپرس است. بنابراین بارزترین مشخصه این افزونه برای معرفی، سرعت بخشیدن به سایت است.

افزونه Asset Cleanup Pro

افزونه asset cleanup pro یکی از افزونه‌های فوق‌العاده کاربردی و قدرت وردپرس است که سرعت فوق‌العاده‌ای را به سایت شما می‌بخشد. این افزونه خاص ویژگی‌های ده‌‌ها افزونه را در خود جای داده است‌. امکانات این افزونه سبب می‌شود تا سرعت واقعی را در سایت خود تجربه کنید. به کار بردن این افزونه به عنوان یک روش پیشرفته و حرفه‌ای‌ در جهت حذف کردن کدهای CSS اضافی در وردپرس شناخته می‌شود.

چگونه فایل‌های CSS اضافی را شناسایی کنیم؟

همان‌طور که در ابتدای متن ذکر کردیم، برای اینکه از وجود CSS های اضافی و بدون استفاده آگاه شوید و از کدهایی که به سایت شما آسیب می‌زنند اطلاع پیدا کنید، باید از ابزار Google Pagespeed Insights استفاده کنید. در واقع Google Pagespeed Insights به شما از تأثیر کدهای CSS بر روی سایت مذکور خبر می‌دهد.

از سوی دیگر می‌توان چنین گفت که این ابزار رایج‌ترین و مهم‌ترین ابزار اندازه‌ گیری سرعت وبسایت تلقی می‌شود که در سراسر جهان مورد استفاده افراد قرار می‌گیرد.

جمع بندی

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

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