الووردبريس من أنظمة إدارة المحتوى السهلة الاستخدام والمرنة للتعديل على شكل الموقع وتخصيصه بالطريقة الملائمة لك، لكن في بعض الأحيان تحتاج لإضافة تنسيقات جديدة على مقالات الموقع على سبيل المثال إضافة جدول أو زر أو جدول محتويات وغيرها من العناصروالتي قد لا تجدها مدعومة وفي هذه الحالة سيكون من الضروري عليك تعديل HTML مع CSS في مقالات ووردبريس.
ما هي لغة HTML؟
هي لغة برمجة نصية يُطلق عليها اسم HyperText Markup Language مخصصة لإنشاء الصفحات وبناء هياكل الاقسام والفقرات والروابط باستخدام الأكواد. حيث أنها تُعد اللبنة او أساس صفحات الموقع الإلكتروني لكل من المقالات والصفحات والقوالب.
وتُستخدم لتخصيص كيفية عرض الصفحة أو المقال من قبل المتصفح المُستخدم وفي نفس الوقت تقدم كافة بيانات الصفحة لمحركات البحث على سبيل المثال عنوان الصفحة ووصفها ونوعها وتساهم في فهرسة الموقع من قبل محرات البحث. كما تعمل على تنسيق المستندات والعناصر في مقالات ووردبريس كما يفعل برنامج Microsoft Word.
وفي نفس السياق لغة HTML لا تُعد لغة برمجة حيث أنه لا يُمكّن استخدامها لإنشاء وظائف ديناميكية على سبيل المثال الأزرار أو التحكم في لون العناصر أو حجمها وما إلى ذلك. مكونة من ثلاث عناصر رئيسية وهي:
- علامة الفتح: تُستخدم للإشارة إلى مكان بدء تأثير العنصر، عبر إضافة قوسين للعلامة.
- المحتوى: هذا هو العنصر أو المحتوى الذي يراه المستخدمون الآخرون.
- علامة الإغلاق: هي نفسها علامة الفتح، ولكن بشرطة مائلة للأمام قبل اسم العنصر. على سبيل المثال ، </p> لإنهاء فقرة.
وعبر الجمع بين هذه العناصر الثلاثة سيكون بإمكانك إنشاء كود HTML:
<p>This is how you add a paragraph in HTML.</p>
قد يهمك: كيف تنشئ ودجات ووردبريس وتخصص موقعك الإلكتروني؟ الدليل الشامل
ما هي لغة CSS؟
لغة برمجة من تطوير W3C في عام 1996 تتكامل مع لغة HTML لإنشاء صفحة متناسقة مع إمكانية التعديل على كافة العناصر الخاصة بها لتظهر بالطريقة المناسبة. على سبيل المثال تسمح بالتعديل على الألوان والخلفيات والأشكال والخطوط وحجم الخط والمساحة وغيرها الكثير من العناصر.
وبالتالي هي من اللغت المهمة بالنسبة لك للتعديل على موقعك والعناصر بالشكل المطلوب، مع الوضع في الحسبان أيضًا للغة الجافا التي تجعل من كل اللغتين متناغمتين بشكل كبير للخروج بصفحات أو موقع احترافي. فعلى سبيل المثال إذا كُنت تريد أن تظهر الفقرة باللون الوردي بإمكانك استخدام كود:
p { color:pink; font-weight:bold; }
لماذا تحتاج إلى تعديل HTML مع CSS في مقالات ووردبريس؟
بالتأكيد هناك سبب وجيهك يجعلك تشرع في التعديل على ملفات موقعك الإلكتروني المبني على الووردبريس وإضافة أكواد HTML مع CSS إلى مقالات ووردبريس، وفي الأسطُر التالية سنتعرف على مجموعة من الأسباب التي قد تدفعك إلى ذلك:
- إضافة عناصر جديدة إلى المقال: إذا ماكنت تريد إضافة جدول أو أيّ عنصر آخر إلى مقالات ووردبريس ستحتاج إلى تعديل HTML مع CSS في مقالات ووردبريس وإضافة الإعدادات المناسبة لك.
- للتعديل على بيانات المقالات: في الكثير من الأحيان قد تحتاج إلى التعديل على عنوان المقال أو وصفه بالطريقة المناسبة مع محركات البحث، على سبيل المثال أدخل وصف للمقال أو التعديل على الميتا وغيرها من الجوانب.
- إزالة عنصر: في نفس الوقت إذا كان عنصر لا تريده أو ترغب في التعديل عليه ففي هذه الحالة ستحتاج إلى استخدام HTML مع CSS داخل موقع الووردبريس الخاص بك.
- عندما لا توجد إضافة للتعديل على الموقع: أيضًا في حال لم يكن هناك إضافة تسهل عليك عملية التعديل على كود HTML في موقعك الإلكتروني ففي هذه الحالة لا بد من العمل على تعديل HTML مع CSS في مقالات ووردبريس بشكل يدوي.
طريقة تعديل HTML مع CSS في مقالات ووردبريس
في هذه الجزئية من المقال سنتعرف على الطريقة التي تسمح لك بالتعديل على أكواد HTML مع CSS داخل موقع الووردبريس الخاص بك، وسواء للمقالات أو الصفحات وفي شرحنا لهذه الطريقة ستجد أنه يوجد خياران وهما:
- تخصيص HTML مع CSS في مقالات ووردبريس عبر محرر المكونات.
- تعديل HTML مع CSS في مقالات ووردبريس عبر المحرر التقليدي.
وإليك شرح لكلا الطريقتين:
1- تخصيص HTML مع CSS في مقالات ووردبريس عبر محرر المكونات
محرك المكونات أو ما يُسمى WordPress Gutenberg أو Block Editor هو من محررات الووردبريس الجديدة وجاء بعد المحرر التقليدي حيث يسنح للمستخدمين كتابة المحتوى والتعديل عليه بطريقة سهلة وسلسة عبر السحب والفلات أو إضافة المكونات.
لذلك الكثير من أصحاب المواقع أحبط عند اطلاق هذا المحرر لأنه أتى بتغييرات كثيرة في العناصر والمكونات وغيرها دون الحاجة إلى التعديل على HTML مع CSS ولكن الحقيقة هي يوجد مجموعة من الطرق التي تتيح لك تحقيق ذلك، والمتمثلة في:
إضافة مكّون HTML مخصص
عبر هذه الطريقة بإمكانك تعديل HTML في مقالات ووردبريس، عبر تحديد المكان الذي تريد إضافة الكود إليه، مثلًا عندما تحتاج إلى إضافة عنوان او جدول أو غيرها من المكونات في مكان مخصص. وكل ما عليك القيام به في هذه الخطوة هو التوجه إلى لوحة تحكم ووردبريس ومن ثم التوجه إلى المقال الذي تريد إضافة كود الـ HTML إليه:
حدّد على المكان الذي تريد إضافة العنصر إليه وانقر على أيقونة “+”
من بعد ذلك ادخل كود الـ HTML أو كود الـ CSS وبمجرد إضافته سيكون لديك الفرصة لعرضه أو حفظه كمسودة أو نشر المقال.
تحويل المكون إلى HTML
إذا ما كان لديك مكون جاهز على المقال على سبيل المثال عنوان أو جدول أو غيرها من العناصر بإمكانك تحويله إلى كود HTML من أجل تخصيص وعرضه بالطريقة المناسبة لك، وللقيام بذلك سيتوجب عليك الشروع في الخطوات التالية:
توجه إلى المقال أو الصفحة التي ترد تعديلها.
حدّد على المكون ومن شريط الأدوات الذي يظهر في الأعلى انقر على الثلاثة نقاط المتوازية.
ثم انقر على خيار تحرير كـ HTML.
من بعد ذلك بإمكانك تعديل HTML أو CSS للعنصر بكل سهولة لإظهاره بالطريقة المناسبة لك.
تحويل المقال بأكمله إلى HTML
عبر الطرق السابقة بإمكانك إضافة عنصر جديد أو التعديل على مكون واحد موجود في المقال. لكن عبر هذه الطريقة بإمكانك تحرير كامل الصفحة والعمل على تعديل HTML مع CSS في مقالات ووردبريس بشكل كامل، وإليك طريقة القيام بها:
توجه إلى المقال الذي تريد تعديله.
في الزاوية العلوية انقر على الثلاثة نقاط المتوازية ومرر لأسفل للنقر على مُحرر الشفرة البرمجية. أو بإمكانك النقر على Ctrl+Shift+Alt+M.
عدل وأضف الأكواد التي تريدها في المقال لتحصل على المكونات والعناصر التي تريدها.
2- تعديل HTML مع CSS في مقالات ووردبريس في المحرر التقليدي
إذا كُنت تستخدم المحرر التقليدي للووردبريس فبإمكانك أيضًا التعديل على كود الـ HTML مع CSS في مقالات ووردبريس، وذلك عبر:
- توجه إلى المقال الذي تريد تحريره.
- انقر على أيقونة نص في الزاوية العلوية اليُسرى.
- بعد ذلك، ستتحول الصفحة إلى صفحة أكواد وبالتالي بإمكانك التعديل عليها وتخصيصها بالشكل المناسب معك، بإزالة الأكواد أو إضافتها أو بتعديلها.
3- كيفية تعديل HTML مع CSS وإضافة العناصر
الآن، بعد التعرف على الطريقة المُثلى للتعديل على أكواد مقالاتك، فلابد في هذه الحالة التعرف على مجموعة من أكواد الـ HTML مع CSS وكيفية استخدامها للتعديل على موقعك بإضافة العناصر والمكونات، وإليك كل ما تريد التعرف عليها:
إضافة جدول إلى المقال
في حال كُنت ترغب في إضافة جدول إلى مقال ووردبريس الخاص بك، بإمكانك استخدام الكود التالي:
<figure class=”wp-block-table”><table><tbody><tr><td>ووردبريس </td><td>وووردبريس </td></tr><tr><td>ووردبريس </td><td>ووردبريس </td></tr></tbody></table></figure>
ليبدو الجدول كالآتي:
التعديل على ألوان النص
p class=”has-vivid-red-color has-text-color
لإضافة إطار إلى النص
في البداية يجب كتابة أو أدخل النص إلى محرر الووردبريس
| <p style=”border: solid 1px;”>إنشاء إطار حول فقرة داخل مقال في الووردبريس، ولإنشاء ذلك سأضيف يعض وسوم CSS.</p> |
من بعد ذلك عليك مباعدة النص عن الإطار ليكون في الوسط عبر ادخل الكود التالي:
| 1234 | padding-top: 50px; المساحة الفارغة من الأعلىpadding-bottom: 30px; المساحة الفارغة من الأسفلpadding-right: 20px; المساحة الفارغة من اليمينpadding-left: 20px; المساحة الفارغة من اليسار |
إضافة عنوان
إيضًا عبر التعديل على بإمكانك إضافة عنواين أو ترويسات داخل مقالك بكل سهولة وإليك كافة الأكواد التي تتيح لك ذلك:
- <h1>ووردبريس </h1> : العنوان الأول
- <h2>ووردبريس </h2> : عنوان ثاني
- <h3>ووردبريس </h3> : عنوان ثالث
- <h4>ووردبريس </h4> : عنوان رابع
افضل إضافات تعديل HTML مع CSS في مقالات ووردبريس
دائمًا ما توفر الإضافات المزيد من الخيارات والتحكم على موقع الووردبريس الخاص بك، وبالتالي ستحصل على أداء أفضل للتعديل على كافة الأكواد داخل مقالات الووردبريس، وإليك كافة الخيارات المتاحة لك:
– إضافة Black Studio
عبر هذه الإضافة بإمكانك التعديل عل كافة مكونات موقعك الإلكتروني وادخل أكواد HTML مع CSS والتخصيص عليها، وعبر استخدامه بإمكانك التبديل إلى الوضع المرئي ومن الممكن بكل سهولة إدارج الفيديوهات والصور من مكتبة وسائط الووردبريس. كما من الممكن ادراج الروابط والمحتوى مع دعم احترافي للووردبريس متعدد المواقع ودعم العديد من اللغات من بينها العربية.
– إضافة HTML Editor Syntax
من أفضل إضافات ووردبريس التي تتيح لك تعديل HTML مع CSS في مقالات ووردبريس، عبر استخدامه بإمكانك التحسين من محتواك بكل سهولة ويسر وتحرير العناصر والمكونات داخل موقع ووردبريس الخاص بك. والجدير بالإشارة أن الإضافة سهلة الاستخدام وسلسة وتسهل عليك الكثير من الخطوات.
– إضافة Visual Editor Custom Buttons
عبر هذه الإضافة بإمكانك إضافة أزار مخصصة إلى موقع الووردبري الخاصبك، عبر محرر الووردبريس المرئي ومحرر الأكواد، وأيضًا من الممكن إضافة الأكواد على الأزرار وتحريرها بالشكل الكامل. مع مجموعة ضخمة من الأزرار لإضافتها إلى الموقع دون الحاجة لجلبها من مواقع أخرى خارج الموقع.
أفضل خدمات المواقع
اذا كنت ترغب بأي مساعدة فورية او تسعى للحصول على موقعك الالكتروني الاحترافي او أي استفسار اخر يمكنك مراسلتنا فوراً وفي اي وقت للاستفسار والمساعدة، يسرنا دائماً تواصلك معنا عبر جميع حساباتنا على مواقع التواصل الالكتروني الموجود في الموقع، او عبر صفحة التواصل المخصصة من خلال هذا الرابط من هــــــنـــــا.
الخاتمة
لقد كانت هذه مجموعة من الطرق التي تتيح لك تعديل HTML مع CSS في مقالات ووردبريس والحصول على مقالات مُخصصة بناء على متطلباتك والتحسين من تجربة المستخدم عبر تقديم محتوى احترافي. كما قدمنا لك مجموعة من الإضافات التي بإمكانك استخدامها لتحرير أكواد HTML مع CSS في مقالات ووردبريس.
إقراء أيضاً: إعادة توجيه خطأ 404 إلى صفحة مخصصة في الووردبريس
****************************
