كيفية تخصيص CSS لموقع الويب الخاص بك على WordPress؟ اكتشف في هذا المقال.

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

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

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

ولكن قبل أن تبدأ ، خذ الوقت الكافي لإلقاء نظرة على كيفية تثبيت وورد موضوع, كم عدد الإضافات التي يجب أن تثبيت على وورد.

ثم اكتشفوا قائمتنا.

CSS: الأساسيات وكيف يستخدمها WordPress

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

ورقة الأنماط هي وثيقة تصف الأنماط (مثل الخط والألوان، الخ.) لاستخدامها في عرض مستند آخر. في حالتنا، نحن نتعامل مع نمط صفحة ويب.

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

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

تعرف على كيفية إدارة الإشعارات من خلال اكتشافها كيفية إدارة اشعارات بالبريد الالكتروني على وورد

تستخدم معظم سمات WordPress كود CSS المتوفر في ملف يسمى style.css. إذا قمت بفتح هذا الملف ، فسترى قائمة كاملة من قواعد النمط لموضوع WordPress الخاص بك. مهما فعلت ، لا تقم بتعديل هذا الملف! سوف التحديثات الكتابة فوق التغييرات الخاصة بك.

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

كيفية تخصيص موقع WordPress الخاص بك باستخدام CSS

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

في نهاية عملنا، ستتمكن من تحديد الطريقة التي تتوافق مع قالب ووردبريس الخاص بك.

الخيار # 1: تخصيص CSS باستخدام سمة فرعية

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

اكتشف متى وكيف لتثبيت وورد في دليل فرعي

إنشاء قالب فرعي أمر بسيط للغاية. يتضمن ذلك إنشاء مجلد على استضافة موقعك الإلكتروني يحتوي على ملف style.css الذي يسرد السمة الأم كقالب ، ويستورد الملف style.css من موضوع الأصل (هل تتذكر معنى أوراق الأنماط "المتتالية"؟).

وورد الدستور يحتوي على المزيد من المعلومات حول إنشاء قوالب فرعية.

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

تحقق من هذه المقالة لاكتشاف كيفية ضغط ملفات CSS و HTML و Javascript

تتضمن الطريقة الأولى استخدام المحرر الموجود في لوحة تحكم ووردبريس، وذلك بالنقر على المظهر> المحرر. L 'محرر يعرض قائمة من الملفات على اليمين المتاحة في السمة (يتم عرض الملفات الشائعة فقط). ملفك style.css سيكون في أسفل القائمة، وبالنقر على الخيار أنماط ملفك style.css سوف تهمة.

يمكنك إضافة تغييراتك إلى هذا الموقع وحفظ التغيير.

الطريقة الأخرى للوصول إلى ملفك style.css (واحد ونحن نوصي) هو استعراض الملفات في استضافة الويب الخاص بك عن طريق بروتوكول نقل الملفات العملاء أو مدير ملفات. سيكون مجلد القالب الفرعي الذي أنشأته موجودًا في مجلد "wp-content> المواضيع". ستكون قادرًا على استخدام محرر نصوص لتحرير الملف style.css.

الخيار رقم 2: تخصيص CSS من Customizer

اعتبارًا من WordPress 4.7 ، يمكن للمستخدمين إضافة CSS مخصص مباشرةً من منطقة إدارة WordPress. إنه سهل للغاية ، وستتمكن من رؤية تغييراتك من خلال المعاينة في الوقت الفعلي.

أولاً ، عليك التوجه إلى الصفحة سمات »تخصيص.

سيؤدي ذلك إلى تشغيل واجهة تخصيص سمة WordPress.

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

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

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

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

الخيار # 3: تخصيص CSS باستخدام مكون إضافي

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

وهنا بعض الإضافات:

1. CSS مخصص في Jetpack (مجاني)

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

بمجرد تفعيل الوحدة في لوحة تحكم Jetpack، سيتوفر محرر CSS مخصص، مما يسمح لك بتخصيص قالب ووردبريس الخاص بك دون الحاجة إلى إنشاء قالب فرعي. يمكنك الوصول إلى المحرر باتباع هذا المسار:المظهر> تحرير CSS".

2. CSS مخصص بسيط (مجاني)

إذا كنت تريد بدلا من ذلك خيار مستقل، CSS مخصص بسيط هو اختيار جيد. هذا البرنامج المساعد المجاني ، المستخدم في أكثر من مواقع 200.000 مع تصنيف نجوم 4,9 ، سيساعدك بالتأكيد على تخصيص مدونة CSS WordPress الخاصة بك.

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

3. CSS Hero (من 14 دولارًا في السنة)

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

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

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

اكتشف كيفية نقل التعليقات من مقال إلى آخر على وورد

إذا كنت ترغب في تغيير CSS تمامًا لمدونة WordPress الخاصة بك ، ولكن لا ترغب في تعلم CSS ، فإن CSS Hero يعد خيارًا رائعًا لتخصيص موقع الويب الخاص بك ، خاصة إذا كنت تستخدم أحد سمات WordPress الخاصة بهم.

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

الذهاب أبعد من ذلك من خلال اكتشاف كيفية السماح للمستخدمين لتحرير صفحات معينة

لذلك هناك عدة طرق لتخصيص CSS لموضوع WordPress الخاص بك:

1. موضوع الطفل.
2. ومخصص.
3. CSS المساعد.

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

يمكنك استخدام مكونات WordPress الأخرى لإضفاء مظهر حديث وتحسين قبضة مدونتك أو موقعك الإلكتروني.

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. الإعلان الإعلان

يعد WP PRO Advertising System أحد مكونات برنامج WordPress لإدارة الإعلانات ، والذي يوفر مواقع 18 الاستراتيجية لمساعدتك في عرض الإعلانات على موقع الويب الخاص بك. كما أنه يحتوي على قسم إحصائيات تفصيلية سترى منه أداء كل إعلان.

تُعدّ هذه الميزة أساسية لأنها ستساعدك على تحسين حملتك الإعلانية وزيادة أرباحك إلى أقصى حد. كما يأتي هذا الملحق الخاص بـ AdSense لـ WordPress مزودًا بميزة فريدة تُسمى إعلانات الخلفية، والتي تتيح لك عرض الإعلانات كخلفية لمحتواك.

زائد ، لأنه متوافق مع الإضافات مثل WPBakery et تعديل سلايدريمكنك عرض إعلاناتك كشرائح عرض أو وضعها في أي مكان على موقعك الإلكتروني.

تحميل | عرض | استضافة المواقع

2. الفسفور الابيض مدير ملف الوسائط

WP Media File Manager هو إضافة ووردبريس تُسهّل تنظيم مكتبة الوسائط الخاصة بك في هيكل هرمي باستخدام خاصية السحب والإفلات. تُعدّ هذه الإضافة من أقوى إضافات إدارة الملفات على CodeCanyon، ولن تحتاج حتى إلى إنشاء المجلدات يدويًا.

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

ودّع مشاكل تنزيل أنواع معينة من الملفات؛ الآن كل ما عليك فعله هو تثبيت إضافة ووردبريس هذه ودعها تساعدك في إدارة ملفاتك.

تحميل | عرض | استضافة المواقع

3. بطل القائمة

Hero Menu هو إضافة قائمة ضخمة لـ WordPress. ورغم أنها لا تقدم ميزات استثنائية، إلا أنها توفر جميع الميزات الضرورية مقابل 19 دولارًا فقط. ومثل Mega Main Menu، فهي أيضًا منتج مميز على CodeCanyon، وقد حققت ما يقارب 4500 عملية بيع حتى الآن.

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

يُحسّن مُنشئ القوائم من سهولة استخدام الإضافة ويُبسّط عمل المُشتري بشكلٍ كبير. كما أن تكامل واجهة المستخدم ممتاز ويعمل بسلاسة مع الإضافات الأخرى.

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

اكتشف موارد أخرى موصى بها ستساعدك في إنشاء وإدارة موقعك الإلكتروني.

• كيفية حماية نموذج في WordPress بكلمة مرور
• كيفية خلق التحولات جميلة من الصفحات على وورد
• كيفية استخدام واجهة برمجة تطبيقات WordPress REST
• كيفية ربط موقع الويب الخاص بك مع ووردبريس برقية
• كيفية تنظيف وورد في بضع خطوات

خاتمة

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

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

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

...