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 إلى ووردبريس

ملاحظة: 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 لإضافة مساحة إلى أعلى الصفحة بحيث لا يتم تغطية المحتوى بالرأس الثابت.

كتاب إلكتروني مجاني
خريطة الطريق الخاصة بك خطوة بخطوة نحو عمل مربح لتطوير الويب. من الحصول على المزيد من العملاء إلى التوسع بجنون.

من خلال تنزيل هذا الكتاب الإلكتروني، فإنني أوافق على تلقي رسائل البريد الإلكتروني من حين لآخر من WPMU DEV.
نحن نحافظ على خصوصية بريدك الإلكتروني بنسبة 100% ولا نقوم بإرسال رسائل غير مرغوب فيها.

كتاب إلكتروني مجاني
قم بتخطيط وبناء وإطلاق موقع WP التالي الخاص بك دون أي عوائق. قائمة المراجعة الخاصة بنا تجعل العملية سهلة وقابلة للتكرار.

من خلال تنزيل هذا الكتاب الإلكتروني، فإنني أوافق على تلقي رسائل البريد الإلكتروني من حين لآخر من WPMU DEV.
نحن نحافظ على خصوصية بريدك الإلكتروني بنسبة 100% ولا نقوم بإرسال رسائل غير مرغوب فيها.

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

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


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

في هذا الكود، تقوم خاصية background-color: #f2f2f2 بتعيين لون الخلفية إلى اللون الرمادي الفاتح، وتضيف خاصية padding: 20px 20 بكسل 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 Customizer، وفهم محددات CSS، والعمل مع السمات الفرعية.
  • أفضل 7 مواقع للعثور على مقتطفات CSS والإلهام - هل تبحث عن بعض الإلهام لكود CSS الخاص بك؟ تسرد هذه المقالة سبعة مواقع ويب تقدم مقتطفات وأمثلة CSS يمكنك استخدامها في موقع WordPress الخاص بك.
  • كيفية تصميم الصور على موقع WordPress الخاص بك باستخدام CSS - تعد الصور جزءًا مهمًا من أي موقع ويب، وتقدم هذه المقالة نصائح حول كيفية تصميمها باستخدام CSS. ستتعلم كيفية إضافة الحدود وتغيير حجم الصورة ومحاذاتها والمزيد.
  • كيفية إضافة CSS مخصص إلى موقع WordPress الخاص بك - ترشدك هذه المقالة خلال عملية إضافة CSS مخصص إلى موقع WordPress الخاص بك، باستخدام كل من أداة التخصيص والمكونات الإضافية المضمنة.
  • مكونات CSS الإضافية المجانية للتحرير المباشر لموقع WordPress الخاص بك - تسرد هذه المقالة بعض مكونات CSS الإضافية المجانية التي تسمح لك بالتحرير المباشر لموقع WordPress الخاص بك، مما يسهل رؤية تأثيرات تغييرات CSS في الوقت الفعلي.
  • 14 أداة رائعة للرسوم المتحركة CSS لـ WordPress – إذا كنت تريد إضافة بعض الرسوم المتحركة إلى موقع WordPress الخاص بك باستخدام CSS، فإن هذه المقالة تسرد بعض الأدوات الرائعة التي يمكنك استخدامها للقيام بذلك.
  • إضافة تخطيطات البناء والشبكة إلى موقع WordPress الخاص بك باستخدام CSS – تشرح هذه المقالة كيفية استخدام CSS لإضافة تخطيطات البناء والشبكة إلى موقع WordPress الخاص بك، مما يؤدي إلى إنشاء تصميم أكثر جاذبية من الناحية المرئية.
  • 25 نصيحة من الخبراء لتشفير CSS أنظف لـ WordPress - إذا كنت ترغب في تحسين نظافة كود CSS وقابليته للقراءة، فإن هذه المقالة تقدم 25 نصيحة من الخبراء للقيام بذلك.
  • 25 نصيحة احترافية لتحسين سير عمل CSS الخاص بك - نصائح لتحسين سير عمل CSS، بدءًا من استخدام معالجات CSS الأولية إلى استخدام أدوات مطور المتصفح لتصحيح أخطاء التعليمات البرمجية الخاصة بك.

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

المساهمين

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

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