مشاوره: 23087 21 (98+)

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

امروزه هر شخصی یک دستگاه متصل به اینترنت در اختیار دارد که ممکن است این دستگاه یک تلفن همراه , تبلت , لپ تاپ و حتی یک تلویزیون هوشمند باشد. با گسترش روز افزون کاربران اینترنت همراه و استفاده اکثریت مردم از این گجت ها برای وب گردی و انجام کارهای روزانه دیگر وقت آن شده که تمامی سایت ها به صورت واکنش گرا یا 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%;
}

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

کلمات کلیدی:

آخرین مقالات

۷ نکته مهم در طراحی سایت

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

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

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

طراحی سایت

اشتباهات رایج در طراحی سایت

۱- رنگ بندی :

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

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

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

۲- سایز و نوع فونت :

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

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

۳- منو ها و مسیریابی:

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

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

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

۴- تصاویر :

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

  • کیفیت تصاویر باید خوب و با حجم کم باشد تا باعث کاهش سرعت سایت شما نشود.توجه کنید که سرعت سایت یک فاکتور مهم در سئو و بهینه سازی سایت شما است.
  • سایز تصاویر هم باید متناسب با مطلب شما انتخاب شود. برای یک مقاله یک تصویر با اندازه متوسط (۶۰۰X400) کافی است و برای منو ها و لوگوی سایت از تصاویر با سایز کوچک استفاده کنید.استفاده از تصاویر بیش از حد بزرگ در مطالب باعث سنگین شدن صفحات سایت و در نتیجه کاهش سرعت بارگذاری سایت میشود.

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

یک تصویر مناسب و مرتبط گاهی بیش از چندین خط توضیح و متن به کاربر در درک مطلب کمک میکند.

۵ – فرم تماس :

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

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

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

۶ – سرعت سایت :

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

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

  • استفاده حداقل از Java و CSS :

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

  • استفاده استاندارد از مولتی مدیا :

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

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

۷ – واکنش گرا :

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

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

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

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

کلمات کلیدی:

آخرین مقالات

روش صحیح سفارش طراحی قالب سایت به گرافیست و برنامه نویس

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

قالب یا پوسته Template چیست ؟

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

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

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

۲- بعد از انتخاب طرح نهایی نوبت به ارسال توضیحات و اطلاعات متنی و تصویری به واحد طراحی و گرافیک میباشد . ارسال اطلاعات متن میبایست با فرمت Word انجام شود سایر اطلاعات از قبیل آرم (لوگو) ، تصاویر مورد استفاده در صفحات ، تصاویر مورد استفاده در بخش محصولات و غیره میبایست دارای مشخصات زیر باشد : – آرم (لوگو) با کیفیت مناسب و فرمت PNG – کلیه اطلاعات متنی با فرمت Word بصورت تایپ شده – تصاویر با کیفیت مناسب ،استاندارد بارگزاری بر روی وب سایت – ارسال نقشه سایت ، نام و محل منوهای اصلی

۳- پس از انتخاب نمونه طرح گرافیکی قالب سایت ، میتوانید الگو طرح را بهمراه توضیحات ضروری برای طراح ارسال نمایید

کلمات کلیدی:

آخرین مقالات