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

بواسطة / اترك تعليقاً

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

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

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

 

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

 

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

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

 

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

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

1
2
3
4
5
img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

 

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

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

1
2
3
4
5
6
ul {list-style: none}
ul li {
background-image: url("lien-vers-votre-image");
background-repeat: none;
background-position: 0 0.5em;
}

 

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

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

1
2
3
4
5
6
7
8
::selection {
background: #93CE52; /* Safari */
color: #ffffff;
}
::-moz-selection {
background: #93CE52; /* Firefox */
color: #ffffff;
}

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

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

1
2
3
4
a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat rightright top;  
     padding-right:10px;  
}

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"201C""201D""2018""2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

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

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

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

1
img.wp-smiley{ border:none;}

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

1
2
3
4
img.wp-smiley{
border:none;
margin:0 3px;
}

 

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

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

1
2
3
4
5
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

 

 

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

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

1
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

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

1
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

 

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

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

1
2
3
img {
background: url(loader.gif) no-repeat 50% 50%;
}

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

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

1
2
3
.h2, .h3, .h4 {
text-shadow: 2px 2px 4px #666;
}

 

 

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

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

1
2
3
.page-break{
page-break-before:always;
}

 

 

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

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

1
a { white-space: nowrap; }

 

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

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

1
2
3
4
5
6
7
8
li.even {
list-style: none;
background: #FFFF;
}
li.odd {
list-style: none;
background: #F9F9F9;
}

 

 

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

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

1
2
3
4
5
6
h3 {
color: #FF0000;
font-size: 24px;
letter-spacing: 0.3em;
word-spacing: 0.2em;
}

 

 

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

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

1
2
3
4
5
6
.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
pre {
padding: 0.1em 0.5em 0.3em 0.7em;
border-left: 11px solid #ccc;
margin: 1.7em 0 1.7em 0.3em;
overflow: auto;
width: 93%;
line-height: 1.6em;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* target IE7 and IE6 */
*:first-child+html pre {
padding-bottom: 2em;
overflow-y: hidden;
overflow: visible;
overflow-x: auto;
}
* html pre, {
padding-bottom: 2em;
overflow: visible;
overflow-x: auto;
}

 

 

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

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

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

استعمال : DIV

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

1
<div style="border: 1px #949494 solid; background-color: #d5d5d5; padding: 5px; width: 80%; margin-left: auto; margin-right: auto;">هذه هي استخداماتي ل DIV</div>

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

1
2
3
4
5
6
7
8
#ma_div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px ##949494 solid;
    background-color: #d5d5d5;
    padding: 5px;
}

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

1
2
3
<div id="ma_div">
هذه هي استخداماتي ل DIV
</div>

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

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

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

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

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

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 465 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

152 عدد المشاهدات لهذا المحتوى
Scroll to Top