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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وورد الدستور لديه المزيد من المعلومات حول إنشاء موضوعات فرعية.

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

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

الأول هو استخدام المحرر المضمن في لوحة معلومات WordPress ، من خلال النقر فوق المظهر> المحرر. 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 في أنك تحتفظ بالمكون الإضافي حتى إذا قمت بإجراء تغيير في سمة WordPress. هذا له مفاضلاته ، حيث لا يمكن أن تظهر الأنماط بشكل جيد في جميع قوالب WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هذه الميزة مهمة لأنها ستساعدك على تحسين حملتك وتعظيم أرباحك. يأتي هذا المكون الإضافي WordPress Adsense أيضًا مع ميزة فريدة تسمى إعلانات الخلفية. يسمح لك بعرض الإعلانات كخلفية للمحتوى الخاص بك.

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

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

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

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

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

قل وداعًا لمشاكل تنزيل أنواع معينة من الملفات ، الآن عليك فقط تثبيت هذا المكون الإضافي WordPress والسماح له بمساعدتك في إدارة ملفاتك.

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

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

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

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

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

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

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

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

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

الخاتمة

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

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

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

...