كيفية تخصيص قالب WordPress باستخدام CSS

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

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

يمكنك إضافة لمستك الشخصية إلى موقع علامتك التجارية ، مما يجعلها مختلفة كثيرًا عن الأشخاص أو الشركات الأخرى التي تستخدم نفس سمة WordPress!

في هذا المنشور ، دعنا نلقي نظرة فاحصة على كيفية تخصيص سمة WordPress باستخدام CSS.

ما هو CSS؟

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

ما هو ووردبريس؟

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

CSS و WordPress

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

كيفية تخصيص قالب WordPress باستخدام CSS

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

شيء آخر يجب ملاحظته هو أنه إذا كنت ستقوم بإجراء تغييرات في ورقة الأنماط الخاصة بموضوع WordPress الخاص بك ، فستتم إزالة هذه التغييرات بمجرد تحديث المظهر الخاص بك. لذلك يجب أن تتعرف على السمات الفرعية وتستخدم سمة فرعية لإجراء تغييرات باستخدام style.css أو function.php أو ملفات قالب أخرى. لقد تحدثت عن مواضيع الأطفال لاحقًا في هذه المقالة.

هناك طريقتان لتحرير أو إضافة CSS إلى قالبك

# 1 باستخدام لوحة القيادة

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

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

ما هو موضوع الطفل في ووردبريس؟

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

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

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

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

# 2 باستخدام خادم FTP

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

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

طرق سهلة لإضافة CSS إلى موقع WordPress الخاص بك

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

# 1 التحرير من خلال WordPress Customiser

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

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

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

# 2 استخدم البرنامج المساعد

في هذا القسم ، سأناقش أربعة مكونات إضافية مختلفة يمكنك استخدامها لتحرير CSS لموضوع WordPress الخاص بك - Advanced CSS Editor ، و Modular Custom CSS ، و SiteOrigin CSS و CSS Hero . إذا كنت لا تعرف ، فإن مكونات WordPress الإضافية عبارة عن أجزاء صغيرة من البرامج يمكن إرفاقها بـ WordPress لتوسيع وظائفها. تتوفر بعض المكونات الإضافية مجانًا بينما يتعين على البعض دفع بعض المال لإضافتها إلى موقع WordPress الخاص بك. يمكن أن تساعدك المكونات الإضافية في تحرير أو إضافة CSS إلى موقع WordPress الخاص بك ببضع نقرات!

استخدام البرنامج الإضافي Advanced CSS Editor

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

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

استخدام البرنامج المساعد Modular Custom CSS

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

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

استخدام البرنامج المساعد SiteOrigin CSS

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

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

استخدام البرنامج المساعد CSS Hero

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

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

مقارنة الطرق المختلفة لتخصيص سمة WordPress باستخدام CSS

لذلك ، تعلمنا اليوم عن 4 طرق مختلفة لتخصيص موقع WordPress باستخدام CSS. يمكنك تحرير أو إضافة CSS إلى قالب WordPress الخاص بك باستخدام Dashboard أو يمكنك استخدام تطبيق FTP. يمكنك استخدام WordPress Customiser لإضافة أو تعديل CSS أو أخيرًا ، يمكنك استخدام بعض المكونات الإضافية لتخصيص سمة WordPress الخاصة بك باستخدام CSS.

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

من المهم كيف يبدو موقع الويب الخاص بك

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

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

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

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