المقدمـة: إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس
هل سبق لك أن رغبت في عمل قائمة تكون فيها الشرائح والأرقام ملونة بلون مختلف عن لون النص ، كما في هذا المثال؟
|
في كثير من الأحيان عندما أكون منشغلاً بكتابة مقالة أو صفحة أتعمد استعمال محرر الكتابة في التبويب « نص» كي أبقى على صلة بلغة 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> |
هذه هي النتيجـة:
- أتعلم إنشاء قائمة رقمية
- أتعلم تلوين الأرقام
- الخلاصة
- أتعلم إنشاء قائمة نقطية
- أتعلم إنشاء قائمة بحروف إنجليزية
بكثرة التطبيقات ستصبح العملية سهلة .. بالتوفيق للجميع..
 |
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
