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

با سلام. در این مقاله از کامل ترین مرجع وردپرس در ایران میخواهیم به نحوه ریسپانسیو کردن وردپرس بپردازیم.

پس تا آخر مقاله با وب سایت میلاد وردپرس همراه باشید.

آموزش ریسپانسیو کردن وردپرس با افزونه و کد Html – Css

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

گزینه‌های زیادی هستند که باید توجه خود را به آن‌ها جلب کنید تا وبسایتتان را حرفه‌ای بسازید.

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

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

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

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

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

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

در واقع اگر سایت رسپانسیوی نداشته باشید باید دور بازدید خوب و موفقیت را خط قرمز بکشید.

از کاربران خود نمی‌توانید انتظار داشته باشید که برای مشاهده سایت شما حتما کامپیوتر یا لپ‌تاپ خود را باز کنند.

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

پس تکلیف چیست؟ باید بستر استانداردی را برای آن‌ها در نظر گرفت.

بیشتر بخوانید:

• آموزش سئو وبلاگ
• تاثیر کلمات کلیدی در سئو وردپرس
• افزونه edd چیست

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

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

Responsive سایت به دو دلیل می بایست بر روی هر نوع قالب وردپرسی به خوبی رعایت شود.

دلیل اول به خوبی نمایش دادن بخش های مختلف سایت در انواع رزولوشن ها و دومین دلیل سئو وب سایت است که موتورهای جستجو به ریسپانسیو بودن وردپرس و سایت اهمیت بیشتری می دهند و بیقین می توانند در رشد وب سایت تاثیر مثبتی داشته باشد.

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

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

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

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

• چگونه قالب وردپرس را ریسپانسیو کنیم
• چگونه سایت خود را ریسپانسیو کنیم چگونه سایت خود را ریسپانسیو کنیم
• تبدیل سایت به ریسپانسیو تبدیل سایت به ریسپانسیو
• responsive سایت
• بهترین روش ریسپانسیو بهترین روش ریسپانسیو
• حذف ریسپانسیو وردپرس
• حذف ریسپانسیو قالب وردپرس
• کد ریسپانسیو در وردپرس
• افزونه ریسپانسیو وردپرس

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

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

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

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

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

هنوز آمار دقیقی ارائه نشده اما تقریبا حدود ۶۵ درصد از کاربران، سایت را با گوشی موبایل خود می‌بینند.

درصد کمی نیست و با رشد عجیبی رو به روست.

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

استارت این موضوع بین سال‌های ۲۰۰۵ تا ۲۰۰۸ که گوشی‌های هوشمند روی کار آمدند خورد و در نهایت در سال ۲۰۱۲ گوگل اعلام کرد که وبسایت‌ها باید کاربرپسند باشند.

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

از همان‌جا بود که طراحان شروع به مشاهده سایت‌هایشان در گوشی‌های همراه کردند و با صحنه‌های بهم ریخته‌ای مواجه شدند! حال باید چه کرد؟

آیا می‌توان این حالت بهم ریخته را درست کرد؟

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

با کمک آموزش‌های واکنش‌گرایی توانستند با CSS3 و HTML5 عملیات ریسپانسیو در css را امکان‌پذیر ساخته و مشاهده سایت‌ها را برای کاربران موبایلی نیز ساده کنند.

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

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

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

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

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

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

در قدم اول دو نکته کلیدی را در نظر گرفته و حتما رعایت کنید:

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

بارها گفته‌ایم که وبسایت باید در کمترین زمان ممکن بارگذاری شده و تمامی محتویاتش را نشان دهد.

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

پس آن سایتی استاندارد و کاربرپسند است که واکنش‌گرای پرسرعت باشد.

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

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

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

اگر احیانا سایت شما واکنش‌گرا نیست نگران نباشید.

روش‌هایی برای طراحی واکنش گرای سایت های وردپرسی وجود دارد که ساده‌ترین ان استفاده از افزونه است.

افزونه 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: این ابزار نیز یکی از ابزارهای قوی در تست واکنش‌گرایی است.

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

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

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

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

یعنی به گونه‌ای وضوح و کیفیت داشته باشد که کاربر از دیدن آن لذت ببرد.

به این نوع عملیات رسپانسیو کردن سایت گویند.

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

حذف ریسپانسیو وردپرس

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

استایل به شکل زیر می باشد.

/*******************************************************

# Media Queries
 *******************************************************/

چنانچه استایل مورد نظر در فایل مذکور پیدا نشد سعی کنید به مسیر css/media-queries.css. قالب خود مراجعه کد را پیدا و حذف کنید.

با این کار قابلیت ریسپانسیو بودن وردپرس دیگر وجود نخواهد داشت.

به پایان ارائه این مقاله آموزشی وردپرس رسیدیم از اینکه ما را تا پایان همراهی کردید بسیار سپاسگذاریم. موفق باشید. 😉

 

میلاد وردپرس