مدونة عربية تهتم بكل ما يخص التعليم , مذكرات دراسية , كتب مدرسية

Full Width - True/False

آخر الأخبار

Post Top Ad

Your Ad Spot

الأحد، 15 نوفمبر 2020

كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في WordPress

كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في WordPress


عادةً ما يهتم أصحاب ومطورى المواقع بتحسين سرعة تحميل موقع الويب. واحدة من أكثر الأساليب فعالية للقيام بذلك هي إزالة ملفات CSS و Javascript غير المستخدمة. هذا التنفيذ بسيط للغاية ، لذا دعونا نرى كيفية تنفيذه.
جدول المحتويات إخفاء

    1. تحليل والبحث عن ملفات CSS / JavaScript غير المستخدمة
    2. إزالة ملفات CSS / JS غير المستخدمة
        2.1. الطريقة الأولى: استخدم البرنامج المساعد لإزالة ملفات CSS / JS غير المستخدمة
        2.2. الطريقة الثانية: إزالة ملفات CSS / JS يدويًا عن طريق إنشاء مكون إضافي جديد
    3. الكلمات الأخيرة

تحليل والبحث عن ملفات CSS / JavaScript غير المستخدمة

قبل إزالة ملفات CSS / JavaScript غير المستخدمة ، يجب علينا فحصها وتحليلها بإيجاز. الطريقة الأكثر ملاءمة وسهولة للقيام بذلك هي استخدام Coverage Tab في Chrome DevTools.

لفتح Chrome DevTools ، اضغط على Ctrl + Shift + I أو انقر فوق زر الماوس الأيمن واختر فحص. بعد ذلك ، انقر فوق رمز الإعدادات> المزيد من الأدوات> التغطية.

 press Ctrl + Shift + I or click the right mouse button and choose Inspect. Next, click settings icon > More tools > Coverage.

How to remove unused CSS and JavaScript files in WordPress

افتح Chrome Devtools للعثور على ملفات CSS / JavaScript غير المستخدمة.
بعد ذلك ، انقر فوق الزر "إعادة تحميل" (رمز سهم الدائرة).

انقر على زر إعادة التحميل لرؤية ملفات CSS / JS غير المستخدمة.

سيفحص Chrome موقع الويب الخاص بك ويصدر تقريرًا على النحو التالي:

How to remove unused CSS and JavaScript files in WordPress

سيقوم Chrome بتحليل موقع الويب الخاص بك للعثور على ملفات CSS / Javascript غير المستخدمة

ركز على قسم تصور الاستخدام ومعدل الارتباط بين الكود المستخدم وغير المستخدم: اللون الأحمر يعني عدد البايت غير المستخدمة واللون الأزرق يعني عدد البايت المستخدمة.

يمكنك النقر على عنوان URL لمعرفة الرمز الذي لا يتم استخدامه بالضبط. يتم تمييز الكود غير المستخدم باللون الأحمر.

يتم تمييز الكود غير المستخدم باللون الأحمر.

How to remove unused CSS and JavaScript files in WordPress

إزالة ملفات CSS / JS غير المستخدمة

في هذه المقالة ، أقترح طريقتين لإزالة ملفات CSS أو JS غير المستخدمة. يستخدمون البرنامج المساعد والإزالة اليدوية.
الطريقة الأولى: استخدم البرنامج المساعد لإزالة ملفات CSS / JS غير المستخدمة

أوصيك باستخدام Asset CleanUp. هذا البرنامج المساعد لديه نسخة مجانية على wordpress.org.
 

How to remove unused CSS and JavaScript files in WordPress

 تنظيف الأصول: معزز سرعة الصفحة

المؤلف (المؤلفون): غابرييل ليفان

الإصدار الحالي: 1.3.7.1

تاريخ التحديث الأخير: 27 أكتوبر 2020

wp-asset-clean-up.1.3.7.1.zip
98٪
التقييمات
100،000+
التثبيتات
WP 4.5+
يستوجب

هذا البرنامج المساعد سهل الاستخدام للغاية. بعد تثبيته وتنشيطه ، انتقل إلى Asset CleanUp> CSS / JS Manager للتحقق من الصفحات والعناصر الموجودة على موقع الويب الخاص بك عن طريق اختيار علامات التبويب المقابلة.

في هذا المثال أدناه ، اخترت علامة التبويب "الصفحة الرئيسية" للتحقق من الصفحة الرئيسية لموقع الويب الخاص بي.

تحقق من الصفحة الرئيسية لموقع الويب الخاص بك للعثور على الملفات غير المستخدمة.

انقر فوق الزر Front Page أو Sample Page في منطقة المحتوى من علامة التبويب الصفحة الرئيسية. بعد ذلك ، انتظر المكون الإضافي لبضع ثوانٍ لتحميل المعلومات.

بعد ذلك ، سترى قائمة بملفات CSS و JS التي ستقوم صفحتك الرئيسية بتحميلها. يتم عرض العدد الإجمالي لهذه الملفات في قسم إجمالي الملفات المدرجة في قائمة الانتظار. يتم تصنيف هذه الملفات حسب المجموعات لذلك من السهل جدًا رؤيتها.

استخدم البرنامج المساعد لإزالة ملفات CSS / JS غير المستخدمة

يمكنك التوسيع لرؤية المعلومات التفصيلية لكل ملف أو مجموعة ملفات ثم اختيار Unload في هذه الصفحة لإيقاف تحميل كل ملف.

لقد انتهيت بالفعل من إزالة ملفات CSS / JS غير المستخدمة باستخدام المكون الإضافي. في حال لم تكن مهتمًا بهذة الطريقة ، يمكنك استخدام الطريقة الاخرى.


الطريقة الثانية: إزالة ملفات CSS / JS يدويًا عن طريق إنشاء مكون إضافي جديد

نحتاج إلى استخدام الوظائف التالية:

    wp_deregister_script ($ handle): قم بإزالة البرامج النصية المسجلة.
    wp_dequeue_script ($ handle): أزِل البرامج النصية التي أدرجتها في قائمة الانتظار من قبل.
    wp_deregister_style ($ handle): قم بإزالة ورقة الأنماط المسجلة.
    wp_dequeue_style ($ handle): أزل ورقة الأنماط التي أدرجتها في قائمة الانتظار من قبل.

بالإضافة إلى ذلك ، قد تحتاج إلى العلامات الشرطية لـ WordPress لإزالة ملفات CSS / JS غير المستخدمة في صفحة أو منشور معين. سيساعدك هذا على التحكم بشكل استباقي في كيفية تحميل ملفات CSS / JS.

الآن ، دعونا ننشئ مكونًا إضافيًا لإزالة ملفات CSS / JS غير المستخدمة!

انتقل إلى wp-content> plugins ، وأنشئ مجلدًا جديدًا باسم remove-resources الذي يتضمن ملف .php باسم remove-resources.php بالمحتوى التالي:

قم بإزالة ملفات CSS / Javascript يدويًا عن طريق إنشاء مكون إضافي جديد


<?php
/*
 * Plugin Name: Remove Resources
 * Version: 1
 * Description: remove unused CSS JS files
 * Author: elightup
*/

لإزالة ملفات CSS / JS غير المستخدمة ، نستخدم وظيفة __return_false () أو __return_empty_array (). أيضًا ، يمكنك استخدام وظيفة wp_dequeue_script لإزالة البرامج النصية.

على سبيل المثال ، قم بإزالة الأنماط والنصوص من Jetpacks و BBPress عن طريق إضافة الكود أدناه إلى ملف remove-resources.php:


// Remove styles of plugin
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
add_filter( 'bbp_default_styles', '__return_empty_array' );

// Remove bbPress scripts on non-bbPress pages
add_filter( 'bbp_default_scripts', function ( $scripts )
{
return is_bbpress() ? $scripts : [ ];
} );

// Jetpack scripts
add_action( 'wp_enqueue_scripts', function ()
{
wp_dequeue_script( 'devicepx' );
}, 20 );


أخيرًا ، احفظ ملف remove-resources.php وقم بتنشيط المكون الإضافي الذي تم إنشاؤه لجعله يعمل.

قم بإنشاء مكون إضافي لإزالة ملفات CSS / Javascript

انتهى كل شيء الآن!
الكلمات الأخيرة

لذلك من خلال هاتين الطريقتين ، لديك طريقة أخرى لتحسين سرعة تحميل موقع الويب الخاص بك. بالإضافة إلى ذلك ، يجب عليك أيضًا إزالة البرامج النصية والأنماط غير المستخدمة في المكونات الإضافية. إذا كنت تستخدم Beaver Builder ، فيمكن أن تساعدك هذه المشاركة في إزالة هذه النصوص البرمجية غير الضرورية.

هل تجدها مفيدة لك؟ إذا كان لديك أي أسئلة، وترك التعليق. ولا تنس متابعة مقالاتنا القادمة للحصول على المزيد من التقنيات المفيدة في WordPress.

 

انتهى المقال


    تسريع موقع الويب الخاص بك مع Jetpack
    كيفية تسريع WordPress باستخدام Redis Caching
    تحسين الصور في WordPress: دليل المبتدئين ومراجعة المكونات الإضافية
    كيفية تكوين البرنامج المساعد WP Rocket لزيادة السرعة
    كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في WordPress

لديك صعوبة في الحقول المخصصة

    تسريع موقع الويب الخاص بك مع Jetpack
    كيفية تسريع WordPress باستخدام Redis Caching
    تحسين الصور في WordPress: دليل المبتدئين ومراجعة المكونات الإضافية
    كيفية تكوين البرنامج المساعد WP Rocket لزيادة السرعة
    كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في WordPress

شارك هذا:

    انقر للمشاركة على Facebook (يفتح في نافذة جديدة) انقر للمشاركة على Twitter (يفتح في نافذة جديدة) انقر للمشاركة على Reddit (يفتح في نافذة جديدة) انقر للمشاركة على LinkedIn (يفتح في نافذة جديدة)

قد يعجبك ايضا
مراجعة أفضل 5+ Cache Plugin لتسريع مراجعة سرعة موقع الويب الخاص بك أفضل 5+ Cache Plugin لتسريع سرعة موقع الويب الخاص بك
تحديث كود JavaScript في WordPress. تحديث JavaScript Code في WordPress
تسريع موقع الويب الخاص بك مع Jetpack تسريع موقع الويب الخاص بك مع Jetpack
اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *

تعليق

اسم *

البريد الإلكتروني *

موقع الكتروني

ابلغني بالتعليقات المتوالية عن طريق البريد الالكتروني.

يخطر لي وظائف جديدة عن طريق البريد الإلكتروني.


المشاركات الاخيرة

    تقنيات PHP لكتابة كود نظيف وقابل للقراءة
    قم بإنشاء واستيراد محفظة مشروع باستخدام Elementor و Meta Box و WP All Import
    قم بإنشاء موقع ويب OTA مثل Booking.com باستخدام Meta Box Plugin - P3: إنشاء مرشحات لصفحات الفنادق الفردية
    المراجعة التفصيلية لـ Cloudways - استضافة WordPress عالية الأداء
    قم بإنشاء موقع ويب OTA مثل Booking.com باستخدام Meta Box Plugin - P2: إنشاء عوامل تصفية على صفحة الأرشيف

منشورات شائعة

    كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في WordPress
    كيفية إنشاء مربعات وصفية مخصصة وحقول مخصصة في WordPress؟
    كيفية تصفية المنشورات حسب الحقول المخصصة والتصنيفات المخصصة في صفحات الأرشيف
    طريقة سهلة لإضافة حقول مخصصة في ووردبريس بدون ملحقات
    كيفية إنشاء صفحة ملف تعريف مستخدم مخصص في WordPress في الواجهة الأمامية
    أسرع طريقة لتحميل خطوط جوجل في ووردبريس!
    أضف الحقول المخصصة لـ WooCommerce باستخدام Meta Box
    كيفية إنشاء صفحة افتراضية في WordPress
    كيفية تعطيل Gutenberg بدون استخدام المكونات الإضافية
    احصل على منشورات حسب الحقول المخصصة في WordPress - الجزء الأول

حول

أنشأنا Meta Box في عام 2010 لمساعدة المطورين على إنشاء مربعات تعريف مخصصة بشكل أسرع وأسهل. الآن ، Meta Box ليست مكتبة ذات واجهة برمجة تطبيقات قوية للحقول المخصصة فحسب ، بل هي أيضًا إطار عمل يساعدك في التحكم في بياناتك بالطريقة التي تريدها.
روابط سريعة

ليست هناك تعليقات:

إرسال تعليق

Post Top Ad

Your Ad Spot