المقدمـة: إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس
هل سبق لك أن رغبت في عمل قائمة تكون فيها الشرائح والأرقام ملونة بلون مختلف عن لون النص ، كما في هذا المثال؟
|
في كثير من الأحيان عندما أكون منشغلاً بكتابة مقالة أو صفحة أتعمد استعمال محرر الكتابة في التبويب « نص» كي أبقى على صلة بلغة HTML الجميلة . و من خلالها أجرب بعض أكواد html و css لإضفاء بعض الجمالية على النص كما هو الحال في مقالة:
- ∴ إنشاء القــوائــم ( أنصح بزياتها )
- ♦ إنشاء خط فاصل أفقي hr
- ∴ إنشاء زر العودة إلى الصفحة السابقة في ووردبريس
إذا أعجبتك هذه التنسيقات، تابع معي الطريقة:
من لوحة تحكم إدارة موقع ووردبريس، مرر الماوس على القائمة « مقالات » ومن القائمة المنسدلة أنقر على « أضف جديداً » للدخول إلى محرر النصوص.
من شريط الأدوات أنقر على السهم الصغير الموجود بجانب القائمة النقطية كما هو موضح في الرقم 2 على الصورة.
كما يمكنك اختيار القائمة المرقمة كما هو موضح في الرقم 1 على الصورة.
إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس
عندما تنسدل القائمة رقم 1 اختر منها الخيارات التي تناسبك، وإذا ضغطت على أيقونة القائمة المرقمة فإنك ستختار الأرقام بشكل افتراضي وكلما انتقلت إلى سطر جديد ازداد رقم مثل:
| القائمة بالأرقام | أحرف إنجليزية صغيرة | أحرف إنجليزية كبيرة |
|
|
|
وهذا أيضاً:
| أحرف يونانية | أحرف رومانية صغيرة | أحرف رومانية كبيرة |
|
|
|
عندما تنسدل القائمة رقم 2 اختر منها الشرائح النقطية التي تناسبك، وإذا ضغطت على أيقونة القائمة النقطية فإنك ستختار القرص الأسود بشكل افتراضي مثل:
| دائـرة | قـرص | مـربـع |
|
|
|
حسناً، الآن وصلنا إلى شرح كيفية تلوين الرموز التي تسبق كتابة القوائم كما في الجدولين السابقين.
المثـــال:
- أتعلم إنشاء قائمة رقمية
- أتعلم تلوين الأرقام
- الخلاصة
- أتعلم إنشاء قائمة نقطية
- أتعلم إنشاء قائمة بحروف إننجليزية
تطبيقات حول تلويل القوائم النقطية والمرقمة
عندما ندخل إلى محرر HTML عبر التبويب « نص » ( أنظر الرقم 3 في الصورة فوق ) سنجد هذا المثال مكتوب على هذا الشكل:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li>أتعلم إنشاء قائمة رقمية</li> <li>أتعلم تلوين الأرقام </li> <li>الخلاصة</li> </ol> <ul> <li>أتعلم إنشاء قائمة نقطية </li> </ul> <ol style="list-style-type: upper-alpha;"> <li>أتعلم إنشاء قائمة بحروف إنجليزية </li> </ol> |
هكذا يتم إضافة أكواد CSS للتلوين القائمـة:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li style="color: orange;"><span style="color: #333399;">أتعلم إنشاء قائمة رقمية</span></li> <li style="color: red;"><span style="color: #800080;">أتعلم تلوين الأرقام </span></li> <li style="color: blue;"><span style="color: #008080;">الخلاصة </span></li> </ol> <ul> <li style="color: blue;"><span style="color: #1c2e34;">أتعلم إنشاء قائمة نقطية </span></li> </ul> <ol style="list-style-type: upper-alpha;"> <li style="color: blue;"><span style="color: #1c2e34;">أتعلم إنشاء قائمة بحروف إننجليزية </span></li> </ol> |
هذه هي النتيجـة:
- أتعلم إنشاء قائمة رقمية
- أتعلم تلوين الأرقام
- الخلاصة
- أتعلم إنشاء قائمة نقطية
- أتعلم إنشاء قائمة بحروف إنجليزية
بكثرة التطبيقات ستصبح العملية سهلة .. بالتوفيق للجميع..
 أرى أن هذه المواضيع قد تهمك: |
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
ياريت لو أمكن يكون شرح هذا الموضوع في فيديو مع الخطوات .. يكون شيء عظيم
إن شاء الله سأفعـل حين تـتاح لي الفرصة .
شكراً أخي على تفاعلك المميز. تحياتي