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

أهمية التعديل على ملف style.css

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

حين قُمتَ لأول مرة بتثبيت ووردبريس ، على الأرجح أنه لم يعجبك شكل موقعك أو مدونتك، فسمعت عن قوالب ووردبريس، وبدأت تبحث عن أحسنها فثبتتها ، ثم سمعت عن المكونات الاضافية فقمت بتثبيتها أيضاً. رغم ذلك، ما زال هناك شيئ ينقصك. ربما رأيته في مواقع أخرى وتمنيت توفره في موقعك، للأسف لم تعثر على ما تريد ووجدت من يقول لك : « هذه تحتاج إلى تعديل في ملف CSS » أكواد وعلامات، يجب التعديل عليها  في  ملف style.css. وبما أنك حديث عهد بالووردبريس فإن بعض الضبابية بدأت تتجول في مُخك ! لتقنعك أن الطريق صعب.

في موقع Jabism.com تتبخر الصّعوبة وتُمطر شرحاً بسيطاً ومفصلاً كي يستفيد المستخدم مهما كان مستواه الإدراكي .

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

بعد هذه المقدمة البسيطة، سترغب في تَعلّم ما يجب معرفته عن أوراق الأنماط المتتالية ( CSS) لأنها ضرورية للغاية لمظهر موقعك.  فأنت لست مُجبراً بأن تكون على علم بما يفعله CSS  في موقعك ، ولكن يجب أن تتعلم التعديل على ملف style.css، الذي سيمكنك من تغيير تخطيط موقعك أو إضافة عناصر أو إزالتها أو تغيير اللون لتخصيص مظهر مدونتك حسب ذوقك ورغبتك.

إذا كنت فعلاً ترغب في تطوير معرفتك في CSS ، والعمل على تعديل أوراق الأنماط بإثقان، فما عليك سوى البقاء معي إلى النهاية، لأن ذلك سيكون ممتعاً ومفيداً في نفس الوقت.

لنبدأ على بركة الله

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

التعريف ب CSS

تعتبر أوراق الأنماط المتتالية  CSS مكملة لـ HTML ، وهي ضرورية لتنسيق العناصر النصية والرسوماتية لموقعك . وتلعب دوراً أساسياً في تحسين المظهر المرئي لإثراء تجربة المستخدم. بدون ورقة الأنماط ، سيكون من الصعب حقاً جعل ووردبريس متوافقاً مع اللوحات الالكترونية والهواتف الذكية. عندما تتعمق في الووردبريس ، ستدرك أنه تم استخدام العديد من لغات البرمجة لتحقيق هذه النتيجة ، وتأخذ أوراق الأنماط مركز الصدارة ، وحتى إذا لم تكن مطور ويب متمرساً ، فمن الممكن إجراء بعض التغييرات التجميلية المريحة اعتماداً على القالب الذي اخترته لموقعك.

عند استخدام ووردبريس ، عادةً ما يتم التعامل مع أوراق الأنماط من خلال القوالب. بحيث تسمح لك هذه الملفات بتحديد التنسيق العام للموقع، كما يمكنك تغييرها تماماً. على العموم يمكنك إيجاد جميع المعلومات في ملف يُدعـى « style.css » الموجود في جذر القالب الخاص بموقعك.

عندما تقوم بتحرير  ملف « style.css » ، فإنك تغير المظهر العام لموقعك. طبعاً لك كامل الحرية في تعديل أسطر معينة من التعليمات البرمجية أو حذفها أو إضافة المزيد. ولكن إذا لم تكن صاحب خبرة بالموضوع ، فمن الأفضل دائماً عمل نسخة احتياطية أولاً، لتجنب الانتكاسات المحتملة. وعليك التفكير في استخدام قالب الإبن لما له من أهمية بالغة.

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

تخصيص قالب موقعك باستخدام ورقة الأنماط

عندما تريد أن يبدو موقعك جميلاً وجذاباً ، فإن ورقة الأنماط ضرورية لتخصيص قالبك وجعله مختلفاً. بإمكانك تعديل كود CSS الحالي ولكن إذا قمت بتطبيق هذه التغييرات مباشرة في الملف المصدر ( style.css ) ، فستفقد جميع تعديلاتك عند تحديث القالب. و هذا هو السبب الذي يجعلنا ندق ناقوس التحذير  للمبتدئين بعدم إجراء أيّ تعديلات مباشرة في ملف “style.css”  الموجود بالقالب الأصلي، إذ من المستحسن استخدام قالب الإبن . 

للوصول إلى ملف style.css، يمكنك استخدام بروتوكول نقل الملفات FTP أو مباشرة من لوحة تحكم موقع ووردبريس.

الوصول إلى ملف CSS  عبر FTP

من خلال برتوكول نقل الملفات FTP يمكنك الوصول إلى ملف style.css الذي سنجري عليه التغييرات أو التعديلات. عندما نصل إلى جدر الموقع نفتح المجلد wp-content، بداخله تجد بعض المجلدات، قم بفتح المجلد themes (رقم 1 ) وبداخله تجد مجلد القالب الذي تستخدمه لموقعك. يُفَضلُ أن يكون لديك قالب الإبن ( رقم 2 ) ، إفتحه تجد ملف style.css . 

وهنا، عليك بأحد الخيارين: 

• إما أن تقوم بالتعديل عليه  من داخل FTP  وذلك بالنقر عليه بيمين الماوس واختيار  ” Afficher/Editeur ” لتحريره كما في الصورة

• أو القيام بتنزيل ملف style.css  إلى الحاسوب ، وذلك بالنقر على الملف ( رقم 1 ) بيمين الماوس   واختيار  ” Télécharger ”     ( رقم 2 )  

∴ بعد تنزيل ملف style.css ، إفتحه بأي برنامج محرر النصوص وأكواد برمجة المواقع مثل : Notepad++ المشهور بجودته وسهولة استخدامه  ، أو Sublime textالذي لا يقل عن الأول بسهولته وسرعته.

إذا فتحنا ملف style.css بمحرر الأكواد Notepad++ ، سيظهر مثل هذا .

قم بالتعديل أو التغيير على الأكواد ثم  قم بحفظ العمل من القائمة: fichier ثم  Enregistrer sous … 

الوصول إلى ملف CSS عبر لوحة التحكم

هذا الخيار  يُمَكِّنُك من الوصول إلى ملف style.css دون تثبيت محرر النصوص البرمجية. وذلك باتباع الخطوات التالية:

≡ من داخل لوحة تحكم مدير موقع ووردبريس،  ومن الشريط الجانبي، قم بتمرير الماوس على قائمة “المظهر” ، ثم أنقر على “محرر القوالب“. في حالة ظهور نافذة تخبرك بمخاطر التغيير ، ما عليك سوى النّقر فوق “أنا أتفهم” لتجاهل التحذير.

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

في الوقت الحالي ، لا تهتم بالملفات الأخرى لأن ما يهمنا في هذا المقال هو ملف style.css . بالخصوص لا تحاول فهم كيفية عمل PHP ، لأنك ستضيع إذا لم تكن مُلِمّاً بها.

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

تعديل ورقة الأنماط لتخصيص ووردبريس

دائماً توجد طرق أخرى غير التي يستعملها أغلبية الناس. فإذا كنت لا ترغب في لمس الكود الموجود حالياً أو لا تريد إضافة عناصر معينة  إلى ملف style.css ، فإنه بإمكانك أن تستخدم طُرقاً مختلفةً.

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

تخصيص ووردبريس لتعديل CSS

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

بالنَّقر على تخصيص  ستنقل إلى نافذة جديدة لمساحة خاصة بتخصيص ووردبريس . ومنها إنزل إلى الأسفل عبر التمرير للشريط الجانبي ، ثم إضغط على « تنسيقات (CSS) إضافية » ليفتح محرر  خاص بإضافة  أكواد CSS كما في الصورة  تحت. بمجرد إجراء التغييرات ، ما عليك سوى نشرها بالنقر على زر نشر في أعلى القائمة. ميزة هذه الطريقة  هو أنك تشاهد المعاينة مباشرة قبل تطبيقها بشكل دائم على الموقع .

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

العيب الرئيسي لهذه الطريقة هو أنك في حالة تغيير قالب موقعك فإن CSS تفقد فعاليتها. ويلزمك إضافة تلك الأكواد مرة أخرى في القالب الجديد. 

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

استخدام الإضافات لتخصيص ورقة أنماط CSS

تتيح لك المكونات الإضافية لووردبريس إضافة أكواد CSS دون خوف أو قلق من عواقب تحديثات القوالب أو تغييرها. بحيث تمكنك هذه البرامج المساعدة من التعديلات بطريقة سهلة وسريعة ، وهي توفر عليك عناء كتابة التعليمات البرمجية (الأكواد )  بنفسك. إذ ستوفر لك القوائم المنسدلة  قدراً هائلاً من الوقت عند استخدامها ، خاصةً إذا لم تكن على دراية ببرمجة المواقع.

∴سأعرض هنا أربع مكونات إضافية خاصة بتعديل ورقة الأنماط المتتالية ” CSS ” :

1. مخصص CSS البسيط  « Simple Custom CSS »

عندما يتعلق الأمر بتعديل ورقة الأنماط، فإن اختيارك للمكون الاضافي Simple Custom CSS  الأكثر شيوعاً هو الاختيار الأفضل بالتأكيد. فهو سهل الاستخدام للغاية ، و يوفر لك واجهة بسيطةً ; فعّالة حقّـاً.

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

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

إقرأ أيضاً: تثبيت مكون إضافي بدون أخطاء

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

2. المكون الإضافي: Simple Custom CSS and JS

أقدم لك المكون الإضافي  Simple Custom CSS and JS الذي يسمح لك أيضاً بتعديل ورقة الأنماط الخاصة بموقعك وتحريرها بما تراه مناسباً.

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

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

3. المكون الإضافي: SiteOrigin CSS

يمكنك أيضاً استخدام  SiteOriginCSS كمكون إضافي بديل للمكونين  السابقين،  إنه في الواقع محرر مرئي وأكثر تقليدية يمنحك الفرصة لإجراء تغييرات على ورقة الأنماط بشكل عادي ( إن كنت على دراية ) أو عن طريق تحرير الكود  بناءً على هذه الميزات البديهية المختلفة.

المكون الاضافي: WP Add CustomCSS

يسمح لك WP Add Custom CSS بإضافة CSS مخصص إلى موقع الويب بالكامل وإلى المنشورات الفردية والصفحات وأنواع المنشورات المخصصة (مثل منتجات ووكوميرس).
يمكنك تعديل ورقة الأنماط الرئيسية من صفحة إعدادات “إضافة CSS مخصصة“.
يقوم المكون الإضافي أيضاً بإنشاء مربع “CSS مخصص” جديد في منطقة التحرير لإضافة CSS مخصص إلى منشورات وصفحات وأنواع منشورات مخصصة.

كيف تتعلم CSS ؟

إذا كُنتَ لا ترغب في اللجوء إلى المكونات الإضافية السّهلة الاستخدام ، فمن الممكن تماماً تعلم أكواد CSS عن طريق الانتقال إلى الدورات التعليمية المخصصة للمبتدئين. على الرغم من أن تعلم البرمجة قد يبدو صعباً في البداية ، إلا أنه من السّهل تعلم اللغة التي تتيح لك تحقيق النتائج بسهولة بالغة ، حيث يمكن رؤية التغييرات المرئية على الفور. للقيام بذلك ، يمكنك أولاً أن تتحلى بالعزم والإرادة، وأن تبدأ من حيث يبتدئ المبتدئون .. وستصل إلى غايتك بحول الله.

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

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

إقرأ ايضاً: ⇐ مقتطفات أكواد CSS لتحسين مظهر موقع ووردبريس

الخـلاصـة:  كيفية تعديل CSS في ووردبريس
حين قَرَّرْتَ استخدام  نظام إدارة المحتوى ” CMS ” فقد أصبحت ملزماً باتِّـباع النصائح الأساسية المختلفة لإدارة إدارة موقعك، وكذا إرضاء الجمهور الذي سيزور موقعك. أكيد، أنك ستلاحظ بأن القالب الذي تستخدمه لموقعك، قد تم تصميم جُـزئٍ منه  بأوراق الأنماط « CSS » . ورغم أن هذا التصميم مُنسق بشكل صحيح ، فقد تحتاج إلى بعض التغيير والتبديل . باستخدام الطرق المختلفة المذكورة أعلاه ، وأأكد لك أنك لن تجد صعوبة في تطبيق أساليب هذه التوصيات حتى وإن كانت معرفتك  بالبرمجة محدودة.

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

في أمان الله

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

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

كيفية إضافة CSS إلى ووردبريس عبر المكون الإضافي الحدود الدائرية border-radius في CSS تنسيق النصوص ب CSS إضافة اللَّون في CSS إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس إنشاء خط فاصل أفقي hr