آموزش Next JS & WordPress: ساخت سایت های NextJS سریع با Next & WP - آخرین آپدیت

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

معرفی و راه اندازی Introduction & Setup

• مهم: قبل از شروع این دوره این را بخوانید Important: Read this before you begin this course

• معرفی دوره و نسخه ی نمایشی سایت Course intro & site demo

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

• وردپرس را به صورت محلی تنظیم کنید و توضیح پلاگین Set up WordPress locally & plugin explanation

• با GraphQL، Next JS + first query را برای داده های وردپرس تنظیم کنید Set up Next JS + first query for WordPress data with GraphQL

ساخت صفحات اول Building the first pages

• ایجاد صفحه اصلی + پرس و جو برای بلوک های گوتنبرگ Create homepage + query for gutenberg blocks

• مؤلفه BlockRenderer را ایجاد کنید و داده های بلوک را پاک کنید Create the BlockRenderer component & clean block data

• کامپوننت جلد، سبک با Tailwind CSS، و رندر تصاویر با Next JS Image Cover component, style with Tailwind CSS, & render images with Next JS Image

• یک تم کودک وردپرس ایجاد کنید و فایل های تم را تغییر دهید Create a WordPress child theme & modify theme files

• جدید - ایجاد جزء عنوان، توابع util، گسترش tailwind، و بلوک داخلی NEW - Create heading component, util functions, extend tailwind, and inner block

• ایجاد صفحات اضافی و صفحات فرزند در وردپرس و مسیرهای پویا در Next JS Create additional pages & child pages in WordPress & dynamic routes in Next JS

• پرس و جو برای داده های صفحه با استفاده از GraphQL از اجزای صفحه و getStaticProps Query for page data using GraphQL from page components & getStaticProps

• مولفه پاراگراف را ایجاد کنید و تم وردپرس را بیشتر گسترش دهید Create Paragraph component & further extend WordPress theme

• کامپوننت پاراگراف پایان و تگ های لنگر نقشه برداری/پیوندهای داخلی Finish Paragraph component & mapping anchor tags / internal links

ایجاد منوی اصلی Creating the main menu

• صفحه گزینه های منوی اصلی را با ACF ایجاد کنید (قسمت 1) Create the Main Menu options page with ACF (part 1)

• صفحه گزینه های منوی اصلی را با ACF ایجاد کنید (قسمت 2) Create the Main Menu options page with ACF (part 2)

• داده های منو را در Next JS جستجو و پاک کنید Query and clean menu data in Next JS

• کامپوننت Menu را در Next JS ایجاد کنید Create the Menu component in Next JS

• جزء منو را تمام کنید Finish the Menu component

• دکمه CTA را در منوی اصلی اجرا کنید Implement the CTA button in Main Menu

• کامپوننت ButtonLink را ایجاد کنید و از دستور @apply Tailwind CSS استفاده کنید Create ButtonLink component & using the @apply Tailwind CSS directive

• اجزای صفحه Refactor Refactor Page components

بلوک های گوتنبرگ پیشرفته Advanced Gutenberg blocks

• بلوک سفارشی CTA را با بلوک های ACF ایجاد کنید Create the CTA custom block with ACF blocks

• فیلدها را به بلوک CTA اختصاص دهید و پیش نمایش بلوک را ایجاد کنید Assign fields to the CTA block and create block preview

• کامپوننت CTA را در Next JS ایجاد کنید Create the CTA component in Next JS

• پیاده سازی ستون ها با بلوک های گوتنبرگ Implement columns with Gutenberg blocks

• رندر کردن اجزای ستون در ستون ها + مدیریت بلوک های تصویر در Next JS Rendering Column components within Columns + handling Image blocks in Next JS

• بلوک های قابل استفاده مجدد Reusable blocks

صفحات اموال Property pages

• فیلدهای سفارشی برای صفحات دارایی ایجاد کنید Create custom fields for the property pages

• صفحات ویژگی را در Next JS ایجاد کنید Create the property pages in Next JS

• تصویر ویژه پست را به عنوان پس‌زمینه جلد و بلوک عنوان پست پیاده‌سازی کنید Implement post feaured image as Cover background & post title block

• بلوک سفارشی جستجوی ملک را ایجاد کنید Create the property search custom block

• مسیر API را برای جستجوی دارایی ایجاد کنید Create API route for property search

• ارائه نتایج جستجوی ملک Rendering property search results

• ایجاد رابط کاربری صفحه‌بندی Create pagination UI

• صفحه بندی را در جستجوی API مدیریت کنید Handle pagination in search API

• رابط کاربری فیلترهای جستجو را ایجاد کنید Create the search filters UI

• پیش نمایش پرس و جو و اضافه کردن وضعیت محلی برای فیلترهای جستجو Query preview & add local state for search filters

• پیاده سازی فیلترها در جستجوی API Implement filters in search API

• رفع: URL ها هنگام جستجو FIX: URLs when searching

اضافی Extra

• بلوک گوتنبرگ سفارشی فرم formspree را ایجاد کنید Create formspree form custom gutenberg block

• کامپوننت فرم formspree را در Next JS ایجاد کنید Create formspree form component in Next JS

• ایجاد ویژگی های دارایی بلوک گوتنبرگ Create property features gutenberg block

• مولفه ویژگی های ویژگی را در Next JS ایجاد کنید Create property features component in Next JS

• سئو SEO

• بلوک گوتنبرگ گالری تصاویر را پیاده سازی کنید Implement the image gallery gutenberg block

• کامپوننت Gallery را در Next JS ایجاد کنید Create the Gallery component in Next JS

• پس زمینه و رنگ متن را به بلوک ستون در وردپرس اضافه کنید Add background and text color to Column block in WordPress

• جزء Refactor Column در Next JS برای پذیرش رنگ پس زمینه و متن Refactor Column component in Next JS to accept background and text color

• بلوک گوتنبرگ سفارشی تیک مورد را ایجاد کنید Create tick item custom gutenberg block

• رندر بلوک آیتم در Next (همچنین بلوک های داخلی را در بلوک های سفارشی پوشش می دهد) Render tick item block in Next (also covering inner blocks within custom blocks)

• پیاده سازی رنگ پس زمینه برای یک ستون Implement background color for a single column

به تولید مستقر شود Deploy to production

• کد را به github فشار دهید Push code to github

• رفع: تولید صفحه آماده استقرار زنده است FIX: page generation ready for deploying live

• برنامه WordPress و Next JS را به صورت زنده اجرا کنید Deploy WordPress & Next JS app live

• هنگامی که داده ها در وردپرس تغییر می کنند، به طور خودکار بازسازی شوند Automatically rebuild when data changes in WordPress

• جایزه! BONUS!