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

با توجه به رشد استفاده از دستگاه‌های موبایل، طراحی سایت ریسپانسیو (Responsive) اهمیت بیشتری یافته است. هدف از این مقاله آموزش سریع نحوه ریسپانسیو‌سازی وب‌سایت است، به گونه‌ای که در کمترین زمان ممکن سایت شما برای تمامی دستگاه‌ها بهینه شود. به عبارتی، شما در پایان این مقاله خواهید دانست که چگونه سایت خود را در کمتر از ۳۰ دقیقه ریسپانسیو کنید.

طراحی سایت ریسپانسیو چیست؟

طراحی ریسپانسیو به معنی “پاسخ‌گرا” یا “واکنشی” است. به این معنا که سایت شما به گونه‌ای طراحی می‌شود که با توجه به دستگاه یا اندازه صفحه نمایش (موبایل، تبلت، دسکتاپ و غیره)، ساختار و ظاهر سایت به طور خودکار تغییر کرده و بهینه می‌شود. به این ترتیب، کاربرانی که از دستگاه‌های مختلف برای مشاهده سایت شما استفاده می‌کنند، تجربه کاربری مشابه و بهینه‌ای خواهند داشت.

چرا ریسپانسیو بودن سایت اهمیت دارد؟

سایت‌های ریسپانسیو نه تنها تجربه کاربری بهتری را فراهم می‌کنند، بلکه تاثیر زیادی در سئو (SEO) دارند. گوگل به سایت‌های واکنش‌گرا اولویت می‌دهد و این ویژگی به شما کمک می‌کند که رتبه بهتری در نتایج جستجو کسب کنید. در نتیجه، ریسپانسیو بودن سایت نه تنها برای جذب بازدیدکنندگان، بلکه برای حفظ ترافیک و بهبود سئو نیز ضروری است.

مراحل ایجاد یک وب‌سایت ریسپانسیو در وردپرس

در این بخش، مراحل اصلی ریسپانسیو‌سازی یک سایت وردپرسی را بررسی خواهیم کرد که می‌توانید در کمتر از ۳۰ دقیقه آن‌ها را انجام دهید:

1. انتخاب یک قالب ریسپانسیو

اولین و ساده‌ترین قدم برای ایجاد یک سایت ریسپانسیو انتخاب یک قالب (تم) مناسب است. خوشبختانه، بیشتر قالب‌های وردپرس از سال ۲۰۱۱ به بعد ریسپانسیو شده‌اند و به طور پیش‌فرض به اندازه صفحه نمایش دستگاه‌ها واکنش نشان می‌دهند. قالب‌های پیش‌فرض وردپرس مانند Twenty Twenty-Three ریسپانسیو هستند و بسیاری از قالب‌های شخص ثالث نیز این ویژگی را دارند.

2. استفاده از پلاگین‌های ریسپانسیو

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

3. تنظیمات CSS Media Queries

اگر می‌خواهید طراحی سایت خود را دقیق‌تر تنظیم کنید، می‌توانید از CSS Media Queries استفاده کنید. این ویژگی به شما این امکان را می‌دهد که به طور خاص طراحی سایت خود را برای دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) تنظیم کنید. برای مثال:

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

این کد CSS باعث می‌شود که اندازه فونت برای صفحه‌نمایش‌هایی که عرض آن‌ها کمتر از ۷۶۸ پیکسل است (مانند موبایل‌ها) کاهش یابد.

برای استفاده از این کد، مراحل زیر را دنبال کنید:

اضافه کردن Media Query به CSS سایت:

شما می‌توانید کد @media را در فایل CSS خود قرار دهید تا زمانی که اندازه صفحه‌نمایش کوچکتر از ۷۶۸ پیکسل (یعنی معمولاً موبایل‌ها و تبلت‌ها) می‌شود، تغییرات خاصی در طراحی اعمال شود.

برای مثال، این کد می‌تواند در فایل CSS اصلی سایت شما قرار گیرد:

/* استایل پیش‌فرض برای دسکتاپ */
body {
    font-size: 16px;
}

/* استایل برای صفحات کوچک‌تر از 768 پیکسل (موبایل‌ها و تبلت‌ها) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

کجا باید این کد قرار گیرد؟

• اگر شما از ویژوال کامپوزر (Visual Composer) یا Elementor استفاده می‌کنید، معمولاً می‌توانید این کد را در قسمت تنظیمات CSS سفارشی خود در پنل تنظیمات پلاگین قرار دهید.

• اگر سایت شما با وردپرس ساخته شده و از قالب دلخواه خود استفاده می‌کنید، می‌توانید این کد را در فایل CSS قالب خود (که معمولاً در مسیر wp-content/themes/your-theme/style.css قرار دارد) قرار دهید.

افزودن به تنظیمات سفارشی CSS در وردپرس:

1. وارد پیشخوان وردپرس شوید.
2. به مسیر نمایش > سفارشی‌سازی بروید.
3. در بخش CSS اضافی (Custom CSS)، کد @media را اضافه کنید.
4. تغییرات را ذخیره کرده و سایت خود را مشاهده کنید.

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

کاربردهای بیشتر Media Queries:

شما می‌توانید از ویژگی‌های مختلف Media Query برای تغییر استایل‌های دیگر مانند background, layout, padding, margin, display و غیره استفاده کنید.

به عنوان مثال، می‌توانید به این صورت تغییرات بیشتری ایجاد کنید:

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .header {
        background-color: #333;
    }
    .main-content {
        display: block;
        padding: 20px;
    }
}

این تنظیمات باعث می‌شود که در صفحه‌نمایش‌هایی با عرض کمتر از ۷۶۸ پیکسل، اندازه فونت کوچک‌تر شود، رنگ پس‌زمینه هدر تغییر کند و بخش اصلی محتوا به شکل بلوک نمایش داده شود.

4. بهینه‌سازی تصاویر

برای اینکه سایت شما در موبایل و تبلت به سرعت بارگذاری شود، تصاویر باید بهینه‌سازی شوند. استفاده از ویژگی srcset برای نمایش تصاویر با اندازه‌های مختلف بر اساس اندازه صفحه نمایش، به سرعت بارگذاری سایت کمک می‌کند.

<img src="image-small.jpg" srcset="image-medium.jpg 768w, image-large.jpg 1024w" alt="Description">

این کد باعث می‌شود که تصویر با اندازه مناسب برای هر دستگاه بارگذاری شود.

5. تست و بهینه‌سازی

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

تصویر زیر را مشاهده کنید:

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

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

دانلود فایل

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

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

گام اول: یادگیری مفاهیم ابتدایی درباره فریم ورک Foundation

در این گام می‌خواهیم چیزی مشابه ساختار ذکر شده را در وب‌سایت خود ایجاد کنیم. اما پیش از هر چیز، باید بتوانیم چنین ساختاری را با زبان HTML بسازیم. خوشبختانه این کار بسیار ساده است، اما برای انجام آن باید با نحوه ایجاد چیدمان یا Layout در فریم‌ورک Foundation آشنا باشید. در این فریم‌ورک، صفحه به ۱۲ ستون تقسیم شده است که در کنار هم، پهنای کلی صفحه را تشکیل می‌دهند. شما می‌توانید در کد خود تعیین کنید که یک سطر (row) به اندازه تمام ۱۲ ستون باشد یا فقط بخشی از آن، مثلاً ۶ ستون یا بیشتر. اگر شما کدی به شکل زیر بنویسید، یک سطر با پهنای ۱۲ ستون خواهید داشت:

<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>

<!-- 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 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 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="http://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>

 

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

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

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

• افزودن متن: برای افزودن متن به صفحه، کافی است محتوای متنی مورد نظر خود را کپی کرده و در بخش <div class=”seven columns”> یا <div class=”five columns”> یا هر بخش دیگری از صفحه که می‌خواهید نمایش داده شود، قرار دهید.

  به عنوان مثال:

<div class="seven columns">
  <h2>Body Seven Columns</h2>
  <p>اینجا متنی است که می‌خواهید در بخش بدنه سایت خود نمایش دهید. این متن به راحتی در داخل صفحه قرار می‌گیرد.</p>
</div>

• افزودن تصویر: برای افزودن تصویر به صفحه، از تگ <img> استفاده کنید. به عنوان مثال، برای افزودن یک تصویر در بخش بدنه، می‌توانید از کد زیر استفاده کنید:

<div class="seven columns">
  <h2>Body Seven Columns</h2>
  <img src="path/to/your-image.jpg" alt="تصویر نمونه" />
</div>

• تنظیم پس‌زمینه: اگر می‌خواهید پس‌زمینه صفحه شما مانند صفحه‌ای که در ابتدای مقاله نمایش داده شد، یک تصویر یا رنگ خاص داشته باشد، تنظیمات آن را باید در وب‌سایت SubtlePatterns یا از طریق CSS خود انجام دهید. به عنوان مثال، برای تنظیم پس‌زمینه با استفاده از CSS:

body {
  background-image: url('path/to/your-pattern.jpg');
}

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

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

برای تست ریسپانسیو بودن صفحه:

1. صفحه خود را در مرورگر باز کنید.
2. اندازه مرورگر را تغییر دهید تا ببینید که آیا ساختار سایت به درستی واکنش نشان می‌دهد و به اندازه‌های مختلف صفحه تطابق پیدا می‌کند.
3. می‌توانید از ابزار “Developer Tools” در مرورگر (مثل Chrome DevTools) استفاده کنید تا پیش‌نمایش‌هایی از صفحه در اندازه‌های مختلف دستگاه‌ها مشاهده کنید.

نکته مهم:

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

---

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

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

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

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

1. تم شروع

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

• هدر: که شامل عنوان سایت و منوی ناوبری است.
• بدنه: که شامل مطالب اصلی، تصاویر، و ویدیوها است.
• فوتر: که اطلاعات تماس، پیوندها و کپی رایت را شامل می‌شود.

فرض می‌کنیم که قالب شما این ساختار را دارد و حالا می‌خواهیم آن را ریسپانسیو کنیم تا در دستگاه‌های مختلف مانند موبایل و تبلت به خوبی نمایش داده شود.

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

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

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

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

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

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

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

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

3. بلوک‌های قالب اصلی برای صفحات کوچک

برای اطمینان از اینکه عناصر در صفحه نمایش‌های کوچک به درستی کشیده می‌شوند و در کنار یکدیگر قرار می‌گیرند، می‌توانید از عرض 100% برای تمام بخش‌های اصلی صفحه استفاده کنید. همچنین باید از ویژگی‌های clear: both برای جلوگیری از هرگونه تداخل و padding برای ایجاد فضای مناسب استفاده کنید.

اضافه کردن width و clear: both به عناصر اصلی

اولین قدم این است که تمام بخش‌های اصلی صفحه را به گونه‌ای تنظیم کنید که در صفحه نمایش‌های کوچک‌تر کشیده شوند و در کنار هم به درستی قرار بگیرند. برای این کار، می‌توانید از کد زیر استفاده کنید:

header, nav.main, .container, .content, .sidebar, footer {
    width: 100%;
    clear: both;
}

در اینجا:

• width: 100%: این دستور به هر عنصر این امکان را می‌دهد که به اندازه عرض کامل صفحه نمایش کشیده شود.
• clear: both: این ویژگی باعث می‌شود که عنصر بعدی از هر عنصری که قبلاً شناور (float) شده باشد، جدا شده و در پایین آن قرار گیرد. این امر برای جلوگیری از هرگونه تداخل شناور ضروری است.

اضافه کردن padding به عناصر

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

header, nav.main, .container, footer {
    padding: 10px;
}

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

نکته: این padding که به صورت افقی در نظر گرفته شده است، باید برای اندازه‌های مختلف صفحه به صورت نسبی (در واحدهایی مثل درصد یا vw) تنظیم شود تا از بزرگ شدن آن هنگام افزایش اندازه صفحه جلوگیری شود.

جلوگیری از فشرده شدن محتوا

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

مثال نهایی از استایل‌ها:

/* استایل برای صفحات کوچک */
header, nav.main, .container, .content, .sidebar, footer {
    width: 100%;
    clear: both;
}

header, nav.main, .container, footer {
    padding: 10px;  /* فضای داخلی برای جلوگیری از فشردگی */
}

/* استایل برای صفحات خیلی کوچک (موبایل) */
@media screen and (max-width: 768px) {
    header, nav.main, .container, .content, .sidebar, footer {
        padding: 15px; /* فضای بیشتر در صفحات موبایل */
    }

    .content {
        margin-top: 20px;
    }

    .sidebar {
        display: none; /* مخفی کردن نوار کناری در موبایل */
    }
}

نکات مهم:

• فضای داخلی (Padding): این ویژگی به شما کمک می‌کند تا محتوا به خوبی از اطرافش جدا شود و مانع از فشرده شدن صفحات شود.
• clear: both: این ویژگی برای جلوگیری از تداخل شناورهای قبلی بسیار مهم است.
• گام بعدی: بعد از این تغییرات، برای عناصر کوچک‌تر مانند نوار کناری (sidebar)، می‌توانید نمایش آن را در صفحه موبایل مخفی کنید تا فضای بیشتری در اختیار محتوای اصلی قرار گیرد.

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

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

در این مرحله، هدف ما این است که طراحی منو و ابزارک‌ها (ویجت‌ها) را برای دستگاه‌های با صفحه نمایش کوچک‌تر بهینه کنیم. این تغییرات باعث می‌شود که منو و ابزارک‌ها به صورت قابل دسترس‌تر و تمیزتر در صفحات موبایل نمایش داده شوند.

1. استایل‌دهی به منو

برای اینکه منو در صفحه نمایش‌های کوچک‌تر بهتر نمایش داده شود، باید آن را به گونه‌ای طراحی کنیم که عرض صفحه را طی کند و تمامی آیتم‌های منو در مرکز صفحه قرار گیرند. این کار را با استفاده از ویژگی‌های background، overflow و text-align می‌توانیم انجام دهیم.

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

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

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

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

nav.main {
    background: #3394bf;  /* رنگ پس زمینه منو */
    overflow: auto;       /* جلوگیری از خارج شدن منو از کادر */
    text-align: center;   /* مرکز چین کردن آیتم‌های منو */
}

با استفاده از این استایل‌ها، منوی شما به شکل زیر نمایش داده می‌شود:

• background: #3394bf: رنگ پس‌زمینه منو به رنگ آبی ملایم تعیین می‌شود.
• overflow: auto: این ویژگی به منو اجازه می‌دهد تا اگر محتوای آن بیش از عرض صفحه باشد، یک نوار پیمایش برای نمایش بیشتر محتوای منو نمایش داده شود.
• text-align: center: آیتم‌های منو را به صورت افقی در وسط صفحه قرار می‌دهد.

2. فاصله‌گذاری بین ویجت‌ها

در برخی از قالب‌ها، ویجت‌ها (Widgets) در نوار کناری (sidebar) و پاورقی (footer) خیلی به هم نزدیک هستند و به سختی می‌توان مشخص کرد که مرز آن‌ها از یکدیگر کجاست. برای رفع این مشکل، باید از padding و border استفاده کنیم تا ویجت‌ها از هم جدا شوند و به وضوح از یکدیگر قابل شناسایی باشند.

ویجت‌های نوار کناری (Sidebar):

.sidebar .widget {
    padding: 10px 0;  /* فاصله افقی و عمودی بین ویجت‌ها */
    border-top: 1px solid #3394bf; /* مرز بالای ویجت با رنگ آبی */
}

با این تنظیمات:

• padding: 10px 0: فاصله عمودی 10 پیکسل به ویجت‌ها اضافه می‌شود تا از فشردگی جلوگیری شود.
• border-top: 1px solid #3394bf: مرز بالای هر ویجت با رنگ آبی ملایم اضافه می‌شود تا هر ویجت از ویجت‌های دیگر جدا باشد.

ویجت‌های پاورقی (Footer):

برای ویجت‌های پاورقی نیز باید استایل مشابهی ایجاد کنیم تا فاصله و تفکیک بین ویجت‌ها ایجاد شود.

footer .widget {
    padding: 10px 0;  /* فاصله عمودی بین ویجت‌های فوتر */
    border-top: 1px solid #fff; /* مرز بالای ویجت با رنگ سفید */
}

این تغییرات باعث می‌شود که ویجت‌ها در فوتر نیز از یکدیگر جدا شوند و به وضوح قابل شناسایی باشند.

3. محدود کردن تغییرات استایل

در این مرحله، تمرکز بر روی استایل‌های ابتدایی برای بهینه‌سازی نمایش در صفحات کوچک‌تر است. بیش از حد اضافه کردن استایل می‌تواند باعث کند شدن سرعت بارگذاری صفحه شود، به خصوص در دستگاه‌های موبایل که منابع کمتری دارند. به همین دلیل، از اضافه کردن استایل‌های اضافی خودداری می‌کنیم و تمرکز خود را بر روی استایل‌های اصلی گذاشته‌ایم که تأثیر مثبت بر روی سرعت و ظاهر صفحه در دستگاه‌های موبایل داشته باشد.

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

5. استفاده از کوئری‌های رسانه‌ای (Media Queries)

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

1. کوئری‌های رسانه‌ای برای صفحات مختلف

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

/* تبلت‌ها - حالت عمودی */
@media screen and (min-width: 600px) {
    /* استایل‌های مربوط به تبلت‌ها در حالت عمودی */
}

/* تبلت‌ها - حالت افقی */
@media screen and (min-width: 800px) {
    /* استایل‌های مربوط به تبلت‌ها در حالت افقی */
}

/* دسکتاپ‌ها */
@media screen and (min-width: 1025px) {
    /* استایل‌های مربوط به دسکتاپ‌ها */
}

2. توضیحات کوئری‌ها

• تبلت‌ها – حالت عمودی (min-width: 600px): این کوئری برای طراحی استایل‌ها برای تبلت‌ها در حالت عمودی (Portrait) استفاده می‌شود. با تنظیم عرض حداقل 600px، استایل‌هایی که برای تبلت‌ها در این حالت می‌خواهید اعمال کنید را می‌توانید در این بخش بنویسید.

• تبلت‌ها – حالت افقی (min-width: 800px): این کوئری برای تبلت‌ها در حالت افقی (Landscape) است. در این بخش، می‌توانید استایل‌های مربوط به تبلت‌ها در حالت افقی را تنظیم کنید.

• دسکتاپ‌ها (min-width: 1025px): این کوئری برای صفحات با عرض بیشتر از 1025px طراحی شده است. به این معنی که این استایل‌ها برای دسکتاپ‌ها و دستگاه‌هایی با صفحه‌نمایش بزرگ‌تر اعمال خواهد شد.

3. چرا از min-width استفاده می‌کنیم؟

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

4. مراحل بعدی

در مرحله بعد، تمرکز ما بر روی تبلت‌ها خواهد بود. ما استایل‌های مخصوص به تبلت‌ها را در کوئری‌های رسانه‌ای min-width: 600px و min-width: 800px اضافه خواهیم کرد تا طراحی وب‌سایت در تبلت‌ها به درستی نمایش داده شود. پس از آن می‌توانیم برای دسکتاپ‌ها استایل‌هایی را تعریف کنیم که برای صفحات بزرگتر از 1025px مناسب باشند.

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

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

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

ابتدا، برای ایجاد یک طراحی بهینه‌تر برای دستگاه‌های تبلت در حالت عمودی (با عرض صفحه‌نمایش 600px یا بیشتر)، ما به این صورت عمل می‌کنیم:

/* استفاده بهتر از فضای صفحه نمایش - مناطق ویجت کنار هم قرار می‌گیرند */

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) برای صفحات کوچک‌تر

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

/* پیمایش - قرار دادن آیتم‌ها کنار یکدیگر */
nav.main {
    text-align: left;
    padding: 0 10px;
}

nav.main li {
    float: left;
    margin: 0;
}

nav.main li a {
    padding: 0 20px;
}

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

افزودن گرادیانت به منو

برای زیباسازی بیشتر منو، یک گرادیانت به پس‌زمینه منو اضافه می‌کنیم. این کار با استفاده از ویژگی‌های گرادیانت در CSS انجام می‌شود تا نمایی جذاب‌تر و حرفه‌ای‌تر به منو بدهیم.

/* افزودن گرادیانت به پس‌زمینه منو */
nav.main, nav.main a {
    background: #183c5b; /* مرورگرهای قدیمی */
    background: -moz-linear-gradient(top, #183c5b 0%, #3394bf 100%); /* Firefox 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183c5b), color-stop(100%,#3394bf)); /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(top, #183c5b 0%, #3394bf 100%); /* Chrome 10+, Safari 5.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. افزودن استایل برای دستگاه‌های تبلت در حالت افقی (لندسکیپ)

در این مرحله، هدف ما تنظیم مجدد نوار کناری و محتوا برای صفحه‌های با پهنای بیشتر (حداقل 800px) است. برای جلوگیری از کشیدگی محتوا در صفحات وسیع‌تر، نوار کناری را به سمت راست محتوا منتقل می‌کنیم تا طراحی بهتری ایجاد شود.

برای این کار، کدهای زیر را به کوئری رسانه‌ای برای صفحات تبلت در حالت افقی (با عرض صفحه نمایش بیشتر از 800px) اضافه می‌کنیم:

/* تغییر موقعیت محتوا و نوار کناری */
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;
}

توضیحات:

1. انتقال نوار کناری به سمت راست:
   • با اعمال float: left; به محتوای اصلی و float: right; به نوار کناری، نوار کناری به سمت راست منتقل می‌شود.
2. تغییر اندازه محتوا و نوار کناری:
   • نوار کناری 33% از عرض صفحه را اشغال می‌کند و باقی‌مانده (65%) به محتوا اختصاص داده می‌شود.
3. حذف شناور برای ویجت‌ها:
   • برای ویجت‌های نوار کناری، شناور (float) را حذف کرده‌ایم و به این ترتیب آن‌ها به صورت عمودی و در یک ستون نمایش داده می‌شوند.
4. حذف خط مرزی اولین ویجت:
   • برای اولین ویجت، مرز بالایی حذف می‌شود، زیرا در این طراحی دیگر نیازی به آن وجود ندارد.

نتیجه نهایی:

با اعمال این تغییرات، طراحی صفحه در حالت تبلت به صورت افقی (لندسکیپ) به‌گونه‌ای تنظیم می‌شود که محتوا به اندازه 65% از عرض صفحه اشغال می‌کند و نوار کناری در سمت راست محتوا قرار می‌گیرد. ویجت‌های نوار کناری به صورت عمودی و بدون شناور نمایش داده می‌شوند و مرز بالای اولین ویجت حذف می‌شود.

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

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

مراحل افزودن استایل برای دسکتاپ:

• تنظیم عرض برای بدن صفحه (Body): برای جلوگیری از کشیدگی قالب در صفحات عریض‌تر، عرض بدنه صفحه را به 95% تنظیم کرده و یک max-width برای جلوگیری از پهنای زیاد صفحه در اندازه‌های بسیار بزرگ اضافه می‌کنیم.

body {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
}

تنظیم استایل برای پاورقی (Footer): در این قسمت، چهار ناحیه‌ی ابزارک پاورقی را در کنار یکدیگر قرار می‌دهیم. با استفاده از ویژگی‌های float و margin-right به عناصر پاورقی این استایل‌ها را اضافه می‌کنیم.

footer aside {
    float: left;
    width: 23.5%;
    margin-right: 2%;
}

footer aside:nth-child(even) {
    margin-right: 2%;
}

footer aside.fourth {
    margin-right: 0;
}

• • ویژگی max-width: به بدنه اضافه می‌شود تا از کشیدگی در صفحات بزرگ جلوگیری شود.
  • تنظیمات پاورقی: عرض و حاشیه سمت راست را برای نواحی ویجت پاورقی تنظیم می‌کنیم.
  • استفاده از کلاس اختصاصی برای چهارمین ویجت پاورقی: برای ویجت چهارم حاشیه به صفر کاهش می‌یابد.

• افزودن تصویر پس‌زمینه به سربرگ (Header): به سربرگ سایت تصویر پس‌زمینه اضافه می‌کنیم که فقط در دسکتاپ بارگذاری می‌شود. این تصویر جنبه دکوری دارد و برای دستگاه‌های موبایل بارگیری نمی‌شود.

header {
    background: URL(images/banner-image.jpg) center bottom no-repeat;
    padding-bottom: 210px;
}

• ویژگی background: تصویر پس‌زمینه به سربرگ افزوده می‌شود و برای جلوگیری از تغییر اندازه و فشردگی، فضای کافی (padding-bottom) به سربرگ اضافه می‌شود.

نکات مهم:

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

نتیجه نهایی:

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

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

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

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

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

افزونه WPtouch

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

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

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

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

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

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

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

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

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

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

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

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

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