10 نصائح بسيطة لتعلم CSS لـ WordPress

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

نظرًا لأن CSS هي لغة تصميم وليست لغة برمجة كاملة مثل Javascript أو PHP ، فمن السهل جدًا تعلمها ، خاصة إذا كان لديك بعض معرفة HTML تحت حزامك (وهو ما أفترض أنه لديك لأغراض هذا المنشور).

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

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

استمر في القراءة ، أو انتقل إلى الأمام باستخدام هذه الروابط:

• البناء الأساسي
• تدرب على المحددات والخصائص البسيطة
• احفظ نموذج الصندوق
• التعلم بالممارسة
• ترتيب المحتوى حسب العرض والارتفاع
• يطفو وتحديد المواقع
• متقدمة CSS
• قم بنسخ موقع باستخدام CSS
• المعالجات
• إطار أعمال

1. البناء الأساسي

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

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

إليك البنية الأساسية التي تتخذها CSS:

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

لهذا السبب توجد طريقة أكثر كفاءة وتنظيمًا لكتابة CSS الخاص بك:

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

هذه نقطة انطلاق رائعة لتعلم كيفية كتابة CSS الخاصة بك وبمجرد أن تبدأ ، قد تتساءل عن المكان الذي يجب أن تكتب فيه كل هذا داخل ملفات WordPress الخاصة بك.

في تثبيت WordPress الخاص بك ، فإن أي ملف تراه ينتهي بـ .css هو ملف CSS ، كما خمنت على الأرجح. الملف الرئيسي الذي تحتاج إلى البحث عنه هو ورقة الأنماط الخاصة بك وتسمى style.css . هذا هو المكان الذي يتم فيه الاحتفاظ بمعظم تصميم السمة الخاص بك أو كله من حيث الألوان والخطوط والصور الأساسية وربما بعض تصميمات السمة الخاصة بك.

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

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

2. تدرب مع محددات وخصائص بسيطة

التالي هو التعرف على المحددات والخصائص الأساسية وكيف تعمل في قالب. محددات مثل h1 و h2 و h3 للرؤوس و p لنص الفقرة ، على سبيل المثال ، بالإضافة إلى الخصائص مثل font-family background-color .

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

عندما ترى مثالاً ، ما عليك سوى النقر فوق الزر " جربه بنفسك " وستفتح نافذة حيث يمكنك اختبار بعض CSS الأساسية.

3. حفظ نموذج الصندوق

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

يمكنك بسهولة البحث عن المحددات والخصائص التي لا تعرفها خلال نبضات القلب. كل ما يتطلبه الأمر هو استفسار بسيط عن محرك البحث المفضل لديك مثل Google أو Bing وجميع المعلومات التي تحتاجها هي نقرة واحدة فقط من هناك.

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

4. تعلم بالممارسة

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

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

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

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

الطيف الأبيض

سمة White Spektrum هي سمة بسيطة ذات تخطيط مشترك يتضمن منطقة المحتوى الرئيسية والشريط الجانبي والرأس والتذييل.

بخلاف دفقة اللون عندما يتعلق الأمر بالخطوط والروابط ، فهي سمة بسيطة وبسيطة للعمل بها.

مؤسس

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

5. ترتيب المحتوى حسب العرض والارتفاع

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

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

6. يطفو وتحديد المواقع

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

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

7. CSS متقدم

في هذه المرحلة ، بدأت حقًا في التعرف على CSS ، ولكن هناك الكثير لتكتشفه:

• الفئات الزائفة - تُستخدم لتعريف حالة معينة لعنصر ما مثل عند تحريك الماوس ووضع الصور في مكان معين ذي صلة بالعناصر الأخرى.
• المحددات المعقدة - يمكنك أن تكون أكثر تحديدًا مع التصميم باستخدام محددات أكثر تقدمًا.
• الرسوم المتحركة لـ CSS3 - إنشاء تلاشي أو فرقعة أو انتقالات أخرى عند تحريك الماوس فوق الصور والأزرار.
• الاستجابة لاستعلامات وسائط CSS3 - من أسهل الطرق التي يمكنك من خلالها إنشاء سمة سريعة الاستجابة هي استخدام استعلامات الوسائط.
• التحويلات - يتحكم في حجم وشكل مناطق المحتوى المحددة.
• At-rules - تستخدم لاستيراد أشياء مثل الخطوط وأوراق الأنماط إلى نسقك.
• التدرجات اللونية - إضافة تدرج لوني إلى نسقك دون الحاجة إلى استخدام صورة.

هذه هي العديد من العناصر حيث يمكنك حقًا البدء في رؤية تصميم السمة الخاص بك يتشكل بالفعل. إنه الوقت المثالي لبدء اختبار مهاراتك.

8. قم بتكرار موقع باستخدام CSS

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

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

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

فيما يلي بعض السمات الرائعة المجانية التي يمكنك استخدامها:

• القائمة الفارغة

  

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

• HTML5 فارغ

  

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

• يؤكد

  

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

هناك أيضًا موضوع HTML5 Reset WordPress Theme على GitHub. يتضمن ميزات أكثر تقدمًا قليلاً ، ولكن هذا ما يجعله في النهاية سمة بداية قيّمة.

9. المعالجات

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

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

إذا كنت ترغب في تجربة يدك في SASS في سياق WordPress ، تحقق من موضوع Bones. إنها تتألف في الغالب من HTML5 لذا يمكنك تجربة التصميم باستخدام الجزء المدمج من SASS المضمّن بالفعل.

10. الأطر

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

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

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

تغليف

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

لمزيد من الموارد حول تعلم CSS و WordPress ، تحقق من بعض منشوراتنا الأخرى: دليل ضخم لتعلم CSS والرجوع إليها لـ WordPress: 150+ الموارد ومن WordPress Beginner to Pro: 200+ Career-Boosting Resources.

• CSS