آموزش Astro JS v4 & WordPress (Astro.js، TailwindCSS و WordPress)

سرفصل ها و درس ها

معرفی و راه اندازی پروژه Introduction and project setup

• مهم! قبل از شروع دوره این را بخوانید! ( مخزن Github و غیره) Important! Read this before you start the course! (Github repo etc)

• نمای کلی پروژه Project overview

• نمای کلی سطح بالا معماری Astro و WordPress High level overview of Astro & WordPress architecture

• رتبه بندی و بررسی Udemy Udemy ratings and reviews

• راه اندازی پروژه Astro Astro project setup

• tailwind css را به astro اضافه کنید Add tailwind css to astro

• برای کدهای قالب‌بندی خودکار در ذخیره، زیباتر را تنظیم کنید Setup prettier for auto formatting code on save

• راه اندازی سایت وردپرس محلی Local WordPress site setup

• قالب اصلی بلوک وردپرس را ایجاد کنید Create basic WordPress block theme

صفحه اصلی را بسازید Build out the homepage

• داده های وردپرس را از داخل Astro جستجو کنید Query WordPress data from within Astro

• کامپوننت BlockRenderer را در Astro ایجاد کنید Create BlockRenderer component in Astro

• اولین بلوک ها را از مولفه BlockRenderer رندر کنید Render first blocks from the BlockRenderer component

• مولفه مشترک سر ایجاد کنید و داده های SEO را اضافه کنید Create common head component and add SEO data

نوار ناوبری را بسازید Build out the navbar

• نوار ناوبری و لوگوی سایت را در وردپرس اضافه کنید Add the navbar and site logo in WordPress

• نوار ناوبری را در Astro رندر کنید Render the navbar within Astro

• با استفاده از مولفه Astro Image، لوگوی سایت را در Astro رندر کنید Render the site logo within Astro using the Astro Image component

• صفحات اضافی را در وردپرس اضافه کنید Add additional pages within WordPress

• بلوک Navigation را به Header اضافه کنید Add the Navigation block to the Header

• پیوندهای ناوبری را در Astro رندر کنید Render the Navigation links in Astro

• زیر منوی ناوبری را در Astro رندر کنید (قسمت 1) Render the navigation submenu in Astro (part 1)

• زیر منوی ناوبری را در Astro رندر کنید (قسمت 2) Render the navigation submenu in Astro (part 2)

• React را در Astro ادغام کنید و نماد Font Awesome را رندر کنید Integrate React into Astro and render Font Awesome icon

• نقشه مسیرهای صفحه وردپرس برای استفاده از آدرس سایت Astro Map WordPress page routes to use Astro site url

صفحات اضافی را بسازید Build the additional pages

• مسیرهای پویا در Astro Dynamic routes in Astro

• داده های صحیح را برای صفحات ارائه دهید Render correct data for pages

• فونت poppins را به سایت Astro و قالب وردپرس اضافه کنید Add poppins font to Astro site and WordPress theme

• بلوک پوششی برای صفحه اصلی در وردپرس ایجاد کنید Create the Cover block for the homepage in WordPress

• استایل های پیش فرض را برای بلوک دکمه در وردپرس اضافه کنید Add default styles for the Button block in WordPress

• بلوک Cover را در Astro رندر کنید Render the Cover block within Astro

• بلوک عنوان را در Astro رندر کنید (+ نسخه نمایشی اسلات های نامگذاری شده) Render the Heading block within Astro (+ demo of named slots)

• بلوک‌های دکمه‌ها و دکمه‌ها را در Astro رندر کنید Render the Buttons and Button blocks within Astro

• کامپوننت Cover را تمام کنید Finish the Cover component

• بلوک تصویر را اضافه کنید و جزء تصویر را در Astro رندر کنید Add Image block and render Image component in Astro

• محتوای باقیمانده صفحه اصلی و اصلاحات سبک کوچک را اضافه کنید Add remaining homepage content and small styling fixes

• بلوک مورد سفارشی Tick Item را در وردپرس ایجاد کنید Create custom Tick Item block in WordPress

• بلوک Tick Item را تمام کنید Finish the Tick Item block

• بلوک Tick Item را در Astro رندر کنید Render the Tick Item block in Astro

• پاورقی جهانی در وردپرس ایجاد کنید Create the global footer in WordPress

• پاورقی جهانی را در Astro رندر کنید Render the global footer in Astro

صفحات ملک را بسازید Build out the property pages

• نوع پست سفارشی و فیلدهای سفارشی جزئیات دارایی را ایجاد کنید Create Property custom post type and property details custom fields

• بیشتر از صفحه دارایی در وردپرس بسازید Build out more of the property page in WordPress

• بلوک سفارشی Property Details را در وردپرس ایجاد کنید Create custom Property Details block in WordPress

• رندر بلوک جزئیات ملک در Astro Render property details block in Astro

• ویژگی های بیشتری را در وردپرس اضافه کنید Add more properties in WordPress

• بلوک سفارشی Property Search را در وردپرس ایجاد کنید Create Property Search custom block in WordPress

• فیلترهای جستجوی ملک را در Astro رندر کنید Render the property search filters in Astro

• SSR را در Astro راه اندازی کنید Set up SSR in Astro

• صفحه خرید/تمام خواص را به عنوان SSR ارائه دهید Render the buying/all-properties page as SSR

• نقطه پایانی فایل استاتیک برای صفحه خرید/همه خواص ایجاد کنید Generate static file endpoint for buying/all-properties page

• پرس و جو برای نقطه پایانی فایل استاتیک در یک صفحه SSR Query for the static file endpoint in an SSR page

• صفحه 404 را اصلاح کنید Fix 404 page

• رشته پرس و جو url را به فرم جستجو متصل کنید Hook up the url query string to the search form

• ایجاد نقطه پایانی ثابت برای ویژگی ها Generate static endpoint for properties

• رندر خواص در جستجوی اموال Render properties in property search

• خواص را بر اساس فیلترهای جستجو فیلتر کنید Filter the properties based on search filters

• پیاده سازی صفحه بندی برای جستجوی اموال Implement pagination for the property search

• یک ظاهر طراحی برای شماره صفحه در Astro اضافه کنید Add styling for the page numbers in Astro

• اجرای View Transitions API Implement View Transitions API

فرم تماس را بسازید Build out the contact form

• فرم تماس را در وردپرس ایجاد کنید و در صفحه تماس رندر کنید Create the contact form in WordPress and render on contact page

• فرم تماس را در Astro به عنوان یک جزء React رندر کنید Render the contact form in Astro as a React component

مستقر کنید Deploy

• استقرار سایت وردپرس محلی برای میزبانی Flywheel Deploy local WordPress site to Flywheel hosting

• پروژه Astro را در مخزن github آپلود کنید Upload Astro project to github repo

• پروژه Astro را در Vercel مستقر کنید Deploy Astro project to Vercel

• هر زمان که داده های وردپرس تغییر کرد، بازسازی های خودکار سایت Astro را تنظیم کنید Set up automatic rebuilds of Astro site anytime WordPress data changes

موارد اضافی Extras

• رندر لوگوی سایت برای فاویکون در پروژه Astro Render site logo for the favicon in the Astro project

• عملکرد منوی موبایل را با کامپوننت React پیاده سازی کنید (قسمت 1) Implement the mobile menu functionality with a React component (part 1)

• عملکرد منوی موبایل را با کامپوننت React پیاده سازی کنید (قسمت 2) Implement the mobile menu functionality with a React component (part 2)

• بهبود امتیاز سرعت صفحه گوگل (قسمت 1) Improve google page speed score (part 1)

• بهبود امتیاز سرعت صفحه گوگل (قسمت 2) Improve google page speed score (part 2)

• جایزه! BONUS!