توضیحات

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

نام دوره : Gutenberg Blocks for WordPress and React Developers

پیش نیاز:

• شما بايد با مباني HTML، CSS (SASS)، جاوا اسکريپت و PHP آشنا باشيد.
• شما بايد با توسعه وردپرس آشنا باشيد.
• شما بايد با مفاهيم اوليه ReactJS آشنا باشيد.
• دانش Redux ارجحيت دارد
• هر ويرايشگر کدي که با آن راحت باشيد، من از VS Code در اين دوره استفاده خواهم کرد.
• سرور محلي مانند MAMP، WAMP، XAMPP، Laragon يا هر نرم افزار ديگري که با آن آشنا هستيد. من در طول اين دوره از MAMP استفاده خواهم کرد.
• NodeJS و NPM يا Yarn روي دستگاه شما نصب شده است.

توضیحات:

اخيرا وردپرس تصميم گرفت ويرايشگر قديمي WYSIWYG خود را به يک ويرايشگر بلوکي جديد مبتني بر ReactJS که به نام «گوتنبرگ» شناخته مي‌شود، تغيير دهد.

گوتنبرگ که به عنوان ويرايشگر بلوک نيز شناخته مي شود ، بر اساس بلوک ها ساخته شده است.

بنابراين پست شما از چند بلوک تشکيل شده و هر بلوک هدفي خواهد داشت. شما مي توانيد بلوکي داشته باشيد که يک دکمه يا يک تصوير يا مقداري متن و غيره را نمايش مي دهد.

در اين دوره شما هر آنچه را که براي ايجاد بلوک هاي سفارشي براي ويرايشگر بلاک نياز داريد، ياد خواهيد گرفت.

ما با يک بلوک ساده شروع مي کنيم و سپس چند بلوک پيچيده تر ايجاد مي کنيم.

براي اينکه بتوانيد بيشترين بهره را از اين دوره ببريد، بايد دانش توسعه تم/افزونه وردپرس را داشته باشيد.

دانش جاوا اسکريپت براي اين دوره مورد نياز است. شما بايد با مفاهيم پايه جاوا اسکريپت و ترجيحاً نسخه هاي اخير ES6+ آشنا باشيد.

دانش ReactJS نيز براي اين دوره مورد نياز است.

بنابراين مفاهيمي مانند حالت جزء، قلاب ها و مفاهيم اوليه واکنش نبايد براي شما تازگي داشته باشند.

همچنين مفاهيم پيشرفته مانند دانش مؤلفه هاي مرتبه بالاتر ايده آل خواهد بود، اما به طور خلاصه در دوره مورد بحث قرار خواهد گرفت.

دانش Redux نيز ايده آل است. همه بلوک ها نيازي به استفاده از redux ندارند، اما در برخي از بلوک ها به شدت از redux استفاده مي کنيم.

بنابراين اگر با مفاهيم redux مانند ، اکشن ها، کاهش دهنده ها و غيره آشنا باشيد ايده آل خواهد بود.

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

• ابتدا و قبل از هر کدنويسي، برخي از دستورالعمل هاي طراحي را که بايد هنگام طراحي يک بلوک رعايت کنيد، مورد بحث قرار مي دهيم.
• ما نگاهي خواهيم داشت به اينکه پست گوتنبرگ شما چگونه در پايگاه داده شما ذخيره مي شود و در پشت صحنه چه اتفاقي مي افتد تا UI مبتني بر ReactJS شما را از محتواي ذخيره شده در پايگاه داده بسازيم.
• در بخش 2 يک افزونه وردپرس ايجاد مي کنيم. در داخل اين افزونه، اولين بلوک گوتنبرگ را ثبت مي کنيم. همچنين از ابزاري به نام wp-scripts براي پردازش فايل‌هاي JS و CSS در اين افزونه استفاده خواهيم کرد. ما همچنين ابزارهايي مانند ESLint، Prettier، Stylelint و Husky را براي بهبود گردش کار توسعه يکپارچه خواهيم کرد.
• در بخش 3، نگاهي گذرا به مواردي خواهيم داشت که مي توانيد در قالب وردپرس خود انجام دهيد و به شما امکان مي دهد برخي از ويژگي ها را در ويرايشگر بلوک اصلاح يا اضافه کنيد.
• در بخش 4 يک بلوک ساده ايجاد مي کنيم. با اين حال، در اين بلوک ساده، چيزهاي زيادي در مورد کارهايي که مي توانيم در يک بلوک انجام دهيم، ياد خواهيم گرفت.
• در بخش 5 از دانش خود براي ايجاد يک بلوک پيچيده تر با برخي ويژگي هاي پيشرفته استفاده خواهيم کرد. اين ويژگي‌ها شامل نحوه اضافه کردن بلوک‌ها در بلوک‌هاي ديگر، نحوه مديريت تصاوير و بسياري موارد ديگر است.
• بخش 6 در مورد ايجاد بلوک هاي پويا خواهد بود. بنابراين بلوک ها مي توانند ثابت باشند يا به عبارت ديگر فقط مقداري HTML ايستا توليد کنند. اما همچنين مي توانند پويا باشند، به عنوان مثال مي توانند چيزي را از پايگاه داده دريافت کنند.
• بخش 7 اطلاعات بيشتري در مورد ذخيره‌هاي داده‌اي مانند redux در ويرايشگر بلوک پيدا مي‌کند. خواهيم ديد که چگونه از فروشگاه هاي داده موجود استفاده کنيم و همچنين فروشگاه خود را ايجاد کنيم.
• بخش 8 راه هاي مختلفي را مشاهده خواهيم کرد که مي توانيم براي مديريت ابرداده در گوتنبرگ دنبال کنيم. ما ابرداده ها را با استفاده از يک بلوک مديريت خواهيم کرد. و همچنين ياد خواهيم گرفت که چگونه يک افزونه نوار کناري سفارشي ايجاد کنيم و ابرداده ها را در اين نوار کناري مديريت کنيم.
• در بخش پاياني مي‌خواهيم موضوعات مختلفي مانند زمينه، الگوها، قالب‌ها، قالب‌بندي API، فيلترها و بين‌المللي‌سازي را مورد بحث قرار دهيم.

دوره آموزش ساخت بلوک های گوتنبرگ و افزونه های وردپرس با React براي چه کساني است:

• توسعه دهندگان تم/افزونه وردپرس که با ReactJS آشنا هستند و مي خواهند بلوک هاي گوتنبرگ را از ابتدا ايجاد کنند.
• هر کسي با تجربه وردپرس و ReactJS که مي خواهد همه چيز را در مورد ويرايشگر گوتنبرگ بداند.

بخشی از دوره :