كيفية إضافة CSS مخصص بسهولة في WordPress (2022)

يحتوي مستودع قوالب WordPress الرسمي على حوالي 9000 سمة. أضف السمات المتاحة في الأسواق الشعبية وعلى مواقع الويب الخاصة بمطوري السمات ويمكن أن يصل هذا الرقم إلى 20000!

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

لهذا ، تبدأ من الواجهة الخلفية للموضوع وتغيير الطباعة والألوان.

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

هذا هو المكان الذي يمكنك فيه إضافة CSS مخصص لتغيير جوانب السمة وجعلها خاصة بك.

ما هو CSS؟

ربما تكون CSS ، أو Cascading Style Sheets ، هي ثاني أكثر لغات الويب شيوعًا بعد HTML.

بينما يوفر HTML اللبنات الأساسية لصفحة الويب ، فإن CSS تجعلها جميلة للنظر إليها.

كما يمكنك أن تتخيل ، ستجد CSS في أي مكان ترى فيه HTML.

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

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

فوائد CSS

تقدم CSS العديد من الفوائد المهمة لموقع WordPress الخاص بك.

تناسق أكبر في تصميم الموقع

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

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

نتيجة لذلك ، يتم تصميم جميع عناصر HTML بنفس الطريقة (أو يمكنك تطبيق التنسيق بشكل انتقائي عن طريق تحديد الفئات المخصصة).

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

تقديم أنماط مختلفة إلى مشاهدين مختلفين

يتمحور التصميم المتجاوب حول ملاءمة عناصر HTML والمحتوى لحجم شاشة الزوار.

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

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

وبالمثل ، يمكنك تنسيق محتوى موقع الويب الخاص بك ليكون سهل القراءة للشاشة.

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

رمز موقع خفيف الوزن

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

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

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

فوائد تحسين محركات البحث

CSS هي طريقة رائعة لبناء مواقع ويب منظمة. نظرًا لأن التصميم (CSS) منفصل عن البنية (HTML) ، يمكنك بسهولة تعديل صفحات الويب وتنظيمها.

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

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

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

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

يتم وضع مواقع التحميل الأسرع أعلى نتائج البحث لأنها تقدم تجربة أفضل للزوار.

الجانب السلبي لـ CSS

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

عليك أن تبدأ بالأساسيات ثم تفهم كيف يعمل إطار عمل CSS المفضل لديك.

قد يكون هذا حفنة لمستخدم WordPress متوسط ​​المهتمين بتغييرات طفيفة في النمط.

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

هام: قم بعمل نسخة احتياطية من موقع الويب الخاص بك قبل تجربة أي شيء

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

النسخ الاحتياطي لموقع الويب الخاص بك يحفظ نسخة من ملفات موقع الويب الخاص بك في مكان منفصل.

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

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

إضافة CSS مخصص إلى موقع الويب الخاص بك على WordPress

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

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

نوصيك بمتابعة جميع الطرق ثم اختيار الطريقة التي تناسب مستوى مهارتك.

إضافة CSS مخصص مباشرة إلى ملف (ملفات) موقع الويب

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

من الناحية النظرية ، يتطلب هذا منك فتح ملف style.css للسمة وإضافة كود CSS المخصص هناك.

بمجرد الانتهاء من ذلك ، تذكر حفظ الملف أو تحديثه.

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

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

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

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

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

أضف CSS مخصصًا باستخدام مُخصص ثيم WordPress

تحتوي جميع سمات WordPress على لوحة Theme Customizer حيث يمكنك تغيير الإعدادات المختلفة المتعلقة بالتصميم والوظائف.

للوصول إلى أداة التخصيص ، انتقل إلى المظهر > التخصيص .

بالقرب من نهاية اللوحة اليمنى ، سترى حقل CSS إضافي . انقر لتوسيعها.

يمكنك إضافة مقتطف CSS المخصص هنا.

يمكنك مشاهدة معاينة للتغييرات في جزء المعاينة. انقر فوق " نشر " لحفظ التغييرات.

هذه التغييرات عالمية ومرئية عبر موقع الويب الخاص بك.

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

أضف CSS مخصص إلى كتل جوتنبرج

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

هذه العملية من خطوتين.

في الخطوة الأولى ، انتقل إلى المظهر > محرر ملف الموضوع .

هذا يفتح قسم تحرير السمات . بشكل عام ، يتم فتح style.css ، ورقة الأنماط الافتراضية ، في المحرر.

إذا لم يكن الأمر كذلك ، فحدد الملف من الشريط الجانبي الأيمن بعنوان ملفات السمات .

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

في الخطوة الثانية ، تقوم بإضافة حظر إلى المنشور. في هذا المثال ، يمكنك أن ترى أننا أضفنا كتلة فقرة.

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

في حقل CSS الإضافي ، أضف فئة CSS المخصصة.

هنا هو "من قبل" ، حيث لا تحتوي كتلة الفقرة على CSS مخصص.

بعد إضافة CSS المخصص في حقل CSS الإضافي لكتلة الفقرة ، يمكنك رؤية التغيير في الكتلة.

أضف CSS مخصص إلى أدوات إنشاء الصفحات

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

لاحظ أنك قد تحتاج إلى الإصدار المتميز لمنشئي الصفحات للحصول على خيار CSS المخصص.

سنستخدم Elementor Pro لتوضيح فكرة إضافة CSS مخصصة إلى كتل Elementor.

أضف كتلة وانتقل إلى قسم التحرير .

بعد ذلك ، انتقل إلى Advanced > Custom CSS . الصق CSS المخصص في الحقل.

مع تغييرات طفيفة ، هذه العملية قابلة للتطبيق على جميع منشئي الصفحات المشهورين.

أضف CSS مخصصًا باستخدام البرنامج المساعد

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

حتى بعد ذلك ، هناك احتمال أن تختفي تغييراتك مع تحديث السمة التالي.

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

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

نتيجة لذلك ، تظل تغييراتك متاحة حتى عند تغيير سمة موقع الويب.

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

المشكلة الرئيسية هنا هي الاختيار من بين العديد من الخيارات الرائعة.

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

محرر أسلوب CSS المرئي

إذا لم تكن لديك معرفة واسعة برموز CSS ، فإن Visual CSS Style Editor مناسب لك. يأتي هذا المكون الإضافي freemium مع محرر مرئي حيث يمكنك إضافة تغييرات مرئية إلى عناصر موقع الويب.

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

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

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

CSS مخصص بسيط

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

لمساعدتك في كتابة كود CSS خالٍ من الأخطاء ، يأتي Simple Custom CSS مع أداة تمييز بناء الجملة والتحقق من الأخطاء (فحص التعليمات البرمجية). يؤدي ذلك إلى تسريع إضافة رمز CSS مخصص عن طريق تقليل الوقت المطلوب لإضافة رمز مثالي إلى موقع الويب الخاص بك.

أفضل شيء في المكون الإضافي هو أن تغييراتك تظل محفوظة حتى عند تغيير السمات.

بطل CSS

CSS Hero هو حل تحرير متميز لمواقع الويب يبسط كيفية تحرير مواقع WordPress.

الحل مثالي للمبتدئين الذين يحتاجون إلى حل بسيط للإشارة والنقر لتحرير مظهر موقع الويب.

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

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

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

أصفر قلم رصاص

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

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

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

SiteOrigin CSS

SiteOrigin CSS هو حل تحرير CSS شائع جدًا لمواقع WordPress لأنه مناسب تمامًا بغض النظر عن مهاراتك.

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

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

البرنامج المساعد مجاني للاستخدام ويأتي مع ميزات مثيرة مثل إكمال التعليمات البرمجية وفحص التعليمات البرمجية (التحقق من الأخطاء) وحماية الملفات الأساسية.

أنشئ موضوعًا فرعيًا لاختبار (والحفاظ على) التغييرات

تحصل السمات الفرعية على وظائفها وتصميمها من السمات الأخرى (المعروفة باسم السمات الرئيسية).

بشكل أساسي ، هذه نسخ من السمات الأصلية و "ترث" التعليمات البرمجية والأصول الخاصة بهم. ومع ذلك ، يتم عزل السمات الفرعية عن الموضوعات الأصلية.

من الناحية النظرية ، يعد إنشاء موضوع فرعي أمرًا بسيطًا. تحتاج ببساطة إلى إنشاء مجلد جديد ، ونسخ ملفات style.css (للتصميم والعناصر المرئية) و function.php (لوظيفة السمة).

في الممارسة العملية ، على الرغم من ذلك ، تحتاج إلى التحقق من وثائق السمة للعثور على الملفات الهامة التي تحتاج إلى نسخها إلى مجلد النسق الفرعي.

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

أسترا مولدات موضوع الطفل

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

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

يمكنك إما تنزيل السمة الفرعية كما هي أو النقر فوق خيارات متقدمة لتغيير المعلمات المختلفة مثل المؤلف والوصف ولقطات الشاشة.

تقوم الأداة بتنزيل ملف مضغوط يحتوي على حزمة السمات الفرعية الكاملة.

استنتاج

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

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

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

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

الآن حان دورك - أخبرنا بالطريقة التي تفضلها لإضافة CSS مخصص إلى مواقع WordPress.