چطور سایت خودم را طراحی کنم؟

زمان مطالعه: 10 دقیقه

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

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

چه روش‌هایی برای طراحی سایت هست؟

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

در این مقاله قرار است مسیر طراحی وب‌سایت را برایتان سنگ‌فرش کنم و راه جاده ابریشمی را نشانتان دهم تا بدون تلف شدن وقت نقشه راه داشته باشید و جایی اشتباهی نپیچید.ما در اینجا به یک دو راهی بر میخوریم؛ استفاده از سایت‌سازها -طراحی سایت به روش Frontend- یا طراحی سایت با کد نویسی و روش Backend ؟ ما در مقاله “طراحی سایت را از کجا شروع کنیم؟” تمامی راه و روش طراح سایت شدن رو به شما توضیح دادیم که با خیال راحت پا به عرصه طراحی سایت بگذارید.

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

• استفاده از روش frontend

فکر میکنم تا به حال اسم وردپرس به گوشتان خورده باشد، اگر خورده که چه بهتر، اگر نه بگذارید بگویم؛ وردپرس، مدیریت محتوایی است که شما را از نوشتن کدها برای ساختن سایت بی‌نیاز می‌کند و با استفاده از همین ماژول از پیش طراحی شده می‌توانید سایت خودتان را طراحی کنید و هیچ مشکلی برای ظاهر یا کیفیت سایتتان هم پیش نیاید. در این روش شما به جای کدنویسی کدهای از پیش نوشته شده به زبان PHP را استفاده می‌کنید که معروف‌ترین آن wordpress و بقیه آن‌ها umbraco, joomla, drupal هستند.

• استفاده از روش Backend

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

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

آموزش مرحله به مرحله طراحی سایت با وردپرس

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

1. انتخاب دامنه و هاست

قبل از هر چیزی باید دامنه خود را انتخاب کنید، اسم سایت چیست؟ قرار است اسم کسب و کار چه چیزی باشد؟ قرار است چی سرچ کنند تا نتیجه‌ی سرچ سایت شما باشد؟

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

قیمت دامنه نسبت به پسوندهایی مثل .com/.ir/.net.org و… به صورت سالانه محاسبه می‌شود. حتما پیش از انتخاب و تایید دامنه باید مطمئن شوید این دامنه پیش از این توسط شخص دیگری انتخاب نشده و توسط شما ثبت شده است، باید اینکار دامنه را به طور کامل و با پیشوند سرچ کنید، و همچنین در سایت‌های whois.com برای سایت‌هایی با پسوند .com ، Nic.whois.ir برای سایت‌هایی با پسوند ir و whois.co برای پسوندهای .co می‌توانید سرچ کنید. برای سرچ کلی دامنه به who.is و ICANN Lookup هم می‌توانید مراجعه کنید.

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

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

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

• ایران هاست

حدود قیمت فروش هاست در ایران هاست از ماهانه صدو سی و دو و پانصد آغاز و تا 366 تومان ادامه دارد، اما پرداخت‌ها باید به صورت سالیانه صورت بگیرد.بسته به هاست انتخابی، به شما بین 2 تا 20 گیگ فضا و 40 تا 200 گیگ ترافیک ماهیانه داده می‌شود.

• ایران سرور

ایران سرور 5 پلان هاست از قیمت 139 تا 309 هزارتومان به صورت پرداخت سالیانه و ماهیانه ارائه می‌دهد. حجم از 2 گیگابایت شروع و تا 50 گیگابایت ادامه دارد. تمام پلان‌ها ترافیک نامحدود دارند و تقریبا به جز فضای ارائه شده تمام ویژگی‌ها مشترک است.

• هاست ایران

هاست ایران 4 پلن متفاوت با ویژگی‌های پایه به شما پیشنهاد می‌کند اما نکته جالب توجه تغییر در تنظیمات است، اگرپلان‌های پایه را انتخاب کنید قیمت چیزی حدود 30 تا 156 هزارتومان به صورت ماهیانه است، اما با تغییردر تنظیمات (تمام ویژگی‌ها قابل تغییر است) قیمت محاسبه شده و به شما اعلام می‌شود.

• میزبان فا

هاست ابری وردپرس میزبان فا از ماهیانه 300 هزارتومان آغاز و تا 800 هزارتومان ادامه دارد. این مبلغ را می‌توانید علاوه‌بر پرداخت ماهیانه؛ به صورت سه ماهه، شش ماهه و یا یکساله پرداخت کنید. از پرداخت سهماهه به بعد تخفیف روی قیمت اعمال می‌شود. فضا از 30 گیگابایت تا 240 گیگابایت است و ترافیک تمام پلان‌ها نامحدود است.

2. نصب وردپرس

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

3. انتخاب قالب

قالب مورد نظر خود را با توجه به کاربری سایت (فروشگاهی، آموزشی، وبلاگ، خبری و…) انتخاب کنید. شما می‌توانید قالب‌های رایگان ارائه شده توسط خود وردپرس را دانلود کنید و یا از سایت‌های ایرانی مثل راست‌چین و ژاکت بخرید. سایت hamyarwp.com هم قالب‌های رایگان ورد پرسی دارد که می‌توانید آن‌ها را نیز بررسی کنید.

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

4. انتخاب صفحه‌ساز

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

• Elementor

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

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

این افزونه قابلیت پشیتبانی از ووکامرس را داشته و شما در این افزونه قادر به ویرایش صفحات، صفحه‌سازی،  drag & Drop  دسترسی به بیش از 300 قالب ساخته شده توسط طراحان، دسترسی به بیش از 90 ابزارک و ویرایش به صورت رسپانسیو، انوع پنجره‌ساز، تم‌ساز، ویجت‌های جهانی، جلوه‌ها و افکت‌ها حرکتی و… را دارید.

• Beaver Builder

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

• Divi

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

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

• گوتنبرگ

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

حالا صفحات مختلف را با توجه به کاربری سایت ویرایش کنید، نوشته‌ها را تغییر دهید و عکس‌های دیفالت را با عکس‌های مد نظر خودتان جا به جا کنید. برای پیدا کردن عکس‌های با کیفیت می‌توانید به سایت‌هایی نظیر storyset ، freepik ، paintrest  و… مراجعه کنید.

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

طراحی وبسایت با کد نویسی را از کجا شروع کنیم؟

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

1. با کدام زبان برنامه‌نویسی شروع کنم؟

زبان HTML (Hyper text markup Language) نوع ساختار یک وب‌سایت را توصیف می‌کند و از دو بخش عناصر و ویژگی‌ها تشکیل شده است، تمام اجزای وبسایت‌ها بر اساس این زبان طراحی شده‌اند و درواقع شما بدون بلد بودن این زبان قادر به نمایش هیچ2چیزی نخواهید بود.

2. ظاهر سایت چه؟

حالا که ستون‌های سایت را بنا کردید وقتش است که کمی زیبایی به آن اضافه کنید، یعنی وقتی رسیده  CSS (Cascading Style Sheet) را آموخته و به سایت خود روح ببخشید. بدون بلد بودن این زبان نمی‌توانید به سایت ظاهر مناسبی دهید؛ در نتیجه ملزم به یادگیری این زبان نیز هستید.

3. چطور ضعف‌های این دو زبان را بپوشانم؟

الان نوبت java Script است که وارد عمل شود، این زبان تمام نقطه ضعف‌ها و کاستی‌های دو زبان قبلی را از بین می‌برد و ترکیب این سه زبان یک صفحه قدرتمند با قابلیت‌هایی جذاب و جالب است. JS زبانی هم برای backend و هم frontend بوده و بسیار شبیه به C# و C++ است.

4. حالا نوبت…؟

حالا که تمام زبان‌های سمت کاربر را یاد گرفته‌ایم وقش رسیده تا زبانی سمت سرور را یاد بگیریم؛ تمام زبان‌هایی که تا الان یاد گرفته‌ایم برای ایجاد صفحه‌ای استاتیک یا ایستا مناسب است –صفحاتی که زیاد نیاز به تغییر ندارند و معمولا ثابت می‌مانند- این زبان open source و مورد استفاده تمامی سایت‌هاست به طوری که وردپرس با آن نوشته شدهو همانطور که می‌دانیم محبوب‌ترین سیستم مدیریت محتوا را دارد.

5. jQuery که زبان برنامه نویسی نیست!

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

6. باز هم زبانی هست؟

با عرض شرمندگی بله، هنوز یکی دیگه مانده، اگر بخواهید PHP را یاد بگیرید برای ارتباط بین پایگاه داده‌ها نیاز دارید زبان SQL را هم بلد باشید؛ این زبان یکی از محبوب‌ترین‌ ارتباط دهنده‌ی بین پایگاه داده‌ها بین طراحان سایت است. حالا جالب اینجاست SQL محدود به زبان خاصی نیست و بیشتر برنامه‌نویس‌ها و طراحان سایت نیاز دارند تا این زبان را بلد باشند.

 

منابع آموزشی داریم؟

حقیقتش را بگویم این روزها چیزی که زیاد است منابع آموزشی است همه می‌خواهند چیزی به ما یاد بدهند؛ حالا ما برخی از این منابع آموزشی (هم منابع رایگان و هم دوره‌های پولی) را که واقعا تاثیری دارد به شما معرفی می‌کنیم.

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

• 4rahecomputer
• Zohre movahedi
• المنتور فارسی

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

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

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

طراحی سایت با وردپرس و سایت‌سازهای آماده مدت زمان کمتری وقت می‌برد؛ می‌توانم برآورد کنم که بین 3 روز تا یک‌هفته می‌توانید آموزش ببینید و همزمان سایت خود را طراحی کنید و همچنین از نظر قیمت، اگر فقط برای طراحی سایت هزینه پرداخت کنید، به جز هزینه اینترنت برای بحث آموزش چیزی حدود 400 تا دو میلیون تومان (بسته به انتخاب هاست، پرداخت ماهانه یا سالیانه و…) هزینه در بردارد و اگر دوره‌هایی شرکت کنید بسته به آکادمی و هزینه‌ی دوره این قیمت افزایش خواهد داشت.

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

در آخر

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

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