ينجذب الناس بشكل طبيعي إلى المظهر المرئي لـ موقع انترنت من WordPress ، بقدر ما ينجذبون إلى المحتوى المكتوب الذي تشاركه. في الواقع ، وفقًا لـ جيف Bullas "، تحتوي المقالات التي تحتوي على صور على 94٪ من المشاهدات أكثر من المقالات التي لا تحتوي على صور.

هذه زيادة كبيرة في مشاهدات الصفحة إذا سألتني.

وما هو السبب بالضبط؟

ما عليك سوى إضافة بعض الصور عالية الجودة وذات الصلة بالمقالة عبر المحتوى الخاص بك.

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

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

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

ولكن مع تقدم التكنولوجيا ، كما هو الحال دائمًا ، بدأت أيقونات الصور التقليدية في التعثر كحل للصور لمواقع الويب. هذا لأنها تجعل الصفحات أثقل بكثير وبالتالي أبطأ ، ولكن قبل كل شيء لم يكن هذا الحل مناسبًا دائمًا للهواتف المحمولة.

ولكن هناك حل: خطوط الرموز.

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

لذا دعنا نبدأ.

ما هي خطوط الأيقونات ولماذا يجب عليك استخدامها؟

خطوط الرموز هي بالضبط ما يقولونه: الخطوط مدمجة بالكامل في الرموز. في الواقع ، فإن خطوط الرموز أو " جعل أيقونة "يمكن وصفه بالخط الذي يعرض الأحرف أو الرموز فقط ، وليس الأحرف والأرقام التي ترتبط بها الخطوط والنص التقليدي.

تُستخدم خطوط الرموز لعرض الرموز شائعة الاستخدام على موقعك. على سبيل المثال ، تعد أزرار الوسائط الاجتماعية وعربة التسوق وأزرار التنزيل وأزرار التنقل أمثلة على الرموز التي تعرض صورًا تفاعلية صغيرة على موقعك.

لماذا استخدام خطوط الرموز؟

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

فيما يلي نظرة على بعض الأسباب المقنعة التي تجعل خطوط الرموز هي الخيار الأفضل:

• قابلة للتوسيع بسهولة دون فقدان الجودة
• قابل للتخصيص من حيث اللون والظل
• 100٪ استجابة
• يعمل مثل الصور المتحركة في CSS ، لكنه يتصرف مثل النص
• سهل الاستخدام
• المتصفحات المتوافقة
• تخصيص العتامة والدوران والمزيد
• حجم ملف أصغر
• لا تضحية السرعة أو أداء موقع الويب الخاص بك

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

تثبيت رموز الخطوط على موقعك باستخدام مكون إضافي

Better Font Awesome هو ملف وورد البرنامج المساعد برنامج مجاني يتيح لك دمج أحدث إصدار من Font Awesome تلقائيًا في مشروع WordPress الخاص بك. علاوة على ذلك ، فإنه يأتي مع CSS ، والأكواد القصيرة ومولد الرمز القصير TinyMCE.

يحتوي هذا البرنامج المساعد على مجموعة متنوعة من الميزات المفيدة لأصحاب المواقع:

• التحديث الروتيني لأحدث إصدار
• القدرة على التبديل بين إصدارات Font Awesome دون تغيير الرموز القصيرة
• دعم الإضافات الخطية الشائعة الأخرى بما في ذلك الرموز القصيرة الخاصة بها
• صادر عن jsDelivr CDN

خطوة 1: تثبيت وتفعيل أفضل خط رائع

للبدء ، قم بتثبيت وتنشيط المكون الإضافي "Better Font Awesome" من خلال لوحة معلومات WordPress تمامًا كما تفعل مع أي مكون إضافي آخر.

أولاً ، انتقل إلى " الإضافات> إضافة جديد وابحث عن " الخط أفضل ممتاز ".

ثم اختر " تثبيت الآن »وانقر على« نشط ".

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

الخطوة 2: تكوين إعدادات البرنامج المساعد

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

هنا يمكنك القيام بما يلي:

• التجريبية: حدد إصدار "Better Font Awesome" الذي تريد استخدامه.
• استخدام Minified CSS: حدد هذا المربع إذا كنت تريد استخدام الإصدار المصغر من CSS.
• احذف خط الطباعة الموجود: حدد هذا المربع لمحاولة إزالة المقتطفات المشفرة والأكواد القصيرة المضافة بواسطة المكونات الإضافية والسمات الأخرى.
• إخفاء مراجعات المشرف: إخفاء تحذيرات المسؤول الافتراضية التي تظهر عند حدوث أخطاء API و CDN.

بالإضافة إلى الحد الأدنى من خيارات Better Font Awesome ، يوجد قسم صغير "استخدام" يشرح كيفية إضافة الرموز إلى موقعك.

الخطوة 3: إضافة أيقونات إلى موقع الويب الخاص بك

هناك ثلاث طرق سهلة لإضافة الرموز إلى موقع الويب الخاص بك باستخدام "Better Font Awesome" - عبر الرمز القصير أو HTML أو TinyMCE.

# 1. إضافة الرموز باستخدام الرمز القصير

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

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

بعد النقر على الأيقونة التي تريد إضافتها ، سترى شاشة تعرض صورة الأيقونة بأحجامها المختلفة وكتلة صغيرة من الكود:

ما عليك سوى نسخ كتلة الشفرة ولصقها في أي مكان على موقع الويب الخاص بك باستخدام علامة التبويب "محرر النص". هذا ما سيبدو عليه المحرر على موقع الويب الخاص بك:

في النهاية ، إليك ما هو ملف آخر سيرى عند وصولهم إلى موقعك:

# 2. إضافة رموز باستخدام كود HTML

كما رأينا في القسم " الاستعمال لديك خيار استخدام كود HTML لإدراج الرموز على موقع الويب الخاص بك. ومع ذلك ، يأخذ مطورو المكونات الإضافية في الحسبان أن استخدام HTML يتطلب بادئات خاصة بالإصدار.

لهذا السبب يوصون باستخدام الرموز القصيرة بدلاً من ذلك. ومع ذلك ، إذا كنت تريد استخدام كود HTML ، فإن Font Awesome لديه معلومات مفيدة هنا.

# 3. إضافة الرموز باستخدام TinyMCE

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

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

إذا كنت ترغب في معرفة كيفية تخصيص الرموز على موقعك ، فراجع أمثلة " الخط رائع ".