تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
تغییر وضعیت خودکار سفارش ها از انجام شده به درحال پردازش 1 پاسخ 95 بازدید کمک در گریویتی 1 پاسخ 330 بازدید قالب سون مگ 16 پاسخ 1174 بازدید سفارش نصب اسکریپت xfilesharing 1 پاسخ 50 بازدید All In One SEO Pack Pro 5 پاسخ 561 بازدید طراحی سایت با وردپرس 0 پاسخ 1756 بازدید طراحی سایت ریسپانسیو 1 پاسخ 502 بازدید خرید ارز ترون در بیت مهر 0 پاسخ 202 بازدید ووچر پرفکت مانی چیست 0 پاسخ 211 بازدید سایت شرط بندی فوتبال تاینی بت 0 پاسخ 226 بازدید

تبلیغات
تبلیغات تبلیغات

طراحی واکنش گرای سایت های وردپرسی

مقالات,آموزش,ترفند , وردپرس

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

 

طراحی واکنش گرای سایت های وردپرسی

در مقدمه کمی درباره واکنش‌گرایی صحبت کردیم اما ترجیح می‌دهم تعریف دقیقی از این واژه داشته باشم تا بهتر بتوانیم زوایای آن را مورد بررسی قرار دهیم. واکنش‌گرایی یا حالت رسپانسیو (Responsive) چیست؟

 

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

 

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

 

آمار استفاده از گوشی تلفن همراه در ایران

طراحی واکنش گرای سایت های وردپرسی

برای اینکه بتوانیم مسئله واکنش‌گرایی را ثابت کنیم بد نیست نگاهی به آمار و ارقام استفاده از تلفن همراه در ایران بیندازیم. طبق آماری که از سازمان فناوری اطلاعات اعلام شد، در حال حاضر حدود ۵۳ کاربر تلفن همراه هوشمند داریم. این آمار هر روز در حال رشد است و انتظار می‌رود تا سال آینده به رقم شگفت‌انگیزی برسیم. با این حال شما فکر می‌کنید چند درصد از این کاربران، سایت‌ها را داخل گوشی موبایل خود مشاهده می‌کنند؟ هنوز آمار دقیقی ارائه نشده اما تقریبا حدود ۶۵ درصد از کاربران، سایت را با گوشی موبایل خود می‌بینند. درصد کمی نیست و با رشد عجیبی رو به روست.

 

درآمدی بر ورود سایت‌های واکنش‌گرا

استارت این موضوع بین سال‌های ۲۰۰۵ تا ۲۰۰۸ که گوشی‌های هوشمند روی کار آمدند خورد و در نهایت در سال ۲۰۱۲ گوگل اعلام کرد که وبسایت‌ها باید کاربرپسند باشند. یکی از فاکتورهای مهم کاربرپسند بودن هم این است که کاربر بتواند در دستگاه‌های هوشمند خود نیز وبسایت را مشاهده کرده و با آن کار کند. از همان‌جا بود که طراحان شروع به مشاهده سایت‌هایشان در گوشی‌های همراه کردند و با صحنه‌های بهم ریخته‌ای مواجه شدند! حال باید چه کرد؟ آیا می‌توان این حالت بهم ریخته را درست کرد؟ در نهایت به این نتیجه رسیدند که امکانی به نام واکنش‌گرایی را باید برای سایت‌های خود فعال کنند و به دنبال آموزش طراحی سایت ریسپانسیو رفتند. با کمک آموزش‌های واکنش‌گرایی توانستند با CSS3 و HTML5 عملیات ریسپانسیو در css را امکان‌پذیر ساخته و مشاهده سایت‌ها را برای کاربران موبایلی نیز ساده کنند.

 

پیشرفت واکنش‌گرایی به کجا رسید؟

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

 

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

طراحی واکنش گرای سایت های وردپرسی

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

 

  •  رعایت 7 گزینه در طراحی وبسایت واکنش گرا

 

۱- توجه به سرعت بارگذاری

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

 

۲- توجه به مرورگرهای موبایل

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

 

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

 

دانلود افزونه Wptouch

کد ریسپانسیو در وردپرس

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

 

قطعه کد زیر را داخل فایل header و بین دو تگ <head> و </head> قرار دهید:

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

حال برای اینکه رزولوشن‌های مختلفی را در نظر بگیرید، نیازمند ایجاد تغییر در CSS هستید. قطعه کد زیر را داخل فایل style.css قالب قرار دهید:

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

همان‌طور که مشاهده می‌کنید اعداد ۱۰۲۴ برای دستگاه‌های کامپیوتر و لپ‌تاپ، ۳۲۷ برای گوشی‌ها و عدد ۳۲۷ تا ۱۰۲۴ برای تبلت‌ها و مینی‌ لپ‌تاپ‌هاست. این اعداد یک استاندارد کلی است اما اگر بخواهید می‌توانید اعداد خود را در بازه‌های مشخصی تغییر دهید.

 

چگونه سایت وردپرس خود را ریسپانسیو کنیم

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

 

بهترین ابزارهای تست رسپانسیو بودن

در اینجا به شما بهترین ابزارها را برای تست واکنش‌گرایی وبسایت معرفی می‌کنیم که به شما برای شناخت بهتر کمک می‌کند.

 

mobile friendly testاین ابزار برای گوگل است و مسلما اطلاعات درستی را در اختیار ما قرار می‌دهد. علاوه بر اینکه به شما اطلاعات سایت را می‌دهد بلکه تصویر آن را در دستگاه‌های مختلف نمایش می‌دهد و در نهایت بیان می‌کند که سایت شما موبایل فرندلی است یا خیر.

طراحی واکنش گرای سایت های وردپرسی

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

طراحی واکنش گرای سایت های وردپرسی

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

 

نتیجه‌گیری نهایی

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

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=49644
کلمات کلیدی پست :
مطالب مرتبط
6,894قالب زیبای رویت آندروید برای وردپرس تاریخ : 2014/04/29
6,776ایجاد یادداشت در پیشخوان وردپرس با افزونه WP Dashboard Notes تاریخ : 2017/04/30
28,408افزونه ارسال مطلب اتوماتیک به تلگرام برای وردپرس تاریخ : 2016/04/5
4,425۶ ابزارک با موضوع جام جهانی برای وردپرس تاریخ : 2014/06/6
2,272قالب دایرکتوری CityBook برای وردپرس تاریخ : 2019/09/24
14,758افزونه اخبار سئوی وردپرس و گوگل Yoast News SEO for WordPress & Google تاریخ : 2016/03/13
6,813آموزش غیرفعال سازی جستجو در وردپرس با افزونه Disable Search تاریخ : 2017/08/12
8,396ورود و عضویت موقت بدون رمز عبور در وردپرس با Temporary Login Without Password تاریخ : 2017/07/24
1,728آموزش حذف wpseo_sitemap‌ از دیتابیس وردپرس تاریخ : 2019/09/5
10,222افزودن آیکون پرچم در وردپرس با افزونه Flag Icons تاریخ : 2018/01/8
5,130افزونه فارسی مدیریت زمینه دلخواه وردپرس نسخه حرفه ای ۵.۱.۵ تاریخ : 2015/01/13
12,765افزونه پاپ آپ نینجا برای وردپرس نسخه 3.6.3 تاریخ : 2014/11/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات