آموزش توسعه بلاک های گوتنبرگ وردپرس با React JS و PHP

ساخت کتابخانه بلاک گوتنبرگ وردپرس سفارشی با ReactJS و PHP

تسلط بر توسعه بلاک‌های گوتنبرگ وردپرس با React و PHP از طریق ساخت یک کتابخانه بلاک وردپرس کاملاً سفارشی.

در این دوره، ما "Blockylicious" را خواهیم ساخت - یک کتابخانه بلاک وردپرس کاملاً سفارشی که با استفاده از React و PHP ساخته شده است. در این دوره 5 بلاک سفارشی وردپرس مختلف خواهیم ساخت:

معرفی کتابخانه نهایی بلاک گوتنبرگ!

منحنی: قالب را با جداکننده‌های شکلی منحنی و زیبا بشکنید. جداسازی محتوای خود را با استایل بالا ببرید.
گالری تصویری و تصویر تصویری: گالری‌های تصویری تعاملی بسازید که بازدیدکنندگان سایت شما را درگیر و مسحور کند.
گروه کلیکی و دکمه کلیکی: بازی فراخوان به اقدام خود را با گروه‌های دکمه پویا که مستقیماً به صفحات خاص لینک می‌شوند، نه فقط URLها، ارتقا دهید.

آنچه یاد خواهید گرفت:

React در وردپرس: ادغام معماری مبتنی بر کامپوننت React را در ویرایشگر گوتنبرگ برای ایجاد بلاک‌های بدون درز درک کنید.
بلاک‌های استاتیک در مقابل دینامیک: عمیقاً در تفاوت‌های ظریف کاوش کنید و درک کنید که چرا بلاک‌های دینامیک اغلب برنده می‌شوند.
ملزومات بلاک سفارشی: داده‌های بلاک سفارشی، پنل‌های جانبی، بازیابی داده‌های پست، نوارابزارهای سفارشی و استفاده از نوارابزارها و ویژگی‌های ذاتی وردپرس را بررسی کنید.
تنوعات بلاک: طرح‌های متنوعی مانند منحنی، بالای منحنی و پایین منحنی بسازید.
تبدیل بلاک: هنر تبدیل پاراگراف‌های متنی معمولی به بلاک‌های منحنی غنی از ویژگی را با استفاده از کامپوننت‌های React بیاموزید.
فراداده بلاک سفارشی: بلاک‌های خود را با آیکون‌ها، دسته‌ها و موارد دیگر شخصی‌سازی کنید.
رندر بلاک داخلی: به مکانیک رندر بلاک‌های داخلی به طور کارآمد با React بپردازید.
محدودیت بلاک: هنر تعریف اینکه کدام بلاک‌ها در کجا قرار می‌گیرند را بیاموزید، مانند اطمینان از اینکه بلاک‌های دکمه کلیکی منحصراً به عنوان فرزندان بلاک‌های گروه کلیکی عمل می‌کنند.
بلاک‌های تعاملی: از قدرت جاوا اسکریپت و React برای ایجاد بلاک‌های پویا که تعامل و پاسخ می‌دهند، استفاده کنید.
پیش‌نمایش بلاک: با استفاده از "example" در block.json، با پیش‌نمایش‌های بلاک به صورت عملی آشنا شوید.
تکنیک‌های استایل‌دهی: به استراتژی‌های مختلف برای استایل‌دهی بلاک از استایل‌شیت‌ها، ویژگی‌های block.json، تا عناصر theme.json بپردازید.

طرح‌ها و عملکردهای وردپرس خود را با استفاده از بلاک‌های گوتنبرگ سفارشی ساخته شده با React و PHP بهبود دهید. همین امروز ثبت نام کنید و آینده وب سایت‌های خود را شکل دهید!

آموزش توسعه بلاک های گوتنبرگ وردپرس با React JS و PHP - آخرین آپدیت

دانلود WordPress Gutenberg Block Development with React JS and PHP bestseller

ساخت کتابخانه بلاک گوتنبرگ وردپرس سفارشی با ReactJS و PHP

معرفی کتابخانه نهایی بلاک گوتنبرگ!

آنچه یاد خواهید گرفت:

مقدمه و تنظیم پروژه Introduction and project setup

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

مقدمه Introduction

امتیازها و نظرات Udemy Udemy ratings and reviews

محیط و تنظیم پروژه Environment and project setup

مهم! تغییر اساسی! IMPORTANT! BREAKING CHANGE!

بررسی اجمالی کد Codebase overview

به روز رسانی ساختار افزونه و فراداده Update the plugin structure and metadata

ایجاد بلوک منحنی Create the Curvy block

شروع پیاده سازی پنل کناری Start implementing the side panel

ساخت پنل کناری Build out the side panel

مقدمه ای بر ویژگی های بلوک Introduction to block attributes

پیاده سازی منحنی SVG بالایی Implement the top svg curve

فعال کردن ویژگی های داخلی با استفاده از "supports" Enable built-in attributes using "supports"

راه های مختلف برای اضافه کردن استایل های پیش فرض Different ways to add default styles

رفع استایل های بلوک منحنی Fix the curvy block styles

پیاده سازی کنترل های ارتفاع و عرض Implementing the height and width controls

استفاده از ویژگی های ارتفاع و عرض برای دستکاری شکل منحنی Use the height and width attributes to manipulate the curve shape

پیاده سازی کنترل های چرخاندن عمودی و افقی Implement the flip vertical and horizontal controls

استفاده از ویژگی های چرخاندن عمودی و افقی برای دستکاری شکل منحنی Use the flip vertical and horizontal attributes to manipulate the curve shape

استفاده از ColorPicker برای تنظیم رنگ برای منحنی SVG Use the ColorPicker to set a color for the svg curve

پیاده سازی تنظیمات منحنی پایینی Implement the bottom curve settings

اتصال SVG منحنی پایینی Hook up the bottom curve svg

مقدمه ای بر بلوک های داخلی Introduction to inner blocks

ایجاد نمای جلویی پویا برای بلوک منحنی Create dynamic front end view for curvy block

اضافه کردن استایل های اضافی و بلوک های داخلی به قسمت جلویی Add extra styles and inner blocks to front end

اضافه کردن منحنی بالایی به قسمت جلویی بلوک منحنی Add top curve to curvy block front end

اتمام نمای جلویی منحنی بالایی و اضافه کردن منحنی پایینی Finish top curve front end view and add bottom curve

سفارشی سازی های اضافی برای بلوک منحنی Extra customizations for the curvy block

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

اضافه کردن آیکون SVG سفارشی برای بلوک منحنی Add custom svg icon for the curvy block

تبدیل بلوک های پاراگراف و عنوان به بلوک منحنی Transform paragraph and heading blocks into a curvy block

ایجاد تغییرات بلوک برای بلوک منحنی Create block variations for the curvy block

ایجاد پیش نمایش بلوک برای بلوک منحنی Create block preview for the curvy block

ایجاد بلوک های کلیکی Create the Clicky blocks

دموی بلوک های کلیکی Clicky blocks demo

ایجاد بلوک گروه کلیکی Create the clicky group block

ایجاد بلوک دکمه کلیکی و محدود کردن انواع بلوک Create the clicky button block and restrict block types

ذخیره بلوک های داخلی گروه کلیکی Save clicky group inner blocks

اضافه کردن استایل و ویژگی به بلوک دکمه کلیکی Add styling and attributes to the clicky button block

اضافه کردن برچسب دکمه از طریق RichText به دکمه کلیکی Add button label via RichText to the clicky button

پیاده سازی فاصله بلوک برای گروه کلیکی Implement block gap for clicky group

پیاده سازی تراز محتوا برای گروه کلیکی Implement justify content for clicky group

اضافه کردن آیکون های سفارشی برای گروه کلیکی و دکمه کلیکی Add custom icons for clicky group and clicky button

بارگیری داده های نوع پست Load post type data

رندر کردن لیست کشویی نوع پست در نوار کناری Render post type dropdown in sidebar

بارگیری و رندر کردن داده های پست در نوار کناری Load and render posts data in sidebar

رندر کردن نمای پویا برای گروه کلیکی Render dynamic view for clicky group

رندر کردن نمای پویا برای دکمه کلیکی Render dynamic view for clicky button

بازسازی blockylicious.php Refactor blockylicious.php

ایجاد بلوک های تصویری Create the Piccy blocks

ایجاد و ثبت بلوک گالری تصویری جدید Create and register the new piccy gallery block

پیاده سازی دکمه نوار ابزار حالت ویرایش و پیش نمایش Implement edit & preview mode toolbar button

اضافه کردن استایل به حالت ویرایش و بلوک های داخلی Add styles to edit mode and inner blocks

اضافه کردن بلوک تصویر تصویری Add piccy image block

پیاده سازی آپلود و انتخاب رسانه تصویر تصویری Implement piccy image media upload & select

ذخیره یک تصویر به عنوان بخشی از تصویر تصویری Saving an image as part of the piccy image

اتمام استایل های حالت ویرایش تصویر تصویری Finish piccy image edit mode styles

پیاده سازی حالت پیش نمایش گالری تصویری Implement the piccy gallery preview mode

اضافه کردن استایل های تصویر بند انگشتی و تصویر پیش نمایش کامل Add the thumbnail styles and full preview image

اتمام استایل های حالت پیش نمایش گالری تصویری Finish the piccy gallery preview mode styles

اضافه کردن قسمت جلویی مشتری محور گالری تصویری Add the piccy gallery client facing front end

اضافه کردن پیش نمایش تصویر کامل گالری تصویری در قسمت جلویی Add the piccy gallery full image preview in the front end

رسیدگی به عدم تنظیم تصویر برای بلوک تصویر تصویری Cater for no image being set for the piccy image block

الگوهای بلوک و استایل های بلوک پیش فرض Block patterns and default block styles

الگوهای بلوک سفارشی Custom block patterns

استایل های بلوک پیش فرض از طریق theme.json Default block styles via theme.json

جلوه متن برجسته کم برای متن غنی Low-highlight text effect for rich text

تنظیم کد برای ثبت فرمت متن جدید Set up the codebase to register new text format

ثبت و اعمال فرمت متن جدید Register and apply the new text format

اضافه کردن و بارگیری CSS برای جلوه متن Adding and loading css for the text effect

اضافه کردن انتخابگر رنگ Add the color picker

ذخیره استایل ها و ویژگی های CSS برای جلوه متن Save the css styles and attributes for the text effect

اضافه کردن آیکون های مناسب برای جلوه برجسته کم Add the appropriate icons for the low highlight effect

اضافی Extra