ثبت نام | ورود | جستجو
مشاوره: ۲۳۰۸۷ ۲۱ (۹۸+)
آدرس: تهران – بلوار آفریقا – خیابان ناهید شرقی – پلاک ۱۲ – طبقه سوم

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

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

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

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

قالب واکنش گرا

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

در این مقاله واکنش گرا کردن قالب پیش فرض TwentyTen در سیستم مدیریت محتوی وردپرس آموزش داده میشود. اما شما میتوانید همین تغییرات را بر روی هر قالب دیگری انجام دهید و آن قالب را Responsive کنید.

برای شروع باید به سراغ فایل Style.css بروید و تغییرات زیر را در آن ایجاد کنید.

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

پنل مدیریت وردپرس >>> نمایش >>> ویرایشگر >>> فایل Style.css

در مرحله اول کد زیر را در انتهای فایل اضافه کنید :

@media only screen and (max-width: 480px) {
}

افزودن این کد به مرورگر میگوید که اگر سایز صفحه نمایش کاربر کوچکتر از ۴۸۰ پیکسل باشد نسخه موبایل سایت برای او نمایش داده شود.

۴۸۰ پیکسل حداکثر عرض  صفحه نمایش برای اکثر گوشی های هوشمند موجود در بازار است.

و برای پشیبانی از تبلت ها که عرض صفحه نمایش آنها ۹۵۹ پیکسل است از کد زیر استفاده کنید :

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

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

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

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:400px;

}

و کد زیر :

#container {
width:100%;
}

مفهوم کدهای بالا این است که محتوی میتواند ۱۰۰% از عرض صفحه نمایش را بگیرد که عرض صفحه نمایش هم ۴۰۰ پیکسل تعریف شده است.

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

#branding img {
display:none;
}

و اگر میخواهید تصویر هدر با عرض صفحه نمایش هم اندازه شود از کد زیر استفاده کنید :

#branding img {
width:100%
}

کد بالا مشخص میکند که اندازه تصویر هدر باید ۱۰۰% عرض صفحه نمایش باشد که در ابتدا ۴۰۰ پیکسل مشخص شد.

مرحله بعدی عنوان سایت است که برای مخفی کردن آن در نسخه موبایل از کد زیر :

#site-description{
display:none;
}

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

#site-description{
float:left;
}

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

#access{
width:100%;
}

و کد زیر برای هم عرض کردن بخش محتوی و نوار کناری  :

#content{
width:100%;
}

برای قسمت پست های سایت از کد زیر :

.hentry{
margin-left:-13px;
}

و برای مخفی کردن نوار کناری (ساید بار ) و هم عرض کردن نوار پایینی سایت (فوتر) از کد زیر استفاده کنید :

#primary{
display:none;
}

This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

و در پایان کد ها زیر برای کوچک کردن نام ورودپرس و حاشیه مشکی قسمت فوتر مورد استفاده قرار میگیرد :

#site-generator {
float:left;
margin-top:5px;
}

#colophon {
width:100%;
}

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

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

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
 
width:400px;
 
}

#container {
width:100%;
}

#branding img {
width:100%
}

#site-description{
float:left;
}

#access{
width:100%;
}
#content{
width:100%;
}

.hentry{
margin-left:-13px;
}

#primary{
display:none;
}
 
This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

#site-generator {
float:left;
margin-top:5px;
}
 
#colophon {
width:100%;
}

فایل ویدئویی زیر آموزش کامل انجام تغییرات برای واکنش گرا کردن قالب پیشفرض وردپرس میباشد :

کلمات کلیدی:

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

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

سایت واکنش گرا Responsive یعنی در هر اندازه  صفحه نمایش به صورت درست نمایش داده شود.

در تاریخچه طراحی سایت خواندید که اواخر سال ۲۰۱۰ کنسرسیوم W3C ورژن پنج زبان Html را ارائه کرد و به نوعی انقلابی در وب ایجاد کرد زیرا طراحان میتوانستند امکانات بسیار جدیدی به سایت اضافه کنند و یکی از آنها که خیلی زود فراگیر شد و به یک استاندارد تبدیل شد طراحی سایت واکنش گرا بود.
برنامه نویسان توانستند با کمک زبان اچ تی ام ال ۵ و فریمورک هایی نظیر بوت استرپ سایت هایی طراحی کنند که در تمامی دستگاه های همراه به درستی نمایش داده میشد و کاربران هیچ مشکلی در هنگام استفاده از آن سایتها نداشتند.
وقتی یک سایت واکنش گرا طراحی میکنید , در واقع با درخواست مرورگر کاربر ابتدا عرض صفحه نمایش او سنجیده میشود و سپس نسخه مناسب و بهینه سازی شده از سایت به مرورگر کاربر فرستاده میشود و در واقع در طراحی سایت واکنش گرا برای هر نوع صفحه نمایش یک نسخه بهینه سازی شده از سایت نمایش داده میشود که ممکن است با نسخه اصلی سایت تفاوت داشته باشد. البته این تفاوت از نظر سایز تصاویر و محل قرارگیری منو های سایت است و سیستم رنگ بندی و محتوی سایت تغییری نمیکند.

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

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

برای انتشار اینفوگرافیک در سایت خود از کد زیر استفاده کنید

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

  • کاربر مجبور نیست برای مطالعه مطالب شما زوم کند و مطالب با سایز مناسب به او نمایش داده میشود.
  • در سایت واکنش گرا نیازی به اسکرول کردن به چپ و راست نیست و مطالب با توجه به عرض صفحه فیت میشود.
  • منو های کاربری بهینه سازی شده اند و به راحتی در دسترس کاربر هستند.
  • به دلیل راحتی کاربر در استفاده از سایت زمان ماندن کاربر در سایت Time on Page افزایش میابد و همین باعث کاهش نرخ پرش Bounce Rate میشود.
  • در سال ۲۰۱۲ شرکت گوگل به همه سایت ها تاکید کرد که باید واکنش گرا باشند و این یک امتیاز مثبت در رنکینگ سایت است.

در حال حاضر ۴۶% از کاربران هنگام مشاهده نسخه موبایل سایت ها با مشکل مواجه میشوند و ۴۴% از کاربران بیان کرده اند که کار کردن با نسخه موبایل سایت ها سخت است و همین دلایل باعث میشود اگر شما واکنش گرا نیستید به زودی تعداد زیادی از مشتریان خود را از دست خواهید داد . چون آنها ترجیح میدهند وارد سایتهای واکنش گرا بشوند و زودتر و راحت تر به خواسته خود برسند.

تیم طراحی سایت فراکارانت آمادگی دارد با بهترین قیمت ها و تیم حرفه ای , با کمک آخرین استاندارد های برنامه نویسی  سایت شما را به صورت واکنش گرا طراحی و در اختیار شما قرار دهد .

کلمات کلیدی:

وب سایت های واکنش گرا بهترین گزینه برای سئو

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

وب سایت های واکنش گرا

 

سئو در طراحی سایت

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

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

اگر سیو یک عامل است ما در اینجا به شما سه دلیلی را که چرا وب سایت های پشتیبان بهترین گزینه برای استراتژی های موبایل است را معرفی میکنیم:

1-توصیه شده توسط گوگل

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

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

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

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

2-یک وب سایت دستگاه های زیاد

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

3_اسان تر برای مدیریت

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

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

نتیجه گیری:

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

 

وب سایت های واکنش گرا بهترین گزینه برای سئو

 

 

 

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

 

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

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

طراحی وب سایت و تاثیرات منفی خرید لینک

آنالیز وب سایت همراه ارائه برنامه سئو

بهبود رتبه سایت در گوگل

ساخت و تنظیم صفحات محتوایی

بسته طراحی گرافیک اختصاصی و پیاده سازی صفحات

 

جهت آشنایی بیشتر با خدمات و محصولات فراکارانت مشاهده صفحات زیر توصیه شده است…

 

مقایسه پلان های هاست    مقایسه پلان های طراحی سایت        مقایسه پلان های پشتیبانی       مقایسه پلان های بسته خدمات امنیت SSL     نمونه کارهای طراحی سایت        

 

 

 

کلمات کلیدی:
Scroll Up
سه شنبه ها صبح قبل از صرف صبحانه یک مقاله رایگان در خصوص دیجیتال مارکتینگ و نحوه بکار گیری آن برای فروش بیشتر ازما دریافت کنید
hffffff