مدت زمان زیادی از ارائه وردپرس گوتنبرگ به کاربران نمیگذرد، به همین دلیل مجاب شدیم تا در سون هاست مطلبی را برای آشنایی با قسمتهای مختلف ویرایشگر بلوک گوتنبرگ منتشر نماییم. در وردپرس ۵ ویرایشگر محتوای کلاسیک (Classic Content Editor) با ویرایشگر جدیدی به نام گوتنبرگ (Gutenberg) جایگزین شده است. یکی از مهمترین تغییراتی که کاربران وردپرس در نسخه جدید با آن روبرو شدهاند بلوکهای سفارشی گوتنبرگ است که ویژگیهای خاصی به آن بخشیده است. حال اگر وردپرس خود را به نسخه ۵ بروزرسانی نمودهاید یا قصد آن را دارید، کسب اطلاعات بیشتر در مورد ویرایشگر بلوک وردپرس به توسعه سایتتان کمک خواهد نمود.
ویرایشگر گوتنبرگ روشی کاملا جدید و متفاوت برای تولید محتواست و ابزارهای مختلفی را در اختیار شما قرار میدهد. در این آموزش به شما نشان میدهیم که چگونه از بلوکهای سفارشی گوتنبرگ، صفحات و محتواهای خیره کننده بسازید. پس با یکی دیگر از آموزشهای سون هاست همراه ما باشید! خب شاید سئوالات زیادی در مورد ویرایشگر گوتنبرگ درون ذهنتان نقش بسته باشد، اما جای نگرانی نیست زحمت پرسش و پاسخ تمام سئوالات با ما!
تفاوت بین ویرایشگر بلوک وردپرس گوتنبرگ (Gutenberg Editor) با ویرایشگر کلاسیک (Classic Editor) چیست؟
بد نیست ابتدا تفاوتهای آن دو را مقایسه کنیم، قبل از اینکه به دنیای گوتنبرگ وارد شویم! ظاهر ویرایشگر کلاسیک در تصویر زیر آورده شده است، تصویری که کم کم باید به فراموشی بسپارید:
ولی اگر سیستم مدیریت محتوا سایتتان را به وردپرس ۵ ارتقا دهید، همان تصویری را میبینید که ما از آن به عنوان ویرایشگر بلوک وردپرس گوتنبرگ نام میبریم:
همانطور که مشاهده میکنید با دو ویرایشگر کاملا متفاوت روبرو هستید، اما شما برای تولید محتوا کدامیک از این دو را انتخاب میکنید؟ نگرانی بابت عدم آشنایی با گوتنبرگ به دل راه ندهید، زیرا در ادامه به شرح راهنمای جامع ویرایشگر گوتنبرگ میپردازیم. قالب نسخه قدیمی ویرایشگر کلاسیک وردپرس شباهت زیادی با نرم افزار مایکروسافت ورد دارد و این تنها نکتهای است که شاید ما را در برابر تغییر مقاوم سازد. ولی اگر گوتنبرگ را بیشتر بشناسید شاید نظر متفاوتی داشته باشید، به هر حال انتخاب با شماست! وردپرس ۵ در بروزرسانی اخیر، ویرایشگر گوتنبرگ را با رویکردی جدید و تحول گستردهای به نام بلوک (Block) معرفی نمود.
اگر یک محتوا را در نظر بگیریم، هرکدام از بلوکها المانهای تشکیل دهنده آن خواهند بود. در واقع شما برای تولید هر محتوا یا ساخت صفحات، بلوکهای مختلف را از ویرایشگر گوتنبرگ اضافه مینمایید و محتوای مورد نظر خود را منتشر خواهید کرد. شما قادر هستید برای نوشتن پاراگراف، قراردادن عکس یا ویدیو، ساخت گالری، اضافه نمودن صوت، ایجاد لیست و موارد اینچنین از بلوک استفاده نمایید. تعداد زیادی بلوک که در کنار هم قرار گرفته و کل محتوا را تشکیل میدهند و علاوه بر آن میتوانند توسط افزونههای وردپرس اضافه شوند.
اما دلیل برتری ویرایشگر بلوک گوتنبرگ نسبت به ویرایشگر کلاسیک چیست؟
ویرایشگر بلوک گوتنبرگ راه سادهای برای اضافه نمودن عکس، متن، ویدیو، جدول و غیره برای تولید محتوا یا ایجاد صفحات جدید در اختیار شما قرار میدهد. برای مثال، در نسخه قدیمی وردپرس برای ایجاد جدول در محتوا نیاز به یک افزونه جداگانه داشتید. اما در ویرایشگر گوتنبرگ به سادگی قادر به ایجاد بلوک جدول خواهید بود و با معین نمودن تعداد سطر و ستون، آن را به محتوا اضافه خواهید کرد. در تصویر زیر قابلیت ایجاد جدول در ویرایشگر جدید نشان داده شده است:
همچنین شما میتوانید با بالا و پایین بردن بلوکها، اولویت خود در نمایش محتوا را مشخص نمایید. همچنین با قابلیت ویرایش تک تک بلوکها محتوای فوقحرفهای تولید نمایید. اما مهمترین ویژگی ویرایشگر گوتنبرگ یادگیری و استفاده آسان از آن میباشد. مزیت بزرگی که مبتدیان وردپرس را تشویق به ایجاد بلاگ نموده و کسب و کارهای اینترنتی را جهت توسعه ترغیب کرده است. به این ترتیب، از اینجای آموزش در سایت سون هاست به استفاده از ویرایشگر بلوک گوتنبرگ خواهیم پرداخت و برای حرفهای شدن در تولید محتوای عالی دست یاری به سویتان دراز میکنیم.
چک لیست آموزش ویرایشگر بلوک وردپرس گوتنبرگ
- استفاده از گوتنبرگ به عنوان ویرایشگر بلوک وردپرس
- ایجاد پست جدید وبلاگ یا صفحه با استفاده از ویرایشگر بلوک
- چگونگی اضافه کردن بلوک در گوتنبرگ
- کار با بلوکها در ویرایشگر جدید
- ذخیرهسازی و استفاده جداگانه از بلوکها در گوتنبرگ
- تنظیمات و انتشار پست در گوتنبرگ
- تنظیمات افزونه در ویرایشگر جدید وردپرس
- اضافه نمودن برخی بلوکهای متداول در گوتنبرگ
- بررسی برخی از بلوکهای جدید محتوا
- ترفندهای گوتنبرگ برای حرفهای شدن
خب حالا برای ادامه آموزش کاربردی گوتنبرگ که توسط سایت سون هاست برای توسعه فعالیت وبمستران انتشار یافته، آمادهاید؟
استفاده از گوتنبرگ به عنوان ویرایشگر جدید بلوک وردپرس
ویرایشگر بلوک گوتنبرگ بسیار منعطف است و با استفاده از جلوههای جذاب بصری ساخته شده است. در حالی که تصور میشود با نسخه قدیمی تفاوتهای زیادی دارد، اما درکاربرد تفاوت آنچنانی ندارند. به عبارت بهتر گوتنبرگ علاوه بر پوشاندن تمامی قابلیتهای ویرایشگر کلاسیک، ویژگیهای منحصر به فردی را داراست که سبب تمایز آن شده است. ابتدا با پوشاندن موضوعات اساسی که در ویرایشگر کلاسیک با آن سروکار داشتهاید شروع میکنیم و نحوه ایجاد آنها را در ویرایشگر بلوک گوتنبرگ شرح میدهیم.
ایجاد پست جدید وبلاگ یا صفحه با استفاده از ویرایشگر بلوک گوتنبرگ
ابتدا به ایجاد یک پست جدید در وردپرس گوتنبرگ اقدام خواهیم نمود. از آنجایی که نسخه وردپرس ما فارسی است با منوهای فارسی سروکار داریم. پس با شنیدن عبارات عجیب نگران نشوید! شما باید همه موارد را شخصیسازی کنید، حتی سراغ تغییر اندازه فونت سایت وردپرس بروید و صفحات خود را زیباتر نمایید.
ابتدا روی نوشتهها کلیک کرده و در صفحه باز شده افزودن نوشته را مطابق تصویر زیر انتخاب میکنیم:
تبریک! شما به ویرایشگر بلوک وردپرس وارد شدید.
چگونگی اضافه کردن بلوک در گوتنبرگ
اولین بلوک هر پست یا صفحه، عنوان محتوا میباشد. پس از آن میتوانید از موس برای حرکت به سمت زیر عنوان استفاده کنید و با کلیک در آن نقطه شروع به نوشتن کنید:
به صورت پیشفرض اولین بلوک بعد از عنوان، بلوک پاراگراف است. این به کاربران اجازه میدهد تا در سریعترین حالت ممکن نوشتن را آغاز نمایند. با این حال اگر میخواهید بلوک متفاوتی ایجاد نمایید، روی دکمه افزودن بلوک در گوشه بالا سمت راست ویرایشگر یا در زیر عنوان محتوا مطابق تصویر زیر کلیک نمایید:
حال با کلیک روی هر کدام از دکمههایی که در تصویر قبل نشان دادیم، بلوک دلخواه خود را اضافه نمایید. میبینید که منویی از بلوک در برابر شما قرار دارد و معمولترین بلوکها را به شما پیشنهاد داده، همچنین آدرس باری برای جستجوی بلوک مورد نظر در اختیار دارید:
کار با بلوک ها در ویرایشگر گوتنبرگ
هر بلوک دارای نوار ابزار مخصوص به خود است که در بالای بلوک ظاهر میشود. منوی این نوار ابزار بسته به نوع بلوکی که انتخاب نمودهاید، متغیر است. همانطور که در شکل زیر مشاهده میکنید، با انتخاب یک بلوک پاراگراف (بند) قادر به مشاهده منوی آن هستیم. به علاوه هر بلوک تنظیمات مربوط به خود را داراست که در وردپرس فارسی سمت چپ تصویر دیده میشود، به طور مثال رنگ پشت زمینه بلوک پاراگراف را تغییر میدهم و جلوه زیبایی به متن اضافه میکنم. ممنون ویرایشگر بلوک وردپرس گوتنبرگ!
ذخیره سازی و استفاده جداگانه از بلوک ها در گوتنبرگ
هنوز به دنبال ویژگیهای خاص در گوتنبرگ میگردید؟ خب باید اضافه کنم که این بلوکهای منعطف قابلیت ذخیرهسازی و استفاده مجدد را دارند. گاهی اوقات مجبور به استفاده از بخش بخصوصی در محتوای خود هستیم که به صورت پیشفرض از طرف مدیر سایت اعلام شده است، مثلا تصویر یک لوگوی خاص در تمامی محتواهایی که در سایت منتشر میگردد. در این حالت گوتنبرگ پیشنهاد می کند که یکبار برای همیشه بلوک مورد نظرتان را بسازید و با ذخیره آن، مجددا از آن استفاده نمایید. خب اگر به من اعلام شود که همیشه از شعار “با پشتیبانی سون هاست همیشه همراهتان هستیم” استفاده کنم، این بلوک را از طریق نوار ابزار ذخیره میکنم و قادر به استفاده از آن در تمامی محتواهای خود هستم.
بعد از کلیک روی دکمه مربوط به ذخیره سازی، نام بلوک را به “شعار سون هاست” تغییر میدهم و سپس به روی ذخیره کلیک میکنم.
حالا هر زمان که نیاز به این بلوک بود، به راحتی میتوان آن را انتخاب و به محتوا اضافه کرد. به این ترتیب که با انتخاب افزودن بلوک و انتخاب منوی قابل استفاده دوباره، بلوک را اضافه کنید:
شما همچنین میتوانید از آدرس باری که برای جستجوی بلوک قرار داده شده، استفاده نمایید. تمامی بلوکهای ذخیره شده در پایگاه داده وردپرس شما ذخیره میشوند و با انتخاب ” مدیریت تمام بلوکهای قابل استفاده مجدد ” میتوانید آنها را ویرایش یا حذف نمایید. به علاوه میتوانید بلوکهای ساخته شده ی خود را انتقال دهید و در سایر سایتهای وردپرسی خود استفاده نمایید.
تنظیمات و انتشار پست در گوتنبرگ
هر محتوای منتشر شده از طریق وردپرس حاوی متا دیتا است و اطلاعاتی نظیر تاریخ انتشار، برچسبها و دستهبندی، تصاویر شاخص و غیره میباشد. همه این گزینهها به ترتیب و منظم در ستون سمت چپ روی صفحه ویرایشگر قرار دارند. اگر تاکتیکهای مربوط به زمانبندی انتشار خودکار پست در وردپرس را به خوبی بدانید، سرعت رشد شما بیشتر خواهد داشت.
تنظیمات افزونه در ویرایشگر بلوک وردپرس
افزونههای وردپرس توانایی بهرهمندی از API ویرایشگر بلوک جهت تکمیل تنظیمات خود در صفحه هستند. در حال حاضر برخی از افزونههای محبوب به عنوان بلوک در دسترس هستند. به عنوان مثال افزونه WPForms به عنوان بهترین افزونه فرمساز وردپرس، شما را قادر به ساخت فرم از طریق یک ویجت میکند. همچنین افزونه یواست Yoast SEO به شما اجازه میدهد تا تنظیمات سئو را در ویرایشگر گوتنبرگ صورت دهید. به علاوه افزونه ووکامرس WooCommerce با ویجت بلوک، توانایی اضافه نمودن آن را به هر محتوایی میدهد.
اضافه نمودن برخی بلوک های متداول در گوتنبرگ
اساسا ویرایشگر بلوک گوتنبرگ قادر به انجام تمام اموری بوده که قبلا در ویرایشگر کلاسیک صورت میگرفته است. اما حالا میتوانید سریعتر و حساب شده کار کنید.
۱- اضافه کردن یک تصویر در ویرایشگر جدید وردپرس
به سادگی یک بلوک تصویر اضافه کنید و سپس تصویری را آپلود یا از کتابخانه پروندههای چندرسانهای انتخاب نمایید.
هنگامی که عکسی اضافه کردید، از طریق تنظیمات متا دیتای عکس Alt text و Size را تعیین کنید. همچنین این توانایی به شما داده شده تا در صورت نیاز لینکی به تصویر اضافه نمایید.
۲- افزودن لینک در ویرایشگر بلوک
شما در ویرایشگر بلوک وردپرس از طریق چند نوع بلوک قادر به اضافه کردن متن هستید. اما متداولترین بلوک برای نوشتن متن، بلوک پاراگراف است که با دکمه درج پیوند در نوار ابزار همراه است. تمام بلوکهای اختصاصی برای نوشتن متن دارای دکمه درج پیوند میباشند.
در ضمن با استفاده از میانبر صفحه کلید میتوان لینک دلخواه را پیوند کرد. در مک بوک با استفاده از Command + k و برای رایانههای ویندوزی از CTRL + K قادر به درج لینک هستیم.
۳- ایجاد یک گالری عکس در گوتنبرگ
بلوک گالری شبیه بلوک تصویر عمل میکند با این تفاوت که در این بلوک باید تعداد تصویر بیشتری بارگذاری یا انتخاب نمایید.
۴- اضافه نمودن شورت کد (کد کوتاه) به محتواهای وردپرس با استفاده از گوتنبرگ
اضافه نمودن شورت کد در گوتنبرگ نسبت به ویرایشگر کلاسیک تغییر محسوسی نداشته است. شما به سادگی میتوانید کدهای دلخواه خود را از طریق بلوک پاراگراف یا به طور تخصصیتر با استفاده از بلوک شورت کد (کد کوتاه در وردپرس فارسی) به محتوا اضافه نمایید. راههای زیادی برای نحوه نمایش کد در سایت وردپرس به تفضیل توضیح داده شده است.
بررسی بلوک های محتوا در ویرایشگر بلوک وردپرس گوتنبرگ
گوتنبرگ زمانی پا به وردپرس گذاشت که برخی از مشکلات در محتوانویسی اثر منفی بر میزان بازدیدکنندگان سایت گذاشته بود. عدم توجه به جلوههای زیبای تصویری و سادگی بیش از حد ویرایشگر کلاسیک امکان تولید محتوای خلاقانه را از ما گرفته بود، در واقع قابلیتهای جدید گوتنبرگ در کنار جذابیتهای بصری، از آن ویرایشگری کارآمد ساخته است. از این رو اضافه کردن بلوکهای جدید به رفع مشکلات ویرایشگر کلاسیک کمک شایانی نموده است. در ادامه بعضی از ویژگی های جدید گوتنبرگ که مورد علاقه کاربران مختلف بوده را معرفی خواهیم کرد.
۱- اضافه کردن تصویر مجاور متن در وردپرس
کاربران وردپرس در گذشته قادر به قراردادن یک تصویر در کنار متن نبودند. این قابلیت جدیدی است که میتوان با استفاده از بلوک رسانه و متن (وردپرس فارسی) انجام داد.
درحقیقت این بلوک از ترکیب دو بلوک به هم پیوسته تشکیل شده که با استفاده از ویژگیهای گوتنبرگ می توان ایدههای خلاقانهای را پیاده نمود.
۲- اضافه کردن دکمه به صفحات و پست ها در وردپرس
یکی دیگر از مشکلاتی که در ویرایشگر کلاسیک حسابی آزارمان میداد، عدم امکان ایجاد دکمه به صفحات بود و برای اضافه کردن یک دکمه کوچک نیاز به نصب افزونه یا کدهای HTML داشتیم. اما گوتنبرگ این مشکل را برای همیشه حل کرده، حتی برای آنها که دانش برنامه نویسی برای ایجاد یک دکمه نداشتند! شما به راحتی قادر به اضافه نمودن دکمه به هر پست یا صفحهای هستید.
روال کار به این صورت است که شما پس از کلیک روی دکمه افزودن بلوک، منویی را مشاهده خواهید نمود و با پیدا نمودن عنوان “عناصر طرح” قادر به ایجاد دکمه (Button) هستید. همانطور که در شکل بالا مشاهده میکنید ما با انجام مراحل فوق دکمهای با عنوان “ورود به سون هاست” ایجاد نمودیم و آدرس دکمه به 7ho.st تغییر داده شد در نهایت روی اجرا کلیک کردیم.
به علاوه برای تغییر رنگ یا استایل دکمه میتوانید از قسمت تنظیمات به انتخاب رنگ و شیوه نمایش دلخواه خود اقدام نمایید.
۳- اضافه کردن تصاویر زمینه زیبا به پست های بلاگ
یکی دیگر از ویژگیهای باحال ویرایشگر بلوک وردپرس گوتنبرگ استفاده از بلوک پوشش (Cover Block) برای جلوه بخشیدن به محتوای سایت شماست. به عبارت سادهتر شما با استفاده از عکس، رویهای (پوششی) به صفحه وب خود میدهید. از این بلوک بیشتر برای ایجاد یک بخش جدید یا آغاز یک صفحه استفاده میشود. زیبایی که سبب جذب بازدیدکنندگان سایتتان خواهد شد.
توضیح دادن این قسمت واقعا با کلمات فارسی برا خودمم سخته، درکتون میکنم به زبون خودمونی اگه بخوام بگم اینه که شاید به چشمای قشنگتون خورده باشه سایتایی که عنوان مطلبشونو توی یه عکس گرافیکی ویژه برای بهتر دیده شدن استفاده میکردن، این همونه فقط با این تفاوت که دیگه نیاز به کدنویسی خاصی برای ایجادشون ندارید. بقیشو تو عکس ببینید:
همانطور که مشاهده میکنید با کلیک روی دکمه افزودن بلوک، عنوان “بلوکهای عمومی” را باز میکنیم و “رویه” را انتخاب مینماییم. در ادامه مانند بلوک تصویر، به بارگذاری عکس مورد نظر خود میپردازیم و عنوانی برای عکس پوششی (Cover Image) اضافه میکنیم:
۴- ایجاد جدول درون مقالات
ویرایشگر کلاسیک وردپرس قابلیت ساخت جدول را ندارد و شما برای ایجاد آن، ناگزیر به استفاده از افزونه و کدهای سفارشی HTML و CSS خواهید بود. اما گوتنبرگ این نقص را با یک جدول پیشفرض حل نموده است! به راحتی بلوک را اضافه کنید و سپس تعداد سطر و ستون مورد نیاز خود را وارد نمایید. جهت ایجاد جدول، بلوک آن را از قسمت قالببندی انتخاب نمایید و با وارد نمودن تعداد سطر و ستون روی ساختن کلیک کنید.
همچنین از قسمت تنظیمات میتوان شیوه نمایش جدول را تغییر و ابزارهای بیشتری را در اختیار گرفت.
۵- ایجاد محتوای چند ستونه
قابلیت دیگری که ویرایشگر کلاسیک از آن بیبهره بود، ایجاد محتوای چند ستون است. ویرایشگر بلوک به شما اجازه اضافه نمودن بلوک ستون را خواهد داد. شما میتوانید بلوک ستونها را از قسمت عناصر طرح اضافه نمایید و از قسمت تنظیمات، تغییرات دلخواه خود را ایجاد کنید:
بلوک ستون منعطفپذیر بوده و تا ۶ ستون قابلیت افزایش دارد و حتی میتوان از بلوکهای دیگر داخل هر ستون استفاده نمود.
شاید فکر کرده باشید که اضافه کردن بلوکهای متفاوت زمان بیشتری را از شما بگیرد. اما در حقیقت ویرایشگر گوتنبرگ بسیار سریعتر و سادهتر از آن است که حتی فکرش را بکنید!
ترفندهای مهم ویرایشگر بلوک وردپرس
۱- نوار ابزار بلوک را به قسمت بالای ویرایشگر خود ببرید.
همانطور که قبل گفته بودیم در بالای هر بلوک ابزاری پیشرفتهتری برای ویرایش بلوک ظاهر میشود که بسیار مفید است. حال اگر میخواهید سرعتتان را بالا ببرید آن را به بالای ویرایشگر خود انتقال دهید. کار راحتی است مطابق تصویر ابتدا به روی سه نقطه کلیک کنید و سپس گزینه “نوار ابزار بالا” را تیک بزنید.
همانطور که مشاهده میکنید قسمتی که کادر قرمز رنگ مشخص نمودهایم به بالای ویرایشگر شما اضافه شده است.
۲- استفاده از میانبرهای صفحه کلید
گوتنبرگ میانبرهایی را برای راحتی کار شما در نظر گرفته است. اولین اقدام شما کلیک روی دکمه / صفحه کلید است.
درون صفحه محتوا / را تایپ نمایید تا لیست بلند بالایی از بلوک ها را نمایش دهد. همچنین برای یادگیری میانبرهای بیشتر، روی سه نقطه در قسمت چپ بالای صفحه کلیک کنید و میانبرهای صفحه کلید را انتخاب کنید. از کلیدمیانبر Shift+Alt+H برای فراخوانی آن استفاده نمایید.
۳- فایل های رسانه ای را بکشید و رها کنید!
لازم نیست برای اضافه کردن بلوکهای رسانهای نظیر تصویر، گالری، ویدیو و سایر زمان زیادی را صرف کنید. بلکه به راحتی فایلها را از روی سیستم خود بکشید و درون ویرایشگر گوتنبرگ رها کنید.
گوتنبرگ به صورت خودکار بلوکها را تشکیل می دهد!
امیدواریم که مطلب وردپرس گوتنبرگ با قابلیت ویرایشگر بلوک وردپرس رضایت شما را به همراه داشته باشد. در انتها سوالات و پیشنهادات خود را از طریق درج کامنت به گوش ما برسانید. اگر علاقمند به مباحث فنی بیشتری هستید، حتما در انجمن سون هاست موضوع جدیدی را ایجاد کنید.
