جلسه 24: آشنایی با ساختار سایت

در این جلسه که در دوره آموزش وردپرس فصل دو می باشد وارد مباحث پیشرفته تر یادگیری وردپرس و طراحی سایت میباشد میپردازیم به ساختار یک وبسایت که بسیار جلسه مهمی است برای افراد تازه کار که می خواهند اصولی طراحی سایت با وردپرس را یاد بگیرند. به طور کلی ساختار سایت به سه بخش کلی sidebar، header، body و footer تقسیم می شود که در زیر توضیحات آن را مشاهده می کنید:

header: هدر یا سربرگ قسمت بالایی سایت است که موارد مهم سایت در آن قرار دارد.
sidebar: بخش کناری آن است و بودن آن ضرورت ندارد و بستگی به طراح دارد.
body: محتوای یک صفحه است و آن چیزیست که کاربر دنبال آن میگردد.
footer: بکی ار بخش های ضروری سایت است و در پایینترین بخش صفحه قرار دارد.

در ویدئو به صورت کاملتر مبحث ساختار سایت را پیش میبریم.

توضیحات کلی ساختار سایت

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

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

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

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

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

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

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

چارچوب اصلی هر سایت

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

خب برویم همه این اِلمانها را داخل سایت‌های واقعی با هم ببینیم؛

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

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

ممکن که مثلاً برای نوشته‌ها سایدبار داشته باشیم یا برای بخش یکسری برگه‌ها و نمونه کار و فروشگاه، سایدبار داشته باشیم امّا برای صفحه اصلی در این سایت ترجیح دادیم که سایدبار قرار نگیرد.

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