آموزش ۰ تا ۱۰۰ طراحی سایت با وردپرس
- آپدیت شده در تاریخ

ما در دنیایی زندگی میکنیم که رشد اینترنت و استفاده از گوشیهای هوشمند و آشنایی با فضای مجازی، از علاقهمندیها و نیازهای امروزه است؛ و این امر باعث رشد روزافزون سایتها و خدمات فروش آنلاین گردیده است. اگر میخواهید طراح سایت شوید باید حتماً طراحی سایت با وردپرس را یاد بگیرید.
شرکتهای موفقی در این زمینه وجود دارند که درآمد پرسودی از طریق یک سایت دارند. همچنین فروشگاههایی وجود دارند که در کنار کسبوکار سنتی خود از یک سایت معتبر برای فروش آنلاین نیز استفاده میکنند. حال برای داشتن این نوع از کسبوکار پرسود شما یا نیاز به داشتن علم این کار رادارید، و یا با پرداخت هزینه زیاد از طراحان سایت کمک بگیرید.
درگذشتهی نهچندان دور، میهن وردپرس دوره حضوری طراحی سایت داشت، که افراد مشتاق خاص خودش را میطلبید! با بزرگتر شدن میهن وردپرس، رفتهرفته بر تعداد درخواستهای آموزش طراحی سایت افزوده میشد. این شد که تصمیم گرفتیم دوره را بهصورت آنلاین برگزار کنیم؛ تا همهی افراد شانس یادگیری این مهارت پرسود و شیرین را داشته باشند.
بهاینترتیب این آموزش جامع در وبسایت میهن وردپرس قرار گرفت. از آن روز به بعد دوره حضوری که فقط مختص افرادی خاص بود (فقط افرادی که در شیراز حضور داشتند) تبدیل به دورهای شد که همه میتوانند در آن شرکت کنند؛ و بعد از یادگیری بهراحتی به کسب درآمد بپردازند.
با برگزاری دورههای آموزشی آنلاین شانس یادگیری این کسبوکار نوین و پردرآمد در اختیار عموم مردم قرار گرفت. دورهای که همه میتوانند در آن شرکت کنند و بعد از یادگیری بهراحتی به کسب درآمد بپردازند.
آموزش طراحی سایت با وردپرس
امروزه سایتهای زیادی هستند که به سبکی زیبا طراحی شده و درآمد بالایی دارند. مثلاً وبسایت دیجیکالا را میبینیم که از یک فروشگاه زنجیرهای هم فراگیرتر شد و سود و حتی مشتریان بیشتری هم دارد. حالا شاید شما بگویید رسیدن به دیجی کالا خیلی رؤیایی است. اما جالب است که بگویم فروشگاه کفشی را در قشم دیدم که میگفت ۹۰ درصد فروش روزانهاش از طریق فروش آنلاین بوده. خب برای دستیابی به این بستر پرسود لازم است که شما یا علم این کار را داشته باشید؛ یا هزینهای کنید تا طراحان سایت برای شما سایتی را طراحی کنند.
طراحی سایت، فقط طراحی ظاهری نیست!
بسیاری از طراحان سایت بر این باورند که طراحی سایت تنها در ساخت سایتهای جذاب و زیبا خلاصه میشود. اما در حقیقت طراحی سایت چیزی فراتر از طراحی ظاهر آن است. برای طراحی سایتی مطلوب، عوامل زیادی ازجمله ساختار سایت، کاربردپذیری، خوانایی، عملکرد و… تأثیرگذار هستند. امروزه تمام وبمستران و مدیران سایتهای حرفهای و بهروز به دنبال اجرای سایتهای باکیفیت و پاسخگو هستند.
طراحی و اجرای سایت برای کسبوکار، تنها به این معنی نیست که یک برنامهنویس و یا متخصص سایتی را برای ما طراحی کند. امروزه روشهای متفاوتی از طراحی سایت در بازار و سایتهای مربوطه وجود دارد، و تنها با آموزشهای کافی و حرفهای میتوانیم خودمان طراح سایت خود باشیم.
ازاینرو برخی از طراحان قالبهای حرفهای و سایتهای بهروز جهان تلاش میکنند تا روشهای آسانتر و کاربردیتری برای اجرای یک سایت ارائه دهند. مانند قالبهای حرفهای که اکثر سایتهای حرفهای دنیا از آنها استفاده میکنند. هنگامیکه کلمه طراحی وبسایت به گوش ما میخورد؛ اولین مسئلهای که به ذهن ما خطور میکند رنگبندی، جذابیت و طراحی زیبای صفحات سایت است. اما توجه کنید که این تمامکار نیست.
برخی از افراد طراحی سایت را بهعنوان یک اثر هنری میشناسند. باید توجه داشت که یک سایت، ارائه محصولات و خدمات بهصورت دیجیتالی است؛ که در آن قالب، کد نویسی و ساختار سایت امری اساسی و مهم به شمار میآید. بر همین اساس، طراحی وبسایت موضوعی فراتر از طراحی ظاهر آن است زیرا یک طراحی مناسب و ایده آل ساختار، کارایی و قابلیتهای یک وبسایت را رقم میزند.
چرا آموزش طراحی سایت با وردپرس
اما چرا تأکید کاری ما در بستر آمادهای مانند وردپرس است؟ خب جواب ساده است. شما برای خرید خودرو و رانندگی کردن، به سراغ این کار نمیروید که تکتک وسایل را مثل موتور، چرخ، دنده را بخرید و مونتاژ کنید و بعد تازه بخواهید رانندگی کنید. وردپرس هم به همین صورت عمل کرده است، به این طریق که شما را از دردسرهای اولیه ساخت سیستم مدیریت محتوا نجات داده؛ و فقط لازم است با یادگیری طراحی قالب HTML و CSS و علم کار با وردپرس با کمک ما در این جاده همواری که CMS فراهم کرده است، در این مسیر برانید و ویراژ دهید.
وردپرس بهگونهای عمل کرده که شما را از دردسرهای اولیه ساخت سیستم مدیریت محتوا نجات داده است. فقط با یادگیری طراحی قالب Html، CSS و علم کار با وردپرس در این جاده همواری که CMS فراهم کرده با یک خودرو از قبل آمادهشده برانید. درگذشته نهچندان دور میهن وردپرس با برگزاری دورههای حضوری طراحی سایت آغاز بهکار کرد؛ و افراد علاقهمند و خاص خودش را میطلبید.
قالب یا همان ساختار کلی یک سایت از عوامل بسیار مهم در طراحی سایت است. انتخاب زبانهای برنامهنویسی مختلف مانند PHP، CSS، HTML و نظیر اینها و قالبهای آماده هرکدام معایب و مزایای زیادی دارند؛ که بنا بر سلیقه و نظر طراح آن و هدفی که از طراحی سایت دنبال میکند میتواند متفاوت باشد. البته این موضوع در بهینهسازی سایت نیز بیتأثیر نخواهد بود.
چرا آموزش طراحی سایت با وردپرس به شما پیشنهاد میشود؟
امروزه برای هر کسبوکاری که ما داریم، بهشدت احساس نیاز میشود که یک وبسایت داشته باشیم. برای داشتن یک وبسایت، وردپرس یکی از بهترین گزینهها است. که با توجه به حجم مطالب آموزشی، یادگیری آن بسیار آسان است. البته برای متفاوت بودن سایتمان و همچنین زیباسازی آن باید از قالبهای وردپرسی استفاده کرد. گروهی از قالبهای وردپرسی، قالبهای اختصاصی هستند که بهترین گزینه برای طراحی سایتهای سفارشی هستند؛ یا برای زمانی که ما میخواهیم سایتی را از پایه طراحی کنیم مناسب میباشند. در این دوره ما به آموزش طراحی سایت از ۰ تا ۱۰۰ پرداختهایم.
هنگامیکه بخواهید یک سایت تأثیرگذار و کاربردی طراحی کنید؛ احتیاج دارید که زبانهای برنامهنویسی زیادی را آموزش ببینید. این زبانهای برنامهنویسی شامل HTML، CSS، JavaScript و… هستند؛ که ایجاد بهروزرسانی و یا تغییرات را امکانپذیر میکنند. به هنگام استفاده از قالبهای آماده، ایجاد تغییرات میتواند سخت یا غیرممکن باشد. به همین دلیل داشتن دانش کافی در خصوص مدیریت و ویرایش قالبهای باکیفیت اهمیت زیادی دارد.
بهاینترتیب میتوانید وبسایتتان را در مسیری طراحی کنید که بهراحتی و با سرعت پشتیبانی و مدیریت شود. ما در این دوره آموزشی امکان ویرایش کردن قالبها را به شما آموزش میدهیم؛ و بهراحتی میتوانید قالب خود را همانگونه که میخواهید تغییر دهید و یا ویرایش کنید.

کاربردپذیری در طراحی سایت به معنای استفاده آسان از سایت و راهنمای آن است، تا کاربران بتوانند با سایت تعامل برقرار کنند و بهراحتی بتوانند در صفحات سایت جستجو کنند. یکی از مهمترین عوامل در طراحی سایت بهینهسازی آن است. طراحان حرفهای با طراحی و پیادهسازی ساختار و نقشه مناسب برای سایت، سایت را برای کاربران بهینهسازی میکنند. یکی دیگر از عناصر مهم در طراحی وبسایت خوانایی سایت است. در طراحیها باید از رنگ و فونتهای مناسب در متن و پسزمینه استفاده شود تا متنها بهراحتی قابل مشاهده باشند.
پکیج طراحی قالب وردپرس
بهطورکلی مفاهیم موردنیاز برای طراحی وبسایت را توضیح میدهیم. مفاهیم اولیه HTML و CSS و همچنین توضیحاتی در رابطه با فتوشاپ و طراحی سایت قبل از کد نویسی را برای شما توضیح خواهیم داد. شما میتوانید قالب HTML خود را طراحی کنید. Hyper Text Markup Language به معنی زبان نشانهگذاری فوق متن است. زبان استاندارد طراحی صفحات وب CSS یا Cascade Style Sheets زبانی است که توسط آن قادر خواهید بود؛ تا استایل طراحی صفحات وبسایت خود را یک بار تعریف، و در صفحات موردنیازتان اعمال کنید. اضافه کردن فروشگاه به سایت هم یکی دیگر از سرفصلهای بحثبرانگیز این دوره است!

از طراحی سایت در فتوشاپ تا برنامه نویسی تحت وب
شما در این دوره آموزشی، یک پروژه را از ۰ تا ۱۰۰ یعنی از یک سند خالی در فتوشاپ تا یک قالب در وردپرس، طبق مراحل طراحی قالب اختصاصی (مراحلی که در بالا آورده شد) انجام میدهید؛ و در جریان تمام مراحل و حتی مشکلات احتمالی قرار میگیرید. و در آخر اضافه کنیم که اگر زمان و حوصلهی تمرین کردن را دارید و پیگیر این هستید که طراح وب شوید ما این آموزش را به شما پیشنهاد میکنیم.
چرا طراحی سایت را از فتوشاپ شروع میکنیم؟
فتوشاپ بهترین نرمافزار طراحی ۲ بعدی در دنیا است که توسط شرکت معروف Adobe ساختهشده؛ و قابلیتهای بارزتری نسبت به سایر نرمافزارهای طراحی دارد. که به چند مورد از آن اشاره میکنیم: امکان جداسازی Header و Footer، سایر اجزا را جدا از هم نگه میدارد و همچنین اگر مشتری بخواهد تغییری ایجاد کند فقط در همان قسمت اعمال میشود.
همچنین وجود ابزارهایی که به صرفهجویی در زمان کمک میکند. فرمتهای مختلف برای خروجی گرفتن مانند gif،png،jpg،SVG و دیگر فرمتها وجود دارد. در فتوشاپ میتوانیم طرح را کامل ببینیم و بعد از تأیید نهایی کارفرما شروع به برنامهنویسی میکنیم؛ که زمان کمتری نسبت به برنامهنویسی صرف میشود. همچنین فرصت مناسبی است برای اینکه از وضعیت طراحی خود قبل از برنامهنویسی باخبر میشویم. علاوه بر این امکان تغییرات قبل از شروع برنامهنویسی نیز وجود دارد.
ووکامرس چیست؟
افزونهای رایگان برای طراحی فروشگاه اینترنتی در وردپرس، که به دلیل پشتیبانی گسترده از افزونهها و ترکیب با وردپرس بسیاری از وبسایتها از آن برای اضافه کردن امکانات فروشگاهی استفاده میکنند.
امکانات پیشفرض ووکامرس تمامی نیازهای کلی برای ایجاد یک فروشگاه برای فروش فیزیکی یا فروش فایلها و محتواهای دیجیتالی را فراهم میکند. امکانات بسیاری نیز با استفاده از افزونههای رایگان و تجاری که برای این سیستم توسعه پیداکرده است، به آن افزوده میشوند.
طراحی فروشگاه اینترنتی با ووکامرس یکی مناسبترین گزینهها در بیشتر موارد به شمار میرود. به دلیل اینکه ووکامرس بر روی وردپرس پیادهسازی شده است؛ در اختیار داشتن امکانات ووکامرس و وردپرس در کنار هم، مزیتی غیرقابلچشمپوشی به شمار میرود. طراحی فروشگاه اینترنتی با ووکامرس بهینه، کارآمد، مقرونبهصرفه و پشتیبانیکننده از تجارت و کسبوکار آنلاین شما بهحساب میآید.
ووکامرس افزونههای بسیار زیادی برای سفارشی کردن و افزودن امکانات جدید به فروشگاه شما در اختیارتان قرار میدهد. افزونههایی برای مدیریت مشتریان، راهاندازی بازاریابی در فروشگاه، آمار فروشگاه و …
چرا طراحی سایت با برنامه نویسی؟
برنامهنویسی وبسایت در طراحی وبسایت، مجموعه کدها و اسکریپتها و ماژولها و ابزاری که در طراحی وبسایت از آن توسط طراح سایت استفاده میشود است. این کدها میتوانند کدهای آماده باشند یا توسط خود طراح نوشته شود. این کدها باید در قالبی خاص که قرارگیری این قالب نیز دارای کدهای خاص است نوشته شوند؛ تا ظاهر سایت ما آراسته و شکیل باشد.
با استفاده از برنامهنویسی میتوانیم به طرح دلخواه خود و یا سفارشدهنده برسیم. تهیه یک طرح کلی از وبسایت و تطبیق آن با اصول علمی هدایت کاربر (UX)، طراحی قسمت گرافیکی سایت (UI) توسط طراح، تبدیل صفحات طراحیشده به HTML,CSS و تبدیل به قالب وردپرس مطابق نیاز مشتری را میتوان از مراحل کلی طراحی سایت با برنامهنویسی عنوان کرد.
این دوره برای چه افرادی مناسب نیست؟
- کسانی که به کسب درآمد از اینترنت اعتقادی ندارند.
- کسانی که دوست دارند هزینههای گزافی بابت طراحی قالبشان یا ایجاد یک سفارشیسازی جزئی در قالبشان، پرداخت کنند.
- کسانی که فکر میکنند نمیتوانند خود طراح سایت حرفهای شوند و سایت خودشان را طراحی کنند.
- آن دسته از افرادی که خود را در امر یادگیری باور ندارند.
این دوره برای چه افرادی مناسب است؟
- افرادی که دوست دارند از طریق طراحی سایت کسب درآمد کنند.
- کسانی که به کسب درآمد از اینترنت اعتقادی دارند و میخواهند سایت خودشان را حرفهای بسازند.
- کسانی که میخواهند ایدههای کسب و کار خود را ارزیابی کنند.
- کسانی که ایدههای لازم برای کسبوکار اینترنتی خود را اجرا میکنند.
- آن دسته از افرادی که به دنبال اجرای کسب و کارهای خود هستند.
- افرادی که برای یادگیری خود ارزش قائلند.
طرح طراحی شده در این دوره
تصمیم گیری در مورد شرکت در پکیج طراحی سایت با وردپرس
اگر میخواهید یک طراح سایت موفق درزمینهٔ توسعه تجارت الکترونیک خود از طریق اینترنت باشید، باید وبسایتی جذاب، تعامل برانگیز، کاربرپسند و همچنین دارای خدمات کاربردی داشته باشید.
داشتن یک سایت حرفهای و کاربرپسند کار مشکلی نیست. شما حتی با کمترین هزینه میتوانید یک سایت حرفهای داشته باشید و کسبوکار خود را بهصورت حرفه گسترش دهید. کافی است در این دوره آموزشی بسیار مفید شرکت کنید و در کمترین زمان ممکن سایت کاملاً اختصاصی و حرفهای برای خود و مشتریان خود را راهاندازی کنید.
شروع دوره جدید آموزش طراحی قالب وردپرس
بعد از دو سال، تصمیم گرفتیم دوره ۰ تا ۱۰۰ طراحی سایت را با توجه به دانش روز طراحی سایت، مجدداً ضبط کنیم. جلسات آموزشی دوره جدید صفر تا صد بهصورت رایگان در پنل دانشجویان قبلی دوره طراحی سایت و وبمستران طلایی قرار گرفت.
سرفصلهای این دوره آموزشی
جلسه ۱ – مقدمات طراحی سایت با وردپرس
- توضیحاتی در رابطه با دوره
- کارهایی که در این دوره انجام خواهیم داد.
جلسه ۲ – روش های کسب در آمد از طریق طراحی سایت
- روش های کسب در آمد از طریق طراحی سایت
- آزادکاری یا فریلسنری از طریق سایت های انجام پروژه
- نحوه طراحی سایت برای افراد و شرکت ها
- نحوه قیمت گذاری پروژه های طراحی سایت
- نحوه عقد قرارداد طراحی سایت با مشتری و مواردی که باید رعایت کنید
- کسب در آمد از طریق پشتیبانی وبسایت مشتریان
- ساخت محصول و فروش آن در مارکت های آنلاین و شرایط کار با تم فارست
- کسب در آمد از طریق آموزش به دیگران
جلسه ۳ – آموزش مقدماتی کار با فتوشاپ برای طراحی سایت
- چیدمان و طرح بندی استاندارد یک صفحه ی وب در فتوشاپ
- مفهوم سند و ایجاد یک سند برای طرح گرافیکی یک صفحه وب
- آشنایی با ابزارهای فتوشاپ برای طراحی یک صفحه وب
- معرفی واحدهای اندازه گیری و انتخاب اندازه مناسب برای یک سند گرافیکی صفحه وب
- کار با بخشهای مختلف Blending Options
- ایجاد یک بنر تبلیغاتی برای شروع کار با فتوشاپ بصورت عملی
جلسه ۴ – شروع طراحی سایت در فتوشاپ (بخش اول)
- روانشناسی رنگ و انتخاب صحیح ست رنگی در طراحی قالب
- طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
- مفاهیم ruler و guideline؛ تنظیم و استفاده از آن ها
- ایجاد طرح گرافیکی صفحه ی وب در فتوشاپ ( فایل psd طرح وب سایت)
- ایجاد بخش هدر سایت در فایل psd
- اضافه کردن استایل به بخش های ایجاد شده
- توضیح میزان شفافیت و شفافیت داخلی یک صفحه ی وب
- معرفی انواع border و inner shadow متن و تصویر
- ساخت گرادینتها در طراحی وب به سبک جدید
- استایل دادن به بخش های مختلف سند گرافیکی یک صفحه ی وب در فتوشاپ
- توضیح مفاهیم UX و UI برای طراحی صفحات وب
- ساخت منوی وبسایت در فتوشاپ
- طراحی بخش سبدخرید سایت در هدر
- طراحی لوگو ساده و شیک برای مشتری در فتوشاپ
- طراحی مگامنو و هدر کامل وبسایت در فتوشاپ
جلسه ۵ – طراحی سایت در فتوشاپ (بخش دوم)
- طراحی بخش محتوای وبسایت در فتوشاپ
- طراحی نمایش لیست محصولات وبسایت در فتوشاپ
- طراحی صفحه اصلی وبسایت در فتوشاپ بصورت کام
- معرفی ابزار lorem ipsum برای ایجاد متن تصادفی مورد نیاز برای یک صفحه وب
جلسه ۶ – طراحی سایت در فتوشاپ (بخش سوم)
- طراحی فوتر وبسایت در فتوشاپ
- تکمیل طرح اصلی وبسایت و افزودن مواردی برای زیباسازی بیشتر سایت
جلسه ۷ – طراحی سایت در فتوشاپ (بخش چهارم)
- طراحی صفحه مقالات در فتوشاپ بصورت کامل
- طراحی صفحه تماس با ما و درباره ما و … در فتوشاپ
- طراحی صفحه ۴۰۴ یافت نشد در فتوشاپ
جلسه ۸ – طراحی سایت در فتوشاپ (بخش پنجم)
- طراحی صفحه محصولات در فتوشاپ بصورت کامل
- طراحی صفحه آرشیو محصولات در فتوشاپ بصورت کامل
- اتمام طراحی سایت در فتوشاپ
- دریافت خروجی برای ارائه به مشتری
جلسه ۹ – شروع یادگیری HTML و معرفی تگهای آن
- توضیح در مورد فایل های HTML و CSS
- تفاوت فایل های HTML و CSS
- چگونگی ایجاد فایل ها ی HTML و CSS
- طرز نمایش، استایل بندی، چیدمان و رنگ بندی صفحه ی وب با CSS
- توضیح چگونگی نمایش یک صفحه ی وب برای user ها
- توضیح ساختار فایل HTML شامل تگ های header و body
- معرفی تگ های مختلف HTML
جلسه ۱۰ – شروع یادگیری CSS و معرفی تگهای آن
- توضیح ساختار CSS به طور کامل
- چگونگی ایجاد کلاس و آی دی در فایل CSS و فراخوانی آنها
- تفاوت آی دی و کلاس در یک فایل CSS
- آموزش CSS بصورت کامل و آشنایی با خصوصیتهای سی اس اس
جلسه ۱۱ – شروع کار با HTML و CSS بصورت عملی
- معرفی نرم افزار های مختلف برنامه نویسی
- ایجاد یک فایل HTML ساده
- توضیح ساختار کلی فایل HTML و تگ های HTML
- معرفی Selectorها در CSS و انواع آنها
- دلیل ایجاد فایل های header، footer،content ،slider و … به صورت جداگانه برای ایجاد صفحات وب
- توضیح مفهوم minify و مزیت استفاده از کدهای minify شده ی html و css
- توضیح مسیردهی فایل ها در CSS
- توضیح چگونگی اضافه کردن فایل CSS به فایل HTML
- کامنت گذاری در HTML
- کامنت گذاری در CSS
جلسه ۱۲ – ساخت هدر وبسایت با زبان HTML و CSS
- تبدیل طرح گرافیکی به کد
- ایجاد یک سند Html برای یک صفحه ی وب بصورت عملی
- معرفی Css و استفاده از آن برای ایجاد افکت های گرافیکی و ایجاد سند Css بصورت عملی
- لینک کردن صفحه های Html و Css بصورت عملی
- کدنویسی قالب طراحی شده در فتوشاپ
- استفاده از کدهای css reset بصورت عملی
- شروع کدنویسی بخش های مختلف صفحه ی وب
- کدنویسی هدر سایت بصورت کامل
- معرفی کاربرد عملی خاصیت z-index در طراحی وب
- اضافه کردن فونت به یک فایل Html
- اضافه کردن تصویر پس زمینه ی سایت
- کدنویسی بخش header شامل کدنویسی لوگو
- کدنویسی منوی اصلی سایت
- مفهوم hover و استفاده از آن برای ایجاد منوها
- طراحی منو و زیرمنو با Css
- آشنایی با پسوند SVG و استفاده از آن در وبسایت
- مشخص کردن نوع و اندازه فونت سایت با استفاده از Css
جلسه ۱۳ – ساخت مگامنو و محصولات صفحه اصلی با HTML
- ساخت مگامنو حرفهای در HTML
- افکت دادن به مگامنو با استفاده از CSS
- استفاده از تگ img بصورت عملی
- استایل دهی به سلکتور مختلف last-child و first child
- شروع ساخت صفحه اصلی وبسایت
- استفاده از کلاس clear در style.css
- Hover دادن به بخش های مختلف صفحه ی وب
- استایل دهی به هدینگها
- توضیح کاملتر خاصیت float بصورت عملی
- استایل دادن به بخش های مختلف با استفاده از دستور nth-child
جلسه ۱۴ – ساخت ستون کناری وبسایت با HTML و CSS
- ساخت ستون کناری وبسایت در HTML
- قرار دادن تصویر تبلیغاتی در ستون کناری وبسایت
- برنامهنویسی سایدبار وبسایت
- اضافه کردن hover به باکس های سایدبار
- ساخت آخرین مطالب با HTML در سایدبار
- ساخت فرم خبرنامه در HTML
- ساخت اسلایدر موبایل در HTML
جلسه ۱۵ – ساخت اسلایدر در HTML و CSS
- ساخت اسلایدر موبایلی در صفحه اصلی سایت
- آموزش کار با Owl Slider
- اضافه کردن جاوا اسکریپت به سایت طراحی شده
- استفاده از اسلایدر اسکرولی در وبسایت
جلسه ۱۶ – ساخت فوتر وبسایت با HTML و CSS
- ساخت فوتر وبسایت در HTML
- آموزش عملی کار با گرادینتها در CSS
- ساخت پس زمینه فوتر وبسایت با CSS
- قرار دادن اینماد و لوگو ساماندهی در فوتر وبسایت
- اتمام HTML صفحه اصلی و کپی گرفتن برای استفاده در دیگر صفحات وبسایت
جلسه ۱۷ – ساخت صفحات داخلی و صفحه 404
- کپی گرفتن از فایلها برای ساخت صفحه جدید HTML
- ساخت فایل صفحات درباره ما، تماس با ما و … در HTML
- ساخت صفحه ۴۰۴ یافت نشد با HTML
- آموزش سازگار کردن سایت با مرورگرهای مختلف
جلسه ۱۸ – ساخت مابقی صفحات وبسایت
- ساخت صفحات دیگر در html
- اتمام نشانه گذاری html و تکمیل قالب در html
- توضیح ساختار کلی قالب وردپرس
- آموزش ساخت فایلهای مختلف در قالب وردپرس
جلسه ۱۹ – شروع ساخت قالب وردپرس و تبدیل HTML به وردپرس
- ساخت یک قالب ساده خام برای وردپرس
- توضیح ساختار قالب وردپرس بصورت عملی
- شروع تبدیل قالب HTML به وردپرس
- داینامیک کردن Title صفحات
- آدرس دهی بصورت داینامیک برای فایلهای JS و CSS
- Include کردن هدر و فوتر در صفحات سایت
- آموزش ساخت فهرست متغیر در وردپرس
- سازگار کردن قالب وردپرس با افزونههای مختلف
جلسه ۲۰ – ساخت مگامنو و ستون کناری در قالب وردپرس
- ساخت مگامنو عریض بدون استفاده از افزونه
- آموزش ساخت سایدبار قابل ویرایش از بخش ابزارکها
- ساخت ابزارک اختصاصی برای قالب وردپرس
- آموزش افزودن قابلیت تصویر شاخص به وردپرس
- افزودن سایزهای مختلف تصویر شاخص در وردپرس
- مدیریت سایدبار وبسایت با ابزارکها
- مدیریت تبلیغات وبسایت با استفاده از ابزارکها
- نمایش آخرین مقالات وبسایت در ستون کناری
جلسه ۲۱ – ساخت فوتر وبسایت و صفحه ۴۰۴ و صفحات آرشیو
- انتقال کدهای بخش سایدبار به فایل مجزا
- ساخت پست تایپ سفارشی در وردپرس
- نمایش پست تایپ سفارشی در بخش اسلایدر
- ساخت فوتر وبسایت در وردپرس
- ساخت محل ابزارک برای فوتر
- مدیریت فوتر از پنل وردپرس
- برنامه نویسی صفحه ۴۰۴ در قالب وردپرس
- ساخت سایز تصویر شاخص برای بخش آرشیو
- برنامه نویسی صفحه آرشیو در قالب وردپرس
- نمایش شماره صفحات در بخش آرشیو بدون نصب افزونه
- استایل دهی CSS به بخش شماره صفحات
جلسه ۲۲ – ساخت صفحه برگه ها و نوشته های وردپرس
- نمایش برگهها در وردپرس
- نمایش نوشته تکی در وردپرس
- نمایش برچسبها در قالب وردپرس
- نمایش نام نویسنده در قالب وردپرس
- نمایش دسته بندی های نوشته در قالب وردپرس
- نمایش محتوای پست در قالب وردپرس
- نمایش نظرات در قالب وردپرس
- ویرایش سی اس اس برای سفارشی سازی نظرات سایت
- سفارشی کردن برنامه نویسی comments.php
جلسه ۲۳ – شروع ساخت بخش فروشگاهی وبسایت و ساخت صفحه معرفی محصول در ووکامرس
- روش سازگار کردن قالب ساخته شده با ووکامرس
- استفاده از تصاویر شاخص در صفحه محصول
- ویرایش بخش های مختلف ووکامرس در قالب طراحی شده
- سفارشی کردن صفحه نمایش محصول در ووکامرس
- افزودن بخش مقایسه محصول در قالب طراحی شده
- ساخت بخش افزودن به لیست خرید آینده
- سفارشی سازی دکمه افزودن به سبد خرید
جلسه ۲۴ – ساخت صفحه محصول در ووکامرس (بخش دوم)
- ادامه ساخت صفحات محصول در ووکامرس
- ساخت بخش معرفی کامل محصول
- نمایش مشخصات فنی محصول در صفحه محصول
- سفارشی سازی بخش های مختلف صفحه محصول ووکامرس
جلسه ۲۵ – ساخت صفحه آرشیو محصولات و صفحه سبد خرید و صفحه حساب کاربری ووکامرس
- ساخت صفحه آرشیو محصولات
- سفارشی کردن صفحه دسته بندی محصولات ووکامرس
- سفارشی کردن صفحه سبد خرید ووکامرس
- سفارشی سازی پیامهای نمایش داده شده در صفحه تسویه حساب ووکامرس
- سفارشی سازی صفحه حساب کاربری ووکامرس
جلسه ۲۶ – نمایش محصولات ووکامرس در صفحه اصلی سایت
- استفاده از WP_Query برای نمایش پست تایپها
- نمایش محصولات ووکامرس در صفحه اصلی سایت
- افزودن دکمه افزودن به سبد خرید به صفحه اصلی
- نمایش عنوان محصولات در صفحه اصلی سایت
جلسه ۲۷ – ساخت پنل تنظیمات برای قالب وردپرس
- بهترین روش برای ساخت پنل تنظیمات قالب وردپرس
- چرا از روشهای قدیمی استفاده نمیکنیم؟
- افزودن فیلد متنی به پنل تنظیمات قالب وردپرس
- افزودن فیلد انتخاب رنگ به پنل تنظیمات قالب وردپرس
- افزودن فیلد آپلود تصویر به پنل تنظیمات قالب وردپرس
- مدیریت بخشهای سایت قالب با پنل تنظیمات قالب وردپرس
- تغییر لوگوی سایت از پنل تنظیمات قالب وردپرس
- مدیریت تبلیغات سایت از پنل تنظیمات قالب وردپرس
- انتخاب دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب
جلسه ۲۸ – انتخاب رنگ و استایل قالب از پنل تنظیمات قالب
- کوتاه کردن عنوان محصولات صفحه اصلی برای جلوه بهتر
- انتخاب عنوان دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب
- ساخت رنگبندی و انتخاب رنگ سایت از طریق پنل تنظیمات قالب
- افزودن رنگبندی سبز، قرمز و آبی به پنل تنظیمات قالب
جلسه ۲۹ – ریسپانسیو کردن قالب طراحی شده
- آموزش کامل ریسپانسیو کردن بخشهای مختلف سایت
- کار با شرط @media and screen در سی اس اس
- جلوگیری از اسکرول افقی در حالت موبایل
جلسه ۳۰ – ساخت منوی ریسپانسیو برای موبایل
- ساخت منوی همبرگری در موبایل
- اتصال منوی همبرگری به فهرست وردپرس
- ساخت منو ریسپانسیو بدون نیاز به نصب افزونه (بصورت اختصاصی)
- ساخت منو ریسپانسیو با استفاده از افزونه
- استفاده از جاوا اسکریپت برای ساخت منو موبایلی
جلسه ۳۱ – حل مشکلات قالب طراحی شده
- آموزش حل مشکل عنوان در تگ Title
- آموزش اسلایدی کردن تصاویر محصولات ووکامرس
- آموزش افزودن LightBox به تصاویر محصولات ووکامرس
- آموزش حل حذف شدن استایل hover منوی اصلی موقع hover کردن روی submenu
جلسه ۳۲ – اضافه کردن قابلیت به قالب
- لینک کردن دسته بندی های موجود در صفحه اصلی
- اضافه کردن Preloader به کل صفحات سایت
جلسه ۳۳ – اضافه کردن قابلیت به قالب
- ساخت فرم جستجوی سفارشی
- نمایش عناصر سایت در ساعات خاص
جلسه ۳۴ – مگامنوی ریسپانسیو
- آموزش ریسپانسیو کردن مگامنو
- ساخت منوهای باز شونده در حالت موبایلی
جلسه ۳۵ – افزودن تنظیمات به ابزارک اختصاصی ساخته شده
- افزودن تنظیمات تغییر عنوان به ابزارک
- افزودن تغییر تعداد نمایش پست به ابزارک
جلسه ۳۶ – پس زمینه سفارشی برای مگامنو
- قرار دادن تصویر پس زمینه سفارشی برای هر مگامنو بصورت مجزا
- روشهای دیگر سفارشی کردن مگامنوها
جلسه ۳۷ – ساخت مینی سبد خرید
- نمایش تعداد محصولات سبد خرید در هدر سایت
- نمایش سبد خرید سریع در هدر سایت
جلسه ۳۸ – نمایش مسیر کاربر و فرم ورود اختصاصی
- نمایش مسیر کاربر در سایت
- ساخت فرم ورود اختصاصی برای ورود کاربر در قالب
جلسه ۳۹ – شرطی کردن دستهبندیها و استفاده از فیلدهای دلخواه
- استفاده از if_category
- استفاده از is_category
- استفاده از فیلدهای سفارشی وردپرس
- شرطی کردن فیلدهای سفارشی وردپرس
مدرس این دوره آموزشی
رضا حسینی راد
- مدیر و موسس وبسایت میهن وردپرس با رتبه ۳۵۰ ایران
- دارای گواهینامه SEO Expert از SEO MOZ
- دارای گواهینامه بین المللی PHP , HTML & CSS و JavaScript از W3Schools
- نویسنده کتاب شاه کلید سئو
- مشاور و مدرس کسبوکار اینترنتی
تفاوت این دوره با سایر دورههای آموزشی
- در این دوره آموزشی، یک قالب وردپرس را بصورت کاملا عملی طراحی و پیاده خواهیم کرد.
- طراحی UI سایت را از صفر توسط فتوشاپ انجام خواهیم داد.
- سایت را برای موبایل و تبلت نیز طراحی خواهیم کرد.
- برنامه نویسی و نشانه گذاری را بصورت کاملا اصولی یاد خواهید گرفت.
سوالات متداول
تا بحال برنامهنویسی نکردهام! این دوره برای من مناسب است؟
جالب است بدانید اکثر افرادی که در این دوره شرکت کردهاند، حتی راهاندازی اولیه و کار با سایت را هم به خوبی بلد نبودهاند؛ و در انتهای دوره توانستند طراحی و راهاندازی سایت را بهصورت کامل یاد بگیرند. که این کار را میتوانستند هم برای خودشان و هم برای مشتریانشان انجام دهند. پس با اطمینان به شما میگوییم که شرکت در این دوره و انجام تمرینهای آن حتماً به شما کمک میکند؛ تا به یک طراح حرفهای تبدیل شوید و درامد شیرینی را هم از این مهارت کسب کنید.
تنها کافی است اصول و عملکردهای ایجاد یک سایت را بدانید تا بتوانید خودتان طراح سایت شوید. با شرکت در این دوره دیگر نیاز ندارید سایت خود را به یک طراح حرفهای بسپارید تا طراحی کند. بلکه خودتان میتوانید یک سایت حرفهای با تمام امکاناتی که یک سایت حرفهای میتواند داشته باشد را طراحی کنید.
چرا طراحی سایت را با برنامهنویسی انجام دهیم؟
برنامهنویسی وبسایت در طراحی وبسایت، مجموعه کدها و اسکریپتها و ماژولها و ابزاری که در طراحی وبسایت از آن توسط طراح سایت استفاده میشود است. این کدها میتوانند کدهای آماده باشند یا توسط خود طراح نوشته شود. این کدها باید در قالبی خاص که قرارگیری این قالب نیز دارای کدهای خاص است نوشته شوند؛ تا ظاهر سایت ما آراسته و شکیل باشد.
با استفاده از برنامهنویسی میتوانیم به طرح دلخواه خود و یا سفارشدهنده برسیم. تهیه یک طرح کلی از وبسایت و تطبیق آن با اصول علمی هدایت کاربر (UX)، طراحی قسمت گرافیکی سایت (UI) توسط طراح، تبدیل صفحات طراحیشده به HTML,CSS و تبدیل به قالب وردپرس مطابق نیاز مشتری را میتوان از مراحل کلی طراحی سایت با برنامهنویسی عنوان کرد.
آیا با استفاده از این آموزش می توانم سایتم را هر طور که دوست دارم طراحی کنم؟
بله. شما با دیدن این آموزش هر سایتی که دوست داشته باشید و به هر شکلی که مدنظرتان باشد، میتوانید طراحی کنید. اکثر ما زمانی که به اجرا و طراحی سایت فکر میکنیم اولین چیزی که ذهنمان را درگیر میکند شکل ظاهری، رنگبندی و دیگر موارد آن است. اما اینها کافی نیست. بلکه ارائه خدمات و یا حتی محصولات، امنیت، بهینهسازی و… یکی از مهمترین مواردی است که در طراحی سایت باید به آن توجه داشت. ما در این دوره تمامی این موارد را به شما آموزش میدهیم. پس مطمئن باشید با شرکت در این دوره میتوانید یکی از طراحان حرفهای سایت شوید.
من میخواهم قالب آماده خودم را ویرایش کنم و تغییرات اساسی در آن ایجاد کنم. این آموزش به من کمک میکند؟
بله. بعد از دیدن این دوره و یادگیری HTML و CSS میتوانید ظاهر قالب آمادهتان را منحصربهفرد کنید! طوری که دیگر مشخص نشود قالبتان آماده است. CSS برای تعیین استایل صفحات وب ازجمله طراحی، طرحبندی، تغییر رنگبندیها، تغییرات در صفحهنمایش برای دستگاههای مختلف و اندازه صفحهنمایش استفاده میشود.
در قالبهای وردپرس هم امکان این را دارید که شکل ظاهری سایت خود را با استفاده از CSS تغییر دهید. ممکن است شما بخواهید قالب سایت خود را تغییر دهید. بهعنوانمثال جهت تغییر رنگ یک قسمت خاص، اندازه فونتها و حتی راستچین یا چپچین بودن مطالب، که تمامی این موارد را بهراحتی با شرکت در این دوره آموزش میبینید.
تعدادی از افراد بعدازاینکه هاست و دامنه موردنظر خود را تهیه کردند، اقدام به نصب و استفاده از پوستهها و قالبهای آماده میکنند؛ و سعی دارند که سایت خودشان را بدون پرداخت هزینه طراحی، بارگذاری و اجرا کنند. این افراد درصورتیکه به تمام نکات اجرا و طراحی سایت مسلط باشند؛ موفق خواهند بود و سایت خود را بدون هیچ مشکلی راهاندازی میکنند.
اما آن دسته از افراد که به طراحی و اجرای یک سایت حرفهای مسلط نیستند و آموزشهای موردنیاز را ندیدهاند؛ باید توجه داشته باشند که برخی از این قالبها در مدتزمان کوتاهی طراحیشدهاند، حجم بالایی دارند و معمولاً دارای مشکلات کد نویسی، امنیتی و هزاران مشکل دیگر که از آن اطلاعی ندارند هستند؛ که برای وبسایت شما بسیار مضر بهحساب میآید. برای رفع تمام این مشکلات کافی است که قبل از آنکه اقدام به اجرای یک سایت حرفهای داشته باشیم؛ از آموزشهایی که میتواند ما را در ساخت یک سایت حرفهای راهنمایی و کمک کند استفاده کنیم.
میخواهم سایتم در موبایل و تبلت به خوبی نمایش داده شود. آیا این آموزش به من کمک میکند؟
بله، شما با دیدن این دوره آموزشی میتوانید با یادگیری اصولهای ریسپانسیو بودن یک سایت، و اینکه چطور بفهمید سایت شما ریسپانسیو است یا نه این کار را انجام دهید. امروزه افراد زیادی از تلفن همراهشان برای جستجوهای آنلاین استفاده میکنند. برخی قالبهای آماده در موبایلها و تبلت ها بهدرستی نمایش داده نمیشوند؛ و استفاده از وبسایت برای کاربران موبایل بسیار دشوار خواهد بود.
این امر باعث پایین آمدن کیفیت سایت شما میشود. پس قبل از انتخاب قالب باید بدانید که با موبایل و تبلت میتواند سازگار باشد یا خیر. همچنین در الگوریتمهای گوگل سایتهایی که موبایل پسند طراحی میشوند از رتبه بهتری در صفحات گوگل برخوردار خواهند بود. با این تفاسیر میتوان نتیجه گرفت رعایت بهینهسازی و طراحی سایت سازگار با تلفنهای همراه ضروری است.
آیا طراحی سایت میتواند تأثیری بر روی سئو داشته باشد؟
بله، با اندکی آشنایی با تکنیکها و اصول سئو و بهینهسازی سایت، میتوان تا حدی رتبه سایت در موتورهای جستجو و بهینهسازی سایت را افزایش داد؛ اما این تمام کار نیست. تعداد بسیار زیادی از افراد بر این باور هستند که سئو، قرار دادن تعداد زیادی کلمات کلیدی در مکانهای مخصوصی در سایت موردنظر است. اما برخلاف تصور این افراد سئو مسائل زیادی را شامل میشود؛ ازجمله کد نویسی سایت و بسیاری از مسائل دیگر که در طراحی سایت آنها را نباید نادیده گرفت. قرار دادن کلمات کلیدی در سایت تنها بخش کوچکی از پازلی است که میبایست برای بهینهسازی سایت تکمیل شود.
نحوه پشتیبانی این دوره
نظرات دانشجویان این دوره
لیست بروزرسانیها
آپدیت شماره ۱۰ در تاریخ ۱۲ آذر ۱۳۹۸
- تابع if_category
- تابع is_category
- استفاده از فیلدهای سفارشی وردپرس
- شرطی کردن فیلدهای سفارشی وردپرس
آپدیت شماره ۹ در تاریخ ۱۷ مرداد ۱۳۹۸
- افزودن تنظیمات به ابزارک اختصاصی ساخته شده به دوره اضافه شد.
- آموزش پس زمینه سفارشی برای مگامنو به دوره اضافه شد.
- آموزش ساخت مینی سبد خرید به دوره اضافه شد.
- آموزش نمایش مسیر کاربر و فرم ورود اختصاصی به دوره اضافه شد.
آپدیت شماره ۸ در تاریخ 2 مرداد 1398
- آموزش ریسپانسیو کردن مگامنو و ساخت منوهای باز شونده در حالت موبایلی اضافه شد.
آپدیت شماره ۷ در تاریخ ۲۷ خرداد ۱۳۹۸
- آموزش اضافه کردن لینک به دسته بندیهای صفحه اصلی
- اضافه کردن لودینگ قبل از بارگذاری سایت (Preloader)
آپدیت شماره ۶ در تاریخ ۲۲ اسفند ۱۳۹۷
- آموزش حل مشکل عنوان در تگ Title
- آموزش اسلایدی کردن تصاویر محصولات ووکامرس
- آموزش افزودن LightBox به تصاویر محصولات ووکامرس
- آموزش حل حذف شدن استایل hover منوی اصلی موقع hover کردن روی submenu
آپدیت شماره ۵ در تاریخ ۲۷ آذر ۱۳۹۷
- تمامی جلسات دوره از ابتدا ضبط شد. در دوره جدید قالب جدید فروشگاهی شرکتی همراه با پنل مدیریت کامل طراحی کردیم.
آپدیت شماره ۴ در تاریخ ۲۹ خرداد ۱۳۹۷
- آموزش کار با فونت آیکون ها اضافه شد.
- آموزش افزودن Preloader پیش بارگذار صفحات اضافه شد.
- آموزش ویرایش و طراحی دکمه افزودن به سبد خرید در ووکامرس اضافه شد.
- آموزش اضافه کردن تصویر پیش بارگذار زیر تصاویر در حال لود اضافه شد.
آپدیت شماره ۳ در تاریخ ۱۹ دی ۱۳۹۶
- آموزش کار با keyframe ها و ساخت جلوه های انیمیشن در صفحات وب به دوره اضافه شد.
- آموزش ساخت پس زمینه دکمه بصورت اسلاید در زمان قرار گرفتن موس روی دکمه اضافه شد.
آپدیت شماره ۲ در تاریخ ۱۵ آبان ۱۳۹۶
- راهکار های کسب در آمد از طریق طراحی سایت با وردپرس و نحوه عقد قرار داد با مشتری به آموزش اضافه شد.
آپدیت شماره ۱ در تاریخ ۳ آبان ۱۳۹۶
- آموزش نوشتن سی اس اس مستقیم به دوره اضافه شد.
- آموزش نمایش شماره صفحات در مطالب اضافه شد.
- آموزش نمایش نام نویسنده و تگ ها به آموزش اضافه شد.
- نحوه ساخت وب گرادینت ها به آموزش اضافه شد.
- نحوه نمایش آخرین مطالب سایت در صفحه اصلی به دوره اضافه شد.

دم شما گرم
بی زحمت لینک های اموزش قدیم رو برام ارسال کنید ممنون میشم
میخوام اول اموزش قبل رو یاد بگیرم کامل بعد جدید رو
هردوتا رو میخوام داشته باشم و استفاده کنم
ممنونم
خواهش میکنیم کاربر گرامی. بله حتما. لطفا یک ایمیل به info@mihanwp.com ارسال بفرمایید.
سلام وقت بخیر
خسته نباشید بابت آموزش عالیتون
قالب واقعا عالی در آموزش طراحی کردید و من قصد خرید آموزش رو دارم ولی قبلش اگه امکانش باشه پنل حساب کاربری من رو با چی طراحی میکنید و یک یوزر و پسورد میشه لطف کنید بدید تا ببینم.
تشکر
سلام ممنون از شما. در این دوره طراحی پنل کاربری توضیح داده نشده چون نیاز به افزونه نویسی وردپرس هست. برای ساخت پنل کاربری مثل سایت ما افزونه میهن پنل را دریافت کنید.
با عرض سلام و خسته نباشید.
شرمنده مزاحم شدم .
لطفا میشه چندین افزونه از افزونه هایی که بنده خریداری کرده ام به حساب کاربری دیگری انتقال دهید این افزونه ها توسط من کلا استفاده نمیشه و همکارم خریداری کردن خواستم این افزونه ها رو به حساب کاربری ایشان انتقال دهید و از حساب کاربری من حذف کنید . ممنون میشم.
سلام خواهش میکنم. مشکلی نیست لطفا با همین ایمیل متن فوق را به ایمیل info@mihanwp.com ارسال بفرمایید تا فرایند انتقال انجام شود.
با سلام و عرض ادب
هم زمان با آموزش صفر تا صد طراحی سایت مشغول تمرین روی یک سایت دیگه هم هستم توی ساخت دکمه سبد خریدش به مشکل برخورد کردم. مشکل هم اونجایی هست که میخوام عکس cart.png رو که به عنوان بک گراند معرفی کردن توی کادر سبد خرید حرکت بدم.
.mini-cart{
background:url(img/cart.png)no-repeat left center;
width:155px;
height:60px;
border-radius:15px;
border:3px solid #00bfd6;
line-height:55px;
text-align:right;
padding-right:55px;
float:left;
margin-top:10px;
}
همه چی درست کار میکنه الا این یک مورد. مثل میخوام padding left بزنم برای بک گراندم تا در ادامه دستور بک گراند مینویسم آیتم از روی دکمه حذف میشه. دکمه طراحی شده مثل سایت دیجی کالا هست.
یک سوال دیگه هم داشتم
من ایران سنس رو نصب کردم توی سایت جدیدی که در حال تمرین هستم ولی تغییری در فونت ایجاد نشده. ممنونم
سلام برای اینکار باید سی اس اس بک گراند رو به این شکل تعریف کنید:
background:url(img/cart.png)no-repeat left 10px center;
۲. کش سیستم را خالی کنید و تست کنید. شاید هم درست طبق آموزش فونت رو نصب نکردید یا صحیح ادرس دهی نشده.
ممنون مشکل آیکن حل شد. فقط خود سبد خرید بزرگ هست نسبت به کادر دورش برای کوچیک کردن اون باید از فتوشاپ اقدام کنم دیگه درسته ؟؟ ائنجا باید برم و عکس رو کوچکتر کنم؟؟؟
سلام. بله باید تصویر رو کوچک تر و جایگزین کنید.
سلام خسته نباشید
میبخشید بنده دوره 0 تا 100 رو خریداری کردم
متاسفانه فیلم های آموزش اولی که توی سایت بود از روی سیستم من حذف شد
الان اون فیلم ها رو نیاز دارم
فیلم های جدید رو دارم اما اگه میشه لینک فیلم های آموزش قبلی رو در اختیارم قرار بدین که بتونم دانلودشون کنم
ممنون میشم
تشکر
سلام متشکرم. پیشنهاد میکنیم از فیلمهای جدید استفاده کنید چون بروز تر هستند. در هر صورت اگر دوست داشتید میتونیم برای شما ارسال کنیم مشکلی نیست کافیست اطلاع دهید.
سلام میشه کد هاور قبلی که روی دکمه های سایت شما هاور میشد و یک رنگ ابی پخش میشد رو بدید یا حداقل اسمی سایتی چیزی بگید بتونیم شبیه اون پیدا کنیم ممنون
سلام از سایت codepen میتونید این کدها رو دریافت کنید.
برای اینکه بخام مثل شما پیدا کنم چی سرچ کنم بگید خوب
bubble button
سلام پیدا کردم ممنون
فقط توی اپدیت هم از این نوع هاور استفاده کنید و اموزش کار باهاشو یاد بدید
سلام کافیه کد css و جاوا اسکریپت رو قرار بدید. برای آپدیت سعی میکنیم بیشتر موارد تکنیکی رو توضیح بدیم تا اضافه کردن افکتهای اماده به قالب
ضمن درود فراوان خدمت جناب حسینی عزیز، خواستم بپرسم وقتی منوی ریسپانسیو رو درست میکنیم، چطور کاری کنیم زیرمنوها نمایش داده نشه، و فقط وقتی کاربر روی منو تاچ کرد زیرمنو باز بشه (مثل عمل هاور کردن عمل کنه)
سپاس فراوان.
سلام این مورد نیاز به جاوا اسکریپت داره. اجازه بدید توی یک آپدیت توضیح خواهم داد.
با سلام مجدد خدمت شما
وقتی به درس فوتر رسیدم همانطور که در سوال قبل گفتم با اعمال دستورات گفته شده در فیلیم آموزشی هیچ نمایشی برای من ظاهر نشد. حتی دستورات را از سورس اصلی کپی کردم تا شاید با اینکار بتونم کلیه دستورات را درست نوشته باشم ولی باز هم نمایش داده نشد. اما وقتی که کلیه قسمت های فوتر رو کپی کردم هم دستورات سی اس اس و هم html رو دیدم فوتر من مثل سورس اصلی شده. سوال پیش میاد چرا هنگام کار با فوتر از دستورات بعدی تازه فوتر خودشو نشون میده همون موقع ظاهر نمیشه؟؟؟؟؟
سلام شما توی فایل footer.php یک کد تست مثلا salam بنویسید. ببینید نمایش داده میشود یا خیر. اگر نمایش داده نشد دقت کنید باید در کدهای صفحات سایت از wp get_footer استفاده کرده باشید. مطابق آموزش
با سلام و عرض خسته نباشید در طی آموزش طراحی سایت به مشکل فوتر برخورد کردم حتی کلیه کدها رو از منبع اصلی کپی کردم به نوت پد ولی باز هیچ اتفاقی رخ نداد. چجوری باید این رو حل کنم.
سلام لطفا مشکل را دقیق بفرمایید.
سلام
جناب راد چقدر خوب میشد توی پنل تنظیمات قالب یه قسمتی بزارید که مشتری بتونه از اون قسمت تصاویر مگامنو رو تغییر بده چون بلاخره نمیتونیم به مشتری بگیم بره از طریق کدها کلاس ها و تصاویر رو تغییر بده
یه سوالم که برام پیش اومد جناب راد اینکه توی این دوره یاد میگیریم که چجوری بخش های مختلف وردپرس رو شخصی سازی کنیم؟مثلا الان ورود به سایت میهن وردپرس کاملا شخصی سازی شده که برام جالب بود
سلام میشه اینکار رو انجام داد. با همون پنل تنظیماتی که برای قالب ساختیم و بهش توی سی اس اس قالب بصورت php استایل بدیم. دقیقا مثل تغییر رنگ که انجام شد. برای شخصی سازی بخش های دیگر غیر از قالب باید پلاگین نویسی وردپرس رو یاد بگیرید.
سلام و درود آیا در این دوره با جاوا اسکریپت آشنا خواهیم شد؟
سلام مواردی که نیاز هست بله اما آموزش صفر تا صد جاوا اسکریپت خیر چون معمولا نیازی نیست و افزونهها این کار را برای شما انجام خواهند داد.
با سلام من افزونه ی دکان را در سایتم نصب کردم
در پیشخوان —>سفارشات –> لینک https://koala22.com/dashboard/orders/ را نمی خواند
و صفحه ی جدیدبا این لینک ایجاد می کنم بازهم خوانده نمی شود
می خواهم این ادرس را کامل تغیر بدم
مثلا https://koala22.com/dashboard/day/
چطور تغیر بدم
سلام دقت داشته باشید صفحه dashboard را تغییر نداده باشید. همچنین تنظیمات > پیوندهای یکتا را یکبار ذخیره کنید.
سپاس
هر نام دیگر را قبول می کند و نمایش می دهد جز orders
صفحه order را یکبار بررسی کنید. نامک صفحه باید صحیح باشد.
سپاس
هر نام دیگر را قبول می کند و نمایش ی دهد جز لینک
سپاس از شما. پس آدرس صفحه حساب کاربری ووکامرس را بررسی کنید.
سلام و درود خدمت شما.
دلیل اینکه از بوت استرپ استفاده نکردید چی هست؟ آیا css خام کمی مشکل نیست؟
سلام چون قصد داشتیم از صفر تا صد آموزش بدیم بوت استرپ رو کار نکردیم. css خام کمی مشکل هست اما اصولی و از پایه کار خواهید کرد.
سلام و درود
آیا ریسپانسیو کردن سایت این دوره به وسیله css خام است یا بوت استرپ؟
سلام سی اس اس خام هست.
سلام و درود خدمت شما استاد عزیز و گرامی.
1 آیا طراحی سایت در این دوره واکنشگرا است
2 با css خام طراحی می کنیم یا بوت استرپ؟
سلام
۱. بله کاملا ریسپانسیو هست
۲. سی اس اس خام
سلام آقای حسینی راد میخواستم بدونم این دوره واقعا 0تا100 ؟
آیا واقعا با دیدن دوره میتونیم به یه طراح تبدیل شوم وطرح های بیشتر طراحی بفروشم
آخه اکثر سایت ها دوره 0 تا 100طراحی سایت رو دارن ولی واقعی 0تا 100نیست و نصف و نیمه است میخوام بدونم این دوره هم همین جوریه؟
سلام بله این دوره از صفر تا صد طراحی و راه اندازی سایت رو به شما توضیح خواهد داد. سرفصلها و نظرات دانشجویان رو حتما ببینید.
سلام .
وقتتون بخیر
ببخشید ، در دمویی که از طرح زده شده در دوره مشاهده شد ، خیلی بخش های سایت ، هاور ندارد و هدر سایت هم ، با توجه به اینکه سایت فروشگاهی طراحی شده ، دکمه ی سرچ خیلی خوبی ندارد .
قالبی که در دوره طراحی می شود ، با چه پلاگین هایی سازگار خواهد بود ؟؟
آیا با پلاگین های :
لایر اسلایدر
اسلایدر روولوشن
لرن پرس
ویژوال کامپوزر
المنتور
ووکامرس
edd
آسوم تیکت
و…
کلا با چه افزونه هایی سازگار هستند ؟؟
ممنون ازتون
سلام میتونید هاور بهش اضافه کنید. توی آموزش تمام کدهای مورد نیاز آموزش داده شده. قالب طراحی شده با تمام افزونههای وردپرس سازگار خواهد بود. بله با تمام این افزونهها سازگار هست.
سلام . آیا می توانیم قالبی مثل اجوما طراحی بکنیم که با لرن پرس سازگار باشد و دورههای آموزشی را برای فروش بگذاریم؟؟ مثلا انفولد هم حتی با لرن پرس سازگار نیست .
ممنون ازتون
سلام بله مشکلی نیست میتونید طراحی کنید. اگر باز هم مشکلی بود بعد از دیدن دوره اطلاع بدید شما رو راهنمایی کنیم.
سلام
در نتایج سرچ گوگل بعد نام هر برگه ایی که دارم یه کلمه بی ربط با موضوع درج شده چجوری میتونم این مشکل رو برطرف کنم؟
مثلا بالای نام صفحه اصلی سایتم تو سرچ گوگل بجای اینکه نام توضیحی که در تنظیمات قرار دادم کلمه دیگری درج میشه
ممنون
سلام کلمهای که درج شده چی هست؟ یک نمونه بفرمایید.
سلام
من بیشتر نظرات رو خوندم و نکاتی رو دیدم که فرمودین در آپدیت توضیح داده می شود
میخواستم بدونم تا چه زمانی طول میکشه تا دوره رو آپدیت کنید
درود
زمان دقیق مشخص نیست
سلام
چرا بعضی تغییرات مثل کد مخصوصbreadcrumb مربوط به یواست سئو و حتی بعضی css های اون ها ، در بعضی مرورگرها اعمال میشه و بعضی دیگه اعمال نمیشه ؟
ممنون
سلام به کدها Imporatant بدید و تست کنید. البته شاید توی مرور شما کش شود.
ببخشید جناب حسینی میخواستم هدر سایتم را یک اسلایدر حرفه ای بگذارم اگر بخواهم کد نویسی کنم باید چیکار کنم؟
سلام اگر بخواید کدنویسی کنید باید از همون owlcarousel استفاده کنید که توی آموزش توضیح داده شده.
اما اون اتوماتیک کار نمیکنه
امکان اتوماتیک کار کردن رو داره. autoplay رو true کنید توی تنظیمات کاروسل
ببخشید این اعدادی که داخل سایت ها هستند و شمارش می شوند را چگونه به سایت اضافه کنیم؟
درود باید با استفاده از جی کوئری اضافه کنید. افزونههای مختلفی مثل vc ultimate addons هم این قابلیت رو دارند.
سلام چگونه قالبمان را با wpml سازگار کنیم؟
درود به شما کاربر گرامی
این آموزش را مشاهده بفرمایید:
https://mihanwp.com/wpml-learn/
سلام این فیلم توی صفحه رو چطوری تهیه کردید ممنون
سلام توی سایت ما دوره آموزش تولید محتوا رو ببینید.
سلام
سایتی که زدیم ، یه چندروزی هست سرعت لود خیلی پایین اومده ، با هاست در میان گذاشتم که گفتن چندروزیه سی پی یو زیاد میکشه و میتونه از این موارد باشه :
1- افزونه های زیاد —- که البته افزونه زیادی نصب نکردم به جز همون ووکامرس و امنیت و راکت و یواست سئو
2- کوئری پرمصرف یا مشکل دار — که یه راهکاری برای انجام اون داده
3- تغییر از php 5.6 به php 7 به بالا —- نظر شما چیه و چه جوری باید این کار انجام بشه
ممنون از شما
سلام سایت رو توی gtmetrix.com تست کنید و ببینید توی بخش waterfal کدوم آدرس ها مشکل دارن یا دیر لود میشن.
بررسی کردم
عکس ها کلا بالای 1 ثانیه هستند، با توجه به این که imagify زدم براشون و save for web هم هستند ، در حالی که تا چند روز پیش مشکلی نداشت
افزونه ها رو هم غیر فعال میکنم فرق آنچنانی پیدا نمیکنه
البته یه فایل js و css هم هست که اون ها هم بالای 1 ثانیه
دو گرید A هم داره ، حجم فایل ها هم معمولیه ، همین قالب رو برای یه سایت دیگه هم گذاشتم ، اونجا خوب لود میشه !
قالب روی این سایت خیلی دیر لود میشه
روی این سریع لود میشه
ممنون میشم اگر راهکاری به ذهنتون میرسه
سلام هاست هر دو سایت یکی هستند؟ اگر خیر هاست سایتی که سرعت لود پایینی دارد طبیعتا منابع کمی داره و باید تغییرش بدید. معمولا لود دیر تصاویر به خاطر حجم بالای تصاویر هست یا کمبود منابع و سرعت هاست شما.
هاست هر دو دقیقا از یک هاستینگ و از یک نوع هستند
و این گیج کننده شده
ایا واحد پشتیبانی وردپرس هم دارید برای مواقع ضروری ؟
چه جوری میتونیم به php7 به بالا بریم ؟
ممنون
اگر هاست ها یکی هستند قطعا از افزونههای نصب شده روی هر سایت هست. وردپرس هر دو سایت رو آپدیت کنید و افزونهها رو دقیقا به یک شکل نصب کنید سپس تست بگیرید. توی gtmetrix بخش waterfal دقیقا مشخص هست که لود سایت چرا طول میکشه. پشتیبانی وردپرس خارج از محصولات سایت خیر متاسفانه
برای تغییر نسخه php باید با هاست در ارتباط باشید برای شما انجام بدن. برخی از هاستینگ ها قابلیت تغییر از سی پنل رو به شما خواهند داد.
ببخشید لطفا داخل آپدیت توضیح بدهید که چگونه فونت های زیادی به قالب اضافه نموده و اختیار تغییر آن ها را به مشتری بدهیم
سلام مطابق آموزش تغییر رنگی که برای CSS اعمال کردیم باید به جای اسم رنگ فونتها رو قرار بدید و توی CSS این فونتها رو با font-family اعمال کنید.
سلام
ببخشید میشه یک کد بدید برای این که مشتری خودش بتواند محل ساید بار را در سمت چپ و راست مشخص کند؟
من هرکاری کردم نشد.
سلام بله توی آپدیت توضیح خواهم داد.
آپدیت چه زمانی میرسد؟ لطفا هر چه سریعتر قرار دهید
تا چند روز آینده منتشر خواهیم کرد.
ببخشید به نظرتون واقعا میشود الان که ما این دوره را گذراندیم هر قالبی طراحی کنیم؟ درسته در این دوره کاملا آموزش داده شده ولی وقتی قالب های حرفه ای را میبینم فکر میکنم هیچ وقت نمیتوانم اینها را طراحی کنم؟
به نظرتون برای شروع تمرین از چه نوع قالبی شروع کنم؟
و یک سوال فنی اینکه بعضی وقتا ساید بار که تمام میشود ثابت میماند تا تمام صفحه تمام شود و به فوتر برسد این کدش چی هست؟
سلام بله چرا که نه. ببینید توی قالبهای آماده از افزونههای اختصاصی استفاده شده. برای ساخت چنین قالبی باید php و برنامه نویسی پلاگین رو هم یاد بگیرید. برای شروع تمرین بهترین نوع قالب شرکتی هست. در مورد سایدبار باید ببینید چه چیزی در حال لود هست که طول میکشه برای لود شدن. شاید تصویر یا گراواتار هست.
لطفا دوره افزونه نویسی و پلاگین نویسی را هم برگزار کنید
بله حتما در آینده برگزار خواهیم کرد.
درود بر شما
با توجه به گذراندن این دوره به نظر شما بهتر نیست که با همان قالب های آماده و حرفه ای مثل اوادا و افزونه هایی مثل ویژوال کامپوزر کار کنیم و هر بلایی میخوایم سرشون بیاریم ؟
با توجه به گذراندن این دوره دیگه میتونیم توی html و css و حتی توابع این قالب ها دستکاری های لازم رو انجام بدیم و سایت رو دقیقا همون چیزی که میخوایم بسازیم ، این جوری کارمون سریعتر و حرفه ای تر پیش نمیره ؟
ممنون میشم نظر کارشناسیتون رو بفرمایید
ممنون از شما
درود تصمیم با شماست میتونید از قالبهای اماده استفاده کنید و کلی تغییرات بدید. کار سریعتر پیش میره اما طراحی قالب اختصاصی از صفر یک دنیای دیگری هست و سرعت بسیار بالاتری خواهد داشت. چون دقیقا چیزی که قرار هست بسازید رو خواهید داشت و درخواستهای اضافه حذف خواهد شد.
سلام
یه چایلدتم برای قالبم ساختم و style.css رو درون اون طبق آموزش سایت اماده کردم
اما کدهای css که درون style.css چایلدتم مینویسم ، اجرا نمیشه
دلیلش چی میتونه باشه
سپاس
سلام چایلدتم رو درست نساختید. توی چند روز آینده آموزش ساخت چایلدتم رو توی یک اپدیت توضیح خواهم داد.
ببخشید برای فیلتر محصولات ووکامرس چه کار کنیم؟ افزونه هایی هست ولی اگر بخواهیم کد نویسی کنیم؟
برای بیش تر کار ها افزونه هست ولی مشکل اینجاست که برای قالب هایی که در مارکت میخواهیم بفروشیم لاینسس را باید چه کار کرد؟
درود به شما کاربر محترم
آموزش زیر را مشاهده بفرمایید:https://mihanwp.com/product-filter-learn/
برای فروش باید لایسنس extend بخرید برای این محصولات یا از نسخه رایگان استفاده کنید. البته برای مارکت های ایرانی این موارد مهم نیست.
سلام. ببخشید بنده در آزمون آنلاین شرکت کردم از کجا میتوانم گواهینامه را دریافت کنم؟ و با این که تمام دوره را دیدم و خیلی مفید و مفصل و خوب بود میترسم نتوانم که قالب های خیلی حرفه ای بسازم و در مارکت ها بفروشم
سلام سپاس از شما. بعد از پاسخ به آزمون مدرک به شما نمایش داده خواهد شد.
و این که افزونه هایی که میخواهیم همراه قالب باشد باید در کدام پوشه بگزاریم؟
افزونه هایی مثل ووکامرس که اطلاعات درخواست میکنند را چکار کنیم در حالی که میخواهیم این فزونه نصب و در مارکت بفروشیم؟
افزونهها را روی وردپرس نصب کنید و از کل سایت بسته نصبی بگیرید.
چگونه از کل سایت فایل نصبی بگیریم؟
https://mihanwp.com/duplicator/
برای صفحه اصلی سایت دو نوع متنوع طراحی کردم در درجه اول چگونه صفحه اصلی دوم به وردپرس اضافه کنم؟ و چگونه انتخابی کنم که مشتری بتواند هر کدام را بخواهد انتخاب کند؟ و باتوجه به این که هدر و فوتر در هر دو صفحه اصلی متفاوت هست کد فراخوانی آنها در دیگر صفحات وب چگونه خواهد شد؟
برای فروش تور ها و بلیط هواپیما و… از ووکامرس باید استفاده کرد؟؟؟ اگر دو بخش داخل سایت داشته باشیم یکی فروش بلیط هواپیما مثلا و یکی فروش بلیط قطار چگونه به مشتری این اختیاررا بدهیم که اگر یک بخش را نخواست غیرفعال کند؟
از بخش برگهها یک قالب برگه بسازید و توی برگه قرار بدید کد صفحه دوم رو. https://mihanwp.com/different-template-for-posts/
از بخش تنظیمات > خواندن میتواند صفحه مورد نظر را انتخاب کنید
۲. باید کد فوتر رو توی برگه قرار بدید. پیشنهاد میکنم فوتر رو متفاوت نکنید چون تمام صفحات باید از فوتر استفاده کنند.
برای فروش تور و … باید افزونه رزرو آنلاین نصب کنید.
افزونه رایگان برای این کار می شناسید؟
توی گوگل سرچ کنید مواردی هست هم رایگان هم غیر رایگان
سلام
چند سوال داشتم که حد الامکان پاسخ کاملی بفرمایید.
یکی این که در مورد اسلایدری کردن تصاویر و متون در وردپرس باید چیکار کرد؟ به غیر از افزونه…
یکی این که برای سایتی که میخواهم در مارکت بگزارم دو ساید بار چپ و راست طراحی کردم حال چگونه دو ساید بار در وردپرس داشته باشم و مشتری بتواند انتخاب کند که سمت راستی باشد یا سمت چپی؟ و کد فراخوانی اینها چگونه میشود؟
برای اسلایدری کردن تصاویر و متون از همون owl carousel استفاده کنید که توی آموزش توضیح دادم.
اگر منظور شما ستون کناری هست باید دو فایل sidebarleft.php و sidebarright.php بسازید و با استفاده از پنل مدیریت قالب که ساختیم شرطی کنید که کدام یک نمایش داده شود.
چگونه شرطی میکنیم؟
دقیقا همون کاری که برای شرطی کردن رنگها استفاده کردیم رو برای نمایش فایل sidebarright باید استفاده کنید.
ببخشید اگر برای فروش قالب در مارکت ها ووکامرس را اضافه کنیم اون آدرس ها و اطلاعات را باید چیکارش کنیم؟
ادرس ها و اطلاعات بصورت دمو به کاربر تحویل داده می شود. با افزونه duplicator میتونید بسته نصبی بگیرید و اطلاعات بصورت خودکار تغییر خواهد کرد.
به صورت دمو یعنی چه طوری؟
یعنی یک متن تستی برای نمایش قالب به مشتری
سلام
من این فانکش ها و توابع را اصلا متوجه نشدم لطفا اگر میتوانید توضیح مختصری در موردشان بدهید.
سلام تابع و فانکشن هر دو یکی هستند. یک الگو برای اجرای یک قطعه کد و استفاده از این خروجی در php. برای درک بهتر باید php رو آموزش ببینید اما نیازی به حفظ کردن این کدها نیست. فقط کافیه طبق آموزش اونها رو استفاده کنید تا بتونید یک امکان رو به قالب اضافه کنید.
دو تا سوال دارم
یکی این که برای تغییر عکس در مگامنو در وردپرس چیکار کنیم؟
یکی هم این که میخواهم بنر اول سایت به صورت اسلایدری باشد اینو آموزش ندادین و گفتین از افزونه استفاده میشود حالا اگه از افزونه نخواهیم استفاده کنیم باید چگونه درست کنیم اون اسلایدر را؟
سلام
۱. باید از افزونه مگامنو استفاده کنید مثل ubermenu
۲. اگر نخواید از افزونه استفاده کنید باید مثل اسلایدر آیفون پایین قالب که طراحی کردیم، از owl carousel استفاده کنید.
سلام. ببخشید برای نصب وردپرس بر روی لوکال هاست باید حتما هاست و دامین خریداری کنیم؟
سلام خیر برای استفاده از لوکالهاست نیازی به خرید هاست و دامین نیست.
سلام
ببخشید لینک های خانه یا دیگر موارد مثل لوازم الکترونیکی چه بنویسیم؟ در حالی که میخواهیم این قالب را در مارکت بفروشیم و لینکی نداریم که برایش قرار بدهیم یه توضیح کامل میفرمایید
سلام تفاوتی نداره هر چیزی که دوست دارید
خب بعدا مشتری به مشکل نمیخورد؟ باید چیکارش کند؟
خیر میتونه به دلخواه خودش تغییر بده.