آموزش طراحی سایت با وردپرس در ۲ ساعت!

#قدم اول: پلتفرم مناسب برای طراحی وبسایت خود را انتخاب نمایید.

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

منظور من از پلتفرم چیست؟

خب، زمانی که من در سال ۱۳۸۸ شروع به طراحی وبسایت کردم، بسیاری از سایت های با استفاده از HTML (کد)، CSS و حتی فلش ساخته می شدند. این زمان بسیاری را برای یادگیری ساخت وبسایت از من گرفت.

به همین دلیل اکثر مردم هنوز هم فکر می کنند ساخت وب سایت از ابتدا مشکل است و یا نیاز به مقدار زیادی از مهارت های برنامه نویسی و طراحی دارد. – البته این تا حدی درست است اما برای طراحی هر وبسایتی نه!

در سال ۲۰۱۶، سیستم های مدیریت محتوا (CMS) مانند وردپرس وجود دارند که ایجاد یک وب سایت را برای همه قابل دسترس کرده اند.

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

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

اما چرا وردپرس از بقیه بهتر است؟

هیج جای دنیا راهی بهتر و آسان تر از وردپرس برای ساخت یک وب سایت رایگان پیدا نمی کنید، زیرا:

۱. وردپرس فارسی بسیار عالی و آپدیت می باشد.

WordPress این سیستم مدیریت محتوا (CMS) در کشور ما نماینده رسمی دارد و تمامی نسخه های آن به صورت رایگان در وب سایت وردپرس فارسی قرار می گیرد.

۲. وردپرس کاملا رایگان است، همراه با بسیاری از پوسته ها و تم های زیبا که میتوانید انتخاب کنید.

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

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

۳. وردپرس برای تازه کاران عالی ست!

اگر شما میتوانید در ورد مایکروسافت مطلب بنویسید پس می توانید محتوای وبسایت خود را در وردپرس هم وارد کنید. شما می توانید با افزونه های وردپرس وبسایت خود را گسترش دهید و تقریبا هر امکاناتی در ساخت وبسایت خود نیاز داشته باشید از پلاگین های وردپرس به صورت رایگان استفاده کنید. با “پلاگین ها یا همان افزونه ها” شما قادر به اضافه کردن فرم های تماس، فرم های اشتراک، گالری عکس و … برای وب سایت تان خواهید بود. بسیار ساده است، نه؟

۴. وردپرس برای سایت های کوچک یا بزرگ؟ جواب: عالی برای هر دو

از وبلاگ های عمومی تا سایت های شرکتی زیبا و فروشگاه های آنلاین، وردپرس می تواند در هر نوع از طراحی وب سایت بهترین پبت فرم انتخابی شما باشد. وردپرس توسط eBay، موزیلا، رویترز، CNN، Google Ventures و حتی ناسا استفاده می شود.

۵. معمولا قالب های آماده وردپرس Responsive خواهند بود، یعنی برای موبایل، تبلت و رایانه بهینه شده اند.

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

۶. پشتیبانی وسیع و جامعه بزرگ برنامه نویس برای کمک به گسترش وردپرس.

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

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

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

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

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

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

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

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

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

#قدم دوم: پیدا کردن یک نام دامنه و هاست

برای ساخت یک وب سایت جدید آنلاین، شما نیاز به دو چیز دارید:

نام دامنه (یک آدرس وب مانند nexar.ir)

هاست وب (یک سرویس است که سایت شما را به اینترنت متصل می کند و مانند هارد اطلاعات سایت را روی آن می ریزید.)

پلت فرم وردپرس رایگان است، اما یک نام دامین و میزبان وب (هاست) برای شما هزینه در حدود ۲۰ الی ۵۰ هزار تومان در سال به همراه دارد، ولی باز هم هزینه آنها کمتر از خوردن یک پیتزا در شمال تهران است!

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

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

از هر جایی هاست می گیرید، هاست لینوکس باشد و دارای کنترل پنل CPanel.

چه نوعی دامینی باید انتخاب کنیم؟

معمولا همه از دامنه های بین المللی مانند .com و یا .net و یا .org استفاده می کنند که هر کدام معنای خاص خود را دارد. اما استفاده از دامنه های ملی نیز مانند .ir در ایران میتواند گزینه مناسب تری و کم هزینه تری باشد. برای خرید دامنه .ir باید در سایت ایرنیک شناسه داشته باشید.

اما برای انتخاب نام مناسب برای وبسایت شما دو راه پیشنهاد می دهم:

از نام شرکت یا نام خودتان در دامین استفاده کنید. مانند: www.nexar.ir

از موضوع فعالیت خود در دامنه تان استفده کنید مثل www.your-activity.ir

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

الیته یه نکنه مهم قابل اشاره این است که اگر نام فعالیت شما در نام دامنه شما باشد شانس شما برای بالاتر آمدن وبسایتتان در موتورهای جستجو زیادتر می رود. به مجموعه فرآیندهایی که به بهبود عملکرد وبسایت شما در موتورهای جستجو از قبیل گوگل کمک می کند SEO یا Search Engine Optimization می گویند. اگر دوست دارید وبسایت شما پر گوگل خوب بالا بیاید این مقاله Seo on Page را بخوانید.

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

#قدم سوم: نصب و ساخت وبسایت + تغییر قالب انتخابی

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

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

راهنمای نصب وردپرس

دو راه برای نصب وردپرس ممکن است، راه اول بسیار ساده تر از دیگری است.

۱. با یک کلیک وب سایت هایی مانند وردپرس (و جوملا و دروپال) را روی هاست خریداری شده نصب و راه اندازی کنید.

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

در اینجا مراحل ایست که شما می توانید برای نصب سریع وردپرس انجام دهید:

به CPanel هاستینگ خود وارد شوید. (با شناسه و رمزی که از شرکت هاستینگ گرفته اید. معمولا آدرس ورود به CPanel به این ترتیب است: www.yourname.com/cpanel)

به کنترل پنل بروید.

آیکون وردپرس را پیدا کنید.

روی نام دامین تان که نشان داده است کلیک کنید.

با کلیک بر روی “نصب” شما باید اطلاعات دسترسی به وب سایت جدید وردپرس خود را دریافت کنید.

۲٫ نصب دستی وردپرس

اگر به هر دلیلی (برخی از شرکت های میزبانی وب “نصب وردپرس تنها با یک کلیک ” را فراهم نکرده اند) شما این انتخاب را ندارید، برای نصب وردپرس به طور خودکار اقدام کنید، شما می توانید از راهنمای رسمی نصب وردپرس فارسی برای ساخت وبسایت خود کمک بگیرید.

نصب وردپرس به صورت دستی (کلیک کنید)

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

انتخاب یک قالب یا پوسته برای شروع ساخت سایت شما

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

مهارت های لازم برای طراحی وب سایت

1. خواندن نوشته ها و مقالات مرتبط با طراحی سایت

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

2. امکان درک و حل مشکلات طراحی سایت

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

3. طراحی گرافیک

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

4. گوش دادن

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

5. خود یادگیری

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

6. SEO (بهینه سازی موتورهای جستجو)

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

7. خلاقیت در طرح

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

8. تولید صفحه با استفاده از تولید HTML و CSS

صفحاتی که با استفاده از XHTML / HTML & CSS طراحی می شوند بسیار مناسبتر برای وب مدرن هستند. استفاده صرف از گرافیک برای سایت ها همانند یک کارت پستال یا یک تصویر ثابت بریده شده برای دنیای امروز وب  کارآمد نبوده و موتورهای جستجو همانند گوگل نیز آنها را دیگر نمی پسندند.

9. آگاهی از کسب و کار و بازار

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

10. مهارت در تایپ!

بله! بسیاری از طراح ها و درصد زیادی از سایت ها از متون تشکیل شده. خیلی بیشتر از گرافی!. همچنین کدنویسی HTML، CSS، PHP و غیره نیز همگی نیاز به تایپ کردند دارند. شما باید در تایپ کردن کد ها و متون مهارت داشته باشید.

به غیر از این مهارت ها یک فرد باید استعداد کافی در طراحی سایت را داشته باشد.

6 مهارت لازم برای حرفه ای شدن در طراحی وب

1 – با تمام مراحل طراحی آشنا شوید !

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

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

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

تعادل و تناسب : تعادل و تناسب به دو نسبت متقارن و نامتقارن تقسیم میشوند، این نسبت به طور معمول براساس عناصر مهم در صفحه است و همچنین باعث میشود جریان اطلاعات که در بالا به آن اشاره کردیم بهتر شود.

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

2 – HTML را مانند اسمتان حفظ باشید !

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

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

3 – خود را وقف یادگیری مادام العمر کنید !

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

4 – مهارت های کسب و کاری خود را بالا ببرید !

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

5 – شنونده ی خوبی باشید !

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

6 – به اوج طراحی وب برسید !

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