جلسه اول: معرفی دوره آموزشی وردپرس (شاخه کاری بازار در پادافن)
مدرس : محمدرضا بهداروند
چندین ساله من وردپرس کارمیکنم. طراحی سایت کار میکنم. دوست دارم تجربیات خودم رو به شما یاد بدم. سایتی رو که میبینید، سایت پادافن است که مخفف پارک دانش و فناوری هست. شما از بخش اموزشهای پادافن میتونید نمایش تمام اموزش ها رو بیبیند و این اموزش رو ببینید. یا میتونید پایین بیاین و برید اخرین اموزشهایی که داخل سایت قرار میگیره رو اینجا ببینید.
من میخواهم در مورد سایت برای شما صحبت کنم پس اول از همه شما بایستی، دید از سایت داشته بشید. اصلا سایت چی هست؟! چیکار انجام میده؟! چرا ما باید سایت داشته باشیم؟! شما برای اینکه محصول خودتون ا رائه بدید، حالا اون محصول ممکنه اموزش باشه و ممکنه یک چیزفیزیکی باشه. بخاطر اینکه بخواید اون رو رواج بدید و یا بخاطر اینکه بخواهید اون رو بفروشید یا اینکه بخواید علم خودتون رو رایگان در اختیار کسی قرار بدید یا بخواید رزومه خودتون رو داخل سایت شخصی خودتون قرار بدید بایستی صفحات این سایت رو طراحی کنید چطور این کار رو انجام بدید؟!
بشینیم و css ، html ، JavaScript ، php و … رو یاد بگیریم . یک سایت خیلی زیبا، تر و تمیز و خیلی خوشگل بیاریم بالا; اوکی میشه خیلی هم کار خوبیه یکی که زمان بزاره، وقت بزاره و بشینه کامل یاد بگیره. ولی من میخوام در مورد وردپرس با شما صحبت کنم. وردپرس خیلی از اینها رو اماده کرده واسه ماها که بتونیم خیلی راحت سایت خودمون رو راحت بالا بیاریم.
ساختار یک سایتو بهتون بدم . بالای سایت میشه header : همون هد خودمون سر . بالا . چیزی که بالای تمام صفحات قراره که بیاد .
آموزش بخش هدر سایت پادافن – جلسه اول آموزش جامع وردپرساگر از بالا یکمی فاصله بگیریم بیایم پایین تر ازهدر فاصله بگیریم بیایم پایین تر میشه بادی Body یا همون بدنه تا زمانی که برسیم به فوتر Footer یا همون پاورقی هم بهش میگن.
شما بایستی یک سایتی رو طراحی کنید که هم هدر داشته باشه هم بدنه داشته باشه هم فوتر. حالا ممکنه اینجا یک اموزشی رو قرار بدید ممکنه که این جا یک جستجویی رو قرار بدید. ممکنه اینجا هر کار دیگه ای رو انجام بدید این میشه اون چیزی که شما میخواین.
الان من اومدم بگراند گذاشتم. اومدم سه تا بخش اینجا گذاشتم اومدم یک دونه بخش مثلا اخرین اموزش ها رو گذاشتم اینجا. یا فرضا روی این کلیک کنه طرف وارد صفحه ی اموزش خط خودکاری میشه. به این شکل. ببنید اینجا اومدم فرضا این ویدیو روگذاشتم، اینجا اومدم تعداد درسها ، مدت دوره ، من تمام این ها رو میگم. همه اینها رو هرجایی که سوال داشته باشید ازم بپرسید.
مطمئن باشید به شما جواب میدم هر جایی که دوست داشته باشید داخلش بیشتر یاد بگیرید و داخل سایت موجود نیست به من بگید من اموزش اون رو تهیه میکنم و روی سایت برای شما قرار میدم. تا حالا متوجه شدید که اصلا این سایت چیه؟!
حالا بریم روی اپلیکیشن: دوستان همین رو تو وسعت کوچکتر میگیم اپلیکیشن روی موبایل باز بشه میگیم میگیمش اپلیکیشن وقتی که شما وردپرس رو بلد باشید یک سری نرم افزارهای رایگان هم هستند که من به شما قطعا معرفی خواهم کرد. با این نرم افزارها شما میاین سایت خودتون رو تبدیل به یک اپلیکیشن میکنید اصلا میدید دوستانتون نصب میکنند لینکشو رو میذارید زیر سایت که همه نصب کنند.
مبینید چقدر خوب شد. چقدر طراحی سایت راحت شد. حالا من میخوام به شما بگم که چطور همین سایت رو با کد بنویسید میخوام دید پیدا کنید. میخوام بهتون بگم که تمام این چیزهایی که اینجان، درسته که ما گرافیکی قرار بذاریمشون کنار هم و بکشیم مثلا بذاریم اینجا درصدشو مثلا نسبت به کل صفحه زیاد کنیم ولی در کل پشت تمام این حالتها. پشت تمام این حالتها ی گرافیکی کد ساخته میشه. Html و css زده میشه.
الان من میخوام برم داخل ویژوال استدیو کد (Visual Studio Code) یا وی اس کد میخوام ی چند خط کد بنویسیم. یک متنی رو بنویسم ببینم اصلا چطور باید بنویسیم چیکار باید انجام بدیم همین ظاهر رو که اینجا دارید میبینیم اصلا چه اتفاقی میافته که این بوجود میاد. خوب که بهتون بگم اون راحته ولی وردپرس برای شما خیلی راحته دوستان من یک فایل Html برای شما در اینجا اماده کردم.
اموزش اچ تی ام ال . سی اس اس . بوت اسرپ رو رایگان من روی سایت پادافن قرار دادم من میخوام یک خط اچ تی ام ال و سی اس اس بنویسم ببینم اصلا چی باید بنویسم؟! و باید چیکار کنم. ببنید من علامت رو میزنم تب رو میزنم این باز میشه الان اصلا اینجا رو کار نداشته باشید که چ اتفاقی میافته. اصلا به این کاری نداشته باشید، من میام تو بدنه همون جای که باهاتون صحبت کردم گفتم بدنه هستش من میخوام یک تکست بنویسم فرضا میام مینویسم پی p ( همان پاراگراف ) پی رو میبیندم اینجا پی بسته شد من میام اینجا مینویسم فرضا می نویسم من محمدرضا بهداروند هستم.
الان من میخوام این رو نمایش بدم چیکار باید انجام بدم کنترل اس رو میزنم کیلیک راست میکنم و Open with live server رو میزنم ببینید دوستان من محمدرضا بهداروند هستم اومد اینجا یعنی اینکه من الان تونستم بنویسمش حالا من میخوام این رو راست چین کنم یا وسط چین کنم میام میگم اینجا باید استایلش بدم پس از اینجا به بعد میشه سی اس اس این پی که نوشتیم شد اچ تی ام ال حالا شد سی اس اس پس که میخوام استایل بدم میشه :text- align: center بیارش وسط. یک کنترل اس میزنم کلیک راست میکنم Open رو میزنم، ببینید اومد وسط قرار گرفت.
حالا من وسط اوردمش حالا میخوام بولدش کنم مینویسم text- align: center : font –weight:bold و Open with live server رو میزنم. Open میزنم. ببینید بوالد شد.
حالا من میخوام اینو فونتش رو بزرگ کنم text- align: center : font-weight:bold; font-size: 30px کنترل اس میزنم Open with live server میام اینجا ببینید بزرگترشد.
حالا میخوام اینو رو بگراندش بزنمbackground-color: #fea000 این کد رنگ سایت پادافن هست. این رو من حفظ کردم. نیاز نیست شما هم کد رنگ رو حفظ کنید اصلا نیازی نیست من اینقدر زدمش اینو حفظش کردم .و کالر رنگ همین. همین که اینجا میبیند.
text- align: center ; font-weight:bold; font-size: 30:px; background – cohor:#fea000; color: #fff
دوستان میخوام اینو بهتون بگم که شما بامن همراه باشید هرسوالی داشتید خوشحال میشم ازمن بپرسید کامنت بزارید بپرسید ازمن. با کمال میل به تمامی سوالات شما جواب میدم میخوام یک اموزش بسیار جامع از اون چیزهایی که تو سالیان گذشته تجربه کردم در اختیار شما قرار بدم امیدوارم شما هم وقت بذاریید و از این اموزش لذت ببرید
موفق باشید.
