تحسين تحميل CSS / JAVASCRIPT لإضافة WordPress Tooltips، إصدار إضافة WordPress Tooltips Pro Plus 36.5.8

مرحبًا، مستخدمي إضافة WordPress tooltip، نأمل أن تصلكم هذه الرسالة وأن تكونوا تقضون أيامًا رائعة مع أحبائكم. مؤخرًا، تلقينا طلبًا مثيرًا للميزات من مطور WordPress موهوب، وقد تأثرنا حقًا بالأفكار الرائعة التي اقترحها. يعمل فريق تطوير الإضافة لدينا بجد على تنفيذ هذه الطلبات في أسرع وقت ممكن.

مرحبًا، فريق Tooltips،
شكرًا لكم على الرد السريع بشأن تحديث 35.5.8 والدعم السابق. أستخدم إضافة Tooltips Pro Plus مع سمة Salient (و WPBakery) على موقعي.

المشكلة: يتم تحميل Tooltips في الواجهة الأمامية مع CSS الخاصة بـ Bootstrap/Awesome/reset + admin.css، مما يتسبب في تغطية شبكة Salient المتجاوبة، بالإضافة إلى حدوث تعارض مع مجموعة FA.
تعارض مع Font Awesome (تستخدم السمة/المجموعة FA6 والملحق يقوم بإدخال إصدار مختلف من FA، مما يتسبب في ظهور رموز التواصل كصناديق فارغة أو رموز غير صحيحة).

الحل A:

قمنا بتعديل إضافة WordPress Tooltip على النحو التالي:

  1. قم بمسح كل ملف نمط تم تحميله/إنهائه للتحقق مما إذا كان يحتوي على سلسلة bootstrap/font-awesome.
  2. إذا كانت السمة أو الإضافات الأخرى قد قامت بالفعل بتحميلها، يتم إنهاء العملية على الفور حتى لا تقوم إضافة WordPress Tooltip بتحميل حزمة bootstrap/font-awesome.
  3. خلاف ذلك، ستقوم إضافة WordPress Tooltip بتحميل حزمة bootstrap/font-awesome الخاصة بها.

الكود لدينا على النحو التالي:

$enableBootstrapCSS = get_option('enableBootstrapCSS');
if ($enableBootstrapCSS == 'NO')
{

}
else
{

global $wp_styles;
$bs_handles = array(
'bootstrap',
'bootstrap-css',
'bootstrap-style',
'bootstrap5',
'bootstrap-5',
'bootstrap4',
'bootstrap-4',
'tb-bootstrap',
'theme-bootstrap',
'font-enableBootstrapCSS',
'enableBootstrapCSS',
);
foreach ( $bs_handles as $hdl ) {
if ( wp_style_is( $hdl, 'registered' ) || wp_style_is( $hdl, 'done' ) ) {
return;
}
}

$needles = array( 'bootstrap', 'bootstrap.min.css' );
foreach ( array_merge( $wp_styles->done, $wp_styles->queue ) as $done_or_queued ) {
$obj = $wp_styles->registered[ $done_or_queued ] ?? false;
if ( ! $obj ) {
continue;
}
$src = $obj->src ?? "";
foreach ( $needles as $n ) {
if ( stripos( $src, $n ) !== false ) {
return;
}
}
}

wp_enqueue_script('bootstrap', plugin_dir_url( __FILE__ ) . 'js/bootstrap/bootstrap.min.js', array('jquery'), '5.0', true);
}

طلب ميزة التالي:

مشكلة خروج Tooltips خارج الشاشة على الأجهزة المحمولة (تغطي صندوق Tooltips المحتوى الموجود على الحواف).

طرق الاستقرار: A) أوقفت تحميل نمط الإضافات التي لا ينبغي تحميلها في الواجهة الأمامية.
أزلت/سجلت فقط موارد Tooltips التي تسببت في التعارض (admin.css، skin ionRangeSlider، bootstrap/awesome/reset). الهدف الأدنى هو:

الحل B:

قمنا بمراجعة كود إضافة WordPress Tooltip بدقة. كانت النسخة السابقة تقوم بتحميل admin.css و skin ionRangeSlider في منطقة الإدارة فقط، مما يمنع تحميلها في الواجهة الأمامية. الكود ينظم كالتالي:

add_action('admin_head', 'tooltips_pro_admin_css');

add_action('admin_head', 'tooltips_admin_rangeslider_css_js');

طلب ميزة التالي:
B) تحميل FA6 مرة واحدة فقط (إزالة تكرار الواجهة الأمامية).
هذا الحل حل مشكلات الرموز (الإصدارات القديمة من الفئة fa fa-* تتضمن v4-shims).

الحل C:

تم حل هذه المشكلة في الحل A.

طلب ميزة:
سيكون من الرائع تنفيذ هذا في الإضافة الخاصة بك.

عزل الموارد/الإعدادات:

  • عدم تحميل CSS الإدارة في الواجهة الأمامية (is_admin()).
    تم الانتهاء.
  • جعل Bootstrap/Font Awesome خيارًا (مع عدم تفعيله بشكل افتراضي). تقديم 3 خيارات في الإعدادات:

    أ) عدم تحميل أي مجموعة من الرموز (استخدام مجموعة السمة)،
    ب) تحميل FA6 (core/brands/solid)،
    ج) تحميل فقط legacies shim لأصدار fa fa-.
    تم الانتهاء. لا تزال تستخدم FA6.5، وإضافة WordPress Tooltip تستخدم FA6.4.

  • تحميل نمط ionRangeSlider في الواجهة الأمامية فقط عندما لا تظهر الشريط المنزلقي.
    تم الانتهاء.
  • أسماء النمط نطاق خاص وفردي
    قم بإضافة جذر فريد لجميع المحددات في الإضافة (على سبيل المثال: .tooltips-pro …) والتجنب من استخدام المحددات العامة مثل .row، .col، .btn، i، .icon، strong.
    تم الانتهاء. لا يمكننا استخدام المحددات العامة مثل .row، .col، .btn، i، .icon، strong على نطاق عالمي.
  • إذا كان من الضروري استخدام أنماط مشابهة لـ bootstrap، قم بتقييد ذلك: .tooltips-pro .btn { … } بدلاً من .btn { … }
    تم الانتهاء.
  • تحميل فقط عند الحاجة
    قم بإضافة الموارد في الواجهة الأمامية فقط عندما تكون Tooltips موجودة بالفعل على الصفحة (التحقق من الشفرات القصيرة/المحتوى أو استخدام علامة خادم).

بما أننا نقدم دعم لميزات Tooltips ذات الصلة (Tooltips لعنصر قائمة، واستخدام نص بديل للصورة كـ Tooltips، وTooltips لمجال نموذج الاتصال، وما إلى ذلك)، حتى الآن لم يكن من السهل إيجاد حل لهذا الطلب. نعتذر عن ذلك.

التوافق مع Font Awesome:
إذا كنت توفر Font Awesome، فيرجى استخدام FA6 وتوثيقه؛ تجنب إدخال الإصدارات القديمة من FA مع FA6 لتجنب مشاكل عدم تطابق الرموز. تعتبر استخدام SVG مضمّن للرموز واجهة المستخدم وسيلة جيدة للتخلص من الاعتماد على FA تمامًا.
تم الانتهاء. لازالت تستخدم FA6.5، وإضافة WordPress Tooltip تستخدم FA6.4.

شكرًا لك على الاقتراح الرائع، وإذا كان لديك المزيد من طلبات الميزات، فلا تتردد في الاتصال بنا. نحن متحمسون جدًا لتنفيذ ذلك من أجلكم

شكرًا لكم. نتمنى لكم يومًا سعيدًا مع عائلتكم

تحياتي،

فريق دعم إضافة WordPress Tooltip

Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*