تخصيص ثيمات WordPress باستخدام CSS

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

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

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

أضف Custom CSS مع Theme Customizer

مستوى الخبرة: مبتدئ

يمكّنك مُخصص WordPress من إجراء تغييرات على تصميم موقع الويب الخاص بك ومعاينتها في الوقت الفعلي. للوصول إليه ، قم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى علامة التبويب Appearance> Customize :

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

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

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

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

أضف Custom CSS مع البرنامج المساعد

مستوى الخبرة: مبتدئ إلى متوسط

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

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

محرر CSS المتقدم

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

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

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

الايجابيات:

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

سلبيات:

• يمكن أن تتطلب إضافة CSS مخصصة لأنواع متعددة من الأجهزة الكثير من العمل.

متوسط ​​التقييم: 4.5 / 5

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

وحدات مخصصة CSS

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

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

الايجابيات:

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

سلبيات:

• قد لا تعمل CSS "العالمية" بشكل جيد مع كل سمة ، لذلك عليك توخي الحذر عند التبديل إلى سمة جديدة.

متوسط ​​التقييم: 5/5

SiteOrigin CSS

يعد SiteOrigin CSS خروجًا عن المكونات الإضافية التي تحدثنا عنها حتى الآن. بدلاً من إضافة ميزات جديدة إلى Customizer ، فإنه يوفر محرر WordPress CSS مستقلًا. يمكنك الوصول إلى هذا المحرر الجديد بالانتقال إلى Appearance> Custom CSS tab بعد تثبيت المكون الإضافي:

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

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

الايجابيات:

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

سلبيات:

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

متوسط ​​التقييم: 4.9 / 5

قم بتحرير CSS باستخدام ورقة أنماط سمة الطفل

مستوى الخبرة: متقدم

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

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

بعد الاتصال بموقع الويب الخاص بك عبر FTP ، ستحتاج إلى تحديد موقع المجلد الجذر الخاص بك ، والذي يُسمى غالبًا public_html أو www ، أو يُسمى باسم موقع الويب الخاص بك:

بعد ذلك ، انتقل إلى دليل wp-content / theme . ستجد هناك مجلدات فردية لجميع السمات الخاصة بك ، بما في ذلك الطفل الذي قمت بإعداده. افتح مجلد القالب الفرعي ، وابحث عن ملف style.css داخل:

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

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

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

CSS مخصص مع مخصص الموضوع مقابل ملحقات CSS مقابل ورقة أنماط موضوع الطفل

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

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

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

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

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

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