آموزش Gatsby JS v5 & Headless WordPress (Gatsby & WordPress 2023)

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

معرفی Introduction

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

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

• مقدمه دوره Course intro

• مقدمه دوره Course intro

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

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

• Gatsby JS، نمای کلی پروژه و اولین پرس و جو را برای وردپرس تنظیم کنید Set up Gatsby JS, project overview, and first query for WordPress

• Gatsby JS، نمای کلی پروژه و اولین پرس و جو را برای وردپرس تنظیم کنید Set up Gatsby JS, project overview, and first query for WordPress

معرفی Introduction

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

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

ایجاد اولین صفحات ما Creating our first pages

• ایجاد صفحات در گتسبی بر اساس صفحات ذخیره شده در وردپرس Create pages in Gatsby based on pages stored in WordPress

• ایجاد صفحات در گتسبی بر اساس صفحات ذخیره شده در وردپرس Create pages in Gatsby based on pages stored in WordPress

• بلوک های گوتنبرگ وردپرس را در گتسبی رندر کنید Render WordPress gutenberg blocks in Gatsby

• اضافه کردن بلوک های بیشتر به صفحه اصلی Adding more blocks to the homepage

ایجاد اولین صفحات ما Creating our first pages

• بلوک های گوتنبرگ وردپرس را در گتسبی رندر کنید Render WordPress gutenberg blocks in Gatsby

• اضافه کردن بلوک های بیشتر به صفحه اصلی Adding more blocks to the homepage

رندر بلوک پیشرفته Advanced block rendering

• یک جزء سفارشی برای یک بلوک وردپرس خاص ارائه دهید Render a custom component for a particular WordPress block

• یک جزء سفارشی برای یک بلوک وردپرس خاص ارائه دهید Render a custom component for a particular WordPress block

• استفاده از تصویر گتسبی Using Gatsby Image

• استفاده از تصویر گتسبی Using Gatsby Image

• مرتب کردن رندر بلوک های سفارشی Tidying up the rendering of custom blocks

• مرتب کردن رندر بلوک های سفارشی Tidying up the rendering of custom blocks

• رندر کردن پیوندها با Gatsby Link API Rendering links with the Gatsby Link API

رندر بلوک پیشرفته Advanced block rendering

• رندر کردن پیوندها با Gatsby Link API Rendering links with the Gatsby Link API

ساخت منوی اصلی Building the main menu

• ایجاد صفحه گزینه های منوی اصلی در وردپرس Creating the Main menu options page in WordPress

• ایجاد فیلدهای منوی اصلی Creating the fields for the main menu

• تمام صفحات لازم را برای منوی اصلی اضافه کنید و محتوای صفحه را با استفاده از ChatGPT تولید کنید Add all necessary pages for the main menu & generate page content using ChatGPT

• تمام صفحات لازم را برای منوی اصلی اضافه کنید و محتوای صفحه را با استفاده از ChatGPT تولید کنید Add all necessary pages for the main menu & generate page content using ChatGPT

• منوی اصلی را از داخل گتسبی جستجو کنید و نوار ناوبری را بسازید Query the main menu from within Gatsby & build out the navbar

• منوی اصلی را از داخل گتسبی جستجو کنید و نوار ناوبری را بسازید Query the main menu from within Gatsby & build out the navbar

• رندر آیتم های منو Render the menu items

• موارد زیر منو را رندر کنید Render the sub menu items

• موارد زیر منو را رندر کنید Render the sub menu items

• لوگو و دکمه Call To Action را رندر کنید Render the logo and the Call To Action button

• لوگو و دکمه Call To Action را رندر کنید Render the logo and the Call To Action button

ساخت منوی اصلی Building the main menu

• ایجاد صفحه گزینه های منوی اصلی در وردپرس Creating the Main menu options page in WordPress

• ایجاد فیلدهای منوی اصلی Creating the fields for the main menu

• رندر آیتم های منو Render the menu items

سفارشی سازی وردپرس Customizing WordPress

• اضافه کردن رنگ تم Adding theme colors

• افزودن خانواده فونت به وردپرس Adding font families to WordPress

• افزودن خانواده های فونت به سایت گتسبی Adding font families to the Gatsby site

• افزودن خانواده های فونت به سایت گتسبی Adding font families to the Gatsby site

• بلوک گوتنبرگ سفارشی دکمه CTA را در وردپرس ایجاد کنید Create the CTA Button custom gutenberg block in WordPress

• فیلدهای قابل ویرایش را اختصاص دهید و به بلوک دکمه CTA سفارشی استایل دهید Assign editable fields and style the custom CTA Button block

• مولفه CTA Button را در گتسبی برای بلوک CTA و پوشش به‌روزرسانی پیاده‌سازی کنید Implement the CTA Button component in Gatsby for the CTA block & update cover

• ساختن صفحه اصلی با بلوک های بیشتر وردپرس Building out the homepage with more WordPress blocks

• ساختن صفحه اصلی با بلوک های بیشتر وردپرس Building out the homepage with more WordPress blocks

• پیاده سازی Gatsby Image برای بلوک های تصویر و پوشش Implement Gatsby Image for Image & Cover blocks

• بلوک TickItem سفارشی و دسته بندی بلوک سفارشی در وردپرس ایجاد کنید Create custom TickItem block & custom block category in WordPress

• بلوک TickItem را در گتسبی رندر کنید و فاصله پیش‌فرض را بین بلوک‌های متن اضافه کنید Render the TickItem block in Gatsby & add default spacing between text blocks

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

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

سفارشی سازی وردپرس Customizing WordPress

• اضافه کردن رنگ تم Adding theme colors

• افزودن خانواده فونت به وردپرس Adding font families to WordPress

• بلوک گوتنبرگ سفارشی دکمه CTA را در وردپرس ایجاد کنید Create the CTA Button custom gutenberg block in WordPress

• فیلدهای قابل ویرایش را اختصاص دهید و به بلوک دکمه CTA سفارشی استایل دهید Assign editable fields and style the custom CTA Button block

• مولفه CTA Button را در گتسبی برای بلوک CTA و پوشش به‌روزرسانی پیاده‌سازی کنید Implement the CTA Button component in Gatsby for the CTA block & update cover

• پیاده سازی Gatsby Image برای بلوک های تصویر و پوشش Implement Gatsby Image for Image & Cover blocks

• بلوک TickItem سفارشی و دسته بندی بلوک سفارشی در وردپرس ایجاد کنید Create custom TickItem block & custom block category in WordPress

• بلوک TickItem را در گتسبی رندر کنید و فاصله پیش‌فرض را بین بلوک‌های متن اضافه کنید Render the TickItem block in Gatsby & add default spacing between text blocks

عملکرد صفحات خودرو Car pages functionality

• نوع پست سفارشی خودرو را با فیلدهای سفارشی ایجاد کنید Create car custom post type with custom fields

• صفحات ماشین را در وردپرس بسازید و صفحات مرتبط را در گتسبی ایجاد کنید Build out car pages in WordPress and generate the associated pages in Gatsby

• صفحات ماشین را در وردپرس بسازید و صفحات مرتبط را در گتسبی ایجاد کنید Build out car pages in WordPress and generate the associated pages in Gatsby

• بلوک سفارشی وردپرس Car Price را ایجاد کنید Create the Car Price custom WordPress block

• بلوک سفارشی وردپرس Car Price را ایجاد کنید Create the Car Price custom WordPress block

• اصلاح ویژگی‌های برگشتی یک بلوک از وردپرس و ارائه قیمت خودرو Modifying a block's returned attributes from WordPress & rendering the Car Price

• بلوک وردپرس سفارشی جستجوی خودرو را ایجاد کنید Create the car search custom WordPress block

• بلوک وردپرس سفارشی جستجوی خودرو را ایجاد کنید Create the car search custom WordPress block

• جستجوی ماشین را ایجاد کنید و نتایج را نمایش دهید Create the car search query and display the results

• طراحی نتایج جستجوی خودرو را به پایان برسانید Finish the car search results styling

• طراحی نتایج جستجوی خودرو را به پایان برسانید Finish the car search results styling

• جستجوی صفحه بندی نتایج جستجوی خودرو را ایجاد کنید Create the pagination query for the car search results

• دکمه های صفحه بندی و عملکرد URL را پیاده سازی کنید Implement the pagination buttons and URL functionality

• دکمه های صفحه بندی و عملکرد URL را پیاده سازی کنید Implement the pagination buttons and URL functionality

• UI فیلترهای جستجو را با عملکرد URL برای جستجوی خودرو پیاده کنید Implement search filters UI with URL functionality for the car search

• پرس و جو فیلترهای جستجو را پیاده سازی کنید Implement the search filters query

عملکرد صفحات خودرو Car pages functionality

• نوع پست سفارشی خودرو را با فیلدهای سفارشی ایجاد کنید Create car custom post type with custom fields

• اصلاح ویژگی‌های برگشتی یک بلوک از وردپرس و ارائه قیمت خودرو Modifying a block's returned attributes from WordPress & rendering the Car Price

• جستجوی ماشین را ایجاد کنید و نتایج را نمایش دهید Create the car search query and display the results

• جستجوی صفحه بندی نتایج جستجوی خودرو را ایجاد کنید Create the pagination query for the car search results

• UI فیلترهای جستجو را با عملکرد URL برای جستجوی خودرو پیاده کنید Implement search filters UI with URL functionality for the car search

• پرس و جو فیلترهای جستجو را پیاده سازی کنید Implement the search filters query

لمس های نهایی Final touches

• فرم ها را با فرم تماس 7 و فلامینگو پیاده کنید Implement forms with Contact Form 7 and Flamingo

• فرم ها را با فرم تماس 7 و فلامینگو پیاده کنید Implement forms with Contact Form 7 and Flamingo

• ارسال فرم تماس به وردپرس Post contact form submissions to WordPress

• جستجوهای صفحه سئو و گتسبی SEO & Gatsby page queries

• استقرار در گتسبی Cloud & Flywheel Deploying to Gatsby Cloud & Flywheel

• استقرار در گتسبی Cloud & Flywheel Deploying to Gatsby Cloud & Flywheel

• جایزه! BONUS!

• جایزه! BONUS!

لمس های نهایی Final touches

• ارسال فرم تماس به وردپرس Post contact form submissions to WordPress

• جستجوهای صفحه سئو و گتسبی SEO & Gatsby page queries