كيفية تضمين خطوط رمز WordPress على موقع الويب الخاص بك؟
نشرت: 2022-05-29أصبحت أيقونات WordPress أحد العناصر الأساسية لأي موقع ويب. أنها تساعد على جلب المزيد من التفاصيل والاستجابة لتصميم الويب.
في الأيام الأولى ، كان من السهل العثور على الرموز وتنفيذها على موقع الويب الخاص بك ، ولكن بالنسبة إلى WordPress ، كان الأمر أكثر صعوبة. أصبحت الأمور أسوأ في الوقت الحاضر بسبب أحدث أنواع شاشات العرض.
أحد الحلول البديلة الأكثر فعالية وأفضل لهذه المشكلة هو استخدام رمز الخط بدلاً من ذلك. سنناقش هذا لاحقًا في هذا المنشور.
بصرف النظر عن كل هذا ، هل لاحظت جميع أيقونات WordPress على موقع الويب الخاص بك حتى الآن؟ أحد الرموز التي ستجدها هو رمز الصفحة الرئيسية على شريط التنقل الخاص بك.
وبالمثل ، إذا كنت تريد معرفة المزيد عن أيقونات WordPress وكيف يمكنك تنفيذها بسهولة على موقع الويب الخاص بك. تحتاج إلى مواصلة قراءة هذا المنشور حتى النهاية والحصول على إجابات لجميع الأسئلة حول رموز WordPress.
دعونا نبدأ بتعريفه البسيط.
ما هي أيقونات WordPress ولماذا يجب عليك استخدامها؟
أيقونات WordPress هي مجموعة من الصور التوضيحية التي لا تحتوي على أي أرقام أو أحرف ولكن أنواع مختلفة من الرموز التي تمثل أي شيء تقريبًا. تعتبر هذه الصور التوضيحية مهمة جدًا لأي موقع ويب للحصول على تصميم ويب سريع الاستجابة.
لا تحتوي هذه الرموز على أحجام ملفات كبيرة ويمكنك إضافتها بسهولة إلى موقع الويب الخاص بك. إذا كنت ترغب في تخصيص الرموز أو إعادة تصميمها وفقًا لموقع الويب الخاص بك ، فيمكنك القيام بذلك من خلال CSS. يمكنك توسيع نطاقها دون أي قيود وفوق ذلك ، يمكنك تخزين أكبر عدد ممكن من الرموز في ملف واحد.
تعتبر الرموز القائمة على الصور ثقيلة جدًا مقارنة بالرموز المستندة إلى الخطوط ويمكن أن تقلل من أداء موقع الويب الخاص بك. وبالتالي ، من أجل أداء أفضل لموقع الويب وتحسين رموز الخطوط ، فإنها تتفوق على أيقونات الصور وهي الآن مستخدمة على نطاق واسع.
ومع ذلك ، هناك بعض اعتبارات الأداء الأخرى التي سنتحدث عنها في القسم الأخير من هذا المنشور.
ولكن في الوقت الحالي ، دعنا نرى أين يمكنك الحصول على أيقونات WordPress وطرق متعددة لاستخدامها على موقع WordPress الخاص بك.
من أين أحصل على أيقونات WordPress أو خطوط Icon؟
هناك الآلاف من خطوط أيقونات WordPress المجانية والمدفوعة المتاحة على الإنترنت. كل ما تحتاجه هو كتابة " خط رمز WordPress " على محركات البحث وستحصل على قائمة بمواقع الويب الخاصة بالأيقونات في النتيجة.
عند تثبيت WordPress ، سيكون لديك مجموعة من رموز خطوط WordPress المجانية (Dashicons) متوفرة معها. تُستخدم خطوط رمز WordPress هذه بشكل عام في مناطق إدارة WordPress.
بصرف النظر عن هذا ، هناك مصادر مجانية أخرى يمكنك بسهولة تنزيل الكثير من خطوط الرموز. ومنهم:
بعض رموز ووردبريس مصادر مجانية
- WordPress icon Font Awesome
- أيقونات المواد من جوجل
- الخط Ico
- إيكومون
ولكن ، في هذا المنشور ، سننظر في رمز WordPress Font Awesome ، نظرًا لشعبيته ، وقاعدة مستخدميه مفتوحة المصدر ومجانية وأعلى. اعتبارًا من الآن ، يوفر أكثر من 2000 خط رموز مجاني ، وإذا اخترت الإصدار المحترف ، يمكنك استكشاف المزيد (16000+ رمز) .
وفي هذا المنشور ، ستتعلم كيف يمكنك استخدام أيقونات WordPress لتصميم موقع الويب الخاص بك بطرق مختلفة. حتى تتمكن من اختيار أفضل طريقة لاستخدام الرموز على موقع الويب الخاص بك في منطقة الراحة الخاصة بك.
كيفية استخدام خطوط رمز WordPress على موقع الويب الخاص بك؟
على الرغم من وجود طرق مختلفة متاحة لإضافة خطوط الرموز إلى موقع الويب الخاص بك. لكننا نبدأ برنامجنا التعليمي بأسهل الطرق أولاً. ويمكنك اختيار الطريقة الأفضل والأسهل لنفسك.
إضافة خطوط أيقونات WordPress باستخدام البرنامج المساعد أيقونات WordPress
واحدة من أفضل الطرق وأسهلها لإضافة أيقونات WordPress إلى موقع الويب هي استخدام مكون WordPress الإضافي. هذه الطريقة مناسبة بشكل أفضل للمبتدئين الذين هم في مرحلة التعلم لتصميم موقع ويب ويجب عليهم استخدام أنواع محدودة جدًا من الرموز.
لا حاجة لإجراء تعديلات على ملفات السمات وستكون لك الحرية في استخدام الرموز في أي منطقة من موقع الويب الخاص بك. كل ما عليك فعله هو تثبيت المكون الإضافي لأيقونة Font Awesome WordPress وستكون جاهزًا للانطلاق.
لتثبيت المكون الإضافي Font Awesome ، قم بتسجيل الدخول إلى لوحة معلومات WordPress ، وانتقل إلى المكونات الإضافية> إضافة جديد ، واكتب Font Awesome في شريط البحث.
عندما ظهر المكون الإضافي ، انقر فوق الزر " تثبيت l" متبوعًا بـ " تنشيط " كما هو موضح في الصورة أعلاه. بعد التثبيت والتثبيت والتفعيل بنجاح ، سيوفر المكون الإضافي الرائع للخط دعمًا كاملاً لموضوعك المثبت ويمكنك بسهولة تعديل أو تخصيص أي صفحة أو منشور لموقع الويب الخاص بك باستخدام رموز قصيرة بسيطة مثل:
|
1 |
< i class = "fa fa-pencil" title = "Edit" > < / i > |
ما عليك سوى لصق الرمز القصير في أي مكان على الصفحة أو المنشور وهذا ما يظهر في الخلفية.
الآن ، عند نشر المنشور أو معاينته ، فإليك الشكل الذي سيبدو عليه في الواجهة الأمامية.
وبالمثل ، يمكنك إضافة العديد من أيقونات WordPress التي تريدها مباشرةً عن طريق نسخ الرمز من قوائم الرموز المجانية الرائعة لـ Font.
إضافة Dashicons أيقونات WordPress (أيقونات WordPress الافتراضية المضمنة)
يوفر WordPress أيضًا خطوط الرموز الخاصة به والمعروفة باسم Dashicons. تتوفر خطوط الرموز هذه بشكل افتراضي يستخدمها WordPress في الخلفية. ولكن لإحضاره إلى الواجهة الأمامية ، يجب أن يكون لديك اسم البرنامج النصي المتاح بالفعل في ملف WordPress.
لاستخدام Dashicons ، يمكنك إما إضافة مقتطف رمز في ملف function.php أو استخدام مكون WordPress الإضافي المسمى مقتطفات التعليمات البرمجية . لكننا نوصي بشدة بعدم المخاطرة بتحرير ملف function.php الخاص بك ولكن استخدام WordPress الإضافي بدلاً من ذلك. لأنه حتى الخطأ البسيط يمكن أن يكسر المظهر الخاص بك ويتلف موقع الويب الخاص بك بالكامل.
بعد تثبيت المكون الإضافي ، يمكنك زيارة صفحة رموز WordPress وتحديد الرمز الذي تريد عرضه على موقع الويب الخاص بك. انقر فوق رابط نسخ HTML والصق هذا الرمز في أي مكان على موقع الويب الخاص بك حيث تريد عرض الرمز.
|
1 |
< span class = "dashicons dashicons-menu-alt3" > < / span > |
دعونا نأخذ هذا الرمز كمثال ونرى كيف يعمل. افتح أي منشور ، على سبيل المثال ، منشور اختبار قمنا فيه بلصق رمز HTML الذي قمنا بنسخه مسبقًا من صفحة رموز الشرطة.
الآن عند النقر فوق زر المعاينة ، ستتمكن من رؤية الرمز كما هو موضح في الصورة أدناه:
إضافة خطوط رمز WordPress باستخدام أدوات إنشاء صفحات WordPress
تأتي غالبية الإضافات منشئ صفحات WordPress مع خطوط أيقونات ووردبريس مدمجة. بمساعدة هذا ، يمكنك بسهولة استخدام الرموز على موقع الويب الخاص بك.
العنصر
أحد أشهر أدوات إنشاء الصفحات وأكثرها استخدامًا. باستخدام Elementor ، لديك الكثير من خيارات التخصيص كما أنه يوفر مجموعة واسعة من خطوط الرموز لموقع الويب الخاص بك.
ميزة السحب والإفلات سهلة للغاية بحيث يمكنك بسهولة سحب أي رمز من القائمة وإفلاته مباشرة في المناطق المطلوبة من موقع الويب الخاص بك. لا حاجة لإضافة مقتطفات التعليمات البرمجية أو CSS المطلوبة للتخصيص.
بالإضافة إلى ذلك ، هناك أيضًا أدوات إنشاء مشهورة أخرى يمكنك استخدامها مثل Oxygen أو Beaver Builder الذي يحتوي على منشأة أيقونات داخلية.
إضافة خطوط رمز WordPress يدويًا باستخدام مقتطفات التعليمات البرمجية
الطريقة اليدوية ليست مخصصة للمبتدئين أو أولئك الذين لا يرغبون في اتباع المسار التقني أو الطويل لإضافة خطوط رمز Wordpress على موقع الويب الخاص بهم. هذه الطريقة فعالة جدًا للمطورين أو مصممي الويب لأنها توفر الكثير من خيارات المرونة والتخصيص التي لن تجدها في أي مكونات إضافية.
دعونا نستكشف جميع الطرق اليدوية المتاحة.
1. تضمين رموز الرموز التي تجلب مكتبة الرموز من خوادم Cdn الخاصة بهم
إحدى أسهل الطرق اليدوية لتضمين الرموز على موقع WordPress الخاص بك. كل ما عليك فعله هو الانتقال إلى موقع Font Awesome على الويب وتقديم عنوان بريدك الإلكتروني للحصول على كود التضمين.
تحقق من صندوق البريد الإلكتروني الخاص بك ، ستجد مقتطف الشفرة الذي تم إرساله بواسطة Font awesome. انسخ هذا الرمز وانقله إلى لوحة معلومات WordPress> محرر السمات والصقه قبل علامة </head> لملف header.php الخاص بموضوع WordPress.
أيًا كان ما قمت بتضمينه من التعليمات البرمجية التي يوفرها الخط الرائع ، فسيتم جلب المكتبة مباشرةً من خوادم Font Awesome CDN.
ملاحظة: لا شك أن هذه الطريقة تبدو سهلة للغاية ، ولكن لديها أيضًا بعض المخاوف بشأن التوافق مع المكونات الإضافية الأخرى التي قد تؤدي إلى حدوث بعض المشكلات.
لذلك ، لتجنب هذا التعارض ، سيكون من الأفضل تحميل جافا سكريبت بشكل صحيح في WordPress. يمكنك استخدام طريقة إدراج يحمل في ثناياه عوامل لذلك.
كل ما عليك فعله هو إضافة ما يلي في ملف function.php الخاص بالقالب الخاص بك أو يمكنك استخدام البرنامج المساعد codenippet .
|
1 2 3 4 5 6 7 |
function wpb_load_fa ( ) { wp_enqueue_script ( 'wpb-fa' , 'https://use.fontawesome.com/123456abc.js' , array ( ) , '1.0.0' , true ) ; } add_action ( 'wp_enqueue_scripts' , 'wpb_load_fa' ) ; |
2. استضافة الأيقونات مباشرة على موقع الويب الخاص بك
هذه الطريقة طويلة جدًا عن جميع الطرق المذكورة أعلاه وتتطلب بعض المعرفة الفنية حول التعامل مع ملفات WordPress.
ومن ثم ، يوصى بشدة بهذه الطريقة لمطوري الويب أو مصممي الويب الذين يعرفون جميع المخاطر التي ينطوي عليها الوصول إلى الملفات وتحريرها. بهذه الطريقة ، ستتمكن من استضافة أيقونات Font Awesome مباشرة على موقع الويب الخاص بك.
كل ما عليك فعله هو زيارة موقع Font Awesome الإلكتروني وتنزيل حزمة الرموز كما هو موضح في الصورة أدناه:
بعد التنزيل ، قم بفك ضغط الحزمة وقم بتوصيل استضافة WordPress الخاصة بك عبر عميل FTP (File Zilla). ابحث الآن عن دليل سمة WordPress ، وأنشئ مجلدًا جديدًا ، وقم بتسميته كما تريد.
الآن ، الشيء التالي الذي عليك القيام به هو تحميل محتوى حزمة أيقونات Font Awesome التي تم تنزيلها إلى المجلد الجديد الذي قمت بإنشائه على خادم استضافة الويب الخاص بك. الآن احفظ التغييرات التي أجريتها وأنت انتهيت.
الآن لإكمال العملية ، فإن آخر شيء عليك القيام به هو إضافة رمز بسيط (الوارد أدناه) إلى ملف function.php الخاص بالقالب أو البرنامج المساعد لمقتطف الشفرة الذي قمت بتثبيته.
|
1 2 3 4 5 6 7 |
function wpb_load_fa ( ) { wp_enqueue_style ( 'wpb-fa' , get_stylesheet_directory_uri ( ) . '/fonts/css/font-awesome.min.css' ) ; } add_action ( 'wp_enqueue_scripts' , 'wpb_load_fa' ) ; |
في هذه المرحلة ، تمكنت بنجاح من استضافة الخط الرائع على موقع الويب الخاص بك.
أيقونات WordPress وتأثيرها على أداء الموقع
على الرغم من أنه ، مهما كانت الأساليب التي ذكرناها أعلاه ، فلا حرج أو صواب في اتباعها لإضافة الرموز إلى موقع الويب الخاص بك. لكن الشاغل الوحيد يكمن هنا هو تأثيره على أداء موقع الويب الخاص بك. دعونا نكتشف كيف.
لماذا تحتاجها جميعًا إذا كنت لن تستخدمها جميعًا؟
يطرح السؤال الأول والأساسي ، لماذا تحتاج إلى تحميلهم جميعًا بينما تحتاج فقط إلى حفنة منهم. لماذا تضيع مواردك إذا كنت لن تستخدمها قريبًا.
على سبيل المثال ، إذا كنت تستضيف أيقونات على موقع الويب الخاص بك أو تستخدم المكونات الإضافية لتضمين أيقونات في موقع الويب الخاص بك ، فسوف يقومون بتحميل المكتبة بأكملها أولاً ، وماذا لو كنت مطالبًا فقط باستخدام 10 أو 15 منهم فقط.
هذا هو إهدار إجمالي للموارد وطريقة غير فعالة لمتابعة. ماذا لو كنت تستطيع بسهولة إدارتها بكفاءة.
لفهم هذا بشكل أفضل ، دعونا ننظر في مثال:
لنفترض أنك استضفت مكتبة رائعة للخطوط على موقع الويب الخاص بك ، فإن حجم ملف الخط نفسه يبلغ حوالي 388 كيلو بايت. قد لا يبدو هذا كبيرًا جدًا ، ولكن عندما تختار أو تختار الخطوط التي ستستخدمها ، يمكن أن يقلل حجم الملف بشكل ملحوظ.
عزز الأداء عن طريق تحميل الخطوط من قرص مضغوط واحد
على الرغم من أنه لا يوجد شيء خاطئ في تحميل الخطوط من عدة شبكات CDN إذا كان لديك خيار اختيار واحد ، فلماذا تذهب إلى CDNs المختلفة. CDN واحد هو وسيلة أكثر كفاءة وأسرع من مقارنة CDNs مختلفة.
السبب الرئيسي وراء ذلك هو أن CDN واحد يقلل من العدد الإضافي لعمليات بحث DNS بالإضافة إلى أنه يتمتع بميزة استخدام اتصال HTTP / 2 واحد. ولكن في ملاحظة إضافية ، يجب أن تكون شبكة توصيل المحتوى الفردية الخاصة بك قوية وفعالة.
ملخص
هذا كل شيء عن أيقونات WordPress وفي نهاية هذا المنشور ، يمكنك الآن تضمين خطوط رمز WordPress على موقع الويب الخاص بك. ما عليك سوى اختيار أفضل طريقة مناسبة ومريحة لتتبعها وتؤدي وظيفتك دون أي مشكلة.
أثناء التفكير في أداء موقع الويب ، يمكنك اتباع نصائحنا والقيام بما يلزم لتحقيق أقصى استفادة منه. بالإضافة إلى ذلك ، إذا اتبعت طريقة مختلفة لإضافة أيقونات WordPress على موقع الويب الخاص بك والتي لم نتمكن من ذكرها في هذا المنشور. يرجى إعلامنا في قسم التعليقات أدناه ومشاركة نقاطك القيمة معنا.
أسئلة مكررة
ما هي أيقونة الموقع في ووردبريس؟
تُعرف أيقونة الموقع عمومًا باسم الرموز المفضلة (الرموز المفضلة) والتي لها حجم صغير جدًا يعرض هوية العلامة التجارية. عادةً ما يتم عرض هذه الرموز في الإشارات المرجعية لموقع الويب أو في شريط العناوين أو على منصات الوسائط الاجتماعية. تساعد هذه الرموز في بناء التعرف على العلامة التجارية وتساعد على التعرف عليها بسهولة.
أين أجد أيقونات في WordPress؟
يوفر WordPress أيضًا خطوط الرموز الخاصة به والمعروفة باسم Dashicons. تتوفر خطوط الرموز هذه بشكل افتراضي يستخدمها WordPress في الخلفية. ولكن لإحضاره إلى الواجهة الأمامية ، يجب أن يكون لديك اسم البرنامج النصي المتاح بالفعل في ملف WordPress.
كيف أحصل على أيقونات WordPress مجانية؟
هناك العديد من المواقع المتاحة حيث يمكنك بسهولة الحصول على الكثير من أيقونات WordPress المجانية. هنا القائمة،
1. Font Awesome
2. IcoMoon
3. Dashicons WordPress
4. أيقونات المواد من جوجل