آموزش ریسپانسیو کردن قالب سایت در کمتر از چند دقیقه

حامد مهدی زاده
جولای 2, 2017
بلاگ, توسعه وب سایت, سئو

وب آنجل / بلاگ / آموزش ریسپانسیو کردن قالب سایت در کمتر از چند دقیقه

این مقاله به منظور آموزش سریع ریسپانسیو سازی وب سایت (responsive) ایجاد شده است و شما در انتهای این مقاله در خواهید یافت که چگونه می توانید در کمترین زمان ممکن وب سایت خود را ریسپانسیو نمایید.
چگونه یک وب سایت ریسپانسیو ایجاد کنیم
در عنوان این مقاله ما به این مفهوم اشاره نمودیم که با استفاده از آموزش های این مطلب شما خواهید توانست در چند دقیقه یک وب سایت ریسپانسیو ایجاد نمایید. پس یکی از ویژگی های متمایز این مطلب صرفه جویی در زمان است ! ما بر روی قول خود می مانیم و به شما یاد می دهیم که در زمان کوتاهی (کمتر از 30 دقیقه) وب سایت ریسپانسیو خود را ایجاد نمایید. پس بیایید بدون اتلاف وقت به سراغ مطالبی که وب آنجل آماده کرده برویم.

طراحی سایت ریسپانسیو به چه معناست؟

ریسپانسیو به معنای پاسخ گرا یا واکنشی می باشد. به این معنا که طراحی سایت به گونه ای می باشد که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده می شود، به عنوان مثال زمانی که شما از طریق موبایل یا تبلت سایت را تماشا می کنید ساختار ظاهری سایت به گونه ای تغییر پیدا می کند که قابلیت پیمایش سایت در این ابزارها به راحتی فراهم گردد. از طرفی در مانیتورهای با رزولوشن بالا نیز سایت به گونه ای مناسب نمایش داده می شود و به عبارت دیگر کاربران با هر ابزاری سایت شما را تماشا می کنند از محتوا و ظاهر سایت شما کمال استفاده را خواهند برد.

همانطور که میدانید ریسپانسیو بودن سایت در سئو بسیار مهم است .تصویر زیر را مشاهده کنید:

هدف ما ایجاد یک صفحه یا یک وب سایت مشابه چیزی که در تصویر مشاهده می کنید می باشد. در انتها این آموزش ابتدایی CSS ریسپانسیو کردن وب سایت شما خواهید آموخت که چگونه صفحه ای مشابه صفحه نمایش داده شده در عکس ایجاد نمایید. شاید به نظر شما ایجاد یک صفحه مشابه صفحه بالا کار ساده ای باشد اما مساله مهم آن است که صفحه ای که شما در این تصویر مشاهده می نمایید ریسپانسیو است و اگر شما آن را بر روی موبایل خود بارگذاری کنید تصویر زیر را مشاهده خواهید نمود:

این بدان دلیل است که صفحه نمایش داده شده در تصویر ریسپانسیو است و خودش را با اندازه صفحه نمایش هر دستگاهی که کاربر برای مراجعه به وب سایت استفاده نماید تطبیق می دهد.
شما می توانید با استفاده از فریم ورک Foundation به سادگی چنین وب سایتی ایجاد نمایید. این تنها یکی از قابلیت های بی شمار فریم ورک Foundation است و شما با دانلود و نصب آن می توانید از بسیاری قابلیت های دیگری این فریم ورک بهره مند گردید.
برای استفاده از قابلیت های این فریم ورک شما باید ابتدا آن را دانلود کنید.

دانلود فایل

پس از دانلود کردن فایل دانلود شده را آنزیپ (Unzip) کنید و محتویات آن را در یک فولدر مشخص قرار دهید. شما باید در فولدر لیستی مشابه آنچه در تصویر زیر مشاهده می کنید، بیابید.

هدف کلی ما این است که یک وب سایت ایجاد کنیم که در آن المان های اصلی مثل Header ، Body، Sidebar و Footer وجود داشته باشند.

گام اول: یادگیری مفاهیم ابتدایی درباره فریم ورک Foundation
خب ما می خواهیم چیزی شبیه به ساختار بالا را در وب سایت خود ایجاد نماییم. اما پیش از هر کاری ما باید بتوانیم چنین ساختاری را با زبان HTML ایجاد کنیم. خب این کار بسیار ساده است. اما نیاز به آن دارد که شما با ایجاد این Layout یا چیدمان صفحه در Foundation آشنایی داشته باشید. خب در این فریم ورک صفحه به 12 ستون مختلف تقسیم بندی شده است که این 12 ستون در کنار هم پهنای کلی صفحه را تشکیل می دهند. شما می توانید در کدهای خود تعیین کنید که می خواهید سطری داشته باشید که دارای پهنایی برابر با تمام 12 ستون باشد و یا پهنای کمتری داشته باشد. مثلا پهنای آن برابر با 6 ستون یا بیشتر باشد. خب اگر شما کدی به شکل زیر بنویسید یک سطر با پهنای 12 ستون ایجاد خواهید نمود:

<div class="row">
<div class="twelve columns"></div>
</div>

خط اول کد برای شما یک سط درون صفحه ایجاد می کند و خط دوم کد تعیین می کند که پهنای اشغال شده توسط این سطر به اندازه 12 ستون یا تمام پهنای صفحه باشد. حال کد زیر را مشاهده کنید:

<div class="row">
<div class="twelve columns">
<div class="six columns"></div>
 <div class="six columns"></div>
 </div> </div>

این کد دو سطر با پهنای مساوی و هریک به اندازه 6 ستون درون صفحه ایجاد می نماید، در واقع خط اول این کد برای شما یک سطر ایجاد می نماید و خط دوم تمام پهنای صفحه که برابر با 12 ستون است به این سطر اختصاص می دهد سپس پهنای این سطر در خط های سوم و چهارم به دو سطر کوچکتر اختصاص داده می شود. اگر بخواهید درون صفحه دو سطر با پهنای نامساوی ایجاد نمایید باید کدی مشابه کد زیر ایجاد کنید:

<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
<div class="five columns"></div>
</div>
</div>

در این کد شما می بینید که ابتدا یک سطر 12 ستونی ایجاد شده است و سپس یک سطر هفت ستونی مجزا ایجاد شده است. خط چهارم و پنجم این کد درون سطر 7 ستونی ایجاد شده یک سطر 12 ستونی ایجاد می نماید. ینی پهنای اشغال شده توسط سطر هفت ستونی را به 12 قسمت تقسیم می نماید به این کار لانه بندی سطرها گفته می شود. خطوط انتهایی کد یک سطر 5 ستونی ایجاد می نمایند.
حال که با مفهوم سطر ها و ستون ها و سطرهای لانه بندی شده آشنا شدید می توانیم به سراغ گام بعدی برویم.

گام دوم : ایجاد چدیمان صفحه در Foundation

ابتدا تکست ادیتور یا ویرایشگر متن مورد نظر خود را باز کنید و کدهای زیر را در آن کپی کنید و نام آن را Index.html بگذارید:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<!-- Set the viewport width to device width for mobile -->

خب به Foundation خوش آمدید. حال کدهای زیر را نیز در ویرایشگر متن خود اضافه نمایید:

<!-- Included CSS Files -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

این کدها به صفحه شما کمک می کنند که بتوانند به راحتی بر روی اینترنت اکسپلورر بارگذاری شوند. علاوه بر این این کدها پایه ریسپانسیو شدن صفحه شما هستند. یعنی با استفاده از این کدها صفحات شما بر روی دستگاه های تلفن همراه به خوبی بارگذاری می شوند. حال برای ایجاد چدیمان صفحه همان طور که در گام اول توضیح داده شد شما باید کدی شمابه کد زیر ایجاد نمایید:

<div class="row">
<div class="twelve columns">
<h2>Header Twelve Columns</h2>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<h2>Body Seven Columns</h2>
</div>
<div class="five columns">
<h2>Sidebar Five Columns</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2>Footer Twelve Columns</h2>
</div>
</div>

این کدها منجر به ایجاد ساختاری مشابه آنچه در زیر مشاهده می نمایید می گردد. یعنی شما در ابتدا یک سطر 12 ستونی خواهید داشت که هدر صفحه شما را تشکیل می دهد و در ادامه یک سطر هفت ستونی و یک سطر پنج ستونی که بدنه و ساید بار را تشکیل می دهند. در آخر نیز شما یک سطر فوتر با پهنای 12 ستون خواهید داشت.

خب تا اینجا ما توانستیم ساختار کلی و چیدمان اصلی یک صفحه ریسپانسیو را ایجاد نماییم. حال نوبت به آن می رسد که المان های صفحه درون این ساختار قرار بگیرند. در بخش بعدی ما متن ها و تصاویری را در این ساختار جایگذاری می نماییم تا شما تمامی مراحل را به صورت عینی مشاهده نمایید.

گام سوم: افزودن محتوا به ساختار

هدف ما در این آموزش این نیست که به شما بیاموزیم چگونه محتوا ایجاد کنید و یا چه محتوایی را برای صفحات خود انتخاب نمایید. در این بخش تنها هدف ما این است که شما محتواهای متنی و تصویری مختلفی را درون صفحه خود قرار دهید تا ببینید که وقتی محتوایی درون صفحه شما قرار میگیرد این محتوا بر روی صفحه کامپیوتر و صفحه موبایل چگونه نمایش داده می شود. برای قرار دادن محتوای متنی درون این صفحه تنها باید محتوای مورد نظر خود را کپی کرده و در بخش Body قرار دهید یا Paste کنید. برای قرار دادن تصاویر می توانید از tag استفاده نمایید. اگر می خواهید پس زمینه صفحه شما هم مثل پس زمینه صفحه ای که در ابتدایی این مقاله تصویری از آن برای شما نمایش داده شد دارای یک تصویر یا یک رنگ مشخص باشد باید تنطیمات مربوط به آن را در SubtlePatterns انجام دهید.

گام چهارم : گام چهارمی وجود ندارد! ♥

صبر کنید گام چهارم آموزشی وجود ندارد اما شما می توانید در این گام صفحه خود را بر روی کامپیوتر و بر روی موبایل چک کنید تا ببینید که آیا صفحه ای که ایجاد نموده اید ریسپانسیو است یا خیر.
دقت داشته باشید که ابزارهای متعددی برای ایجاد یک صفحه ریسپانسیو وجود دارند و Foundation تنها یکی از آنها است. شما می توانید بر حسب علاقه خود هر یک از این ابزارها را برای کار خود انتخاب نمایید.

محتوای دست چین شده برای شما:

روش‌ ها و نکات کلیدی برای افزایش بازدهی تبلیغات

ریسپانسیو نشد ؟ آموزش مرحله دوم

آموزش ریسپانسیو قالب وردپرس

چیزهایی که برای این آموزش نیاز هواهید داشت :

در این آموزش قصد داریم یک قالب وردپرس را با حداقل استایل ریسپانسیو کنیم .درحقیقت قصد داریم بلوک های ساختاری محتوا و طرح را پوشش دهیم و درصورت تمایل بعدا موارد دلخواه تان را به آن اضافه کنید .

برای دنبال کردن مراحل آموزش به این موارد نیاز دارید:

ویرایشگر متن یا کد .اگر ویراشگر ندارید از ویرایشگرهای رایگان TextWrangler و Kompozer می توانید استفاده کنید
اگر بصورت محلی در حال توسعه هستید ، MAMP, WAMP or XAMPP در اینصورت می توانید PHP و MySQL را اجرا کنید و با قالب وردپرس بصورت محلی کار کنید .
اگر از راه دور در حال توسعه هستید ، از یک کلاینت (مشتری) FTP مانند FileZilla استفاده کنید .
یک قالب وردپرس محلی را نصب کنید

(فرض بر این است که با نحوه نصب و کار کردن با قالب وردپرس آشنا هستید ) مقاله آموزش سئو وردپرس را بخوانید .

1-تِم شروع

برای تم شروع ما از یک طرح حداقلی استفاده کرده ایم .عناصری که در این تِم وجود دارند در تصویر زیر نشان داده شده است :

در حال حاضر این تِم در صفحه موبایل هوشمند با ابعاد 320 x 480px به این شکل نمایش داده می شود

همانطور که مشاهده می کنید تلفن هوشمند سایت را با پهنای 960 پیکسل نشان می دهد . دلیل این موضوع این نیست که هنوز هیچ پهنایی برای آن اعمال نشده است ( سایت باید برای صفحات کوچکتر نیز مطابقت داشته باشد ) بلکه باید تغییری دهید تا تلفن هوشمند سایت را در پهنای واقعی صفحه نشان دهد .

2- تنظیم پهنای صفحه

برای اینکه تلفن هوشمند سایت را با توجه به عرض صفحه بخوبی نمایش دهید ، باید یک خط به قسمت <head> در header.php اضافه کنیم :

<meta name="viewport" content="width=device-width" />

با این دستور ، تلفن هوشمند صفحه را در عرض صفحه نمایش دستگاه نشان می دهد .

اگر قبل از قالب موبایل ، استایل شیت های رسپانسیو را ایجاد کرده اید ، این موضوع کمی آشکار می شود . آیا تمام استایل های اضافی که به کوئری های رسانه ای خود اضافه کردید را بخاطر دارید؟ شما خیلی کم به آن نیاز خواهید داشت . زیرا یک صفحه با استایل حداقلی بر روی موبایل تقریبا بهتر از دسک تاپ بنظر می رسد . می توانید این موضوع را در تصویر زیر مشاهده کنید (تصویر در عرض 1024پیکسلی گرفته شده است)

اما هنوز هم باید چند استایل قالب برای صفحات کوچک به آن اضافه کنیم که در مرحله بعدی توضیح می دهم .

3-بلوک های قالب اصلی را برای صفحات کوچک طراحی کنید .

کار را با اضافه کردن چند پهنا و شناورfloat)) به عناصر اصلی شروع می کنیم تا مطمئن شویم که آنها در صفحه نمایش کشیده می شوند .چند width و یک clear : both را به عناصر مربوط اضافه می کنیم :

header, nav.main, .container, .content, .sidebar, footer {

width: 100%;

clear: both;

}

سپس برای اینکه طرح در صفحه کوچک فشرده بنظر نرسد ، padding را به عناصر مربوط اضافه می کنیم :

header, nav.main, .container, footer {

padding: 10px;

}

توجه داشته باشید که اینها تنها مقادیر افقی هستند که باید بعدا در پیکسل ها تعریف شوند زیرا نمی خواهیم با افزایش اندازه صفحه ، padding خیلی بزرگ شود . حالا سایت کمی خلوت تر از قبل بنظر می رسد و عناصر اصلی در زیر یکدیگر نشان داده می شوند.

به این ترتیب مناطق مربوط به عرض صفحه مرتب و پیمایش بهینه شد.

4- افزودن استایل اضافه به صفحات کوچکتر

پیمایش باید عرض صفحه را طی کند و ما قصد داریم هر یک از آیتم های منو را در مرکز قرار دهیم .به همین دلیل چند استایل برای منو اضافه می کنیم :

nav.main {

background: #3394bf;

overflow: auto;

text-align: center;

}

بدین ترتیب یک منوی هوشمندانه تر خواهیم داشت .

مناطق ویجت کاملا بهم نزدیک هستند و به سختی می توان دید که در کجا به پایان می رسند و از کجا شروع می شوند. به همین دلیل چند padding و borders را به آدرس اضافه می کنم :

.sidebar .widget {

padding: 10px 0;

border-top: 1px solid #3394bf;

}

سپس برای ویجت های پاورقی (فوتر) به همین شکل عمل می کنم :

footer .widget {

padding: 10px 0;

border-top: 1px solid #fff;

}

بدین ترتیب بین ابزارکها فاصله می افتد .

درحال حاضر یک قالب ساده برای تِم به مراه چند رنگ ، مرز ، حاشیه و padding بر روی صفحات کوچک داریم .فعلا قصد نداریم استایل دیگری اضافه کنیم زیرا باعث کند شدن سرعت نمایش بر روی دستگاه موبایل می شود .بنابراین به سراغ مرحله بعد می رویم .

5– تعدادی کوئری رسانه ای اضافه کنید .

برای این تِم ، قصد داریم سه سایز صفحه نمایش اضافه کنیم :

عرض 600پیکسل که شامل تبلت های عرضی ( لنداسکیپ ) یا طولی(پرتره )هستند و نیز صفحات دسکتاپ .
عرض 800 پیکسل که شامل تبلت های عرضی ( لندسکیپ )و دسکتاپ هستند
عرض و طول 1025پیکسل که شامل کوچکترین صفحه نمایش دسکتاپ است .البته قصد داریم یک پیکسل بالاتر از 1024 بزنیم تا تبلت های بزرگ تحت تاثیر این کوئری رسانه قرار نگیرند .

احتمالا متوجه شده اید که کوئری های رسانه ای ما همه بر اساس یک دستگاه خاص نیستند. دلیل آنهم این است که با افزایش دامنه دستگاه ها و عرض صفحه ، هدف قرار دادن دستگاه های خاص در مقایسه با تنظیم کوئری های رسانه ای در نقطه ای که قالب از آنها سود ببرد کمتر قابل اعتماد است .من قالب را با تغییر اندازه مرورگر خود تست کردم و در پهنای 600پیکسل اینطور بنظر می رسد:

از نظر ما، طرح با این پهنا اشتباه است و می تواند از برخی تغییرات قالب بهره ببرد. بنابراین کار را با افزودن کوئری های رسانه ای در انتهای استایل شیت شروع می کنیم :

/* tablets - portrait */

@media screen and (min-width: 600px) { }

/* tablets - landscape */

@media screen and (min-width: 800px) { }

/* desktops*/

@media screen and (min-width: 1025px) { }

توجه داشته باشید که از min-width ( نه max-width) را استفاده کردیم زیرا شاید بخواهید ابتدا یک استایل دستکتاپ را طراحی کنید و کوئری های رسانه ای را برای صفحات کوچکتر بنویسید. درمرحله بعد می خواهیم به استایل دستگاه های تبلت بپردازیم.

6- افزودن استایل برای دستگاه های تبلت در حالت عمودی (پرتره)

در این قسمت قصد داریم قالب خود را برای استفاده بهتر فضای صفحه نمایش بر روی صفحات نمایش بزرگتر بهینه سازی کنیم .علاوه براین با افزودن چند gradient css طرح را کمی صیقل بدهیم .

در ابتدا ، به سراغ قالب می رویم . درون کوئری رسانه ای مان برای صفحه نمایش 600پیکسل و بزرگتر ، بدین صورت عمل می کنیم :

/* layout - widget areas side by side */

footer {

overflow: auto;

}

.sidebar .widget,

footer aside {

float: left;

width: 49%;

margin-right: 2%;

}

.sidebar .widget:nth-child(even),

footer aside:nth-child(even) {

margin-right: 0;

}

با این روش شناورها و حاشیه هایی برای استفاده بهتر ازپهنای صفحه نمایش اضافه می شود

در مرحله بعد به سراغ پیمایش می رویم زیرا قالب فعلی فضای خالی زیادی در کنار هر آیتم ایجاد می کند و فضای زیادی را به خود اختصاص می دهد . برای ایجاد نوار پیمایش افقی می توان استایل زیر را اضافه کرد:

/* navigation - float items next to each other */

nav.main {

text-align: left;

padding: 0 10px;

}

nav.main li {

float: left;

margin: 0;

}

nav.main li a {

padding: 0 20px;

}

علاوه بر این ، برای این اندازه از صفحه نمایش و اندازه های بالاتر ،یک gradients به منو اضافه می کنیم :

nav.main, nav.main a {

background: #183c5b; /* Old browsers */

background: -moz-linear-gradient(top, #183c5b 0%, #3394bf 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183c5b), color-stop(100%,#3394bf)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #183c5b 0%,#3394bf 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #183c5b 0%,#3394bf 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #183c5b 0%,#3394bf 100%); /* IE10+ */

background: linear-gradient(top, #183c5b 0%,#3394bf 100%); /* W3C */

}

بسته به نوع دستگاه و مرورگرهایی که مورد هدف قرار داده ایم ، می توان پیشوندهای آن مرورگر ها را حذف کنیم .اما انها را برای سایر کاربران تِم مان رها نمی کنیم . بنابراین اکنون تِم قالب بهبود یافته برای تبلت در جهت عمودی داریم .

7- افزودن استایل برای دستگاه های تبلت در حالت افقی (لندسکیپ)

در اینجا فقط می خواهیم یک تغییر را برای صفحاتی با این پهنا اعمال کنیم . نوار کناری را به سمت راست محتوا حرکت می دهیم زیرا اگر محتوا را به اندازه کل صفحه نمایش بگیریم ، کمی کشیده بنظر می رسد.برای این کار ، موارد زیر را به کوئری جستجو (که min-width800 پیکسلی را هدف قرار داده ) اضافه می کنیم .

content {

width: 65%;

float: left;

}

.sidebar {

width: 33%;

float: right;

clear: right;

}

.sidebar .widget {

width: 100%;

float: none;

}

.sidebar .widget:first-child {

border-top: none;

}

این چندین کار انجام می دهد :

نوار کناری را به سمت راست محتوا حرکت می دهد
اندازه نوار کناری و محتوا را تغییر می دهد . float ها و ویژگی a clear برای طرح اضافه می کند
float ها را روی ویجتها حذف می کند .به همین دلیل حالا در یک ستون قرار دارند
خط مرزی را از اولین ویجت خارج می کند ، که دیگر نیازی به آن نیست

محتوای دست چین شده برای شما:

over optimization - بهینه سازی بیش از حد

حالا تِم بر روی تبلت با پهنای افقی بدین صورت نمایش داده می شود:

8-افزودن استایل دسکتاپ

اگر در ابتدا تِم ریسپانسیو را به روش سنتی برای دسکتاپ می ساختیم ، به احتمال زیاد اول روی سایز صفحه نمایش کار می کردیم .اما در اینجا ما اینکار را به مرحله آخر موکول کردیم .شاید تا الان متوجه شده اید که این روش موارد را کارآمدتر می کند . تجربه ما نشان می دهد که حذف استایل دسک تاپ در کوئری های رسانه ای (با هدف موبایل فرندلی) در مقایسه با قالب موبایلی که ما بهینه کردیم ، کار خیلی بیشتری می برد.

اکنون می خواهیم قالب پاورقی تنظیم کنیم تا تمام چهار ناحیه ی ابزارکِ پاورقی در کنار یکدیگر قرار بگیرند و یک تصویر پس زمینه به سربرگ اضافه کنیم .این تصویر برای محتوا اهمیتی ندارد فقط جنبه دکوری دارد . ابتدا بسراغ قالب می رویم . علاوه بر تنظیم قالب پاورقی ، مقدار max-width را به تگ بدنه اضافه می کنیم تا از کشیده شدن قالب در پهنای کامل صفحات بسیار عریض جلوگیری شود .

body {

width: 95%;

max-width: 960px;

margin: 0 auto;

}

footer aside {

float: left;

width: 23.5%;

margin-right: 2%;

}

footer aside:nth-child(even) {

margin-right: 2%;

}

footer aside.fourth {

margin-right: 0;

}

استایل بالا در کوئری رسانه ای برای صفحات نمایش با min-width 1025پیکسلی مناسب است و موارد زیر را انجام می دهد :

max-width را به بدنه اضافه می کند
عرض و حاشیه سمت راست را روی عناصر asideدر پاورقی تنظیم می کند
حاشیه را برای مناطق ویجت که با عدد زوج شماره گذاری شده اند را تا 2% همسو با مناطق دیگر ویجت تطبیق می دهد .
با استفاده از کلاس اختصاص داده شده به منطقه ویجت چهارم در تِم (fourth) ، حاشیه آن به صفر کاهش می دهد.در اینجا ما عمدا از یک کلاس به جای nth-child استفاده کرده ایم ، زیرا به آن برای کار در عرض مرورگرها نیاز داریم .

در زیر می توانید نتیجه را بر روی دسکتاپ مشاهده کنید:

و در پایان یک تصویر پس زمینه به سربرگ اضافه می کنم .

header {

background: URL(images/banner-image.jpg) center bottom no-repeat;

padding-bottom: 210px;

}

با این کار تصویر مورد نظر بعنوان پس زمینه با مقداری padding اضافه می شود تا فضای لازم برای آن فراهم شود :

مزیت استفاده از این روش این است که این تصویر فقط توسط دستگاه های دسکتاپ بارگیری می شود. از آنجا که این در یک استایل اصلی یا کوئری رسانه ای برای دستگاه های کوچکتر نیست ، باعث کند شدن آنها نمی شود. اگرچه استفاده از تصاویر بعنوان پس زمینه نقاط ضعفی ، به ویژه در رابطه با دسترسی ، دارد اما دقت داشته باشید که این روش را فقط زمانی استفاده کنید که تصویر فقط برای دیزاین باشد و نه بخشی از محتوا .

بعنوان روش جایگذین ، می توانستیم نسخه ی کوچکتری از تصویر را در نشانه گذاری مان اضافه کنیم و از CSS برای پنهان کردن آن و نمایش نسخه بزرگترازهمان تصویر به عنوان پس زمینه برای صفحه نمایش های بزرگتر استفاده کنیم. حالا ما یک سایت رسپانسیو داریم .کار را با صفحات نمایش کوچک شروع کردیم و مقدار کد مورد نیاز را برای ایجاد طرح رسپانسیو کاهش دادیم و مطمئن شدیم که یک تصویر بزرگ به دستگاه های موبایلی ارسال نمی شود .

از آنجا که اکثر صاحبان وب سایت نیاز به سایت رسپانسیو دارند ، توانایی ساخت تِم های وردپرسی ریسپانسیو مهارت ارزشمندی بشمار می رود . در این مقاله آموزشی ، ما نشان دادیم که هیچ نیازی به روش های پیچیده و طولانی نیست .البته شما می توانید این روش را توسعه دهید و محتوای مخصوص موبایل یا استایل اضافی برای دستگاه های خاص را به آن اضافه کنید .

آموزش ریسپانسیو قالب – مرحله سوم

آموزش موبایل فرندلی کردن سایت با WPtouch –

طبق آمار سایت statista بیش از نیمی از ترافیک سایت های جهانی از دستگاه های تلفن همراه می آید .علاوه بر این ، 80 درصد از کاربران اینترنت دارای تلفن های هوشمند هستند. بنابراین لزوم داشتن یک افزونه برای ریسپانسیو کردن سایت بسیار ارزشمند است .

از سوی دیگر قالب وردپرس از سال 2003 به بعد وارد بازار شد.این بدان معنا است که بسیاری از صاحبان وب سایت های قدیمی بدنبال راهی برای رسپانسیو کردن سایت هایشان هستند .

افزونه WPtouch

افزونه WPtouch یک پلاگین وردپرسی است که بطور خودکار یک تِم موبایلی ساده را برای بازدیدکنندگان موبایل ایجاد می کند بدون اینکه به تِم وردپرس دستک تاپ تان آسیبی بزند . با کمک این افزونه براحتی می توانید تعداد زیادی از کاربران اینترنتی را از طریق دستگاه تلفن همراه به سایت خود بکشانید .

زیبایی WPtouch در سادگی آن است . بعد از نصب و فعال سازی افزونه WPtouch ، مشاهده می کنید که بلافاصله سایت شما برای دستگاه موبایلی ریسپانسیو می شود .در زیر می توانید ببینید که WPtouch چطور سه بخش اصلی هر وبلاگ یعنی پست ها ، صفحات و صفحه اصلی را نمایش می دهد :

جالب است بدانید که بعد از نصب و فعال سازی افزونه ، نیاز به پیکربندی نیست .با این وجود بدلیل بهتر شدن طراحی توصیه می کنیم برخی از تغییرات را اعمال کنید تا مطمئن شوید سایت موبایل فرندلی تان شباهت بیشتری به سایت دسکتاپ تان دارد .

بدین منظور از داشبورد وردپرس به آیکون WPtouch بروید :

همانطور که مشاهده می کنید داشبورد تنظیملت WPtouch بسیار جامع است .

برای تنظیم ظاهر تِم موبایل فرندلی جدیدتان ، بر روی تنظیمات تِم کلیک کنید . وردپرس به شما لیست بلندی از گزینه های پیکربندی را ارائه می دهد . بیایید به مواردی بپردازیم که بیشتر روی ظاهر تِم موبایل تان تاثیر می گذارد . در مرحله اول ، متوجه می شوید که می توانید یک آرم دلخواه را برای نمایش در دستگاه های موبایلی بارگذاری کنید. علاوه بر این ، می توانید یک نوار جستجو در سربرگ قرار دهید ، و انتخاب کنید که دکمه منو را در کدام طرف قرار دهید:

در پایین همان صفحه ، شما Theme Colors را مشاهده می کنید. این گزینه برای سفارشی کردن رنگ ها مورد استفاده قرار می گیرد . توصیه می کنیم رنگی را انتخاب کنید که با طرح اصلی شما هماهنگ باشد.

علاوه بر این ، می توانید نوع قلم را انتخاب کنید. باز هم توصیه می کنیم فونتی شبیه فونت وب سایت دسکتاپ خود انتخاب کنید:

و سرانجام در انتهای صفحه ، گزینه هایی مربوط به ارائه پست های وبلاگ مشاهده می کنید :

می توانید تصاویر ، تگ ها ، تاریخ ارسال و تعداد اظهار نظرهایی که هر پست دریافت کرده است را انتخاب کنید.

مرحله اختیاری : تِم های WPtouch را برای بهبود ثبات طراحی در نظر بگیرید.

اگر تِم پیش فرض WPtouch را برای وب سایت دسک تاپ تان نمی پسندید ، شاید بخواهید یکی از هفت تم برتر WPtouch ( که قیمتشان از 35 دلار شروع می شود) را خریداری کنید تا سایت وردپرسی تان به روش منحصر بفردی موبایل فرندلی شود . برای دسترسی به این تِم های پولی ، روی گزینه Themes در نوار کناری داشبورد WPtouch کلیک کنید:

همانطور که در بالا اشاره شد 80% کاربران اینترنتی تلفن همراه دارند .بنابراین نادیده گرفتن این تعداد کاربر می تواند فاجعه بزرگی برای وب سایت شما باشد زیرا اکثر این افراد برای مشاهده سایت هایی که بخوبی بر روی موبایل نمایش داده نمی شوند خیلی صبور نیستند .

آژانس دیجیتال مارکتینگ وب آنجل، ارائه دهنده خدمات مشاوره و طراحی سایت حرفه ای

همانطور که می دانید ریسپانسیو بودن سایت یکی از مهم ترین فاکتورها در رتبه بندی گوگل محسوب می شود. آژانس وب آنجل به کمک تیم متخصص و حرفه ای خود این خدمات را با بهترین کیفیت به شما ارائه می دهد. برای سفارش خدمات طراحی سایت و یا ریدیزاین سایت همین حالا تماس بگیرید.

خدمات طراحی سایت خدمات ریدیزاین سایت

به پایان آمد این دفتر حكایت همچنان باقیست

نظر شما برای بهبود کیفیت کار ما ارزشمند است

نوشته های مرتبط و آموزنده:

حامد مهدی زاده

مدیر شرکت کاوشگران آداک و مدیر وبسایت وب آنجل هستم، با بیش از 14 سال سابقه در سئو و دیجیتال مارکتینگ به کسب و کارهای بزرگ و کوچک در موضوعات مختلف برای برندها مشاوره دادم، این آموزش‌ها در وب آنجل، تجارب و نظریه های من در طی این سالهاست که برای شما به اشتراک میزارم. متخصص پروژه ها و موضوعات رقابتی در سئو هستم.

همه مقالات من

حامد مهدی زاده

همه مقالات من

مسیر موفقیت شما با خدمات VIP وب آنجل