17 نصيحة توفر الوقت في CSS لمستخدمي WordPress

نشرت: 2023-03-13

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

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

إذا سبق لك أن طرحت أيًا من هذه الأسئلة أثناء عملك على موقع WordPress الخاص بك:

  • "كيف يمكنني إزالة زر" قراءة المزيد "؟"
  • "كيف يمكنني تغيير لون هذا الرابط؟"
  • "كيف أجعل هذا الرابط غير قابل للنقر مع الاحتفاظ بالنص على الصفحة؟"

... ثم تابع القراءة لتتعلم بعض حيل CSS القيمة لموقعك على الويب.

في هذا البرنامج التعليمي ، سنغطي:

  • نصائح ووردبريس CSS
    1. توسيط عنصر أفقيًا ورأسيًا
    2. تغيير لون الارتباط
    3. إزالة ارتباط
    4. تعطيل ارتباط (يظل الرابط مرئيًا ولكن لا يمكن للمستخدمين النقر فوقه)
    5. تغيير لون الروابط عند التمرير
    6. روابط النمط
    7. نمط زر
    8. تغيير خط القسم
    9. قم بإنشاء رأس لاصق
    10. قم بإنشاء رأس لاصق مع تأثير الظل
    11. أضف لون الخلفية إلى قسم
    12. تغيير لون خلفية الجسم
    13. تغيير لون كلمة أو عبارة معينة
    14. قم بإنشاء حدود حول الصورة
    15. قم بإنشاء تأثير تحوم على صورة
    16. نمط النموذج
    17. قم بإنشاء تخطيط سريع الاستجابة
  • خذ مهاراتك في CSS إلى المستوى التالي

نصائح ووردبريس CSS

الشيئان الوحيدان اللذان تحتاج إلى معرفتهما لتنفيذ هذه النصائح هما:

  • كيف يعمل CSS
  • كيفية إضافة CSS إلى WordPress

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

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

توسيط عنصر أفقيًا ورأسيًا

لتوسيط عنصر (مثل صورة أو نص أو div) أفقيًا ورأسيًا ، استخدم كود CSS التالي: 

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

في هذا الكود ، يتم استخدام الخاصية position: relative لوضع العنصر بالنسبة إلى أقرب سلف له موضعه. الجزء top: 50% left: 50% تقوم الخصائص بنقل العنصر إلى منتصف الحاوية الخاصة به. أخيرًا ، transform: translate(-50%, -50%) بتوسيط العنصر أفقيًا ورأسيًا عن طريق تحريكه للخلف بنسبة 50٪ من عرضه وارتفاعه.

تغيير لون الارتباط 

.item-class{
color : blue;
}

يمكنك استخدام ألوان مثل الأبيض والأسود والأزرق والأحمر ... ولكن قد ترغب في استخدام ألوان محددة.

في هذه الحالة ، يمكنك القيام بذلك على النحو التالي: 

.item-class{
color : #F7F7F7;
}

إذا كنت تبحث عن إنشاء لوحة ألوان لتصميم موقع الويب الخاص بك ، فحاول استخدام أداة Paletton. إنه مفيد للغاية!

ملاحظة: إذا كنت تريد دمج العناصر ، فهذا سهل جدًا.

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

يمكنك استخدام هذا الرمز: 

.item-class{
pointer-events : none;
color : black;
}

إزالة ارتباط 

.item-class{
display : none;
}

ملاحظة: قد تحتاج في بعض الأحيان إلى وضع a بعد الفصل الدراسي لإنجاحه ، على النحو التالي: 

.item-class a{
display : none;
}

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

تعطيل ارتباط (يظل الرابط مرئيًا ولكن لا يمكن للمستخدمين النقر فوقه)

ملاحظة: من الأفضل دائمًا تعديل HTML للقيام بذلك ، ولكن إذا كان CSS أسهل أو كان الحل الوحيد ممكنًا ، فاستخدم هذا الرمز: 

.item-class{
pointer-events: none;
}

تغيير لون الروابط عند التمرير

يمكنك تغيير لون الروابط عندما يمرر المستخدم الماوس فوقها باستخدام كود CSS التالي:

a:hover {
color: red;
}

في هذا الكود ، يستهدف محدد a:hover جميع الروابط على الصفحة التي يحوم المستخدم فوقها حاليًا. تقوم خاصية color: red بتغيير لون النص إلى اللون الأحمر.

روابط النمط

لتصميم الروابط على موقع الويب الخاص بك ، استخدم كود CSS التالي:

a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

في هذا الرمز ، يتم استخدام a لتصميم جميع الروابط الموجودة على الصفحة. تحدد خاصية color لون الروابط ، وتزيل خاصية text-decoration التسطير الافتراضي. تضيف خاصية border-bottom تأثير تسطير دقيق. تنشئ خاصية transition تأثير انتقال سلس عندما يقوم المستخدم بتمرير الماوس فوق الارتباط. يتم استخدام محدد a:hover لتحديد نمط الارتباط عندما يقوم المستخدم بتمرير الماوس فوقه.

نمط زر

استخدم الكود التالي لتصميم زر:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

في هذا الرمز ، تُستخدم الخصائص المختلفة لتصميم زر ، بما في ذلك background-color وخصائص color لمظهر الزر ، وخاصية padding لحجم الزر ، وخاصية cursor لتغيير مؤشر الماوس عند التمرير فوق الزر.

تغيير خط القسم

قم بتغيير خط قسم من موقع الويب الخاص بك باستخدام رمز CSS التالي:

.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

في هذه التعليمات البرمجية ، تعيّن خاصية font-family الخط إلى Arial أو خط sans-serif مشابه ، وتعيّن خاصية font-size الخط حجم الخط إلى 16 بكسل ، وتضبط خاصية line-height التباعد بين أسطر النص على 1.5 أضعاف حجم الخط.

قم بإنشاء رأس لاصق

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

.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

في هذه الشفرة ، تُثبت الخاصية position: fixed العنوان أعلى إطار العرض ، وتضعه الخاصية top: 0 الخاصية في أعلى الصفحة. width: 100% تضمن أن الرأس يمتد عبر العرض الكامل لإطار العرض. يتم استخدام background-color color الرأس ، وتضمن الخاصية z-index: 9999 ظهور الرأس أعلى كل العناصر الأخرى على الصفحة.

قم بإنشاء رأس لاصق مع تأثير الظل

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

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

في هذا الكود ، تُستخدم الخاصية position: fixed لإصلاح العنوان في أعلى الصفحة. top: 0 left: 0 خصائص تضع الرأس في الزاوية العلوية اليسرى من الصفحة. width: 100% تحدد الخاصية عرض الرأس ليكون العرض الكامل للصفحة. تعيّن خاصية background-color لون خلفية الرأس ، وتضمن خاصية z-index ظهور الرأس أعلى العناصر الأخرى على الصفحة. أخيرًا ، تضيف خاصية box-shadow تأثير ظل دقيقًا إلى الرأس. يُستخدم محدد .content لإضافة مساحة متروكة أعلى الصفحة بحيث لا يتم تغطية المحتوى بالرأس الثابت.

أضف لون الخلفية إلى قسم

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

.section {
background-color: #f2f2f2;
padding: 20px;
}

في هذا الكود ، تعيّن الخاصية background-color: #f2f2f2 لون الخلفية إلى الرمادي الفاتح ، وتضيف خاصية padding: 20px مسافة 20 بكسل حول المحتوى داخل القسم.

تغيير لون خلفية الجسم

أضف هذا الرمز لتغيير لون خلفية جسم موقع الويب الخاص بك:

body {
background-color: #f5f5f5;
}

في هذا الرمز ، تعيّن خاصية background-color لون الخلفية إلى رمادي فاتح.

تغيير لون كلمة أو عبارة معينة

لتغيير لون كلمة أو عبارة معينة داخل كتلة نصية ، يمكنك استخدام كود CSS التالي:

p span {
color: red;
}

في هذا الكود ، يستهدف محدد p span أي عنصر span يظهر داخل عنصر p . يمكنك بعد ذلك التفاف الكلمة أو العبارة التي تريد استهدافها بعنصر span في HTML الخاص بك ، على النحو التالي:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

هذا من شأنه أن يجعل عبارة "consectetur adipiscing elit" تظهر باللون الأحمر.

قم بإنشاء حدود حول الصورة

إليك كيفية إضافة حد حول صورة:

img {
border: 2px solid #ccc;
}

في هذا الرمز ، تحدد خاصية border عرض ونمط ولون الحد. تعيّن قيمة 2px عرض الحد إلى 2 بكسل ، وتضبط solid النمط على خط متصل ، وتضبط #ccc اللون على رمادي فاتح.

قم بإنشاء تأثير تحوم على صورة

استخدم مقتطف الشفرة هذا لإنشاء تأثير تمرير فوق صورة:

img:hover {
opacity: 0.8;
}

في هذا الكود ، يستهدف المحدد img:hover الصورة عندما يحوم المستخدم فوقها. تحدد خاصية opacity شفافية الصورة. في هذه الحالة ، يتم تعيين القيمة على 0.8 ، مما يجعل الصورة شفافة بعض الشيء عندما يحوم المستخدم فوقها.

نمط النموذج

صمم نموذجًا على موقع الويب الخاص بك باستخدام رمز CSS التالي:

form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

في هذا الكود ، تُستخدم الخصائص المختلفة لتصميم نموذج ، بما في ذلك خصائص background-color padding وخصائص border-radius للمظهر العام للنموذج. يتم استخدام محدد form label لتصميم العلامات المرتبطة بكل حقل نموذج. form input[type="text"], form input[type="email"], form textarea يستخدم لتصميم حقول الإدخال المختلفة في النموذج. يتم استخدام محدد form input[type="submit"] لتصميم زر الإرسال.

قم بإنشاء تخطيط سريع الاستجابة

إذا كنت ترغب في إنشاء تنسيق سريع الاستجابة يتكيف مع أحجام الشاشات المختلفة ، فاستخدم رمز CSS التالي:

@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

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

نصيحة CSS أخرى ...

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

لتجاوز هذا ، فقط أضف !important مثل هذا: 

.item-class{
pointer-events: none !important;
}

هذه مجرد أمثلة قليلة للطرق العملية التي يمكنك من خلالها استخدام CSS لتحسين موقع WordPress الخاص بك.

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

خذ مهاراتك في CSS إلى المستوى التالي

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

  • 10 نصائح بسيطة لتعلم CSS لـ WordPress - نصائح عملية للمبتدئين الذين يرغبون في تعلم CSS خصيصًا للاستخدام مع WordPress. يغطي كل شيء من فهم بناء جملة CSS إلى استخدام أطر عمل CSS.
  • تعلم ومراجع CSS لـ WordPress - دليل شامل لتعلم CSS والرجوع إليها خصيصًا للاستخدام مع WordPress. إنه يغطي موضوعات مثل استخدام مُخصص WordPress ، وفهم محددات CSS ، والعمل مع السمات الفرعية.
  • أفضل 7 مواقع للعثور على مقتطفات وإلهام CSS - هل تبحث عن بعض الإلهام لرمز CSS الخاص بك؟ تسرد هذه المقالة سبعة مواقع ويب تقدم مقتطفات وأمثلة من CSS يمكنك استخدامها في موقع WordPress الخاص بك.
  • كيفية تصميم الصور على موقع WordPress الخاص بك باستخدام CSS - تعد الصور جزءًا مهمًا من أي موقع ويب ، وتقدم هذه المقالة نصائح حول كيفية تصميمها باستخدام CSS. ستتعلم كيفية إضافة حدود وتغيير حجم الصورة والمحاذاة والمزيد.
  • كيفية إضافة CSS مخصص إلى موقع WordPress الخاص بك - ترشدك هذه المقالة خلال عملية إضافة CSS مخصصة إلى موقع WordPress الخاص بك ، باستخدام كل من Customizer المدمج والمكونات الإضافية.
  • إضافات CSS مجانية للتحرير المباشر لموقع WordPress الخاص بك - تسرد هذه المقالة بعض الإضافات المجانية لـ CSS التي تسمح لك بتحرير موقع WordPress الخاص بك ، مما يسهل رؤية تأثيرات تغييرات CSS في الوقت الفعلي.
  • 14 من أدوات الرسوم المتحركة الرائعة لـ WordPress - إذا كنت ترغب في إضافة بعض الرسوم المتحركة إلى موقع WordPress الخاص بك باستخدام CSS ، تسرد هذه المقالة بعض الأدوات الرائعة التي يمكنك استخدامها للقيام بذلك.
  • أضف Masonry and Grid Layouts إلى موقع WordPress الخاص بك باستخدام CSS - تشرح هذه المقالة كيفية استخدام CSS لإضافة تخطيطات البناء والشبكة إلى موقع WordPress الخاص بك ، مما يؤدي إلى إنشاء تصميم أكثر جاذبية من الناحية المرئية.
  • 25 نصيحة من الخبراء حول ترميز CSS الأنظف لـ WordPress - إذا كنت ترغب في تحسين نظافة وقراءة كود CSS الخاص بك ، فإن هذه المقالة تقدم 25 نصيحة من الخبراء للقيام بذلك.
  • 25 نصيحة احترافية لتحسين سير عمل CSS الخاص بك - نصائح لتحسين سير عمل CSS الخاص بك ، من استخدام معالجات CSS الأولية إلى استخدام أدوات مطور المستعرض لتصحيح التعليمات البرمجية الخاصة بك.

انقر على الروابط لمعرفة المزيد وابدأ في تحسين موقع WordPress الخاص بك اليوم.

المساهمون

غاضب شكرًا لعضو WPMU DEV أنطوان من Incensy لمساهمته بفكرة هذا المنشور والعديد من أمثلة CSS المستخدمة أعلاه. تحقق من ملف تعريف شريك Incensy للحصول على مزيد من التفاصيل.

***

ملاحظة: نحن لا نقبل المقالات من مصادر خارجية. ومع ذلك ، يمكن لأعضاء WPMU DEV المساهمة بأفكار واقتراحات للدروس والمقالات على مدونتنا عبر Blog XChange.

هل فاتنا أي حيل CSS أنيقة التقطتها على طول الطريق؟ نود أن نتعرف عليهم في التعليقات!