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

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

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

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

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

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

افزونه ریسپانسیو کردن وردپرس

افزونه WPtouch

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

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

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

نمایش سایت در موبایل قبل از نصب و فعال سازی افزونه

 

 

نمایش سایت در موبایل بعد از نصب و فعال سازی افزونه

 

 

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

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

افزونه صفحه ساز ریسپانسیو SiteOrigin 

دومین افزونه کاربردی که قصد داریم به آن بپردازیم پلاگین SiteOrigin با نصب بیش از 1000000 موفق در مخزن وردپرس تا به این روز که در حال انتشار این مقاله هستیم می باشد با استفاده از این پلاگین نیز می توانید با امکانات حرفه ای که دارد ( Drag And Drop ، سازگاری با تمام قالب رایگان وردپرس و نسخه های پرمیوم ) انواع صفحات ریسپانسیو و واکنشگرا طراحی کنید.

نکته: حتما توجه داشته باشید که تفاوت بین افزونه SiteOrigin و WPtouch در این است که اولی جهت طراحی صفحات ریسپانسیو است و دومی به کل وبسایت را ریسپانسیو میکند.

آموزش افزونه SiteOrigin

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

 

 

با کلیک روی این تب Page Builder وارد صفحه ای جدید همانند تصویر زیر خواهید شد.

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

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

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

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

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

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

اگر به هر دلیلی  پوسته وردپرس شما این قابلیت را ندارند و قصد دارید آن را با استفاده از کد در سایت خود اضافه کنید باید در اولین گام قطعه کد زیر در داخل فایل هدر پوسته بین دو تگ 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">

 

خب در اولین خط رزولوشن های بالاتر از 1024 را مشخص کردیم برای نمایش در انواع کامپیوتر و لپ تاپ

در دومین خط رزولیشن327 به پایین را مشخص کردیم برای نمایش در انواع موبایل ها

و در خط سوم این استایل رزولیشن 327 تا 1024 را مشخص کردیم برای صفحه نمایش ها با سایز بین این دو عدد جهت نمایش در انواع مینی لپ تاپ و تبلت ها و …

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

توجه: اگر با استفاده از استایل فوق مشکل نمایش رزولوشن های بین 327 و 1024 داشتید کافیست این اعداد را چندین رزولیشن مختلف تبدیل کنید برای مثال از 327 تا 500، 500 تا 700، از 700 تا 900 و از 900 تا 1024 با این کار مطمئناً مشکل شما حل خواهد شد.

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

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

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

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

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

 

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

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

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

# Media Queries

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

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

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

 

 

منبع:  وینزا