مقتطفات أكواد CSS لتحسين المظهر المرئي لموقع ووردبريس

المـدخل:  مقتطفات أكواد CSS لتحسين المظهر المرئي لموقع ووردبريس

الهدف من استخدام CSS في الووردبريس هو تحسين المظهر المرئي للموقع وإثراء تجربة المستخدم

CSS  هو  اختصار ل Cascading Style Sheets و تعني « أوراق الأنماط المتتالية » و هو مكمل للغة HTML.

 

مقتطفات CSS لووردبريس


 

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

قبل الاستمرار  تصفح هذه الصفحة، أدعوك لمعرفة كيفية التعامل مع أكواد CSS

 


إضافة الحواف المستديرة للصور

قم بتدوير حواف صورك باستخدام القليل من CSS3:

 


تغيير القوائم النقطية لمقالاتك

هل سئمت من النقاط أو الدوائر لقوائمك؟ جرب هذا المقتطف الذي يجعلك تستعمل صوراً صغيرة بدل النقاط.

 


تغيير لون النص عند تحديده

عند تحديد النص ستلاحظ تغيُّر لون النص بلون تختاره بنفسك.


روابط البريد الإلكتروني مع الصور

أضف أيقونة أو صورة إلى كافة روابط البريد الإلكتروني:

 


إقتباسات جميلة

مَنْـح اقتباسات Blockquotes مظهراً جديداً.

مقتطفات أكواد CSS لتحسين المظهر المرئي لموقع ووردبريس


قم بإزالة الحدود حول الوجوه الضاحكة

أضف هذا الرمز إذا رأيت حدوداً قبيحة حول الوجوه الضاحكة.

قم أيضًا بزيادة المسافة بين النص والوجوه الضاحكة باستخدام هامش بسيط.

 


توسيط موقع الويب الخاص بك

سيؤدي هذا الغلاف إلى توسيط موقع الويب الخاص بك والنص المحاذي لليسار افتراضيًا.

 


 

إضافة إسقاط قبعات

طريقتان لتصميم الحرف الأول من الفقرة. الأول يتطلب أن تقوم بتمديد “Firstcaracter” إلى الحرف الأول:

لا تتطلب الطريقة التالية أي تدخل من جانبك ولكن من الواضح أنها لا تعمل بموجب IE 6 و 7 و 8:

 


إضافة تأثير التحميل للصور

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


أضف تأثير الظل إلى العناوين

اعرض عناوينك باستخدام تأثير الظل البسيط هذا.

 


 

أضف فواصل طباعة

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

 


 

منع التفاف الروابط

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

 


لون التعليق البديل

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

 


 

ضبط المسافة بين الحروف والكلمات

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

 


 

استخدم اقتباسات السحب لتحسين التجربة

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

 


تصميم الكود في المنشورات والصفحات

يتم استخدام علامتي <pre> و <code> بشكل متكرر لعرض التعليمات البرمجية. سيساعدك الكود التالي في تسهيل القراءة.

 


 

كيفية استخدام علامات DIV

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

مثال لاستخدام علامة Div البسيطة بعرض 80٪ ، يتم توسيطه بلون الخلفية والحد:

استعمال : DIV

لذلك يمكنك إضافة هذا الكود في صفحة أو مقال:

إما أن تعلنها في ملف CSS وتتصل بها إذا لزم الأمر:

واستخدمها على النحو التالي:

آمل أن تجد مقتطفات الشفرة التي أدرجتها في هذا المقال مفيدة ، فلا تتردد في مشاركتها مع الآخرين.

دمتم في رعاية الله 


مقتطفات أكواد CSS لتحسين المظهر المرئي لموقع ووردبريس

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

<

p style=”border: 0px solid; color: #f9aaa7; background-color: #fff; font-size: 15px; margin-right: 30px; border-right: 15px solid #836E70; padding-right: 8px; padding-left: 8px; margin-left: 30px;”>شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك رد

عدد المشاهدات لهذه المقالة : 159
انتقل إلى أعلى
Tweet
Share
Share
Pin
%d مدونون معجبون بهذه: