آموزش ویرایشگر گوتنبرگ وردپرس از صفر تا صد

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

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

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

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

یا بروزرسانی وردپرس ۴٫۹ ‘Tipton’ این امکان را به کاربران داد که در قسمت سفارشی سازی وردپرس بتوانند تغییرات طراحی را برنامه ریزی کرده و پستها را ذخیره پیش نویس سازند.

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

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

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

صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

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

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

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

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

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

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

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

ویرایشگر گوتنبرگ به صورت پیش فرض چندین بلوک برای اضافه کردن عناصر محتوای پر استفاده مانند تصاویر، ویدئوها، صوت ها، گالری عکس، متن، دکمه و غیره دارد. برای دسترسی به این بلوک ها کافی است روی آیکون + در گوشه سمت راست بالای صفحه کلیک کرده و در قسمت “جستجو برای یک بلوک”، نام بلوک مورد نظر خود را وارد کنید.

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

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

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

بعضی از بلوک هایی که در ویرایشگر گوتنبرگ اضافه شده اند و قابلیت آن را افزایش داده اند عبارتند از:

بلوک جدول

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

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

HTML سفارشی

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

این ویژگی از آن جهت مفید است که دیگر مجبور به سوئیچ کردن بین ویرایشگر دیداری و ویرایشگر کد نیستید.

بلوک تصویر با قابلیت کشیدن و رها کردن

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

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

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

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

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

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

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

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

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

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

ویرایش محتواهای موجود بعد از بروزرسانی به وردپرس ۵

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

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

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

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

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

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

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

در ادامه آموزش به بررسی ویژگی هایی که وردپرس در نسخه 5 خود عرضه کرده است می پردازیم.

بررسی ویژگی های وردپرس ۵

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

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

ویرایشگر مبتنی بر بلوک (Block-based) گوتنبرگ به کاربران این امکان را می دهد که با استفاده از بلوک های محتوا، پوسته های زیبا ایجاد کنند.

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

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

۲- بروز رسانی امنیتی وردپرس

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

۳- ویرایشگر Front-end

کاربران وردپرس از ویرایشگرهای Front-end به صورت گسترده ای استفاده می کنند. با استفاده از این ویرایشگرها می توان به راحتی پست ها و مطالب را ویرایش کرد. با استفاده از وردپرس ۵، کاربران می توانند از ویرایشگر داخلی سبک و سریع آن که ویرایشگر گوتنبرگ نام دارد و در قسمت قبل آموزش آن را برای شما قرار داده ایم و قابلیت خود را از فریم ورک Customizer به ارث می برد، استفاده کنند. این ویرایشگر برای سفارشی سازی ها و قالب بندی های اولیه بسیار عالی است اما فاقد ویژگی های پیشرفته ای است که ویرایشگرهای معروف ارائه می دهند.

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

۴- بهبود بهینه سازی موبایل

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

۵- برش تصویر پس زمینه (آموزش ویرایشگر گوتنبرگ)

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

۶- قالب جدید وردپرس- ۲۰۱۹

وردپرس ۵ با یک قالب جدید پیش فرض که ۲۰۱۹ نامیده شده، عرضه شده است.

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

۷- قالب های پیش فرض بهتر

وردپرس قالب جدید ۲۰۱۹ را منتشر کرده اما بروزرسانی قالب های قدیمی را فراموش نکرده است. کاربران می توانند امیدوار باشند که این قالب ها هم مانند قالب جدید بروزرسانی می شوند . قالب های ۲۰۱۰ تا ۲۰۱۷ از ویرایشگر گوتنبرگ نیز پشتیبانی می کنند.

دیگر ویژگی های وردپرس ۵

وردپرس ۵ به طور رسمی از PHP نسخه ۷٫۳ ، پشتیبانی می کند.

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

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

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

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد. شما چه ویژگی های دیگری از وردپرس ۵ می شناسید. دیدگاه های خود را با ما در میان بگذارید.