كيفية تعديل HTML مع CSS في مقالات ووردبريس

المقدمـة:  كيفية تعديل HTML مع CSS في مقالات ووردبريس

هذا المقال من أحسن المقالات التي ستساعدك على إعطاء منشوراتك قيمة إضافية، كي تبدو أكثر جمالاً و أحسن تنظيماً وتنسيقاً، وتفتح شهية القراء.

 

الهدف من كتابة هذه المقالة هو دعوتك لاكتشاف ما يمكن أن تفعله ب HTML في مقالات ووردبريس . لأن بعض الإخوة يتساءلون باستمرار  عن الإضافات التي تساعدهم  على تنسيق النصوص وتنظيمها وتزيينها بأشكال مختلفة. هنا سأقصر عليكم الطريق بشرح مبسط لما يمكن إضافته إلى مقالاتكم و صفحاتكم عبر بعض التعديلات في HTML بمحرر نصوص ووردبريس.. تابع معي للأخير  .. 

 

 فهـرس لفقرات المقالة :

 

      كيفية تعديل CSS في ووردبريس

كيفية تعديل 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  على الشكل التالي:

لقد استخدمنا علامة <p> مع وسم style

 

ستلاحظ أن فقرة النّص محادية تماماً للإطار ، ونحن نريد أن تكون جوانب النص مبتعدة عن حواف الاطار من فوق، تحت، يمين و يسار.

لتحقيق تباعد جوانب النص عن الإطار نستخدم  علامات CSS مع تحديد المساحة المتروكة لكل جانب كالتالي:

يتم تنسيقها في مثالنا بشكل مختصر كالتالي:

النتـيـجـة:

 

إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.

ويمكنك استخدام  علامة واحدة فقط أو إثنين حسب احتياجك في التنسيق.

كما يمكنك تلوين الخلفية  بإضافة هذا الكود :

النتـيـجـة:

إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.

وليس هذا فحسب، بل يمكنك تغيير لون الاطار  وتحديد عرضه وكذلك وضعه في الوسط وجعل الحواف دائرية عبر إضافة هذه الأكواد:

  • تغيير لون الاطار = أضف كود اللّون أمام  border: 1px red;
  • عرض الاطار = إضافة width: 50%
  • جعل الاطار في الوسط = إضافة margin: auto;
  • جعل الحواف دائرية = border-radius: 10px;

الكود كاملاً: 

النتـيـجـة:

إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.

 

إنشاء الأعمدة داخل مقالة ووردبريس ب HTML

 

إذا كنت تستخدم محرر ووردبريس، فيمكنك استخدام الجداول لتنسيق الأعمدة . ولكن استخدام التبويب نص لأكواد HTML  سيكون اختياراً أكثر فاعلية في التنسيق !

 

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

سنستخدم التبويب نص، وسنحتاج إلى علامة div مع وسم style لإنشاء الأعمدة داخل مقالة أو صفحة ووردبريس

على سبيل المثال ، يمكنك تقسيم محتوى داخل المقالة إلى عمودين أو أكثر ، ولفعل ذلك، إستخدم الكود التالي:

 

النتـيـجـة:

تقسيم المحتوى بالأعمدة داخل مقالات ووردبريس

 

قناة Jabism-web
أشياء جميله يمكن أن تنشئها باستخدام لغة HTML و CSS . في هذه الأعمدة يمكنك إضافة صور  وجداول وأكواد ورسوم بيانية أيضاً . كما يمكنك إضافة صور عائمة وإعلانات. إنها متعة البرمجة ياسادة.
إنشاء عمودين داخل المقالة باستخدام  HTML:
عند تقسيم المحتوى بواسطة الأعمدة يمكنك تطبيق كل ما فعلناه فوق في الفقرات المؤطرة . لا تستهن بمخيلتك ، فأنت قادر على الإبداع في html .
داخل هذا العمود يمكنك إضافة جدول بأعمدته وصفوفه كما رأيت في الرابط فوق: 

العمود رقم1 العمود رقم 2
قائمة مقالات حول الووردبريس، الإضافات والقوالب كيفية إنشاء الجداول في ووردبريس باستخدام TablePress
 

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

 

 يمكنك استخدام الكود التالي لإنشاء ثلاثة أعمدة بدل اثنين:

إذا لاحظت جيداً ، ستدرك أننا قمنا بتغيير قيمة وسم العرض لضمان إضافة عمود آخر بنفس قياس العرض.

 

إنشاء الجداول باستخدام HTML في ووردبريس

 

يجب أن تعلم أن نسخ الجداول  من تطبيقات أخرى (مثل Microsoft Word أو Excel) ولصقهـا في مقالاتك أو صفحاتك بووردبريس، لن تعمـل.

لحسن الحظ أن ووردبريس يتوفر على تبويب خاص بإدراج أكواد HTML ، فهي تساعد على إنشاء جداول وتنسيقها بطرق بسيطة من خلال محرر HTML مباشرة. 

إقرا أيضاً: إنشاء جدول في HTML

للقيام بذلك ، حاول أن تستلهم من الكود التالي ثم أبدع من مخيلتك كيف تشاء:

 

 

إنشاء جدول بثلاث أعمدة إنشاء جدول بثلاث أعمدة إنشاء جدول بثلاث أعمدة

يمكنك إنشاء صفوف والأعمدة أكثر لجدولك. لا تنسى زيارة مقال : الجداول في الووردبريس: يمين، يسار، وسط

يمكنك أيضاً استخدام خدمة جهة خارجية لإنشاء جداول HTML لموقعك، والتي يمكنك نسخها ولصقها في محرر HTML ، مثل موقع ويب  Table Generator .


 

محتوى قابل للطي « accordion effect »

 

في حقيقة الأمر، إعداد عنصر أكورديون في ووردبريس غير مسموح به . ولكن دائماً هناك HTML بالواجب ، في تبويب نص ، يمكن استخدام عنصر <details> ،  وتجدر الإشارة إلى أنه غير مدعوم حالياً في متصفح Edge.

فيما يلي مثال على كيفية استخدام عنصر <details>:

النتـيـجـة: أنقر فوق السهم أو العبارة أمامه

 

مقالات مهمة 1:

مقالات مهمة 2:

ملاحظة: علامة <details> مدعومة فقط في Chrome و Safari على Mac.

إذا كانت لديك أفكار تريد إضافتها فمرحباً باقتراحاتك ..

في أمان الله


قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

162 عدد المشاهدات لهذا المحتوى
Scroll to Top