آموزش گوتنبرگ ( Gutenberg ) وردپرس - آموزش کامل ویرایشگر متن جدید وردپرس | تولک

آموزش گوتنبرگ ( Gutenberg ) وردپرس – آموزش کامل ویرایشگر متن جدید وردپرس

0
  • mahsa yazdani
  • 0
  • 13 شهریور 1399
آموزش کامل ویرایشگر متن گوتنبرگ وردپرس

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

مقدمه کوتاه در مورد گوتنبرگ

وردپرس به عنوان محبوب‌ترین سیستم مدیریت محتوا، در ۶ دسامبر سال ۲۰۱۸، نسخه پنجم خود را منتشر کرد. هر بار که وردپرس، نسخه جدیدی را انتشار می‌دهد، تمامی وب‌مسترها و مالکان سایت‌ها، با اشتیاق تمام به دنبال کشف ویژگی‌ها و بررسی تغییرات جدید آن هستند. البته که مشاهده کردن تغییرات بزرگ در پلتفرم‌های محبوب چون وردپرس، برای افرادی که با محیط کاری آن آشنا هستند، ممکن است کمی سخت به نظر آید؛ اما وردپرس هم مثل هر فناوری آی‌تی دیگری، برای حفظ بقای خود در این بازار، لازم می‌داند که خود را با تغییرات به‌روز کند؛ چرا که در غیر این صورت، این پلتفرم نیز محکوم به شکست خواهد بود.

ویرایشگر پیش‌فرض وردپرس ۵

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

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

ویرایشگر گوتنبرگ وردپرس چیست؟ تعریف و بررسی تفاوت‌ها

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

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

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

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

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

  • متن و پاراگراف
  • تصویر
  • دکمه
  • گالری
  • لیست
  • جدول
  • جاسازی‌ها
  • و موارد دیگر!

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

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

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

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

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

چند نکته ضروری پیش از به‌روزرسانی ویرایشگر کلاسیک به گوتنبرگ

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

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

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

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

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

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

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

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

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

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

برای ویرایش کردن و یا به‌روزرسانی نوشته‌ها و برگه‌های قدیمی وب‌سایت، دو روش کلی وجود دارد:

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

تبدیل محتوای قدیمی به بلوک‌های جدید گوتنبرگ

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

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

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

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

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

با کلیک کردن روی هر کدام از بلوک‌ها، می‌توانید تنظیمات لازم برای ایجاد تغییرات در هر کدام از بلوک‌ها را در دسترس داشته باشید. با انجام فرآیند ویرایش روی هر کدام از بلوک‌ها، می‌توانید نوشته خود را به لحاظ بصری و نیز SEO بروزرسانی کرده و ویرایش خود را نهایی کنید.

با اتمام تغییرات و ویرایش‌های انجام شده، روی دکمه به‌روزرسانی کلیک کنید تا تغییرات نهایی را اعمال کرده و محتوای خود را ذخیره کنید.

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

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

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

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

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

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

با رفتن به این مسیر و وارد شدن به بخش افزودن نوشته، محیطی مطابق با شکل زیر را درخواهید یافت:

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

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

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

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

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

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

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

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

  • تب سند: این تب، همه ویژگی‌های ویرایشگر قبلی وردپرس را در خود دارد. ویژگی‌هایی از جمله دکمه انتشار، انتخاب دسته، برچسب‌ها، تصویر شاخص و …
  • تب بلوک: در این تب، تنظیمات هر بلوک را مشاهده خواهید کرد.

اولین نکته‌ای که در خصوص ویرایشگر گوتنبرگ وجود دارد و باعث جلب توجه کاربران می‌شود، نبودن ابزار TinyMCE است. این نوار ابزار با منویی کشویی که با کلیک کردن روی آیکون + در سمت راست بالای صفحه ظاهر می‌شود، جایگزین شده است.

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

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

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

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

با انتخاب بلوک مورد نظر و کلیک روی آن، خواهید توانست بلوک را به صفحه مربوطه اضافه نمائید.

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

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

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

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

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

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

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

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

بلوک جدول

تا پیش از روی کار آمدن ویرایشگر گوتنبرگ و افزودن قابلیت‌های جدید به آن، برای افزودن جدول به نوشته‌ها و برگه‌ها، لازم بود از افزونه‌های جدول‌ساز وردپرس یا از کدهای HTML استفاده کنید؛ اما این ویرایشگر توانسته است یک بلوک برای افزودن جدول اضافه کند که با استفاده از آن خواهید توانست به سادگی، جدول‌های مختلف را به نوشته‌ها و برگه‌های خود اضافه نمائید. لازم است بدانید که این جدول‌ها کاملاً واکنش‌گرا یا رسپانسیو بوده اما گزینه‌ای برای ایجاد استایل‌های مختلف به آن‌ها وجود ندارد.

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

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

بلوک HTML سفارشی

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

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

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

 

بلوک تصویر با قابلیت دراگ اند دراپ

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

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

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

  • تصویر
  • گالری
  • رسانه و متن
  • رویه
  • تصویر درونی

آموزش بلوک تصویر

متداول‌ترین گزینه برای افزودن تصویر به متن در ویرایشگر گوتنبرگ، استفاده از بلوک تصویر است. برای این منظور روی آیکون + کلیک کرده و در بلوک‌های نمایش داده شده، بلوک تصویر را انتخاب کنید.

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

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

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

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

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

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

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

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

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

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

با قرار دادن تصویر در محتوای خود می‌توانید آن‌ها را لینک‌دهی کنید. برای لینک دادن به تصاویر کافیست روی آیکون لینک، کلیک کرده و URL مورد نظر را در بخشی که در تصویر نشان داده شده است، وارد نمائید.

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

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

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

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

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

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

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

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

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

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

آموزش بلوک رویه

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

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

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

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

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

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

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

 آموزش بلوک جاسازی

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

در حال حاضر، ویرایشگر گوتنبرگ، بلوک‌های جاسازی برای شبکه‌های اجتماعی اینستاگرام و Flickr را دارد.

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

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

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

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

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

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

آموزش بلوک تصویر درونی

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

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

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

تصویر مورد نظر خود را انتخاب کرده و آن را وارد نمائید. می‌بینید که تصویر در متن شما اضافه شده و می‌توانید ابعاد آن را با استفاده از نقطه‌هایی که در اطراف تصویر نمایان می‌شوند، تغییر دهید.

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

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

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

آموزش ساخت گالری

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

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

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

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

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

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

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

بلوک ستون‌ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بلوک گفتاورد

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

برای استفاده از بلوک گفتاورد روی آیکون + کلیک کرده و روی گزینه گفتاورد کلیک کنید.

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

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

با کلیک روی این گزینه، منوی تنظیمات آن به صورت زیر نمایان خواهد شد.

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

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

بخش‌های مختلفی که در تصویر فوق مشاهده می‌کنید، هر یک برای ایجاد تنظیماتی خاص در گفتاورد خواهند بود:

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

۲. ابزارهای ویرایش گفتاورد: ابزارهایی که در این بخش تعبیه شده‌اند، این امکان را می‌دهند که ترتیب قرار گرفتن متن و نیز فرمت‌بندی آن را تغییر دهید. این ابزارها به محض اینکه روی آن‌ها کلیک کردید، در بلوک گفتاورد در بالای بلوک ظاهر خواهند شد.

۳. پنل تنظیمات بلوک:‌ در بخش تنظیمات بلوک که در سایدبار سمت چپ صفحه ظاهر می‌شود، می‌توانید تنظیمات پیشرفته‌تری را روی بلوک اعمال نمائید.

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

بلوک کشیدن نقل قول

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

برای دسترسی به این بلوک کافی است که روی آیکون + کلیک کرده و در قسمت فرمت کردن، بلوک کشیدن نقل قول را پیدا کنید.

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

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

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

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

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

کشیدن نقل قول از بلوک‌هایی است که تنظیمات محدود و اندکی دارد. ابزارهای ویرایش کشیدن نقل قول که در بالای بلوک قرار گرفته‌اند، مشابه با ابزارهای بلوک گفتاورد است. با این تمایز که روشی که ابزارهای ردیف‌سازی بلوک با آن کار می‌کند، اندکی با بلوک گفتاورد متفاوت می‌باشد.

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

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

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

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

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

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

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

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

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

ایجاد حالت تمام صفحه در ویرایشگر گوتنبرگ

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

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

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

ایجاد بلوک‌ها و استفاده مجدد از آن‌ها

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

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

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

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

شما همچنین قادر خواهید بود که بلوک‌های قابل استفاده دوباره را در قسمت اضافه کردن بلوک‌ها پیدا کنید.

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

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

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

یک نکته را در نظر داشته باشید که…

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

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

مروری بر ویژگی‌های وردپرس ۵ و ویرایشگر گوتنبرگ

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

به طور کلی، می‌توان ویژگی‌های ویرایشگر وردپرس گوتنبرگ را در موارد زیر خلاصه کرد:

  • بلوک‌ها: هر محتوایی که در ویرایشگر گوتنبرگ گنجانده می‌شود، بلوک خاص خود را دارد. این بلوک‌ها شامل پاراگراف‌های متنی، تصویر، پرونده‌های تعبیه شده، هدرها، تصاویر برجسته و بسیاری موارد دیگر است.
  • دکمه: بلوک دکمه گوتنبرگ این امکان را به کاربران می‌دهد که با سهولت، دکمه‌ها را به محتوای خود اضافه کنند. هنگامی که یک دکمه ایجاد می‌کنید، خواهید توانست متن و پیوند آن را به راحتی ویرایش کنید.
  • تنظیم اندازه فونت: این قابلیت در گوتنبرگ به سهولت قابل استفاده می‌باشد و هر گزینه که مورد پسند کاربر باشد را در اختیار او قرار خواهد داد. با استفاده از این ویژگی می‌توانید قلم‌های کوچک تا بزرگ را به راحتی در اختیار داشته باشید.
  • ویژگی بیشتر برای بلاک‌ها: این قابلیت به شما این امکان را خواهد داد که مشخص کنید چه میزان از محتوا را در بار اول برای کاربران به نمایش درآورید. شما همچنین قادر خواهید بود که محتوای خود را صفحه‌بندی کرده و مقاله‌ای چهار یا پنج صفحه‌ای ایجاد کنید.
  • جاسازی‌ها: این قابلیت باعث شده است که بتوانید به راحتی، محتواهایی را از سایت‌های دیگر در وب‌سایت خود جاسازی نمائید. به عنوان مثال اگر قصد داشته باشید که ویدئویی از یوتیوب را در بخشی از سایت خود به نمایش درآورید، این ابزار به راحتی این امکان را برای شما فراهم خواهد کرد.
  • ابزارک‌ها: در نسخه جدید ویرایشگر وردپرس می‌توانید از ابزارک‌ها، در قالب بلوک استفاده کنید. به عنوان مثال، نشان دادن آخرین نوشته‌های سایت، آخرین کامنت‌ها و مواردی از این دست، به راحتی در این ویرایشگر قابل دسترسی خواهد بود.
no avatar
mahsa yazdani
دانشجوی کارشناسی ارشد شبکه نویسنده ,گرافیست و علاقه مند به فضای وب فارسی