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

جلسه 1: مقدمه دوره

• توضیحاتی در رابطه با دوره
• معرفی مدرس
• کار‌هایی که در این دوره انجام خواهیم داد.

جلسه 2: روش های کسب درآمد از طریق طراحی سایت

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

جلسه 3: معرفی و آموزش کار با Adobe XD

• معرفی ابزار طراحی سایت
• اسکتچ و استفاده از آن برای طراحی سایت
• محیط کار با Adobe XD

جلسه 4: طراحی سایت در Adobe XD بصورت عملی

• ساخت یک صفحه فرود در Adobe XD

جلسه 5: تست ریسپانسیو Adobe XD با موبایل و تبلت

• تست ریسپانسیو با موبایل و تبلت
• تست عملی ریسپانسیو
• اتصال Adobe XD به موبایل و تبلت

جلسه 6: کار با بخش‌های مختلف فتوشاپ برای طراحان سایت

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

جلسه 7: شروع طراحی وبسایت در فتوشاپ - قسمت اول

• روانشناسی رنگ و انتخاب صحیح ست رنگی در طراحی قالب
• طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
• مفاهیم ruler و guideline؛ تنظیم و استفاده از آن ها
• ایجاد طرح گرافیکی صفحه ی وب در فتوشاپ ( فایل psd طرح وب سایت)
• ایجاد بخش هدر سایت در فایل psd
• اضافه کردن استایل به بخش های ایجاد شده
• توضیح میزان شفافیت و شفافیت داخلی یک صفحه ی وب
• معرفی انواع border و inner shadow متن و تصویر
• ساخت گرادینت‌ها در طراحی وب به سبک جدید
• استایل دادن به بخش های مختلف سند گرافیکی یک صفحه ی وب در فتوشاپ
• توضیح مفاهیم UX و UI برای طراحی صفحات وب
• ساخت منوی وبسایت در فتوشاپ
• طراحی بخش سبدخرید سایت در هدر
• طراحی لوگو ساده و شیک برای مشتری در فتوشاپ
• طراحی مگامنو و هدر کامل وبسایت در فتوشاپ

جلسه 8: شروع طراحی وبسایت در فتوشاپ - قسمت دوم

• طراحی بخش محتوای وبسایت در فتوشاپ
• طراحی نمایش لیست محصولات وبسایت در فتوشاپ
• طراحی صفحه اصلی وبسایت در فتوشاپ بصورت کام
• معرفی ابزار lorem ipsum برای ایجاد متن تصادفی مورد نیاز برای یک صفحه وب

جلسه 9: شروع طراحی وبسایت در فتوشاپ - قسمت سوم

• طراحی فوتر وبسایت در فتوشاپ
• تکمیل طرح اصلی وبسایت و افزودن مواردی برای زیباسازی بیشتر سایت

جلسه 10: شروع طراحی وبسایت در فتوشاپ - قسمت چهارم

• طراحی صفحه مقالات در فتوشاپ بصورت کامل
• طراحی صفحه تماس با ما و درباره ما و … در فتوشاپ
• طراحی صفحه ۴۰۴ یافت نشد در فتوشاپ

جلسه 11: شروع طراحی وبسایت در فتوشاپ - قسمت پنجم

• طراحی صفحه محصولات در فتوشاپ بصورت کامل
• طراحی صفحه آرشیو محصولات در فتوشاپ بصورت کامل
• اتمام طراحی سایت در فتوشاپ
• دریافت خروجی برای ارائه به مشتری

جلسه 12: شروع یادگیری HTML و معرفی تگ‌های آن

• توضیح در مورد فایل های HTML و CSS
• تفاوت فایل های HTML و CSS
• چگونگی ایجاد فایل ها ی HTML و CSS
• طرز نمایش، استایل بندی، چیدمان و رنگ بندی صفحه ی وب با CSS
• توضیح چگونگی نمایش یک صفحه ی وب برای user ها
• توضیح ساختار فایل HTML شامل تگ های header و body
• معرفی تگ های مختلف HTML

جلسه 13: شروع یادگیری CSS و معرفی تگ‌های آن

• توضیح ساختار CSS به طور کامل
• چگونگی ایجاد کلاس و آی دی در فایل CSS و فراخوانی آنها
• تفاوت آی دی و کلاس در یک فایل CSS
• آموزش CSS بصورت کامل و آشنایی با خصوصیت‌های سی اس اس

جلسه 14: شروع کار با HTML و CSS بصورت عملی

• معرفی نرم افزار های مختلف برنامه نویسی
• ایجاد یک فایل HTML ساده
• توضیح ساختار کلی فایل HTML و تگ های HTML
• معرفی Selector‌ها در CSS و انواع آن‌ها
• دلیل ایجاد فایل های header، footer،content ،slider و … به صورت جداگانه برای ایجاد صفحات وب
• توضیح مفهوم minify و مزیت استفاده از کدهای minify شده ی html و css
• توضیح مسیردهی فایل ها در CSS
• توضیح چگونگی اضافه کردن فایل CSS به فایل HTML
• کامنت گذاری در  HTML
• کامنت گذاری در CSS

جلسه 15: ساخت هدر وبسایت با زبان HTML و CSS

• تبدیل طرح گرافیکی به کد
• ایجاد یک سند Html برای یک صفحه ی وب بصورت عملی
• معرفی Css و استفاده از آن برای ایجاد افکت های گرافیکی و ایجاد سند Css بصورت عملی
• لینک کردن صفحه های Html و Css بصورت عملی
• کدنویسی قالب طراحی شده در فتوشاپ
• استفاده از کدهای css reset بصورت عملی
• شروع کدنویسی بخش های مختلف صفحه ی وب
• کدنویسی هدر سایت بصورت کامل
• معرفی کاربرد عملی خاصیت z-index در طراحی وب
• اضافه کردن فونت به یک فایل Html
• اضافه کردن تصویر پس زمینه ی سایت
• کدنویسی بخش header شامل کدنویسی لوگو
• کدنویسی منوی اصلی سایت
• مفهوم hover و استفاده از آن برای ایجاد منوها
• طراحی منو و زیرمنو با Css
• آشنایی با پسوند SVG و استفاده از آن در وبسایت
• مشخص کردن نوع و اندازه فونت سایت با استفاده از Css

جلسه 16: ساخت مگامنو و محصولات صفحه اصلی با HTML

• ساخت مگامنو حرفه‌ای در HTML
• افکت دادن به مگامنو با استفاده از CSS
• استفاده از تگ img بصورت عملی
• استایل دهی به سلکتور مختلف last-child و first child
• شروع ساخت صفحه اصلی وبسایت
• استفاده از کلاس clear در style.css
• Hover دادن به بخش های مختلف صفحه ی وب
• استایل دهی به هدینگ‌ها
• توضیح کامل‌تر خاصیت float بصورت عملی
• استایل دادن به بخش های مختلف با استفاده از دستور nth-child

جلسه 17: ساخت ستون کناری وبسایت با HTML و CSS

• ساخت ستون کناری وبسایت در HTML
• قرار دادن تصویر تبلیغاتی در ستون کناری وبسایت
• برنامه‌نویسی سایدبار وبسایت
• اضافه کردن hover به باکس های سایدبار
• ساخت آخرین مطالب با HTML در سایدبار
• ساخت فرم خبرنامه در HTML
• ساخت اسلایدر موبایل در HTML

جلسه 18: ساخت اسلایدر در HTML و CSS

• ساخت اسلایدر موبایلی در صفحه اصلی سایت
• آموزش کار با Owl Slider
• اضافه کردن جاوا اسکریپت به سایت طراحی شده
• استفاده از اسلایدر اسکرولی در وبسایت

جلسه 19: ساخت فوتر وبسایت با HTML و CSS

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

جلسه 20: ساخت صفحات داخلی و صفحه 404

• کپی گرفتن از فایل‌ها برای ساخت صفحه جدید HTML
• ساخت فایل صفحات درباره ما، تماس با ما و … در HTML
• ساخت صفحه ۴۰۴ یافت نشد با HTML
• آموزش سازگار کردن سایت با مرورگر‌های مختلف

جلسه 21: ساخت سایر صفحات HTML و توضیح ساختار قالب وردپرس

• ساخت صفحات دیگر در  html
• اتمام نشانه گذاری html و تکمیل قالب در html
• توضیح ساختار کلی قالب وردپرس
• آموزش ساخت فایل‌های مختلف در قالب وردپرس

جلسه 22: ساخت قالب وردپرس و شروع برنامه نویسی وردپرس

• ساخت یک قالب ساده خام برای وردپرس
• توضیح ساختار قالب وردپرس بصورت عملی
• شروع تبدیل قالب HTML به وردپرس
• داینامیک کردن Title صفحات
• آدرس دهی بصورت داینامیک برای فایل‌های JS و CSS
• Include کردن هدر و فوتر در صفحات سایت
• آموزش ساخت فهرست متغیر در وردپرس
• سازگار کردن قالب وردپرس با افزونه‌های مختلف

جلسه 23: ساخت مگامنو و سایدبار قالب وردپرس

• ساخت مگامنو عریض بدون استفاده از افزونه
• آموزش ساخت سایدبار قابل ویرایش از بخش ابزارک‌ها
• ساخت ابزارک اختصاصی برای قالب وردپرس
• آموزش افزودن قابلیت تصویر شاخص به وردپرس
• افزودن سایز‌های مختلف تصویر شاخص در وردپرس
• مدیریت سایدبار وبسایت با ابزارک‌ها
• مدیریت تبلیغات وبسایت با استفاده از ابزارک‌ها
• نمایش آخرین مقالات وبسایت در ستون کناری

جلسه 24: ساخت فوتر و صفحه ۴۰۴ و صفحات آرشیو

• انتقال کد‌های بخش سایدبار به فایل مجزا
• ساخت پست تایپ سفارشی در وردپرس
• نمایش پست تایپ سفارشی در بخش اسلایدر
• ساخت فوتر وبسایت در وردپرس
• ساخت محل ابزارک برای فوتر
• مدیریت فوتر از پنل وردپرس
• برنامه نویسی صفحه ۴۰۴ در قالب وردپرس
• ساخت سایز تصویر شاخص برای بخش آرشیو
• برنامه نویسی صفحه آرشیو در قالب وردپرس
• نمایش شماره صفحات در بخش آرشیو بدون نصب افزونه
• استایل دهی CSS به بخش شماره صفحات

جلسه 25: ساخت صفحه برگه‌ها و نوشته‌ها در وردپرس

• نمایش برگه‌ها در وردپرس
• نمایش نوشته تکی در وردپرس
• نمایش برچسب‌ها در قالب وردپرس
• نمایش نام نویسنده در قالب وردپرس
• نمایش دسته بندی های نوشته در قالب وردپرس
• نمایش محتوای پست در قالب وردپرس
• نمایش نظرات در قالب وردپرس
• ویرایش سی اس اس برای سفارشی سازی نظرات سایت
• سفارشی کردن برنامه نویسی comments.php

جلسه 26: ساخت صفحه محصول در فروشگاه

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

جلسه 27: ساخت صفحه محصول در فروشگاه - بخش دوم

• ادامه ساخت صفحات محصول در ووکامرس
• ساخت بخش‌ معرفی کامل محصول
• نمایش مشخصات فنی محصول در صفحه محصول
• سفارشی سازی بخش های مختلف صفحه محصول ووکامرس

جلسه 28: ساخت صفحه آرشیو محصولات، سبد خرید و حساب کاربری

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

جلسه 29: نمایش محصولات ووکامرس در صفحه اصلی سایت

• استفاده از WP_Query برای نمایش پست تایپ‌ها
• نمایش محصولات ووکامرس در صفحه اصلی سایت
• افزودن دکمه افزودن به سبد خرید به صفحه اصلی
• نمایش عنوان محصولات در صفحه اصلی سایت

جلسه 30: ساخت پنل مدیریت برای قالب وردپرس

• بهترین روش برای ساخت پنل تنظیمات قالب وردپرس
• چرا از روش‌های قدیمی استفاده نمی‌کنیم؟
• افزودن فیلد متنی به پنل تنظیمات قالب وردپرس
• افزودن فیلد انتخاب رنگ به پنل تنظیمات قالب وردپرس
• افزودن فیلد آپلود تصویر به پنل تنظیمات قالب وردپرس
• مدیریت بخش‌های سایت قالب با پنل تنظیمات قالب وردپرس
• تغییر لوگوی سایت از پنل تنظیمات قالب وردپرس
• مدیریت تبلیغات سایت از پنل تنظیمات قالب وردپرس
• انتخاب دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب

جلسه 31: اضافه کردن رنگ‌بندی و استایل به پنل مدیریت قالب

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

جلسه 32: ریسپانسیو کردن قالب طراحی شده

• آموزش کامل ریسپانسیو کردن بخش‌های مختلف سایت
• کار با شرط @media and screen در سی اس اس
• جلوگیری از اسکرول افقی در حالت موبایل

جلسه 33: ساخت منوی ریسپانسیو برای موبایل و تبلت

• ساخت منوی همبرگری در موبایل
• اتصال منوی همبرگری به فهرست وردپرس
• ساخت منو ریسپانسیو بدون نیاز به نصب افزونه (بصورت اختصاصی)
• ساخت منو ریسپانسیو با استفاده از افزونه
• استفاده از جاوا اسکریپت برای ساخت منو موبایلی

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

• آموزش حل مشکل عنوان در تگ Title
• آموزش اسلایدی کردن تصاویر محصولات ووکامرس
• آموزش افزودن LightBox به تصاویر محصولات ووکامرس
• آموزش حل حذف شدن استایل hover منوی اصلی موقع hover کردن روی submenu

جلسه 35: لینک دادن به عنوان دسته‌بندی‌ها و اضافه کردن Preloader

• لینک کردن دسته بندی های موجود در صفحه اصلی
• اضافه کردن Preloader به کل صفحات سایت

جلسه 36: ساخت فرم جستجو و نمایش عنصر فقط در ساعات خاص

• ساخت فرم جستجوی سفارشی
• نمایش عناصر سایت در ساعات خاص

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

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

جلسه 38: افزودن تنظیمات به ابزارک اختصاصی ساخته شده

• افزودن تنظیمات تغییر عنوان به ابزارک
• افزودن تغییر تعداد نمایش پست به ابزارک

جلسه 39: قرار دادن پس زمینه جدا برای مگامنوهای مختلف

• قرار دادن تصویر پس زمینه سفارشی برای هر مگامنو بصورت مجزا
• روش‌های دیگر سفارشی کردن مگامنوها

جلسه 40: ساخت مینی سبد خرید برای هدر سایت

• نمایش تعداد محصولات سبد خرید در هدر سایت
• نمایش سبد خرید سریع در هدر سایت

جلسه 41: نمایش مسیر کاربر در سایت و ساخت فرم ورود کاربر

• نمایش مسیر کاربر در سایت
• ساخت فرم ورود اختصاصی برای ورود کاربر در قالب

جلسه 42: شرطی کردن نمایش دسته بندی و استفاده از زمینه‌های دلخواه

• استفاده از if_category
• استفاده از is_category
• استفاده از فیلد‌های سفارشی وردپرس
• شرطی کردن فیلد‌های سفارشی وردپرس

جلسه 43: طراحی شبکه پست، مسیر راهنما، افزودن Arrow به اسلایدر و آیکون کنار منو

• ساخت شبکه پست شبیه تلویزیون میهن وردپرس
• افزودن فلش به مسیر راهنما در سایت
• افزودن Arrow به اسلایدر سایت
• اضافه کردن آیکون فلش به منوهای دارای زیرمنو

جلسه 44: پاسخ به سوالات شما و چند زبانه کردن قالب وردپرس

• کار با فایل‌های استایل rtl.css و ltr.css
• چپ چین کردن قالب وردپرس
• راست چین کردن قالب وردپرس
• افزودن قابلیت ترجمه به قالب
• ساخت فایل‌های ترجمه برای قالب
• استفاده از تابع e_
• سازگار کردن قالب با افزونه‌های چند زبانه وردپرس
• کار با نرم افزار Poedit

جلسه 45: اسکرول صفحه با کلیک روی یک یا چند دکمه

• استفاده از خاصیت Smooth Scroll در CSS
• ساخت نوار ثابت پیمایش در صفحه محصول
• کلیک روی دکمه و اسکرول به بخش دلخواه از صفحه

جلسه 46: سازگار کردن قالب با المنتور و ساخت المنت جدید

• معرفی افزونه المنتور
• بررسی مستندات المنتور برای توسعه‌‌دهندگان
• سازگار کردن قالب با المنتور
• ساخت افزونه مکمل قالب برای المنتور
• ساخت المنت اختصاصی جدید برای المنتور

جلسه 47: ادغام پلاگین با قالب وردپرس و نمایش تاریخ آپدیت مطالب

• ادغام کردن پلاگین با قالب ساخته شده
• نمایش تاریخ آپدیت مطالب سایت
• نمایش تاریخ آپدیت جایگزین با تاریخ انتشار

جلسه 48: Ajax کردن سبد خرید و بستن منوی موبایل با کلیک خارج از کادر

• ایجکس کردن سبد خرید مینی
• بستن منوی موبایلی با کلیک خارج از کادر منو

جلسه 49: ساخت فرم جستجوی تمام صفحه

• آموزش کار با جی کوئری
• نمایش و مخفی کردن یک المنت با کلیک روی المنت دیگر
• ساخت فرم تمام صفحه برای جستجو
• ساخت دکمه بستن جستجو