support@meshcah.net

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

كود css

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

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


كود css

ما هو CSS؟

CSS (Cascading Style Sheets) هو لغة تستخدم لوصف مظهر عناصر HTML في صفحات الويب. إنه يشمل كل شيء من الألوان، الخطوط، الخلفيات، الهوامش، إلى العديد من الجوانب المرئية الأخرى.

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

كيفية إضافة كود CSS مخصص إلى ووردبريس

هناك عدة طرق لإضافة CSS مخصص إلى ووردبريس، وسنستعرضها جميعاً بالتفصيل:

1. إضافة CSS عبر مُخصص ووردبريس (WordPress Customizer)

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

الخطوات:

تسجيل الدخول إلى لوحة التحكم الخاصة بووردبريس

ابدأ بتسجيل الدخول إلى لوحة التحكم الخاصة بك عبر الذهاب إلى yoursite.com/wp-admin.

فتح مُخصص ووردبريس

من لوحة التحكم، انتقل إلى “المظهر” > “تخصيص”.

إضافة CSS مخصص

داخل المُخصص، ابحث عن خيار “CSS إضافي” في القائمة الجانبية. ستجد مساحة فارغة حيث يمكنك كتابة كود CSS المخصص الخاص بك.

معاينة التغييرات

يمكنك رؤية التغييرات التي تجريها بشكل فوري في المعاينة على اليمين. على سبيل المثال، لتغيير لون النصوص إلى الأزرق، يمكنك إضافة الكود التالي:

       body {
           color: blue;
       }

    حفظ التغييرات

    بعد الانتهاء من إضافة الكود وتأكدك من التعديلات، اضغط على زر “نشر” لحفظ التغييرات.

      كود css

      2. إضافة CSS مخصص باستخدام إضافة (Plugin)

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

      أفضل الإضافات لإضافة CSS مخصص:

      Simple Custom CSS:

        إضافة بسيطة وسهلة الاستخدام.

        يمكنك كتابة CSS مباشرة عبر لوحة التحكم في ووردبريس. رابط التحميل: Simple Custom CSS

        Custom CSS & JS:

        إضافة قوية تتيح لك إضافة أكواد CSS وJavaScript.

        تدعم إضافة الأكواد في واجهة المستخدم الأمامية والخلفية. رابط التحميل: Custom CSS & JS

        الخطوات لإضافة CSS باستخدام الإضافة:

        قم بتثبيت الإضافة من متجر ووردبريس بالإعدادات الخاصة بالإضافات.

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

        أضف كود CSS في المساحة المخصصة، ثم اضغط على “حفظ”.

        3. إضافة CSS مباشرة إلى ملف الـstyle.css في القالب الفرعي (Child Theme)

        من الطرق المتقدمة لإضافة CSS مخصص هي إنشاء قالب فرعي (Child Theme) ثم تعديل ملف style.css الخاص به. يُنصح دائمًا باستخدام قالب فرعي للحفاظ على التغييرات عند تحديث القالب الأصلي.

        الخطوات:

        إنشاء قالب فرعي

        إذا لم يكن لديك قالب فرعي، يمكنك إنشاء واحد عبر اتباع الخطوات الموجودة في وثائق ووردبريس الرسمية. يمكنك الاطلاع على هذه المقالة المفصلة لإنشاء قالب فرعي: How to Create a Child Theme.

        فتح ملف style.css

        بعد إعداد القالب الفرعي، افتح ملف style.css الموجود داخل مجلد القالب الفرعي.

        إضافة CSS مخصص

        ابدأ بإضافة الأكواد المخصصة التي ترغب في تعديلها. على سبيل المثال، لتغيير لون الخلفية، يمكنك إضافة الكود التالي:

             body {
                 background-color: #f4f4f4;
             }

          حفظ التغييرات

          احفظ الملف ثم قم بتفعيل القالب الفرعي من لوحة التحكم في ووردبريس.

            كود css

            4. إضافة CSS عبر ملف functions.php

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

            الخطوات:

            1. افتح ملف functions.php من القالب أو القالب الفرعي.
            2. أضف الكود التالي لتحميل ملف CSS خارجي:
               function add_custom_css() {
                   wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style.css');
               }
               add_action('wp_enqueue_scripts', 'add_custom_css');
            1. احفظ التغييرات.

            نصائح للمبتدئين عند إضافة CSS مخصص في ووردبريس:

            استخدام خاصية المعاينة الحية

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

            الحفاظ على الأكواد منظمة

            من الجيد تنظيم الأكواد المضافة بتعليقات توضح الهدف منها. على سبيل المثال:

                 /* تغيير لون خلفية الرأس */
                 header {
                     background-color: #333;
                 }

              اختبار التعديلات على أكثر من جهاز

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

              استخدام قالب فرعي (Child Theme)

              لتجنب فقدان التعديلات عند تحديث القالب، يُفضل دائمًا استخدام قالب فرعي.

              تجنب الإفراط في استخدام CSS المخصص

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

              مصادر لتعلم المزيد عن CSS ووردبريس:

              1. W3Schools – CSS Tutorial: موقع تعليمي يوفر دروسًا تفاعلية لتعلم CSS.
              2. CSS-Tricks: يحتوي على نصائح وأمثلة متقدمة لتطوير صفحات الويب باستخدام CSS.
              3. WordPress Codex: دليل شامل لجميع ميزات ووردبريس.

              الخاتمة:

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

              اترك أول تعليق