المقدمـة: كيفية تعديل HTML مع CSS في مقالات ووردبريس
الهدف من كتابة هذه المقالة هو دعوتك لاكتشاف ما يمكن أن تفعله ب HTML في مقالات ووردبريس . لأن بعض الإخوة يتساءلون باستمرار عن الإضافات التي تساعدهم على تنسيق النصوص وتنظيمها وتزيينها بأشكال مختلفة. هنا سأقصر عليكم الطريق بشرح مبسط لما يمكن إضافته إلى مقالاتكم و صفحاتكم عبر بعض التعديلات في HTML بمحرر نصوص ووردبريس.. تابع معي للأخير ..
فهـرس لفقرات المقالة :
كيفية تعديل HTML مع CSS في مقالات ووردبريس
HTML بالإنجليزية هي: HyperText Markup Language
HTML بالفرنسية هي : Langage Signalétique Hyper Text
ترجمة HTML بالعربية هي : لغة ترميز النصوص التشعبية
قوة HTML في تحرير نصوص ووردبريس
رغم أن برنامج ووردبريس يمكن التعامل معه بشكل بديهي وسلس، إلا أن بعض القوالب لا يمكنها أن توفر لك كل ما تشاهده عينك في مواقع شتى. فقد تجد في هذا القالب ما لا تجده في قالب أخر، والعكس صحيح . وهذا ما يجعلك تبحث عن ما ينقصك لِتُعَوِّض به النّقص الموجود في قالبك.
ونحن هنا بصدد الكلام عن لغة HTML التي لا يمكنك تجاوزها في تنسيق و تنظيم النصوص و الفقرات، إنْ في الووردبريس أو في غيره من مواقع الويب.
إذا كان لديك معرفة ببعض أساسيات HTML ، فيمكنك تحرير نصوص HTML لصفحتك أو منشوراتك. كما يمكنك تعديل كود موجود سلفاً أو إضافة أكواد جديدة.
يحتوي محرر النصوص في قوالب ووردبريس على تبويبين لتحرير النصوص : مرئي و نص.
التبويبين مرئي و نص في محرر نصوص ووردبريس
ومن المميزات الأكثر شيوعاً كتلة الأعمدة وكتلة الجدول والتنسيقات المختلفة. الخطوات الموضحة أدناه مخصصة للمواقع التي تستخدم محرر ووردبريس التقليدي ، و يمكنك فعل ذلك إن كنت تثقن التحرير بتنسيق HTML.
المحرر التقليدي للوردبريس
في هذا المقال، سنقوم ببعض التغييرات البسيطة على تنسيق المنشورات و صفحات ووردبريس بواسطة HTML . أما إذا كنت ترغب في إجراء تغييرات على المظهر الخاص بموقعك ووردبريس، مثل نمط الخط أو لون عناصر معينة أو إنشاء تأثيرات دينامية على المظهر ، وإنشاء الحدود والخلفيات، فستحتاج إلى تعلم كيفية تعديل CSS في ووردبريس.
التنسيقات في محرر ووردبريس
يحتوي المحرر الرسمي للووردبريس على أيقونات تنسيق النصوص، يمكنك إضافتها بدلاً من كتابة HTML. يمكن العثور على مزيد من المعلومات حول الكتل من هنـا.
∴ أحياناً، قد لا تُلبي لك تلك الكتل ما تريد تنسيقه.
كيفية تعديل HTML مع CSS في مقالات ووردبريس
وأنت تُحَـرِّر مقالك يخطر ببالك أن تبدع في إبراز بعض الفقرات بشكل يجلب القارئ للتركيز عليها .. مثلاً ، حين تريد إخبار القارئ بأن لا يتجاوز بعض المعلومات، فأنت تكتبها بخط غليظ B ، وفي التبويب نص تجدها مكتوبة هكذا <strong>B</strong> وربما تضيف لها لوناً للمزيد من الإثارة. لكن أحياناً تفضل أن تكون داخل إطار بحوافٍ جميلة ، والفقرة تريدها أن تكون منسقة داخل الاطار بشكل منظم. كيف يمكننا فعل ذالك ؟ تابع معي ..
≅ إنشاء الإطار وتنسيق الكتابة داخله
إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.
الطريقة: في تويب نص ضع كود HTML و CSS على الشكل التالي:
|
1 |
<p style="border: solid 1px;">إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.</p> |
لقد استخدمنا علامة <p> مع وسم style
ستلاحظ أن فقرة النّص محادية تماماً للإطار ، ونحن نريد أن تكون جوانب النص مبتعدة عن حواف الاطار من فوق، تحت، يمين و يسار.
∴ لتحقيق تباعد جوانب النص عن الإطار نستخدم علامات CSS مع تحديد المساحة المتروكة لكل جانب كالتالي:
|
1 2 3 4 |
padding-top: 50px; المساحة الفارغة من الأعلى padding-bottom: 30px; المساحة الفارغة من الأسفل padding-right: 20px; المساحة الفارغة من اليمين padding-left: 20px; المساحة الفارغة من اليسار |
يتم تنسيقها في مثالنا بشكل مختصر كالتالي:
|
1 |
<p style="border: solid 1px; padding: 50px 30px 50px 30px;">إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.</p> |
النتـيـجـة: ⇓
إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.
≡ ويمكنك استخدام علامة واحدة فقط أو إثنين حسب احتياجك في التنسيق.
كما يمكنك تلوين الخلفية بإضافة هذا الكود : ⇓
|
1 |
background-color: #f0f0f1; |
النتـيـجـة: ⇓
إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.
وليس هذا فحسب، بل يمكنك تغيير لون الاطار وتحديد عرضه وكذلك وضعه في الوسط وجعل الحواف دائرية عبر إضافة هذه الأكواد:
- تغيير لون الاطار = أضف كود اللّون أمام border: 1px red;
- عرض الاطار = إضافة width: 50%
- جعل الاطار في الوسط = إضافة margin: auto;
- جعل الحواف دائرية = border-radius: 10px;
الكود كاملاً:
|
1 |
<p style="border: solid #4796B3 2px; padding: 50px 30px 50px 30px; border-radius: 10px; background-color: #f0f0f1; width: 70%; margin: auto;">إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.</p> |
النتـيـجـة: ⇓
إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.
≅ إنشاء الأعمدة داخل مقالة ووردبريس ب HTML
≡ إذا كنت تستخدم محرر ووردبريس، فيمكنك استخدام الجداول لتنسيق الأعمدة . ولكن استخدام التبويب نص لأكواد HTML سيكون اختياراً أكثر فاعلية في التنسيق !
بالنسبة للأعمدة التي سأعمل على شرح كيفية إضافتها في مقالات ووردبريس، لن تكون صعبة أيضاً خصوصاً إذا تفضلت بالاطلاع على هذا المقال : الجداول في الووردبريس: يمين، يسار، وسط
سنستخدم التبويب نص، وسنحتاج إلى علامة div مع وسم style لإنشاء الأعمدة داخل مقالة أو صفحة ووردبريس
على سبيل المثال ، يمكنك تقسيم محتوى داخل المقالة إلى عمودين أو أكثر ، ولفعل ذلك، إستخدم الكود التالي:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="width:40%;padding:0 10px 0 0;float:left;"> هنا تكتب محتوى هذا العمود- عمود1 هنا تكتب محتوى هذا العمود- عمود1 هنا تكتب محتوى هذا العمود- عمود1 </div> <div style="width:40%;padding:0 10px 0 0;float:right;"> هنا تكتب محتوى هذا العمود- عمود2 هنا تكتب محتوى هذا العمود- عمود2 هنا تكتب محتوى هذا العمود- عمود2 </div> <div style="clear:both;"> </div> |
النتـيـجـة: ⇓
≅ تقسيم المحتوى بالأعمدة داخل مقالات ووردبريس
∴ إنشاء عمودين داخل المقالة باستخدام HTML:عند تقسيم المحتوى بواسطة الأعمدة يمكنك تطبيق كل ما فعلناه فوق في الفقرات المؤطرة . لا تستهن بمخيلتك ، فأنت قادر على الإبداع في html .
| العمود رقم1 | العمود رقم 2 |
| قائمة مقالات حول الووردبريس، الإضافات والقوالب | كيفية إنشاء الجداول في ووردبريس باستخدام TablePress |
≡ يمكنك التعديل في قيم العرض والحشو لتعديل الأعمدة. يتيح لك ذلك ضبط التباعد بينهما ، وإنشاء أعمدة بعرض مختلف ، والتأكد من أن المزيد من الأعمدة تناسب منشورك أو صفحتك في حالة إضافتها.
يمكنك استخدام الكود التالي لإنشاء ثلاثة أعمدة بدل اثنين:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="width:33.3%;padding:0 10px 0 0;float:left;"> هنا تكتب محتوى العمود رقـم :1 هنا تكتب محتوى العمود رقـم :1 هنا تكتب محتوى العمود رقـم :1 </div> <div style="width:33.3%;padding:0 10px 0 0;float:left;"> هنا تكتب محتوى العمود رقـم :2 هنا تكتب محتوى العمود رقـم :2 هنا تكتب محتوى العمود رقـم :2 </div> <div style="width:33.3%;padding:0 10px 0 0;float:right;"> هنا تكتب محتوى العمود رقـم :3 هنا تكتب محتوى العمود رقـم :3 هنا تكتب محتوى العمود رقـم :3 </div> <div style="clear:both;"> </div> |
≡ إذا لاحظت جيداً ، ستدرك أننا قمنا بتغيير قيمة وسم العرض لضمان إضافة عمود آخر بنفس قياس العرض.
≅ إنشاء الجداول باستخدام HTML في ووردبريس
يجب أن تعلم أن نسخ الجداول من تطبيقات أخرى (مثل Microsoft Word أو Excel) ولصقهـا في مقالاتك أو صفحاتك بووردبريس، لن تعمـل.
لحسن الحظ أن ووردبريس يتوفر على تبويب خاص بإدراج أكواد HTML ، فهي تساعد على إنشاء جداول وتنسيقها بطرق بسيطة من خلال محرر HTML مباشرة.
إقرا أيضاً: إنشاء جدول في HTML
للقيام بذلك ، حاول أن تستلهم من الكود التالي ثم أبدع من مخيلتك كيف تشاء:
|
1 2 3 4 5 6 7 8 9 |
<table > <tbody> <tr> <td> إنشاء جدول بثلاث أعمدة</td> <td>إنشاء جدول بثلاث أعمدة</td> <td>إنشاء جدول بثلاث أعمدة</td> </tr> </tbody> </table> |
| إنشاء جدول بثلاث أعمدة | إنشاء جدول بثلاث أعمدة | إنشاء جدول بثلاث أعمدة |
يمكنك إنشاء صفوف والأعمدة أكثر لجدولك. لا تنسى زيارة مقال : الجداول في الووردبريس: يمين، يسار، وسط
يمكنك أيضاً استخدام خدمة جهة خارجية لإنشاء جداول HTML لموقعك، والتي يمكنك نسخها ولصقها في محرر HTML ، مثل موقع ويب Table Generator .
≅ محتوى قابل للطي « accordion effect »
في حقيقة الأمر، إعداد عنصر أكورديون في ووردبريس غير مسموح به . ولكن دائماً هناك HTML بالواجب ، في تبويب نص ، يمكن استخدام عنصر <details> ، وتجدر الإشارة إلى أنه غير مدعوم حالياً في متصفح Edge.
فيما يلي مثال على كيفية استخدام عنصر <details>:
|
1 2 3 4 5 6 7 8 9 10 |
<details> <summary> مقالات مهمة </summary> <ul> <li> ما هو ووردبريس </li> <li> تثبيت ووردبريس على السيرفر بدون أخطاء </li> <li> تثبيت قالب ووردبريس بدون أخطاء </li> <li> تثبيت مكون إضافي بدون أخطاء </li> <li> كيف أكتب أحسن المقالات ل Seo </li> </ul> </details> |
النتـيـجـة: أنقر فوق السهم أو العبارة أمامه
مقالات مهمة 1:
مقالات مهمة 2:
ملاحظة: علامة <details> مدعومة فقط في Chrome و Safari على Mac.
♦ إذا كانت لديك أفكار تريد إضافتها فمرحباً باقتراحاتك ..
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.