إضافة CSS مخصص

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

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

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

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

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

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

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

1. تفضَّل بزيارة لوحة تحكم موقعك.
2. انتقل إلى المظهر ← المحرر.
3. انقر على الأنماط في قائمة التصميم على اليسار.
   • إذا كان قالبك يتضمن أشكال الأنماط، فيجب عليك بعد ذلك النقر على أيقونة القلم الرصاص لفتح خيارات الأنماط:

4. انقر على النقاط الثلاث الموجودة على يمين عنوان “الأنماط“، واختر “CSS إضافي“:

5. اكتب CSS الخاصة بك أو ألصقه في مربع النص المتوفر.
6. انقر على زر “حفظ” في أعلى يمين الشاشة لحفظ CSS إلى موقعك.

يمكنك معاينة تأثير تغييرات CSS الخاصة بك على أي نوع مكوِّن عن طريق تحميل دفتر الأنماط. انقر على أيقونة العين لفتح دفتر الأنماط.

في قوالب محرر الموقع، يمكنك تطبيق كود CSS على مكوِّنات محددة على مستوى الموقع عن طريق اتباع الخطوات الواردة أدناه.

1. تفضَّل بزيارة لوحة تحكم موقعك.
2. انتقل إلى المظهر ← المحرِّر.
3. انقر على الأنماط في قائمة التصميم على اليسار.
   • إذا كان قالبك يتضمن أشكال الأنماط، فيجب عليك بعد ذلك النقر على أيقونة القلم الرصاص لفتح خيارات الأنماط.
4. في هذه المرة، حدد قسم “المكوِّنات” للوصول إلى الإعدادات لتخصيص مظهر مكوِّنات معينة للموقع بالكامل.
5. انقر على اسم المكوِّن الذي ترغب في إضافة CSS إليه. يمكنك أيضًا تحديد موقع نوع المكوِّن الذي تريده باستخدام مربع البحث.
6. مرِّر إلى الأسفل وانقر على “متقدم“.
7. في المربع المسمى “CSS إضافية“، اكتب CSS التي ستنطبق على كل مثيلات نوع المكوِّن ذلك. عند إضافة CSS لكل مكوِّن، يتعين عليك عدم تضمين أداة تحديد CSS؛ ما عليك سوى إضافة الخاصية والقيمة. يتم تضمين مثال في الفيديو أعلاه.
8. انقر على زر “حفظ” في أعلى يمين الشاشة لحفظ CSS إلى موقعك.

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

1. تفضَّل بزيارة لوحة تحكم موقعك.
2. انتقل إلى المظهر ← تخصيص ← CSS إضافية.
3. اكتب CSS الخاصة بك أو ألصقه في مربع النص المتوفر. ستعكس نافذة المعاينة الموجودة على اليمين تغييراتك.
4. انقر على زر “حفظ التغييرات” لحفظ CSS إلى موقعك.

يتم حفظ أحدث 25 مراجعة من عمليات تحرير CSS الخاصة بك ويمكن الوصول إليها عن طريق النقر على “الاطلاع على المحفوظات بالكامل” في الجزء السفلي من محرر CSS. يمكنك استعادة الإصدارات السابقة من CSS الخاصة بك هنا.

إذا لم يظهر هذا الخيار، فليس هناك محفوظات CSS لاستعادتها.

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

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

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

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

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

يتميز ووردبريس.كوم بدعم معالجات CSS الأولية LESS وSass (SCSS Syntax). هذا خيار متقدم للمستخدمين الذين يرغبون في ملحقات CSS، مثل: المتغيرات وعمليات المزج. تفضَّل بزيارة الموقعين الإلكترونيين LESS وSass للحصول على مزيد من المعلومات.

ينبغي عدم تعديل رصيد التذييل باستخدام CSS. يمكنك إزالة رصيد التذييل أو تعديله باستخدام الإعدادات حسب نوع القالب الذي يستخدمه الموقع:

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

نعم، على المواقع التي تدعم الإضافات فقط.

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

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

 div#content { background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); } 

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

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

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