مرحبًا، أعزائي مستخدمي إضافة WordPress Tooltip، آمل أن تكونوا بخير وأن تقضوا أيامًا رائعة مع عائلتكم.

لقد استلمنا تذكرة من مستخدم رائع لإضافة WordPress Tooltip الذي أبلغ عن تعارض في CSS مع السمة الخاصة بهم في إضافة WordPress Tooltips. قام مطور WordPress لدينا بالتحقق من السمة ووجد أنها تتعارض مع Bootstrap وFont Awesome، اللذين يُستخدمان في التولتيب، من بين أمور أخرى. لحل المشكلة لمستخدم التولتيب القيم لدينا، أطلق مطور WordPress Tooltips لدينا إصدارًا جديدًا: WordPress Tooltips Pro Plus 35.8.8.

1: تم حل التعارض بين السمة وإطار عمل Bootstrap المضمن في WordPress tooltip:

مرحبًا فريق الدعم،
أولاً وقبل كل شيء: شكرًا جزيلًا مرة أخرى على سرعة الاستجابة و العمل الليلي المتأخر.
مع 35.8.8، كل شيء تقريبًا يعمل بشكل جيد لدي:

صفحة طلبات WooCommerce → تحذيرات PHP اختفت ✅

Salient → لوحة تحكم الطباعة → لم تعد معطلة ✅

أيقونات التواصل الاجتماعي في الهيدر/التذييل → تبدو جيدة ✅

هناك تراجع واحد فقط ظهر فور تحديثي إلى 35.8.8:

على الصفحة الرئيسية، تخطيط الهيدر/البطل المحمول معطل (كتلة القائمة/الهيدر تتحرك والمسافات غير صحيحة).

لقد تم إصلاح ذلك بالفعل في الإصدار السابق، ولكن مع 35.8.8 عاد الوضع كما كان.

مرة أخرى، شكرًا جزيلاً على عملكم الدؤوب والاستجابات السريعة - أنا حقًا أقدر مرونتكم ومساعدتكم!

مع خالص التحيات،

قمنا بحل المشكلة لمستخدم التولتيب وردينا:

مرحبًا

آمل أن تكون بخير وأن تقضي أيامًا سعيدة مع عائلتك 

نعتذر عن المشكلة، قمنا بفحص أكواد السمة والإضافة الخاصة بنا، كما اختبرنا هذه المشكلة عبر العديد من الدقة واكتشفنا في النهاية أنها ناجمة عن تعارض بين Bootstrap والسمة. الحل بسيط، يرجى فتح لوحة إعدادات التولتيب العامة، وتعطيل الخيار: "تمكين / تعطيل CSS لـ Bootstrap لتجنب تعارضات السمة؟"، من جانبنا، وجدنا أن كل شيء يعمل بشكل جيد 

هل يمكنك إجراء اختبار وإعطائنا ملاحظاتك؟ إذا كانت هناك أي مشكلة، لا تتردد في إخبارنا، سنقوم بحلها لك في أسرع وقت ممكن 

شكرًا، أتمنى لك يومًا مباركًا مع أحبائك 

مع أطيب التحيات،

دعم WordPress Tooltips

2: صفحة طلبات WooCommerce: لا تزال تظهر عدة تحذيرات PHP تحت قسم تفاصيل الطلب (متعلقة بكون post_type فارغًا):

تمت، لقد أعادنا كتابة أكوادنا مثل هذا لحل المشكلة:

if (isset($post->post_type)) {
    if ($post->post_type == ‘tooltips’) {
        add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Show excerpt in tooltip pop up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null);
    }
}

الآن يعمل بشكل جيد

3: لوحة Typography في Salient: واجهة الإدارة تحت Salient → Typography تصبح معطلة وغير متوازنة عندما تكون إضافة WordPress Tooltips Pro نشطة.

تمت، قمنا بمراجعة كود السمة الأساسية ووجدنا أنه يتضمن فئة .tooltip، والتي تتعارض مع فئة .tooltips في ملف admin.css الخاص بنا. لقد قمنا بإعادة كتابة إضافة WordPress Tooltips الخاصة بنا بهذا الشكل:

تحميل ملف admin.css لإضافة WordPress Tooltips في منطقة wp-admin فقط عندما تنتمي الشاشة الحالية إلى الإضافة.

الأكواد:

if (isset($_GET[‘post_type’])) {
    $tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
    if ($tooltips_admin_post_type_check === ‘tooltips’) {
        wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
    }
}

الآن يعمل بشكل جيد

4: أيقونات التواصل الاجتماعي: لا تزال أيقونات Font Awesome في القائمة والتذييل (روابط اجتماعية) تعرض بشكل غير صحيح أو كصناديق فارغة.

تمت، في سمة Salient، وجدنا أنهم يقومون بتحميل سكريبتاتهم متأخرًا مثل هذا:

4: أيقونات التواصل الاجتماعي: لا تزال أيقونات Font Awesome في القائمة والتذييل (روابط التواصل الاجتماعي) تعرض بشكل غير صحيح أو كصناديق فارغة.

تم، في سمة سالينت، وجدنا أنها تحمل السكربتات الخاصة بها في وقت متأخر مثل هذا:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

قمنا بإعادة كتابة مكوننا الإضافي لتحميل Font Awesome متأخراً لتجنب التعارضات مع سمات أو مكونات إضافية أخرى:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

لذا، ستتم معالجة جميع الأكواد في سمة سالينت أولاً، ثم أكوادنا ستقوم بتحميل Font Awesome في النهاية.

لذلك، سيتم تنفيذ جميع الأكواد في سمة سالينت بأولوية، وسيتصل مكوننا الإضافي أخيراً بـ Font Awesome لتحميله.

إنه يعمل بشكل جيد الآن 

كانت سمة المستخدم تستخدم Font Awesome 6.5، بينما كانت أدوات Font Awesome Tooltips الخاصة بنا تستخدم أيضاً Font Awesome 6.4 في WordPress Tooltips Pro Plus 35.8.8. قمنا بترقية أدوات Font Awesome لإستخدام النسخة الأحدث: Font Awesome 7.1. ما هو Font Awesome؟

Font Awesome هو مجموعة أيقونات وأداة خط ويب شهيرة توفر مجموعة كبيرة من الأيقونات المتجهة القابلة للتغيير والشعارات الاجتماعية. يسمح للمطورين بسهولة دمج أيقونات عالية الجودة في مواقعهم وتطبيقاتهم دون الحاجة إلى ملفات صور. الميزات الرئيسية لـ Font Awesome:

• أيقونات قابلة للتغيير: كونها قائمة على المتجهات، يمكن تكبير أيقونات Font Awesome إلى أي حجم دون فقدان الجودة، مما يجعلها مثالية للتصاميم التفاعلية.
• التوافق عبر المتصفحات: يعمل Font Awesome بسلاسة عبر جميع المتصفحات الحديثة.
• سهولة الدمج: يمكن للمطورين دمج Font Awesome بسهولة في مشاريعهم باستخدام وسم <link> بسيط أو عن طريق تثبيته عبر مديري الحزم مثل npm أو Yarn.
• قابل للتخصيص: يمكن تصميم الأيقونات باستخدام CSS، مما يسمح بتغييرات في اللون والحجم والدوران والمزيد ليتناسب مع متطلبات تصميم الموقع.
• الوصول: يمكن جعل أيقونات Font Awesome متاحة من خلال سمات HTML الصحيحة، مما يضمن إمكانية استخدامها بواسطة قارئات الشاشة.
• تحديثات منتظمة: يتم تحديث الأداة بشكل متكرر مع أيقونات جديدة، مما يعزز مكتبتها مع مرور الوقت.

لماذا يحب المستخدمون Font Awesome:

• تنوع واسع: يقدم Font Awesome آلاف الأيقونات التي تغطي العديد من الفئات، مما يوفر للمستخدمين خيارات واسعة للعثور على الأيقونة المثالية لأي تطبيق.
• البساطة: الصياغة المستخدمة في Font Awesome مباشرة، مما يسهل على المطورين من جميع مستويات المهارة التنفيذ.
• الأداء: كمجموعة أيقونات قائمة على الخطوط، عادةً ما يتم تحميل Font Awesome بشكل أسرع من الأيقونات التقليدية، مما يساهم في تحسين أداء الموقع.
• دعم المجتمع: مع وجود مجتمع كبير من المستخدمين ووثائق شاملة، يمكن للمطورين العثور بسهولة على الدعم، والدروس التعليمية، والأمثلة.
• أسلوب متسق: تحتوي جميع الأيقونات على أسلوب موحد، مما يساعد في الحفاظ على الاتساق البصري عبر التطبيقات الويب.
• خيارات مجانية ومدفوعة: يقدم Font Awesome نسخ مجانية ومدفوعة، مما يسمح للمستخدمين بالاختيار بناءً على احتياجاتهم وميزانيتهم.

الخاتمة

[ ttfa tooltip_id="13" set="fas" icon="fa-question-circle" size="2x" color="#9ee2c6" ]

هذا الرمز سيمكنك من عرض تلميح في منشورك.

يمكن العثور على المزيد من رموز القصاصة لتلميحات ووردبريس في وثيقة الرموز التفصيلية لدينا؛ tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/

الخطوة 2: معاينة التلميح الخاص بك

بمجرد إضافة رمز القصاصة، انتقل إلى الجزء الأمامي من منشور ووردبريس الخاص بك. سترى أيقونة دائرة سؤال جميلة، والتي تبدو هكذا:

أيقونة تلميح فونت أوسم

عندما يمر المستخدمون فوق دائرة السؤال، ستظهر نافذة تلميح تحتوي على مزيد من التفاصيل:

نافذة تلميح فونت أوسم

الخطوة 3: تخصيص التلميح الخاص بك

لديك المرونة لتخصيص حجم ولون أيقونات فونت أوسم الخاصة بك. على سبيل المثال، إذا كنت ترغب في جعل أيقونة دائرة السؤال أكبر، ما عليك سوى تغيير معلمة الحجم من 2x إلى 3x، 4x، أو حتى أكبر! إليك مثال: نافذة تلميح فونت أوسم في الواجهة الأمامية

لتغيير اللون، عدل معلمة اللون إلى أي قيمة سداسية تفضلها، مثل #cccccc أو #eeeeee.

الخطوة 4: اختر نمط الأيقونة الخاص بك

يمكنك أيضًا تعديل نمط تلميح فونت أوسم الخاص بك عن طريق تغيير معلمة المجموعة:

• fas — أيقونات صلبة
• far — أيقونات عادية
• fab — أيقونات العلامة التجارية

ملخص سريع لما تحتاج لمعرفته:

• tooltip_id: هذا هو معرف التلميح الذي أنشأته في محرر تلميحات ووردبريس.
• set: اختر بين أيقونات صلبة (fas)، عادية (far)، أو علامات تجارية (fab).
• icon: استخدمنا أيقونة دائرة السؤال، لكن تذكر أن هناك أكثر من 1,588 أيقونة مذهلة للاختيار من بينها!
• size: لا تتردد في زيادة الحجم إلى 3x، 4x، إلخ، بناءً على تفضيل التصميم الخاص بك.
• color: خصص اللون ليتناسب مع موقعك، مثل #eeeeee.

الآن أنت مستعد لتعزيز منشورات ووردبريس الخاصة بك بتلميحات فونت أوسم الرائعة! كتابة مدونة سعيدة!