الأخبار التكنولوجية والاستعراضات والنصائح!

كيفية تمييز نص HTML في WordPress (في عام 2023) دروس تفصيلية حول تمييز النص في Gutenberg والمحرر الكلاسيكي

ستساعدك المقالة التالية: كيفية تمييز نص HTML في WordPress (في عام 2022) دروس تفصيلية حول تمييز النص في Gutenberg والمحرر الكلاسيكي

اليوم نتحدث عن كيفية تمييز نص HTML في WordPress (في كل من محرر Gutenberg والمحرر الكلاسيكي) ، للحصول على نتيجة مميزة مثل هذه:

فيما يلي مثال على النص المميز.

بصفتك مدونًا جديدًا عندما تبدأ للتو في إنشاء مدونتك ، يمكن أن تكون جميع المكونات الفنية الصغيرة لتعلم WordPress تحديًا غير مرحب به – على سبيل المثال ، اكتشاف أشياء مثل كيفية تمييز النص في WordPress ، (أو تغيير ألوان الخط وأحجامه) لمختلف عناصر النص المختلفة على مدونة WordPress الخاصة بك.

حسنًا ، الخبر السار هو أنه أثناء تسليط الضوء على النص في WordPress اعتاد أن يكون أقل سهولة للتعلم بمفردك ، أصبح الآن أسهل بكثير في عام 2022 (في كل من Gutenberg والمحرر الكلاسيكي).

وللتأكد من أننا نغطي جميع قواعدنا ، سأريكم كيفية تمييز النص بتنسيق HTML في WordPress باستخدام كل من محرر Gutenberg والمحرر الكلاسيكي — في هذا البرنامج التعليمي السريع.

الآن ، دعنا نتصفح تمييز النص في WordPress – بدون أداء استنزاف المكونات الإضافية التي تؤثر سلبًا على مُحسنات محركات البحث في مدونتك وسرعات تحميل الصفحة.

كيفية تمييز نص HTML في WordPress (Gutenberg and Classic Editor)

  1. كيفية تمييز نص HTML في محرر WordPress Gutenberg
  2. كيفية تمييز نص HTML في محرر WordPress الكلاسيكي
  3. متى تقوم بإبراز نص HTML على مدونة WordPress الخاصة بك (ولماذا)

حسنًا ، دعنا الآن نتعمق ونتحدث عن تمييز النص في WordPress!


1. كيفية تمييز النص بتنسيق HTML في محرر WordPress Gutenberg

إن العملية (الأفضل) لإبراز النص في كل من محرري Gutenberg و Classic هي في الواقع هي نفسها تمامًا من وجهة نظر فنية – إنها تبدو مختلفة بعض الشيء ، بسبب التغييرات المرئية في محرر Gutenberg مقابل Classic.

في كلتا الحالتين ، ستضيف سمة نمط HTML للون الخلفية إلى النص الذي تريد تمييزه.

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

إليك صورة GIF سريعة (عرض فيديو حلقي) توضح كيفية تمييز النص في محرر Gutenberg WordPress:

أعلم أن ملف GIF هذا يتحرك بسرعة قليلاً (وليس من السهل قراءته على الأجهزة المحمولة). إذن ، إليك برنامج تعليمي خطوة بخطوة حول تمييز النص في WordPress باستخدام محرر Gutenberg (بخطوتين سهلتين):

1. حدد الخيار “تحرير بتنسيق HTML” في الفقرة حيث يتم احتواء النص الخاص بك

بمجرد النقر فوق الخيار “” ، سترى فقرتك من النص تم تحويلها إلى شيء يشبه هذا (مع ظهور جميع سمات HTML للنص الآن):

من هنا ، هذا هو المكان الذي ستضيف فيه الآن سمة نمط لون الخلفية (في إصدار HTML من فقرتك) والتي ستبرز النص الخاص بك.

2. أضف سمة نمط لون الخلفية (في وضع HTML) لتمييز النص

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

مثال على النص الذي تريد تمييزه

اعلم أنه يمكنك بالطبع التبديل هنا للحصول على أي رمز سداسي عشري مكون من 6 أرقام أو اسم لون HTML تريد استخدامه كلون تمييز خاص بك – وستكون جاهزًا تمامًا!

لا تنسَ اختتام جزء النص الذي تريد تمييزه بعلامة إغلاق (كما هو موضح في لقطة الشاشة أعلاه) – وإلا فسيتم تمييز باقي النص في فقرتك هنا تلقائيًا.

بمجرد الانتهاء من تمييز النص ، ما عليك سوى التبديل مرة أخرى إلى “التحرير المرئي” في محرر Gutenberg على النحو التالي:

الآن ، سيتم تمييز النص الخاص بك ، وسيبدو كما يلي:

حسنًا ، لقد تعلمت الآن كيفية تمييز النص في محرر Gutenberg WordPress – لذا دعنا نتعرف على نفس الشيء باستخدام المحرر الكلاسيكي.

2. كيفية تمييز النص بتنسيق HTML في محرر WordPress الكلاسيكي

إذا كنت تكتب منشور مدونة في محرر Classic WordPress وترغب في التأكيد على قسم معين من النص من خلال تمييزه – فهذا بنفس سهولة القيام به كما هو الحال في Gutenberg.

إليك صورة GIF سريعة (عرض فيديو حلقي) توضح كيفية تمييز النص في WordPress عبر المحرر الكلاسيكي:

نظرًا لأن GIF يتحرك بسرعة كبيرة وليس من السهل رؤيته على الهاتف المحمول كما هو الحال على سطح المكتب ، فإليك تفصيل خطوة بخطوة لما يحدث عندما تريد تمييز النص في WordPress باستخدام المحرر الكلاسيكي (في خطوتين سهلتين):

1. استخدم المؤشر لتحديد النص الذي تريد تمييزه

بمجرد تحديد النص الذي تريد تمييزه ، فقد حان الوقت لتبديل وضع التحرير الخاص بك إلى “” في الزاوية اليمنى العليا من جزء التحرير الخاص بك:

الآن ، ستعرض إصدار HTML من منشور المدونة الخاص بك – وهذا هو المكان الذي ستضيف إليه السمة التي تبرز النص الخاص بك.

2. أضف سمة نمط HTML للون الخلفية (في وضع النص) لتمييز النص

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

مثال على نص سيتم تمييزه قريبًا

كما هو الحال في البرنامج التعليمي Gutenberg أعلاه ، يمكنك أيضًا تبديل رمز اللون هنا لتعيين أي لون تمييز مخصص للنص الخاص بك.

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

الآن بمجرد التبديل مرة أخرى إلى “الوضع المرئي” في المحرر الكلاسيكي ، إليك ما سيبدو عليه النص المميز:

مثال على النص المميز

وفويلا! لقد أبرزت النص الخاص بك في المحرر الكلاسيكي! 👏

الأفكار النهائية: هل يجب عليك تمييز نص HTML في WordPress (ولماذا)؟

الآن بعد أن قضيت بضع دقائق أعرض عليك تمييز النص في WordPress … لم نتطرق بعد إلى أنك تريد تمييز النص في المقام الأول ، وعندما يكون لتطبيق النص المميز تأثير إيجابي على محتوى مدونتك.

فيما يلي بعض الأسباب التي تجعلني أقوم بتمييز النص داخل محتوى مدونتي:

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

حسنًا ، هذا كل شيء لليوم!

لقد تعلمت للتو كيفية تمييز النص في WordPress (في كل من محرر Gutenberg والمحرر الكلاسيكي) – وكيفية استخدام النص المميز لصالحك.

مثل ما ترى؟ قم بالتسجيل للحصول على المزيد من الدروس التقنية ونصائح التدوين الأصلية مني.


هل تريد تسليم المزيد من دروس التدوين مباشرة إلى بريدك الوارد؟

“*” تحديد الحقول المطلوبة