آموزش پلاگین گوتنبرگ + معرفی

با انتشار ورژن ۵ وردپرس ویرایشگر این سیستم مدیریت محتوا از نسخه کلاسیک که بر پایه‌ی Tinymce بود به نسخه جدید گوتنبرگ ارتقا یافته که حسابی ظاهر آن عوض شده است. و همین باعث شد نیاز به آموزش گوتنبرگ در بین وبمستران به وجود آید.این ویرایشگر که با نام ویرایشگر بلوک یا ویرایشگر بلاک وردپرس نیز شناخته می‌شود به شما این امکان را خواهد داد که به شکل بسیار ساده‌تر، سریع‌تر و هوشمندانه‌تر به تولید و انتشار محتوا بپردازید.

ویرایشگر گوتنبرگ ویرایشگر جدید وردپرس است که بر پایه block ایجاد شده است. یعنی شما برای انواع فرمت مختلفی از محتوا که می‌تواند شامل پاراگراف‌ها، تصاویر، لیست‌ها، دکمه‌ها و… باشد با بلوک سر و کار دارید. این ویرایشگر جدید کارها را ساده‌تر کرده تا بی نیاز از افزونه‌های مختلف باشید. به عنوان نمونه در نسخه کلاسیک شما به ابزاری برای قرار دادن دکمه دسترسی نداشتید؛ این ویژگی بستگی به قالب شما داشت که اگر قالب هم فاقد دکمه بود، باید از افزونه‌ها کمک می‌گرفتید. اما در این ویرایشگر امکان استفاده از دکمه‌ها در خود وردپرس ایجاد شده است.

در ادامه می‌خواهیم به بررسی کاملی از ویرایشگر گوتنبرگ پرداخته و ببینیم که این ویرایشگر جدید قرار است چه نیازهایی را از وردپرس پوشش داده و چه آینده‌ای برای وردپرس رقم خواهد زد.

از کجا آمده‌ام، آمدنم بهر چه بود؟

به جرأت می‌توانم بگویم که ویرایشگر جدید وردپرس که در نسخه ۵ ظهور کرد، عظیم‌ترین تغییر و تحول را در این سیستم مدیریت محتوا رقم زده است. این تازه شروع ماجراست و در طول این یک سال که از انتشار این نسخه گذشته شاهد تغییرات ریز و درشتی بودیم که استفاده از وردپرس را برای تولید محتوا آسان‌تر کرده است.


شاید بپرسید که چرا اصلا نام این ویرایشگر «گوتنبرگ» انتخاب شده است؟

تاریخچه انتخاب این نام به فردی با نام «یوهانس گوتنبرگ» برمی گردد. وی که حدودا در سال ۱۳۹۸ میلادی در خانواده‌ای ادبی چشم به جهان گشود(حالا ما اطلاعی از مذهبی یا نامذهبی بودن آن نداریم)، مخترع اولین ماشین چاپ است که حسابی صنعت چاپ را دگرگون کرده است.
وردپرس هم شاید برای همین منظور استفاده از این ویرایشگر را در دستور کار قرار داده تا به استناد از همین نام تغییر و تحولی اساسی در صنعت تولید محتوا، البته از نوع دیجیتال ایجاد کند.

گوتنبرگ چیست؟
گوتنبرگ چیست؟

گوتنبرگ چیست؟

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

در ویرایشگر کلاسیک امکان قرار دادن عنوان دلخواه در روی تصاویر وجود نداشتن تا بتوانید روی یک تصویر متنی را قرار دهید؛ اما این ویرایشگر چنین امکاناتی را بدون نیاز به اینکه افزونه‌ی خاصی نصب کنید فراهم کرده است.
کار با گوتنبرگ بسیار ساده است. همین که در چند محتوای اول با آن کار کنید و دست شما راه بیفتد، دوست دارید همیشه با آن کار کنید و بنویسید.

آموزش نصب و استفاده از گوتنبرگ (Gutenberg)

برای استفاده از گوتنبرگ کافی است جدیدترین نسخه وردپرس را نصب داشته باشید. بهتر بخواهم بگویم نسخه‌های بعد از ۵ وردپرس مدنظر است. اما اگر می‌خواهید در نسخه پایین‌تر هم بتوانید از آن استفاده کنید می‌توانید از افزونه Gutenberg کمک بگیرید که در ادامه آن را معرفی خواهم کرد.

نصب گوتنبرگ
پلاگین گوتنبرگ

شما می‌توانید بدون نیاز به اینکه افزونه را نصب کرده یا وردپرس خود را آپدیت کنید به این ویرایشگر دسترسی داشته باشید تا دموی آن را ببینید. کافی است به صفحه https://wordpress.org/gutenberg/ در سایت وردپرس مراجعه کرده و به صورت زنده با این ویرایشگر کار کنید.

wordpress.org/gutenberg

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


چرا از گوتنبرگ استفاده کنیم؟


اینکه حتما از گوتنبرگ باید استفاده کنید در کوتاه مدت ضرورتی ندارد. اما اگر به دید بلند مدت بخواهیم به این قضیه نگاه کنیم پاسخ «بله» است.

طی برنامه ریزی که وردپرس برای این ویرایشگر در نظر گرفته و از همان ابتدا هم اطلاع رسانی شده، استفاده از ویرایشگر کلاسیک تا سال ۲۰۲۱ فراهم خواهد بود. یعنی ما کمتر از ۱۱ ماه دیگر می‌توانیم به ویرایشگر قدیمی و کلاسیک وردپرس دسترسی داشته باشیم.

بعد از این تاریخ این ویرایشگر که درواقع همان tinymce است از بسته وردپرس حذف خواهد شد. که در این صورت شاهد افزونه‌هایی برای استفاده از این ویرایشگر هستیم که لازم است خود این ویرایشگر را در خود به همراه داشته باشند.

همینطور که می‌نویسید، به صورت زنده تغییرات را ببینید.

همانطور که در نسخه دمو آنلاین گوتنبرگ دیدید، در حین نوشتن می‌توانید پیش نمایش محتوا را در همان صفحه ببینید. مثل گذشته دیگر نیازی نیست که محتوا را به صورت پیش نویس ذخیره کرده و سپس در قالب سایت ببینید که ساختارهایی مثل دکمه یا باکس که در صفحه استفاده کردید چطور نمایش داده می‌شوند.

همه چیز به صورت زنده در دسترس است. حتی می‌توانید بر اساس سایز نمایشگر در سه حالت دسکتاپ، تبلت و موبایل ببینید که محتوای هر بلاک به چه شکلی نمایش داده می‌شود.

مزایای استفاده از گوتنبرگ کدامند؟

استفاده از گوتنبرگ شما را بی نیاز از افزونه‌های جانبی و مختلف وردپرس خواهد کرد که اتفاقا می‌توانید به خوبی هم روی بلاک‌ها مانور دهید. حتی اگر پیش از این با کدهای آماده از قبل المانی را در صفحات خود ایجاد می‌کردید، دیگر نیاز ندارید که کدها را که از قبل جایی ذخیره کردید کپی کرده و سپس آن را شخصی سازی کنید.

شما می‌توانید به کمک بلوک‌های قابل استفاده دوباره یک بلاک با کد و استایل دلخواه ایجاد کرده و خیلی سریع با زدن یک کاراکتر + یا / آن بلاک را یافته و از آن استفاده کنید.

در ادامه به معرفی انواع بلاک و تنظیماتی که برای این ویرایشگر در دسترس است می‌پردازیم.

آموزش ویرایشگر گوتنبرگ

در ادامه به آموزش ویرایشگر گوتنبرگ به صورت کامل می پردازیم. در هر مرحله از آموزش گوتنرگ به طور کامل یک بخش را آموزش می دهیم .

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

برای ساخت بلوک دلخواه در گوتنبرگ همانطور که گفتم کافی است روی آیکون + کلیک کنید یا اینکه کاراکتر / را وارد کرده و بر اساس نام بلوک‌ها(انگلیسی یا فارسی فرقی نمی‌کند) بلاک دلخواه خود را انتخاب کنید. زمانی که Enter زده و شروع به نوشتن کنید، به صورت پیشفرض بلوک «بند» استفاده خواهد شد که همان تگ‌های P در این بلاک برای نوشتن محتوای ما قرار دارند. هر یک از این بلوک‌های از نوع بند، یک پاراگراف را تشکیل خواهند داد.

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

حالا در ادامه می‌خواهیم یک محتوا با چندین بلاک مختلف را ایجاد کنیم که بیشتر مرسوم هستند. برای این کار بعدی از مقدمه چینی که برای بلاک قبلی(بلاک بند) داشتیم، حالا وقتش رسیده از یک بلاک Heading از نوع H2 استفاده کنیم.

ساخت بلوک دلخواه در گوتنبرگ

بنابراین روی + کلیک کرده یا اینکه بعد از زدن کاراکتر / بلوک «تیتر» را انتخاب می‌کنیم. حالا همانطور که می‌بینید هر بلوک در «منوی نوار ابزار بالا» دارای تنظیماتی است که امکان شخصی سازی‌هایی را به ما خواهد داد. از تغییرات رنگ گرفته تا امکان درج لینک، چینش محتوا، بولد کردن و… را می‌توانید به کمک منوی ابزار هر بلوک ایجاد کنید.

ساخت بلوک دلخواه در گوتنبرگ

قبل از اینکه به آموزش بخش‌های مختلف گوتنبرگ بپردازیم ، اجازه دهید نگاهی به امکانات و قابلیت‌هایی که«منوی نوار ابزار» در اختیار قرار می‌دهد بیندازیم و ببینیم که با کمک آن چه کارهایی می‌توان انجام داد.

بند در گوتنبرگ

آموزش تبدیل بلوک‌ها در گوتنبرگ

با کمک آیکن بوکمارک که در تصویر بالا مشخص شده می‌توانید بلوک‌ها را به بلوک دیگر تبدیل کنید. به عنوان مثال اگر بلاک تیتری دارید که حالا می‌خواهید آن را در قالب نقل قول استفاده کنید، نیازی نیست که آن را پاک کرده و محتوا را مجددا وارد کنید. کافی است بعد از کلیک روی آیکون بوکمارک مشابه تصویر بالا گزینه«گفتاورد» را انتخاب کنید تا بلاک به شکل زیر تغییر پیدا کند.

آموزش تبدیل بلوک در گوتنبرگ
تبدیل بلوک‌ها در گوتنبرگ

به همین ترتیب می‌توانید هر نوع بلوک را بر اساس ساختاری که داشته و با سایر بلوک‌ها در تضاد نیست، اقدام به تبدیل بلوک کنید.

تبدیل بلوک‌ها در گوتنبرگ

آموزش تغییر چیدمان بلوک‌ها در گوتنبرگ

یکی از مشکلاتی که در ویرایشگر کلاسیک هنگام ویرایش محتوا با آن درگیر هستیم تغییر جایگاه محتوا بود. مثلا اگر لازم بود یک پاراگراف را که در بخش اول محتواست تغییر داده و در انتها درج کنید، نیاز به این دارید که آن را به کمک دکمه‌های CTRL + X برش زده و سپس در بخش دلخواه PASTE کنید. شاید مسئله زیاد مهمی نباشد؛ اما وقتی از CSS سفارشی و کلاس استایل دلخواه برای یک بخشی استفاده می‌کردید اگر از حالت ویرایشگر متن استفاده نمی‌کردید همین جابجایی دچار مشکل می‌شد.

در این ویرایشگر دیگر خبری از این مشکلات نیست. کافی است مشابه تصویر بالا هر بلوکی که قصد تغییر جایگاه آن را دارید انتخاب کرده و به کمک دکمه‌های فلش بالا و پایین جایگاه آن را تغییر دهید.

ممکن است بگویید برای محتوای طولانی اینکه یکی یکی بلوک‌ها را طی کنیم تا به بخش دلخواه برسیم کاری اعصاب خورد کن است و وقت‌گیر. جای نگرانی نیست. شما می‌توانید با انتخاب بلوک و سپس زدن کلیدهای ترکیبی CTRL + X بلاک را برداشته و سپس با زدن دکمه‌های CTRL + V آن را در جایگاه دلخواه PASTE کنید.

تغییر چیدمان در گوتنبرگ
تغییر چیدمان بلوک‌ها در گوتنبرگ

تغییر چینش محتوا در ویرایشگر گوتنبرگ

این قسمت آموزش گوتنبرگ به چینش محتوا اختصاص می یابد. با انتخاب هر بلوک می‌توانید چینش محتوا را تغییر دهید. امکان چپ‌چین کردن، راست‌چین و وسط چین کردن محتوا به کمک این بخش قابل انجام است.

در صورتی که مایل به جاستیفای کردن هستید باید با تغییر در بلوک و ویرایش آن در حالت HTML این کار را انجام دهید که این بخش را در ادامه معرفی می‌کنم.

تغییر چینش محتوا در ویرایشگر گوتنبرگ

تغییر چینش محتوا بر اساس زبان

در حالت قبلی شما چینش محتوا را مشخص می‌کردید. اما گاهی لازم است تا چینش را بر اساس زبان انتخاب کنید. در این صورت می‌توانید با کلیک روی دکمه مشخص شده چینش را از حالت راست به چپ، به حالت چپ به راست تغییر داده یا اینکه عکس آن را انجام دهید.

این ویژگی برای زبان‌های چپ به راست در زبان فارسی مناسب است. البته نکته‌ای که باید به آن توجه کنید این است که به استایلی که برای نمایش در قالب مشخص شده وابسته است.

تغییر چینش محتوا بر اساس زبان

بولد کردن، کج کردن و لینک‌دار کردن متن در گوتنبرگ

به کمک نشانگر ماوس می‌توانید بخشی از محتوا را انتخاب کرده و از خاصیت بولد کردن، کج کردن یا درج لینک استفاده کنید.
از آنجایی که این ویرایشگر با افزونه‌های مختلفی سازگار شده این امکان نیز فراهم شده تا مثلا برای لینک‌ها بتوانید از خاصیت‌های nofollow، sponsored و… استفاده کنید.

آموزش بولد کردن در گوتنبرگ
بولد کردن، کج کردن و لینک‌دار کردن متن در گوتنبرگ

تغییرات بیشتر

موارد قبلی پرکاربردترین چیزهایی هستند که استفاده می‌شوند. اما ساختارهای دیگری هم وجود دارند که به کمک آنها می‌توانید محتوا را بهتر کرده و مطابق با سلیقه خود از آنها استفاده کنید. برای این مورد کافی است مشابه تصویر بالا پس از انتخاب بخش دلخواه یا بلوک مورد نظر روی آیکون«فلش پایین» کلیک کنید تا کادر گزینه‌ها نمایش داده شود.
⦁ بالانویس: از این حالت می‌توانید برای درج متنی در بالای متن دیگر استفاده کنید. به عنوان نمونه می‌توانید عبارت«لورم ایپسوم فارسی» را به این شکل بنویسید که فارسی با فاصله بالاتری درج خواهد شد.
⦁ تصویر توکار: با این گزینه می‌توانید یک عکس را در داخل بلاک قرار دهید. شاید بخواهید مثلا یک پاراگراف داشته باشید که به صورت باکس رنگی بوده و یک تصویر هم در سمت چپ یا راست نمایش داده شود که در این حالت تصویر استفاده شده باید به صورت توکار انتخاب شود که در بلوک قرار گرفته است.
⦁ خط خوردن: با این گزینه مثل خاصیت بولد کردن می‌توانید یک متن را به صورت خط خورده مانند«لورم ایپسوم فارسی» انتخاب کنید.
⦁ رنگ متن: اگر مایل هستید رنگ چند کلمه را در یک بلوک تغییر دهید می‌توانید از این گزینه کمک بگیرید. اما اگر مایل هستید رنگ متن کل یک بلوک را تغییر دهید از ابزار دیگری استفاده کنید که در ادامه آن را معرفی خواهم کرد.
⦁ زیر نویس: حالت عکس بالا نویس را دارد. از این حالت می‌توانید برای درج متنی در پایین متن دیگر استفاده کنید. به عنوان نمونه می‌توانید عبارت«لورم ایپسوم فارسی» را به این شکل بنویسید که فارسی با فاصله پایین‌تری درج خواهد شد.
⦁ کد درون خطی: گاهی اوقات محتوای شما طوری است که شاید بخواهید کدهای برنامه نویسی یا دستورالعمل‌هایی که مخصوص آموزش برنامه هستند را به صورتی که پس زمینه خاکستری دارند بنویسید. در این حالت می‌توانید از این گزینه استفاده کنید.

تغییرات بیشتر

نمونه‌ای از موارد بالا را در تصویر مشاهده می‌کنید.

آموزش کار با گوتنبرگ با هر دستگاهی

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

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

کار با گوتنبرگ با هر دستگاهی

می‌توانید در همان لحظه که در حال نوشتن هستید، محتوا را در دستگاه‌های مختلف ببینید که چگونه نمایش داده می‌شود. کافی است از دکمه‌ی پیش‌نمایش مثل تصویر بالا، یکی از دستگاه‌ها را انتخاب کنید.

با کمترین افزونه بیشترین بهره‌وری را داشته باشید

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

  • مثال اول: استفاده از دکمه در نوشته‌ها

اگر قرار باشد در نوشته خود از دکمه‌ای برای قرار دادن لینک دانلود یا لینک به صفحات دیگر استفاده کنید، در ویرایشگر کلاسیک خبری از این قابلیت نیست. یا باید دست به کد شده و به کمک CSS به تگ‌های a استایل دهید یا اینکه از افزونه و ویژگی قالب برای این کار استفاده کنید.

استفاده از دکمه در نوشته‌های گوتنبرگ

اما در ویرایشگر جدید بلوکی برای قرار دادن دکمه وجود دارد که امکان تغییر رنگ، نوع دکمه و قابلیت‌های متنوع دیگر را به شما خواهد داد. کافی است مشابه تصویر بالا بعد از زدن دکمه + یا وارد کردن کاراکتر / به دنبال بلوک«دکمه» یا«button» باشید.

استفاده از دکمه در نوشته‌های گوتنبرگ

حالا همانطور که می‌بینید می‌توانید از قابلیت های مختلفی مثل استایل دکمه(پر بودن دکمه یا پر شدن با هاور کردن)، تغییر رنگ عنوان، تغییر رنگ دکمه بر اساس تک رنگ یا رنگ گرادیانت، امکان انتخاب گردی دور دکمه و خاصیت‌های لینک استفاده کنید.

استفاده از دکمه در نوشته‌های گوتنبرگ

علاوه بر این موارد امکان استفاده از چند دکمه در کنار هم نیز وجود دارد. البته یک بدی که فعلا در استفاده در دکمه وجود دارد عدم انتخاب چینش دکمه است که نمی‌توان تغیین کرد در وسط صفحه نمایش داده شود یا اینکه امکان تغییر اندازه آن هم فراهم نیست. نگران این مسئله نباشید، این موارد در آپدیت‌های بعدی ویرایشگر گوتنبرگ اضافه خواهند شد.

  • مثال دوم: درج جدول در وردپرس

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

برای استفاده از جدول کافی است بلوک«جدول» یا«table» را درست مشابه مثال قبلی با زدن آیکون + یا جستجو کرده به کمک کاراکتر / انتخاب کنید.

درج جدول در وردپرس با گوتنبرگ

بعد از انتخاب بلوک باید تعداد ردیف و ستون را مطابق تصویر زیر انتخاب کرده و در نهایت روی دکمه‌ی«ایجاد جدول» کلیک کنید.

درج جدول در وردپرس با گوتنبرگ

در این صورت جدول مشابه تصویر زیر به ویرایشگر اضافه می‌شود که می‌توانید داده‌ها و اطلاعات را مانند نمونه وارد کنید. امکانات مختلفی هم برای جدول در نظر گرفته شده تا بتوانید از چیزهایی مثل سربرگ، تغییر رنگ، چینش محتوا، افزودن یا حذف ردیف و ستون و موارد دیگری که برای استفاده از یک جدول کاربردی در وردپرس نیاز دارید.

درج جدول در وردپرس با گوتنبرگ

قطعا موارد دیگری هم برای جدول نیاز است که از جمله‌ی آنها می‌توان به قابلیت فیلترگذاری برای مرتب سازی اشاره کرد که فعلا در گوتنبرگ تعبیه نشده، اما می‌توان شاهد آن نیز بود. یعنی وقتی روی یک ستون کلیک شد بر اساس ترتیبی که دارد داده‌های جدول نمایش داده شود.

مثلا فرض کنید رتبه دانش آموزان را در جدول قرار می‌دهید و می‌خواهید کاری کنید که حس رقابت در دانش آموزان ایجاد شود. در این صورت می‌توان جدول را طوری مرتب کرد که با انتخاب ستون نمرات، بر اساس بیشترین یا کمترین مرتب شده و ببینیم که کدام یک از دانش آموزان نمرات بالاتری دریافت کرده‌اند.

استفاده از کد های دلخواه

در این قسمت از آموزش گوتنبرگ به استفاده از کد های داخواه در وردپرس می پردازیم. فرض کنیم که شما یک سری کد سفارشی دارید که در نوشته‌های خود از آن استفاده می‌کنید. به عنوان مثال در اینجا من دکمه‌ای را با کدهای CSS درون خود نوشته تعریف کرده بودم تا در صفحات amp دکمه نیز نمایش داده شود.

نیازی نبود که هر بار کد استایل یک دکمه را بنویسم. کافی است یک بار یک بلاک را طبق تصویر زیر بر اساس کد نویسی ایجاد کنم. همانطور که می‌بینید کدهای دلخواه در اینجا مشخص شده هستند.

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

سپس برای اینکه این بلوک به بلوک سفارشی من تبدیل شده و در وردپرس اضافه شود، کافی است مشابه تصویر سه نقطه را انتخاب کرده و سپس گزینه‌ی«افزودن به بلوک‌های قابل استفاده دوباره» را انتخاب کنید.

استفاده از کد در گوتنبرگ
کد های دلخواه

بعد از انجام این کار مشابه تصویر زیر از شما خواسته می‌شود تا یک نام دلخواه برای آن انتخاب کنید. نام مدنظر خود را وارد کرده و روی دکمه‌ی ذخیره کلیک کنید.

در این صورت بلوک به لیست بلوک‌های سفارشی اضافه شده و مشابه تصویر زیر با زدن دکمه‌ی + یا استفاده از کاراکتر / و سپس وارد کردن نام انتخابی می‌بینید که بلوک به صورت آماده در دسترس قرار دارد. این کار سرعت نوشتن شما را برای مطالب بیشتر می‌کند که مجبور نباشید مدام از کدنویسی داخل محتوا استفاده کنید.

از تصاویر به صورت خلاقانه استفاده کنید

برای قرار دادن تصویر کافی بلوک«تصویر» یا«image» را مشابه تصویر زیر به ویرایشگر اضافه کرده و سپس با کشیدن عکس و رها کردن روی بلاک یا انتخاب از پرونده چندرسانه‌ای و وارد کردن آدرس، عکس دلخواه را در نوشته قرار دهید.

استفاده از تصاویر در گوتنبرگ

با کلیک روی آیکون«تغییر چینش» می‌توانید از ۵ حالت زیر برای قرار دادن تصاویر استفاده کنید.

  • چپ‌چین
  • وسط چین
  • راست چین
  • عرض گسترده
  • عرض کامل

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

با انتخاب این گزینه امکان این داده می‌شود تا بتوانید تصویر را به عنوان یک عکس پس زمینه انتخاب کرده و روی تصویر متن دلخواهی را با سایز دلخواه و موارد سفارشی دیگر نمایش دهید که در ویدئو زیر آن را برای شما تهیه کرده‌ام.

ویدئوی 2021-02-02_17-52-22

به همین ترتیب می‌توانید برای سایر بلوک‌ها هم تغییرات دلخواهی که وجود دارد را اعمال کنید.

سازگاری بیشتر با افزونه‌ها را تجربه کنید

این ویرایشگر با افزونه‌هایی که بیشترین استفاده را دارد سازگاری دارد. البته بهتر است بگوییم که افزونه‌هایی که اخیرا می‌بینیم هیچ تغییرات و امکاناتی نداشته‌اند، اما برای آنها آپدیت ارائه شده به این معنی است که اکثر آنها در حال هماهنگ شدن با گوتنبرگ هستند.

اگر بخواهیم چند نمونه از آنها را مثال بزنیم می‌توان به افزونه یوست سئو اشاره کرد. در حالی که شما از افزونه یوست سئو در ویرایشگر کلاسیک وردپرس استفاده کنید، روحتان هم شاید خبردار نباشد که قابلیتی در این ویرایشگر قرار گرفته شده تا بتوانید از FAQ rich snippet به کمک این افزونه استفاده کنید.

سازگاری بیشتر با افزونه‌ها

اما در حالتی که ویرایشگر شما گوتنبرگ باشد، بلاکی با نام FAQ یا پرسش و پاسخ یوست وجود دارد که به شما این امکان را می‌دهد داده‌های ریچ اسنیپت را برای سوالات متداول در صفحه خود اضافه کرده و طبیعتا در نتایج گوگل هم خواهید دید که نتایج صفحه مورد نظر در گوگل به صورت پرسش و پاسخ نمایش داده می‌شود.

افزونه‌های رایج دیگری هم با این پلاگین سازگاری دارند که می‌توان به مواردی مثلAdvanced Custom Fields یا CMB2 اشاره کرد که به صورت اختصاصی دارای جعبه‌های متا و همچنین بلوک سفارشی در وردپرس هستند. یعنی در صفحه ویرایش نوشته که قرار دارید، هم بلوک‌هایی توسط این افزونه‌ها به ویرایشگر گوتنبرگ اضافه می‌شود و هم اینکه در انتهای صفحه دارای جعبه متا برای مدیریت و استفاده از قابلیت‌های این افزونه دارید.

من نگویم که مرا از قفس آزاد کنید، قفسم برده به باغی و دلم شاد کنید

همانطور که در ابتدا عنوان کردم، ویرایشگر جدید وردپرس از نسخه ۵ به بعد در دسترس قرار گرفته و قرار است که تا انتهای سال ۲۰۲۱ با ویرایشگر قدیمی خداحافظی کنیم.

ممکن است شما هم مثل من چون از پست تایپ دلخواهی استفاده می‌کنید و هنوز حس و حال سازگار کردن قالب اختصاصی خود را با گوتنبرگ ندارید؛ یا به هر دلیلی استفاده از نسخه ۵ به بعد وردپرس را ندارید، تمایل به استفاده از این ویرایشگر جدید وردپرس داشته باشید.

ویرایشگر گوتنبرگ

استفاده از گوتنبرگ در وردپرس ورژن ۴

خوشبختانه قبل از اینکه گوتنبرگ در نسخه ۵ جای خوش کند، همان زمان که وردپرس در حال نزدیک‌تر شدن به انتشار ورژن ۵ بود، افزونه‌ای را با همین نام در مخزن وردپرس در دسترس قرار داد.

شما برای استفاده از ویرایشگر گوتنبرگ در وردپرس با نسخه پایین‌تر ضرورتی ندارید که حتما وردپرس خود را به جدیدترین ورژن آپدیت کنید. کافی است افزونه Gutenberg که در مخزن وردپرس قرار دارد را نصب کرده و از این ویرایشگر جدید لذت ببرید.

به کجا می‌روم آخر؟ ننمایی وطنم(!)

با همه تعریف‌هایی که کردیم باید حدس زده باشید که گوتنبرگ فعلا در آغاز راه بوده و قرار است تغییر و تحولی اساسی در وردپرس ایجاد کند. اجازه دهید کمی ساده‌تر مسئله را شرح دهم.

چرا آموزش گوتنبرگ اهمیت دارد ؟

اگر تجربه استفاده از افزونه‌های صفحه ساز مثل المنتور و ویژوال کامپوزر را دارید، می‌بینید که همه چیز ساده است. به سادگی می‌توانید با اضافه کردن بلاک‌ها صفحات را طراحی کرده و به آن استایل و چیدمان دلخواه خود را بدهید.

گوتنبرگ هم آغازی برای تبدیل شدن به چنین ابزاری است؛ که همین امر آموزش گوتنبرگ را بسیار حیاتی کرده است. گوتنبرگ چیزی فراتر و متفاوت‌تر از افزونه‌های صفحه ساز که به شما امکان می‌دهد روی محتوا و کلیه بخش‌های سایت خود به شکلی عالی کار کنید.

سکوی پرتاب برای برنامه نویس‌ها و توسعه دهنده‌های وردپرس

در خلق گوتنبرگ از کتابخانه‌های مختلفی همچون React استفاده شده و انواع کدهای جاوا اسکریپت در آن قرار گرفته تا ضمن سادگی و سهولت در استفاده، امکان استفاده از ابزار مختلف را در اختیار قرار دهد.

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

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

توسعه دهندگان نیز می‌توانند از انواع و اقسام کتابخانه های آماده یا اختصاصی در وردپرس استفاده کنند تا بلوک‌ای دلخواه و قابلیت‌هایی که برای هر افزونه و قالب در نظر دارند اضافه کنند. در واقع گوتنبرگ به سکویی پرتاب برای توسعه بهتر تبدیل شده است.

سوالات متداول

از آنجایی که اکثریت هنوز از ویرایشگر کلاسیک استفاده میکنند و استفاده از گوتنبرگ باعث به وجود امدن یک سری سوالات میشه، بخش سوالات متداول را ایجاد کردیم، اگر سوال دیگه بود کامنت بزارید که هم به جوابتون برسید و هم در لیست زیر اضافه بشه.

آیا بعد از آپدیت وردپرس به ورژن 5 امکان استفاده از ویرایشگر کلاسیک را داریم؟

بله، با نصب پلاگین ویرایشگر کلاسیک (classic editor) شما میتوانید از پلاگین قبلی وردپرس استفاده کنید.

ویرایشگر جدید وردپرس با برخی از قالب‌ها و افزونه‌ها سایت من تداخل دارد، چه کار کنم؟

گوتنبرگ هرروز درحال بروزرسانی است و با بیشتر افزونه‌ها و قالب وردپرس سازگار است، اما اگر شما همچنان قالب یا افزونه‌ای دارید که با این ویرایشگر سازگار نیست، بهتر است افزونه ویرایشگر کلاسیک را فعال کنید و از طراح آن افزونه بخواهید تا کدهای خود را بروزرسانی کند.

آیا با تغییر ویرایشگر کلاسیک به گوتنبرگ یا باالعکس، مشکلی برای نوشته‌ها رخ می‌دهد؟

خیر. شما با تغییر دادن ویرایشگر کلاسیک به گوتنبرگ با همان فرمتی که نوشته‌ها را داشتید، و در همان ظاهری که برای قالبتان وجود دارد حفظ می‌کنید. هنگامی که به صفحه ویرایش نوشته‌ای که با ویرایشگر کلاسیک مراجعه کنید یک بلوک کلی به نام بلوک «کلاسیک» در نوشته وجود دارد که محتوا درون آن قرار دارد.
کافی است روی دکمه‌ی «سه نقطه» برای این بلوک کلیک کرده و گزینه‌ی «تبدیل به بلوک» را انتخاب کنید. در این صورت کل محتوا بر اساس ساختاری که دارد تغییر یافته و انواع بلوک متن، هدینگ، تصویر، نقل قول و هر نوع تگی که در آن استفاده شده باشد در قالب بلوک‌های جدا دسته‌بندی می‌شود.
با برگشتن به ویرایشگر کلاسیک نیز اتفاق خاصی رخ نداده و محتوا به همان ترتیبی که در ویرایشگر کلاسیک وجود داشته قابل ویرایش و شخصی سازی است.

آیا ویرایشگر گوتنبرگ جایگزینی برای صفحه سازها نیست؟

در نقشه راهی که توسط وردپرس برای این ویرایشگر مشخص شده، قرار است از این ویرایشگر بتوان در بخش‌های مختلف وردپرس مثل منوها، ابزارک‌ها و پست تایپ‌های سفارشی استفاده کرد. جدایی از این در آپدیت‌های اخیری که داشته قابلیت‌هایی به آن اضافه شده که احتمال اینکه جایگزینی برای صفحه سازها باشد را بالا برده است.
برخی توسعه دهندگان نیز افزونه‌هایی را برای گوتنبرگ ارائه کرده‌اند که امکان استفاده از باکس و المان‌های دیگری را می‌دهد. چنین چیزی نوید این را می‌دهد که این انتظار را از وردپرس داشته باشیم.

هنگام ویرایش نوشته در گوتنبرگ گاها با خطاهایی مواجه می‌شوم، چه کار کنم؟

گوتنبرگ هر روز در حال آپدیت شدن است. این مشکل می‌تواند از هاست، تداخل افزونه، تداخل قالب یا حتی اتصال اینترنت شما نیز باشد. به عنوان مثال شخصا در طول یک سال مشکلی که با گوتنبرگ داشتم این بود که هنگام کلیک روی دکمه‌ی آپدیت یا انتشار نوشته، پیغام قرمز رنگی با عنوان «شما آفلاین هستید» نمایش داده میشد.
بعد از ریست کردن مودم دیگر این مشکل را ندیدم. البته لازم به ذکر است که هنگام استفاده از vpn این مشکل اصلا رخ نمیداد و ظاهرا فقط با ip ایران این مشکل را داشتم. این مدل مشکلات عجیب بوده و شاید یک در هزار مورد رخ دهد. بنابراین زیاد لازم نیست نگران خطایابی و رفع مشکلات احتمالی باشید.

ویرایشگر گوتنبرگ را دوست ندارم، چه کار کنم؟

جای نگرانی از این نظر وجود ندارد. شما می‌توانید با نصب افزونه‌های متعددی که امکان غیرفعال کردن گوتنبرگ را ارند و ویرایشگر کلاسیک را در اختیارتان قرار می‌دهند، از همان ویرایشگر قدیمی وردپرس استفاده کنید.
اما این نکته را باید در نظر بگیرید که وردپرس صرفا تا دسامبر سال 2021 این اجازه را داده که بتوان از ویرایشگر کلاسیک استفاده کرد. بعد از آن مشخص نیست که ویرایشگر کلاسیک در هسته وجود داشته باشد یا نه. البته جای نگرانی نیست، چون انعطاف بالای وردپرس این امکان را فراهم کرده که بتوانید به راحتی هر ویرایشگر دلخواهی را به صورت افزونه استفاده کنید.

گوگل اسلاید: اسلاید ویرایشگر گوتنبرگ در وردپرس، انقلابی در سایت های وردپرسی

منبع: https://wordpress.org/gutenberg

بدون دیدگاه برای آموزش پلاگین گوتنبرگ + معرفی

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *