كيفية تحرير CSS في وورد بريس (تحرير وإضافة وتخصيص كيف يبدو موقعك)

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

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

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

ما هو تحرير CSS؟

ترمز CSS إلى Cascading Style Sheets وهي لغة الويب الأكثر شيوعًا إلى جانب HTML . يسير الاثنان جنبًا إلى جنب ، حيث يتم استخدام CSS لتصميم عناصر HTML . يضع HTML الأساس لمظهر موقع الويب ويستخدم CSS لزيادة تصميمه.

w3school

مثال على كود CSS (المصدر: w3schools.com)

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

عند التعمق في تطوير وورد بريس ، فإن HTML و CSS و JavaScript و PHP هي اللغات التي ستحتاج إلى معرفتها. هذا ما جوهر CMS بنيت في، وكذلك في العديد من المواضيع  و الإضافات .

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

هل أنت جاهز لمنح موقع #وورد بريس الخاص بك مظهرًا وأسلوبًا مخصصين؟ 👀 تعرف على كيفية استخدام نمط CSS لتحرير الألوان 🎨 وتغيير التنسيق ✨ والمزيد

انقر للتغريد

وورد بريس و CSS

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

تقوم ملفات القوالب بتقسيم أجزاء من موقع الويب الخاص بك إلى أقسام (مثل header.php أو archive.php) ، ويتم استخدام علامات القوالب للاتصال بها ومحتويات أخرى من قاعدة البيانات الخاصة بك. تتكون هذه الملفات في الواقع من PHP و HTML ، على الرغم من أنه يمكنك إضافة CSS إذا كنت بحاجة إلى ذلك.

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

كيفية تخصيص سمة وورد بريس الخاصة بك باستخدام CSS

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

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

تشبه ورقة الأنماط “قائمة الإرشادات” لموقع الويب الخاص بك ، حيث تحدد بالضبط كيفية تصميمها وكيفية التعامل مع كود CSS. هذا هو المكان الذي ستجري فيه الجزء الأكبر من التحرير ، لكننا سنعرض لك أيضًا كيفية الوصول إلى ملفات قوالب السمات الأخرى ، مثل header.php و footer.php .

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

لست مرتاحًا لفعل هذا بنفسك؟ فكر في الاستعانة بمطور وورد بريس للتعامل مع هذه الخطوة نيابة عنك.

تحرير وورد بريس CSS في لوحة القيادة

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

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

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

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

تحرير السمات

إجراء تعديلات مباشرة على ملفات وورد بريس

والآن أنت في! يجب أن تكون في ورقة الأنماط افتراضيًا ولكن انظر إلى القائمة الموجودة على اليمين لعرض ملفات السمات الخاصة بك إذا لم تكن كذلك.

إلى جانب style.css ، سيكون لديك أيضًا حق الوصول إلى ملفات القوالب مثل jobs.php و header.php و single.php. كل هذه العوامل تؤثر على كيفية عمل صفحات معينة على موقعك.

لكن يجب أن تتعرف على PHP قبل الغوص في هذه الملفات المحددة.

تحرير ورقة أنماط style.css في قالب وورد بريس

تحرير ورقة أنماط style.css في قالب وورد بريس

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

تحرير ملفات النسق مباشرة

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

يسمح لك بروتوكول نقل الملفات ، أو بروتوكول نقل الملفات ، بالوصول عن بُعد وتعديل ملفات موقع الويب. أول شيء عليك القيام به هو تنزيل FileZilla أو أي عميل FTP آخر.

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

بيانات اعتماد FTP في MyKinsta

بيانات اعتماد FTP في MyKinsta

توجد بيانات اعتماد مستخدمي Kinsta في لوحة معلومات MyKinsta ضمن Sites> SFTP / SSH .

بمجرد الحصول عليها ، قم بتشغيل عميل FTP الخاص بك وأدخل هذه المعلومات. إذا لم ينجح الأمر ، فحاول وضع “sftp: //” قبل عنوان URL في قسم المضيف .

FileZilla

باستخدام FileZilla

مرة كنت في، يمكنك العثور على ملف style.css الخاص بك عن طريق النقر على -الفسفور الابيض محتوى المجلد لفتحه، ثم موضوع مجلد الخاص بك (مثل T wenty عشرون موضوع )، ثم التمرير حتى ترى style.css.

انقر نقرًا مزدوجًا لفتحه (أو انقر بزر الماوس الأيمن وحدد عرض / تحرير ) وقم بإجراء التعديلات. تذكر أن تقوم بالحفظ والتحميل مرة أخرى إلى الخادم.

إذا كنت بحاجة إلى تحرير ملفات قوالب أخرى مثل home.php و single.php و archive.php ، فيمكنك العثور عليها في نفس المجلد مثل style.css.

تحرير ملفات السمات الخاصة بك ، سواء من خلال FTP أو لوحة القيادة ، ليس ضروريًا دائمًا. في الواقع ، من الأفضل تجنب القيام بذلك إذا كنت تضيف بعض التعليمات البرمجية الإضافية فقط.

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

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

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

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

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

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

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

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

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

1. تحرير CSS من خلال أداة تخصيص وورد بريس

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

في الجزء السفلي من هذه القائمة ، يجب أن تجد مربع CSS الإضافي .

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

CSS إضافية

CSS إضافي في وورد بريس

يظهر أي رمز تكتبه تلقائيًا في منطقة المعاينة على اليمين ما لم يكن به خطأ (على الرغم من أنه يمكنك اختيار نشره على أي حال).

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

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

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

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

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

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

2. إضافة Custom CSS إلى وورد بريس باستخدام الإضافات

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

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

هل تحتاج إلى استضافة سريعة وآمنة وصديقة للمطورين لمواقع عملائك؟ تم تصميم Kinsta مع وضع مطوري وورد بريس في الاعتبار ويوفر الكثير من الأدوات ولوحة تحكم قوية. تحقق من خططنا

CSS مخصص بسيط

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

البرنامج المساعد Simple Custom CSS وورد بريس الإضافي

البرنامج المساعد Simple Custom CSS وورد بريس الإضافي

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

بسيط CSS و JS مخصص

البرنامج المساعد Simple Custom CSS و JS وورد بريس

البرنامج المساعد Simple Custom CSS و JS وورد بريس

يعد Simple Custom CSS و JS بديلاً جيدًا. يتيح لك أيضًا استهداف الرأس أو التذييل أو الواجهة الأمامية أو حتى الواجهة الخلفية للمسؤول.

SiteOrigin CSS

SiteOrigin CSS وورد بريس plugin

SiteOrigin CSS وورد بريس plugin

SiteOrigin CSS هو خيار آخر يتضمن أيضًا محرر CSS تقليدي. يمكنك التبديل بينها وبين المحرر المرئي في أي وقت.

الفسفور الابيض أضف CSS مخصص

WP Add Custom CSS وورد بريس plugin

WP Add Custom CSS وورد بريس plugin

إذا كنت تكافح من أجل إضافة CSS إلى صفحات معينة ، فإن WP Add Custom CSS يضيف مربع CSS مخصصًا إلى شاشة التحرير ، ويأتي أيضًا بتصميم عالمي.

بطل CSS

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

بطل CSS

بطل CSS

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

أين تتعلم CSS

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

تعلم CSS

تعلم CSS

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

(القراءة المقترحة: أكثر من 50 خطًا حديثًا لاستخدامها على موقع وورد بريس الخاص بك )

معظم دروس البرمجة التي ستجدها على الإنترنت مجانية تمامًا أيضًا. هناك الكثير من المعلومات المتوفرة بتكلفة قليلة / قليلة.

فيما يلي بعض الأمثلة التي تغطي أفضل دروس CSS للمبتدئين.

W3Schools CSS Tutorial : يوجد عدد هائل من المعلومات التي يمكن العثور عليها هنا: دروس تعليمية متعمقة وأمثلة ومراجع يمكنك العمل معها. دروس W3Schools بسيطة وسهلة المتابعة قدر الإمكان ، لذلك حتى لو كنت مبتدئًا تمامًا ، فهذا مكان رائع للبدء.

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

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

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

تعرف على كيفية استخدام CSS لتخصيص وتحسين موقع الويب الخاص بك ، من الألوان المستخدمة إلى المسافات بين العناصر ✨

انقر للتغريد

ملخص

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

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

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

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

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

تصميم سعيد!

قراءة مقترحة: أفضل دورات تصميم مواقع الإنترنت عبر الإنترنت

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.