لقد تطور WordPress على مر السنين ، وهو اليوم نظام أساسي مرن جدًا وسهل التخصيص من خلال محرر الكتل الخاص به ، Gutenberg. ومع ذلك ، ستكون هناك أوقات تحتاج فيها إلى وصول أكبر بقليل مما يوفره محرر Gutenberg.
هذا هو المكان الذي يكون فيه CSS المخصص مفيدًا. يتيح لك نمط CSS تعديل الألوان والتباعد والخطوط والتخطيطات وأي عنصر مرئي آخر في موقع WordPress الخاص بك ، مما يسمح لك بجعله يبدو بالضبط كما تريد.
في هذه المقالة ، سنرشدك إلى أساسيات تخصيص موقع WordPress الخاص بك باستخدام CSS.
لماذا تخصيص موقع الويب الخاص بك باستخدام CSS؟
تعد إضافة CSS المخصصة إحدى الطرق التي يمكنك استخدامها لتحسين مظهر موقعك. تتضمن الطرق الأخرى استخدام ملف سمة ووردبريس متميزة جيدة الميزات، أو تثبيت منشئ الصفحة.
في حين أن هاتين الطريقتين أسهل قليلاً في الاستخدام للمبتدئين ، ولا تتطلب معرفة بالشفرة ، فإن استخدام CSS المخصص يكون أكثر فائدة بطريقتين رئيسيتين:
التكلفة الصفرية
يمكن أن تكون السمات المميزة وأدوات إنشاء صفحات WordPress سهلة الاستخدام ، ولكنها تأتي بتكلفة - بالدولار والسنتات. مسلحًا بمعرفة كيفية كتابة CSS مخصص ، من ناحية أخرى ، يمكنك تحقيق نفس التأثيرات دون تكبد أي نفقات إضافية.
الحد الأدنى من سخام
تم تصميم أدوات إنشاء الصفحات والسمات المميزة جيدًا لمنح المستخدمين مزيدًا من المرونة ومجموعة واسعة من الخيارات لتخصيص مواقع الويب الخاصة بهم. لهذا السبب ، يميلون إلى إضافة سخام إلى مواقع الويب ، مما قد يؤدي إلى إبطائها.
عند كتابة CSS مخصص ، من ناحية أخرى ، ستقوم فقط بإضافة الميزات الضرورية ، مما ينتج عنه مواقع ويب أخف وزناً وسرعات تحميل أسرع.
3 طرق سهلة لتخصيص موقع WordPress الخاص بك باستخدام CSS
نأمل أنك تعرف بالفعل كيف تكتب CSS. بمجرد أن تتعرف على الأساسيات ، يمكنك استخدام أي من الطرق التالية لإضافة CSS مخصص إلى موقع WordPress الخاص بك:
الطريقة الأولى: استخدم مُخصص WordPress
باستخدام WordPress 4.7 أو أي إصدار بعده ، يمكنك إضافة CSS مخصص مباشرةً من منطقة الإدارة. هذه هي الطريقة الأكثر مباشرة ، ونظرًا لوجود معاينة مباشرة متاحة ، يمكنك رؤية أي تغييرات تجريها في الوقت الفعلي.
إنه أيضًا الأكثر موصى به بشدة ، نظرًا لأن جميع التغييرات التي ستجريها يتم حفظها داخل WordPress نفسه. هذا يعني أنه حتى إذا قمت بتغيير السمة الخاصة بك أو تحديثها ، فلن تفقد CSS المخصص الخاص بك.
فيما يلي الخطوات التي يجب اتخاذها:
الخطوة 1: انتقل إلى المظهر> التخصيص.
سيؤدي ذلك إلى فتح أداة تخصيص سمة WordPress ، والتي تعرض لك معاينة مباشرة لموقعك على اليمين ، جنبًا إلى جنب مع بعض خيارات التخصيص على اليسار. قم بالتمرير لأسفل إلى الجزء السفلي من اللوحة اليمنى ، وستجد ملف CSS إضافية التبويب.
الخطوة 2: اضغط على CSS إضافية فاتورة غير مدفوعة.
سيؤدي هذا إلى فتح مربع صغير في الجزء الأيمن حيث يمكنك إضافة CSS المخصص. يمكنك كتابة أي عدد تريده من سطور كود CSS. إن الشيء العظيم في هذا المحرر هو أنه يتحقق من صحة التعليمات البرمجية الخاصة بك ، وينبهك في حالة وجود أي أخطاء.
الخطوه 3: انشر تغييراتك.
ستظهر أي قاعدة CSS صالحة تضيفها في منطقة المعاينة المباشرة على اليمين. لتطبيق التغييرات على موقعك ، انقر فوق ينشر زر في أعلى الجزء الأيمن بمجرد أن تشعر بالرضا. إذا كنت لا تريد أن تدخل التغييرات حيز التنفيذ على الفور ، فيمكنك أيضًا جدولة النشر في وقت لاحق أو حفظ عملك كمسودة.
من المهم ملاحظة أن أي تغييرات تجريها باستخدام أداة التخصيص مرتبطة بموضوعك الحالي. إذا قمت بالتبديل إلى سمة أخرى ، فستفقد التغييرات ما لم تنسخ CSS المخصص وتضيفه إلى السمة الجديدة. من الممارسات الجيدة حفظ كل CSS المخصص الذي تضيفه إلى سمة على المفكرة. بهذه الطريقة ، يمكنك ببساطة نسخ الكود ولصقه في قسم "CSS إضافي" لموضوع مختلف.
إذا كان هذا يبدو وكأنه الكثير من العمل ، وتفضل حلاً يسمح لك بتطبيق CSS المخصص على أي سمة WordPress تستخدمها ، فإن الطريقة التالية تناسبك.
الطريقة الثانية. استخدم البرنامج المساعد
تقوم المكونات الإضافية المخصصة لـ CSS بتخزين CSS المخصص الخاص بك بشكل منفصل عن قالبك ، مما يسمح بتطبيق التغييرات بغض النظر عن المظهر الذي تستخدمه. تأتي هذه المكونات الإضافية أيضًا مع ميزات إضافية مثل الإكمال التلقائي الذي يمكن أن يجعل إضافة CSS أسهل.
العيب الوحيد هو أنها برامج تابعة لجهات خارجية ، مما يعني أنها من المحتمل أن تبطئ موقعك. ومع ذلك ، فإن معظم هذه المكونات الإضافية خفيفة الوزن ، لذا فهي عمومًا لها تأثير ضئيل على أداء موقعك. فيما يلي بعض من أفضل المكونات الإضافية المخصصة لـ CSS التي يمكنك استخدامها:
- CSS مخصص بسيط
CSS مخصص بسيط هي واحدة من أكثر ملحقات CSS المخصصة شيوعًا. إنه خفيف الوزن وسهل الاستخدام ويقدم ميزات رائعة. إعداده سهل. كل ما عليك فعله هو تثبيت البرنامج المساعد وتنشيطه. ثم انتقل إلى ملف مظهر خارجي قسم في الجزء الأيمن من لوحة القيادة الخاصة بك.
سترى خيارًا جديدًا يسمى لغة تنسيق ويب حسب الطلب. سيؤدي النقر فوقه إلى فتح محرر حيث يمكنك إضافة CSS المخصص الخاص بك. انقر على تحديث CSS المخصص زر لحفظ التغييرات الخاصة بك. لعرض التغييرات ، فقط قم بتحديث موقع الويب الخاص بك.
- بسيط CSS و JS مخصص
إذا كنت تريد المزيد من الميزات ، فإن البرنامج المساعد البسيط المخصص لـ CSS و JS هو خيار رائع. بالإضافة إلى إضافة CSS ، فإنه يسمح لك بإضافة إدخالات JavaScript.
- بطل CSS
إذا كنت لا تريد كتابة سطر واحد من التعليمات البرمجية ، فإن ملف البرنامج المساعد CSS Hero مثالي لك. يقدم هذا المكون الإضافي محرر CSS مرئيًا بقوائم منسدلة وحقول إدخال تتيح لك تحرير أي نمط CSS تقريبًا على موقعك دون الحاجة إلى كتابة أي رمز.
الطريقة الثالثة. تحرير التعليمات البرمجية الأولية
تسمح لك الطريقتان اللتان وصفناهما أعلاه بإضافة CSS مخصص إلى موقعك دون الحاجة إلى لمس أي من ملفات السمات الخاصة بك. ولكن ، في بعض الحالات ، قد ترغب في تعديل CSS لمظهرك أو إضافة CSS مخصصة مباشرةً إلى رمز المظهر الخاص بك.
للقيام بذلك ، ستحتاج إلى الوصول إلى ورقة أنماط موقع الويب الخاص بك. طريقة سهلة للوصول إلى ورقة الأنماط هذه من خلال ملف محرر الموضوع على لوحة تحكم WordPress الخاصة بك.
قبل أن نذهب إلى أبعد من ذلك ، هناك بعض الضمانات التي تحتاج إلى وضعها في مكانها الصحيح. أولا، قم بعمل نسخة احتياطية من موقع الويب الخاص بك. أثناء تحرير ملفات السمات الخاصة بك ، من السهل ارتكاب أخطاء يمكن أن تؤدي إلى تعطل موقعك.
يضمن النسخ الاحتياطي أن يكون لديك موقع ويب وظيفي للعودة إليه. التالي، إنشاء موضوع فرعي. إذا قمت بإجراء تعديلات مباشرة على السمة الرئيسية الخاصة بك ، فستفقد التغييرات كلما تم تحديث السمة.
بمجرد وضع هذه الضمانات في مكانها الصحيح ، قم بتسجيل الدخول إلى الواجهة الخلفية لـ WordPress. اذهب إلى المظهر> محرر الموضوع. عند النقر فوق خيار محرر المظهر ، سترى مربعًا منبثقًا يحذرك من إجراء تغييرات مباشرة على ملفات المظهر. إذا اتبعت الخطوات المذكورة أعلاه ، فأنت على ما يرام.
انقر أفهم المضي قدما.
بعد النقر ، من المفترض أن ترى ورقة أنماط موقعك بشكل افتراضي. إذا لم يكن الأمر كذلك ، فما عليك سوى إلقاء نظرة على الجزء الأيمن والنقر فوق style.css تحت ورقة الأنماط اختيار.
من هنا ، يمكنك إجراء تغييرات مباشرة على ملفات السمات الخاصة بك. فقط لا تنس النقر فوق حفظ وتحديث بمجرد الانتهاء.
تحكم في مظهر موقعك باستخدام CSS المخصص
قد يستغرق تعلم كيفية كتابة CSS مخصص على WordPress بعض الوقت للمبتدئين ، ولكنه سيمنحك تحكمًا حقيقيًا في مظهر موقع الويب الخاص بك. وذلك بدون تكلفة ، وبأقل تأثير على أداء موقعك.
إذا كنت تفضل عدم القيام بأي تصميم يدوي ، فهناك طرق أخرى لإنجاز المهمة ، مثل استخدام أحد أفضل منشئي الصفحات في WordPress.
هل تريد أن تجعل موقع WordPress الخاص بك يبدو رائعًا ولكن لا يمكنك تحمل تكلفة مطور؟ جرب أدوات إنشاء صفحات WordPress هذه بدلاً من ذلك.
اقرأ التالي
- برمجة
- CSS
- وورد
- تطوير الشبكة
ديفيد من محبي WordPress ومتحمسين لمساعدة الشركات الصغيرة على النمو!
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
