كيفية الاحتفاظ بـ CSS المخصص عند تحديث سمة WordPress
نشرت: 2022-05-05تحدد السمات تخطيط ومظهر مواقع WordPress على الويب. بغض النظر عن المظهر الذي تستخدمه ، قد تحتاج إلى تخصيصه قليلاً ليناسب احتياجاتك الخاصة.
تتمثل إحدى طرق تخصيص المظهر الخاص بك في استخدام أوراق الأنماط المتتالية (CSS). ستسمح لك لغة ورقة الأنماط الشائعة هذه بتغيير أي عنصر تقريبًا في المظهر الخاص بك. يمكنك إضافة CSS مخصص إلى نسقك لتحديد ألوان الخلفية ، وتغيير أحجام الخطوط ، وإنشاء تباعد بين المحتوى ، وإعادة وضع القوائم ، والمزيد. على الرغم من ذلك ، قد يتم حذف CSS المخصص في المرة التالية التي تقوم فيها بتحديث المظهر الخاص بك.
لماذا تحطم تحديثات السمات CSS المخصص
جميع السمات لها ملف style.css. متوفر في مجلد السمات ، ويحتوي على CSS. عندما تقوم بتحديث المظهر الخاص بك ، ستقوم بتنزيل إصدار جديد مختلف منه لاستبدال الإصدار الحالي.
سيؤدي تحديث قالبك إلى حذف ملف style.css الحالي واستبداله بملف style.css جديد. لن يحتوي ملف style.css الجديد على أي CSS مخصص ربما أضفته مسبقًا. يمكنك دائمًا إضافة CSS المخصص المحذوف مرة أخرى ، ولكن القيام بذلك بعد كل تحديث سمة يمكن أن يكون مملاً.
أضف إلى أداة التخصيص
يمكنك الاحتفاظ بـ CSS المخصص عند تحديث قالبك عن طريق إضافته إلى أداة التخصيص. أداة التخصيص هي أداة تخصيص السمات في لوحة معلومات WordPress. يتميز بحقل "CSS إضافي". بدلاً من إضافة CSS مخصص مباشرةً إلى style.css الخاص بالقالب ، يمكنك إضافته إلى هذا الحقل.
تم تقديم حقل "CSS إضافي" في الإصدار 4.7 من WordPress لمنع حذف CSS المخصص أثناء تحديثات السمة. لا يؤثر على ملف style.css ولا يؤثر على أي ملفات أخرى في مجلد النسق. عند إضافة CSS مخصص إلى أداة التخصيص عبر هذا الحقل ، سيتم تخزينه في قاعدة بيانات موقع الويب الخاص بك. يمكنك بعد ذلك تحديث المظهر الخاص بك مع الاحتفاظ بـ CSS المخصص.
للوصول إلى أداة التخصيص ، انقر على "المظهر" في لوحة تحكم WordPress واختر "تخصيص". توجد علامة التبويب "CSS إضافية" بالقرب من الجزء السفلي. سيؤدي النقر فوق علامة التبويب هذه إلى عرض حقل حيث يمكنك إدخال CSS مخصص. سيؤدي تحديث السمة إلى استبدال الملفات الموجودة في مجلد السمات فقط. لن تحل محل قاعدة بيانات موقع الويب الخاص بك أو تؤثر عليها ، لذلك سيتم الاحتفاظ بـ CSS المخصص.
تسمح لك إضافة CSS المخصصة إلى أداة التخصيص بمعاينتها. يحتوي المخصص على ميزة معاينة مضمنة لجميع التغييرات. سواء كنت تقوم بتعيين أدوات جديدة أو إضافة CSS مخصصة ، سيكشف المُخصص كيف سيبدو موقع الويب الخاص بك. يمكنك بعد ذلك اختيار متابعة التخصيص من خلال النقر على "نشر". إذا كان موقع الويب الخاص بك لا يبدو صحيحًا ، فيمكنك تغيير خيارات التخصيص قبل نشره. بغض النظر ، سيعرض أداة التخصيص معاينة لموقع الويب الخاص بك باستخدام CSS المخصص.
إنشاء موضوع الطفل
حل آخر هو إنشاء موضوع فرعي. السمات الفرعية هي في الأساس نسخ من السمات الأخرى التي يمكنك تخصيصها دون خوف من فقدان تغييراتك. إنها ليست نسخًا كاملة. بدلاً من ذلك ، تتكون معظم السمات الفرعية من عدد قليل من الملفات الأساسية ، بما في ذلك ملف style.css وملف function.php.
تم تصميم السمات الفرعية لتوارث خصائص النسق الرئيسي. يمكنك استخدام الموضوع الخاص بك كموضوع رئيسي. سيكون للقالب الفرعي مجلد خاص به ، والذي سيحتوي على ملف style.css وملف function.php الخاص به. ومع ذلك ، لن تحتوي السمة الفرعية على ملف index.php أو ملف page.php أو ملف single.php أو ملفات سمة قياسية أخرى. سوف تستفيد من المظهر الرئيسي لهذه الخصائص.
نظرًا لأن السمات الفرعية لها ملف style.css الخاص بها ، فإنها تدعم CSS المخصص. الأهم من ذلك ، تحتفظ السمات الفرعية بجميع CSS المخصصة الخاصة بها عند تحديث السمات الأصلية. لن يؤثر تحديث النسق الرئيسي على ملف style.css للنسق الفرعي. للحصول على إرشادات حول كيفية إنشاء قالب فرعي ، قم بزيارة developer.wordpress.org/themes/advanced-topics/child-theme. بدلاً من ذلك ، تأتي بعض السمات المميزة مع سمة فرعية.
بالنسبة إلى بضعة أسطر من CSS المخصصة ، قد ترغب في إضافتها إلى أداة التخصيص. بالنسبة للكميات الكبيرة من CSS المخصص ، من المحتمل أن يكون إنشاء سمة فرعية يستحق الجهد المبذول. سيوفر لك النسق الفرعي ملف style.css منفصل يمكنك تخصيصه.
يمكنك حتى العمل على ملف style.css للقالب الفرعي دون اتصال بالإنترنت ، ولأنه ملف منفصل ، سيكون لديك مساحة كبيرة لـ CSS المخصص. ستؤدي إضافة CSS المخصصة إلى أداة التخصيص إلى تقييدك في حقل صغير لا يمكن الوصول إليه إلا عبر الإنترنت. يوفر أداة التخصيص ميزة وضع المعاينة ، بينما يوفر النسق الفرعي فائدة ملف style.css منفصل.
استخدم مكون CSS إضافي مخصص
يمكنك استخدام مكون CSS إضافي مخصص. المكوِّن الإضافي Simple Custom CSS ، على سبيل المثال ، يفعل بالضبط ما يبدو عليه: فهو يسمح لك بسهولة إضافة CSS مخصص إلى قالبك. ستلغي CSS المخصصة التي تمت إضافتها إلى المكون الإضافي CSS الخاص بقالبك.
بمجرد تنشيط المكون الإضافي Simple Custom CSS ، سترى علامة تبويب "Custom CSS" الجديدة ضمن "Appearance" في لوحة معلومات WordPress. هذا هو المكان الذي يمكنك فيه إضافة CSS مخصص. عند تحديث السمة الخاصة بك ، سيتم الاحتفاظ بـ CSS المخصص. سيؤدي تحديث السمة الخاصة بك إلى استبدال ملف style.css الخاص بالقالب ، لكن المكون الإضافي سيتجاوز ملف style.css الجديد بـ CSS المخصص.
هناك أيضًا المكوِّن الإضافي Simple Custom CSS و JS ، والذي يدعم كلاً من CSS المخصص و JavaScript المخصص. يمكنك استخدامه لإنشاء CSS مخصص يتخطى CSS الخاص بالثيم الخاص بك. إذا كنت لا تريد العبث بإنشاء سمة فرعية ، فقد ترغب في استخدام مكون CSS إضافي مخصص. يعد تنزيل مكون CSS إضافي مخصص طريقة سهلة للحفاظ على CSS مخصص أثناء تحديثات السمة.
خاتمة
إنه أمر محبط عندما تفقد CSS المخصص بعد تحديث سمة. حتى إذا قمت بحفظ CSS المخصص محليًا على جهاز الكمبيوتر الخاص بك ، فسيتعين عليك الرجوع وإضافته. يمكنك الاحتفاظ بـ CSS المخصص لموضوعك باستخدام أداة التخصيص في لوحة معلومات WordPress ، أو إنشاء سمة فرعية أو استخدام مكون CSS إضافي مخصص.
