[درس] أساسيات جعل قالب بلوجر متجاوب مع جميع الأجهزة
السلام عليكم ورحمة الله وبركاته أهلا بكم إخواني في الله في درس جديد على مدونتنا اليوم سأشرح لكم أساسيات وخطوات جعل قالب بلوجر متجاوب ومتوافق مع جميع الأجهزة (الهواتف الذكية بمختلف المقاسات, اللوحات الإليكترونية, ....) أو ما يسمى بـ Responsive design طبعا بعد التقدم الكبير الذي عرفه مجال الهواتف واللوحات الإلكترونية فإن عدد مستخدمي هذه الأجهزة ارتفع كثيرا مقارنة مع السنوات الماضية وهذا بدوره أدى إلى ارتفاع عدد متصفحي النت من هذه الأجهزة ولهذا أصبح مدراء المواقع يبحثون عن طرق لجعل مواقعهم متوافقة مع مختلف أجهزة التصفح ومن بين هذه الطرق نجد تقنية الـ CSS3 والتي سنستخدمها نحن في درسنا لن أطيل عليكم .
# الطريقة :
أولا عليك البحث عن وسم
</head>الأن أضف فوقه كود الميتا التالي
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/> الأن سنبحث عن
]]></b:skin>ونضيف فوقه الكود التالي
Responsive styles
******************************************/
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
/***************************************************كما ترون في كل عنصر نرى قيمة مختلفة للـ max-width هذه القيمة تمثل لنا العرض الأقصى للجهاز مثلا أجهزة سامسونج الصغيرة كـ trand أو trand plus فالعرض الذي تأخده هو 320px أما الأجهزة الكبيرة مثل سامسونج S4 فالعرض الذي يأخده هو 480px وهكذا مع باقي الأجهزة.
الأن سأعطيكم أهم العناصر التي تتكون منها قوالب بلوجر وهي كالتالي :
كما نرى لدينا عناصر أساسية وهي :
body : وهو جسم أو بدن القالب الرئيسي.
outer wrapper : وهو الغلاف الخارجي وداخله توجد كل العناصر.
header : وهو الجزء العلوي من القالب.
main wrapper : وهو الجزء المجمع للعناصر الرئيسية في الصفحات.
post : وهو مكان المواضيع.
sidebar : وهو الشريط الجانبي الذي يحتوي على العديد من العناصر.
footer : وهو الجزء السفلي من القالب ويسمى أيضا بذيل الموقع .
إذا هذه أهم العناصر في أي موقع وجعل القالب متوافق مع الأجهزة يقتضي التعديل على هذه العناصر بالدرجة الأولى وهذا مثال
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
#outer-wrapper{width:320px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:320px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:320px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:320px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:320px;margin:0 auto; float:none;}
.post{ width:320px ;margin:0 auto;}ملحوظة : الأكواد تختلف في بعض القوالب مثلا نجد header-wrapper عوض header أو نجدclass عوض id وبالتالي يجب وضع outer-wrapper. عوض outer-wrapper# لذلك راجعوا محتوى قالبكم
بعد القيام بالتعديلات الرئيسية تبقى هناك تعديلات أخرى وهي الأكثر تعقيدا هذه التعديلات تهم كل العناصر الثانوية مثل القوائم و الشعار وباقي الإضافات وإليكم أهم عناصر الـ CSS التي يجب التعديل عليها
width : وهو عرض العناصر .
height : طول العناصر .
float : من أجل توجيه العنصر ومن الأفضل عمل :float:none لكل العناصر .
text-align : التحكم في اتجاه النص .
font-size : حجم الخطوط .
margin : للتحكم في مكان العنصر بالنسبة لباقي العناصر .
padding : للتحكم في أبعاد العنصر بالنسبة لنفس العنصر .
display : وسنحاتجها كثيرا لإخفاء بعض العناصر كالسلايد شو مثلا وذلك باستعمال ;display:none .
الأن يبقى لدينا سؤال وهو كيف سنراقب التعديل ؟ بالنسبة للأشخاص الذين يملكون هواتف ذكية ولوحات إلكترونية سيستطعون مراقبة التعديل مباشرة من أجهزتهم أما الأشخاص الذين لا يملكون هذه الأجهزة فأنصحكم بموقع
إلى هنا أتمنى أن يكون الشرح واضح لا تبخلوا علينا بردودكم المشجعة وشكرا
مواضيع مفيدة :