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

۲۰ آذر ۱۴۰۳
دسته بندی ها: وردپرس

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

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

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

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

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

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

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

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

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

یک پوسته‌ بلوک وردپرس را انتخاب کنید

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

دایرکتوری theme را جستجو کنید

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

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

گزینه‌های سفارشی سازی را در نظر بگیرید

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

سازگاری را بررسی کنید

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

با ویرایشگر سایت گوتنبرگ، سایت خود را سفارشی کنید

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

سفارشی کردن سبک‌های جهانی

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

می‌توانید تغییرات سبک از پیش تعریف شده (pre-defined)، ارائه شده توسط پوسته بلوک انتخابی خود را آزمایش و یکی را که دوست دارید انتخاب کنید.

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

به پیشخوان وردپرس بروید و روی نمایش > ویرایشگر کلیک کنید.
برای دسترسی به تنظیمات جهانی استایل بر روی شیوه‌نامه‌ها کلیک کنید.

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

در چیدمان (Layout)، سایر ویژگی‌های سبک مانند padding، margins و تنظیمات پس‌زمینه را برای سفارشی‌سازی بیشتر محتوای بلوک بررسی کنید.

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

سفارشی کردن بخش‌های قالب

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

راهنمای گام به گام در مورد نحوه انجام آن وجود دارد:

با رفتن به Block Inserter گزینه بخش قالب (Templates Part) را در ویرایشگر جستجو کنید.

برای این آموزش، «خالی شروع کنید» را انتخاب می‌کنیم.

یک نام توصیفی و مرتبط برای بخش جدید انتخاب کنید. به عنوان مثال، اگر بخشی را ایجاد می‌کنید که نظرات مشتریان را به نمایش می‌گذارد، نام آن را Testimonials بگذارید.

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

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

زمانی که از طراحی و محتوای قسمت قالب راضی شدید، تغییرات خود را ذخیره کنید.

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

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

قالب‌ها را سفارشی کنید

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

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

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

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

در اینجا نحوه انجام آن آمده است:

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

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

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

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

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

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

ایجاد برگه‌ها

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

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

برای استفاده از الگوها، به تب Patterns در داخل بلوک درج کننده بروید و یک الگوی دلخواه را انتخاب کنید.
همچنین می توانید با کلیک بر روی Explore all patterns، تب Patterns را گسترش دهید. برگه گسترش یافته همچنین با نوار جستجو همراه است تا به شما در جستجو کمک کند.
اگر در حال ایجاد یک صفحه وبلاگ هستید، برگه الگوها بلوک‌های حلقه کوئری (Query Loop) مختلفی را نیز برای افزودن به صفحه خود ارائه می‌دهد. این بلوک به طور خودکار آخرین پست های وبلاگ شما را در بالای صفحه نمایش می‌دهد.

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

نوشته‌های خود را بنویسید

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

در اینجا نحوه ایجاد محتوا برای وب‌سایت وردپرس آورده شده است:

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

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

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

افزونه‌های وردپرس را نصب کنید

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

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

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

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

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

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

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

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

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

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

از حالت های Spotlight و Distraction-Free استفاده کنید

گوتنبرگ دو حالت مفید Spotlight و Distraction-Free ارائه می‌دهد تا به شما کمک کند در طول فرآیند تولید محتوا متمرکز بمانید. در ادامه چیزی است که باید بدانید:

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

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

سازماندهی بلوک را ساده کنید – سلسله مراتب بلوک‌های تودرتو را مشاهده کنید تا موقعیت‌های آنها را به طور موثر مدیریت و از یک چیدمان به خوبی سازماندهی شده اطمینان حاصل کنید.

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

نتیجه گیری

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

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

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