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

0 1 خواندن این مطلب 20 دقیقه زمان میبرد

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

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

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

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

The WordPress Gutenberg Editor — گوتنبرگ چیست؟ راهنمای گام به گام سازنده وردپرس 49

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

بلوک‌های متن: پاراگراف، عنوان، فهرست، نقل قول، کلاسیک، کد، جزئیات، از پیش قالب‌بندی‌شده، نقل قول، جدول، آیه
بلوک‌های رسانه: تصویر، گالری، صدا، جلد، فایل، رسانه و متن، ویدئو
بلاک‌های جاسازی شده: توییتر، یوتیوب، ویمئو، وردپرس و غیره (لیست کامل جاسازی‌های پشتیبانی شده< /a>)
بلوک‌های طراحی: دکمه‌ها، ستون‌ها، گروه، ردیف، پشته، بیشتر، جداسازی صفحه، جداکننده، فاصله‌گذار
بلوک‌های ابزارک: آرشیو، تقویم، فهرست دسته‌ها، HTML سفارشی، آخرین نظرات، آخرین پست‌ها، فهرست صفحه، RSS، جستجو، کد کوتاه، نمادهای اجتماعی، ابر برچسب

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

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

و بسته به افزونه‌هایی که نصب کرده‌اید و در سایت خود فعال هستید، ممکن است بلوک‌های گوتنبرگ اضافی مرتبط با آن افزونه‌ها داشته باشید. به عنوان مثال، WooCommerce تعدادی بلوک محصول را اضافه می کند، فرم تماس 7 یک بلوک فرم اضافه می کند، Meta Slider یک بلوک لغزنده اضافه می کند، و غیره.

آیا ویرایشگر گوتنبرگ رایگان است؟

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

آیا باید گوتنبرگ را نصب کنم؟

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

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

تفاوت بین گوتنبرگ و ویرایشگر کلاسیک چیست؟

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

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

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

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

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

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

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

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

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

برای شروع کار با گوتنبرگ، ابتدا باید یک صفحه یا پست جدید برای ویرایش ایجاد کنید.

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

Gutenberg Welcome Message — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 50

از اینجا می‌توانید پیام را ببندید، سپس قبل از ایجاد محتوای خود، چند مرحله اساسی را انجام دهید.

Add a Post Title — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 51

به عنوان مثال ممکن است بخواهید برای افزودن عنوان (1)، ویرایش URL Slug (2) یا حتی اضافه کردن دسته ها و برچسب ها کلیک کنید. و با انجام این کار وقت آن است که وارد محتوای خود شوید.

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

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

Add Gutenberg Blocks — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 52

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

نحوه افزودن متن

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

Paragraph Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 53

می‌توانید رنگ متن، رنگ پس‌زمینه، رنگ پیوند (و رنگ نشانگر)، اندازه قلم، لایه‌های بلوک و حاشیه‌ها را با استفاده از گزینه‌های منوی نوار کناری تنظیمات سفارشی کنید. یا در بلوک پاراگراف خود، می‌توانید از گزینه‌های قالب‌بندی در نوار ابزار بلوک گوتنبرگ برای Text Text ≡، Bold و Italics یا تنظیمات استفاده کنید. در بیشتر ▼ (برجسته، خط خط، پانوشت، و غیره).

Paragraph Block Links — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 54

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

عنوان

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

Heading Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 55

این بلوک شامل گزینه‌های آسان برای بلوک تراز کردن (اگر می‌خواهید عنوان خود را فراتر از متن باز کنید)، تغییر سطح (از H1، H2 انتخاب کنید) ، H3 و غیره) و تراز کردن متن ≡. فقط به یاد داشته باشید که از سرفصل ها به طور مناسب استفاده کنید (مثلاً یک صفحه باید فقط یک H1 داشته باشد، که معمولاً عنوان پست یا صفحه است، و همه عنوان های دیگر باید در تودرتو باشند – آن را مانند ایجاد فهرست مطالب در نظر بگیرید).

سپس در منوی نوار کناری تنظیمات، گزینه‌های مشابهی با پاراگراف‌ها برای رنگ‌ها، تایپوگرافی، لایه‌های بلوک و حاشیه‌ها وجود دارد، و برای سرفصل‌ها نیز ممکن است بخواهید بخش پیشرفته را که در آن می‌توانید یک Anchor HTML اضافه کنید (این معمولاً در صورتی استفاده می‌شود که می خواهید به یک عنصر خاص پیوند دهید یا اسکرول محلی را در یک صفحه اضافه کنید).

فهرست

List Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 56

در برخی موارد ممکن است بلوک فهرست نیز مفید باشد. با آن می توانید با کلیک بر روی نماد بلوک فهرست به سرعت یک لیست نامرتب (نقطه دار) یا مرتب شده (عددی) اضافه کنید. اگر یک لیست مرتب شده را انتخاب کنید، نوار کناری اضافی (1) تنظیمات ⚙ برای ویرایش مقدار شروع و سبک شماره گذاری وجود دارد، و هر دو لیست را می توان با استفاده از نوار کناری (2) سفارشی کرد.سبک‌ها ◐ برای رنگ‌ها، تایپوگرافی، لایه‌ها و حاشیه‌ها.

نقل قول

Quote Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 57

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

جزئیات

Details Block Example — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 58

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

جدول

Define Table Block Sizes — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 59

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

Table Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 60

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

Table Block Styles — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 61

و می‌توانید از برگه Styles ◐ به سبک راه راه تغییر دهید و سفارشی‌سازی‌های دیگر متمرکز بر طراحی انجام دهید.

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

درج رسانه

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

تصویر

Image Media Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 62

هنگام افزودن تصاویر با بلوک تصویر، می‌توانید به سادگی فایل‌های تصویر را مستقیماً از دسک‌تاپ خود بکشید و رها کنید (نکته – حتماً از فرمت‌های فایل پشتیبانی شده مانند jpg، jpeg، png، gif یا ico استفاده کنید. ) یا یک تصویر موجود را از کتابخانه رسانه خود انتخاب کنید.

Image Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 63

پس از افزودن، می‌توانید از تنظیمات ⚙ برای ویرایش متن جایگزین تصویر (که برای سئو و دسترسی مهم است)، نسبت ابعاد تصویر و انتخاب اندازه تصویر استفاده کنید (توجه داشته باشید – این گزینه‌ها بر اساس شما هستند. اندازه‌های برش سایت در داشبورد اصلی وردپرس شما در زیر تنظیمات > رسانه).

Image Block Styles — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 64

گزینه‌های مفید Styles ◐ برای فیلترهای گرد، دوتن، حاشیه‌ها و سایه‌ها وجود دارد. و هنگامی که بلوک تصویر خود را انتخاب می کنید، از نوار ابزار، تنظیمات اضافی برای افزودن پیوند، پوشش متن و/یا عنوان پیدا خواهید کرد. یک گزینه برش نیز وجود دارد، اگرچه ما شخصاً توصیه می کنیم قبل از آپلود تصاویر در سایت وردپرس خود، آنها را برش (و بهینه سازی) کنید.

گالری

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

Adding an Image Gallery Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 65

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

Add images to Image Gallery Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 66

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

Gallery Block Settings — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 67

بعد از تنظیمات ⚙ می‌توانید تعداد ستون‌های گالری خود را انتخاب کنید (مثال ما 3 تصویر در 3 ستون است، اما ردیف‌های اضافی به گالری شما اضافه می‌شوند تا یک شبکه کامل تشکیل شود)، فعال کنید. پیوندها به فایل های رسانه ای، ترتیب تصاویر خود را تصادفی کنید و موارد دیگر.

Gallery Block Styles — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 68

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

صوت و ویدئو

Audio Block for self hosted audio files — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 69

برای بلوک‌های صوتی می‌توانید انتخاب کنید که فایل صوتی خود میزبانی شده را در قالب پشتیبانی شده (mp3، m4a، ogg، wav) آپلود کنید یا می‌توانید از پیوندی به یک جاسازی تأیید شده استفاده کنید. اگر فایل صوتی خود را آپلود می‌کنید، یک پخش‌کننده اصلی در وردپرس تعبیه شده است که می‌توانید با تنظیمات گوتنبرگ برای پخش خودکار، حلقه و بارگذاری اولیه، کمی آن را سفارشی کنید.

Video Block for self hosted video files — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 70

به‌طور مشابه با بلوک ویدیو، می‌توانید فایل ویدیوی خود را آپلود کنید (mp4، mov، wmv، avi، mpg، ogv، 3gp، 3g2) سپس از تنظیمات موجود برای نیمه سفارشی کردن بلوک خود استفاده کنید. برای ویدیوها گزینه‌هایی برای فعال کردن پخش خودکار، حلقه، بی‌صدا کردن، کنترل‌ها، پخش درون خطی، بارگذاری پیش‌بار و گزینه‌ای برای آپلود یک تصویر پوستر ویژه برای ویدیوی شما وجود دارد.

توجه – اگر از پیوندی برای صدا یا تصویر استفاده کنید، بلوک شما به بلوک جاسازی مربوطه تبدیل می‌شود. برای مثال، اگر پیوندی به آهنگ Soundcloud اضافه کنید، گوتنبرگ بلوک صوتی را به بلوک Soundcloud تبدیل می‌کند و پیوندی که برای ویدیوی YouTube اضافه می‌شود، بلوک ویدیو را به YouTube< تغییر می‌دهد. /strong> بلوک. بلوک‌های تعبیه‌شده خاص تنظیمات متفاوتی را نسبت به بلوک‌های صوتی و تصویری خود میزبان ارائه می‌دهند.

پرونده

بسته به محتوای سایت شما ممکن است لازم باشد یک فایل سند به وب سایت خود اضافه کنید. برای مثال، پزشکی که می‌خواهد فرم‌های بیمار جدید برای دانلود در دسترس باشد، یا یک برنامه‌ریز مالی ممکن است بخواهد صفحه‌گسترده‌ای را به اشتراک بگذارد تا به مشتریان کمک کند بودجه ماهانه ایجاد کنند. در این موارد بلوک File به شما امکان می دهد اسنادی مانند pdf، doc(x)، ppt(x)، pps(x)، odt، xls(x) و psd را اضافه کنید.

File Block with PDF example — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 71

همه فایل‌ها به‌طور پیش‌فرض نام فایل و دکمه دانلود را نمایش می‌دهند، به استثنای فایل‌های PDF که تنظیمات اضافی برای پیش‌نمایش فایل ارائه می‌دهند.

استفاده از عناصر طراحی

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

دکمه‌ها

بلوک دکمه‌ها راهی عالی برای افزودن پیوند به صفحات دیگر یا محتوای مهم هنگام ایجاد طرح است. با آن می توانید یک دکمه یا چند دکمه را وارد کنید (فقط از گزینه “Copy” در نوار ابزار استفاده کنید.

Buttons block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 72

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

شکست‌ها

More Break Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 73

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

Spacer Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 74

یا می‌توانید با استفاده از بلوک Spacer و Separator یک فاصله بین بخش‌ها ایجاد کنید. همانطور که به نظر می رسد، فاصله دهنده یک فاصله (یا شکاف) اضافه می کند در حالی که جداکننده یک تقسیم کننده قابل مشاهده اضافه می کند (از بین یک خط یا نقطه انتخاب کنید).

Separator Block exampels — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 75

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

احتمالاً قبلاً با وب‌سایتی برخورد کرده‌اید که یک ویدیوی YouTuber یا یک پست توییتر (X) در یک صفحه جاسازی شده است. با گوتنبرگ می توانید همین کار را در وردپرس انجام دهید، و این کار به آسانی وارد کردن یک بلوک است. فقط پلتفرم خاص یا بلوک جاسازی شبکه را جستجو کنید و از آن استفاده کنید تا پیوندی به محتوایی که می‌خواهید به اشتراک بگذارید اضافه کنید (یا می‌توانید از بلوک Embed برای چسباندن پیوند استفاده کنید و باید به بلوک جاسازی شبکه خاص تبدیل شود).

Adding Embedded Content in Gutenberg — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 76

در زمان نگارش، گوتنبرگ از 32 منبع محتوا برای جاسازی پشتیبانی می‌کند. این شامل SoundCloud، Youtube، Twitter، Pinterest، WordPress.com، Slideshare، TED و موارد دیگر است.

استفاده یا نمایش کد

چند راه وجود دارد که می توانید کد را در گوتنبرگ برای محتوای خود اضافه کنید.

Display custom code with Gutenberg — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 77

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

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

کدهای کوتاه

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

Shortcodes Block for Gutenberg — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 78

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

نحوه سازماندهی و گروه بندی بلوک ها

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

گروه، ردیف، پشته، ستون

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

Create a Block Group — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 79

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

Columns Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 80

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

Block group mobile preview — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 81

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

جلد، رسانه و متن

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

Cover Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 82

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

Media and Text Block — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 83

و بلوک Media & Text، که دو ستون با رسانه در کنار و یک بلوک متن در سمت دیگر اضافه می‌کند.

نحوه مرتب سازی مجدد بلوک ها

Moving Blocks in a Design — گوتنبرگ چیست راهنمای گام به گام سازنده وردپرس 84

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

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