Метод вставки тексту, зображень, відео та посилань у редакторі Гутенберг у WordPress.

Редактор Гутенберг базується на "блоках". Коли ви додаєте текст, зображення тощо, ви фактично додаєте блоки відповідного типу і редагуєте їх. Цей підхід дуже гнучкий, і дозволяє точно контролювати стиль і розташування кожного елемента. Нижче наведено детальні кроки для виконання цієї операції:

1. Вставлення тексту: створення контенту за допомогою блоків "Параграфи" та "Заголовки".

Текст є основною частиною статті. Гутенберг забезпечує форматування тексту за допомогою блоків "Абзац" і "Заголовок". Операції виконуються наступним чином:

1. Вставте текст абзацу (основний вміст)

• Метод 1Після того, як ви зайдете на сторінку редагування статті, за замовчуванням відображатиметься підказка "Почніть писати або натисніть /, щоб додати блок". Просто введіть текст, і система автоматично створить блок "Параграфи".
• 
• Метод 2Натисніть знак «+» (інструмент вставки блоку) у зоні редагування, знайдіть пункт «Параграф» і натисніть його. Після цього створиться блок порожнього параграфа, у який можна буде ввести текст.
• 

Зміна формату.：

Виберіть блок абзацу, і на правому боці з'явиться панель "Блок" (налаштування блоку), де можна встановити наступні параметри:

• Вирівнювання (вирівнювання ліворуч, центрування, вирівнювання праворуч, вирівнювання по краях);
• Розмір тексту (маленький, нормальний, великий, дуже великий);
• Колір тексту (виберіть, натиснувши на кольоровий квадрат; зверніть увагу на контраст із фоновим кольором, щоб забезпечити хорошу читабельність).
• Колір фону (додавання фонового кольору до абзацу, щоб виділити важливий контент).

2. Вставте заголовок (розділіть вміст на рівні).

Заголовки використовуються для розділення структури статті (наприклад, розділів, підрозділів) і рекомендується використовувати їх у форматі "H1-H6" (H1 зазвичай є головним заголовком статті і вже є у верхній частині сторінки редагування, тому немає необхідності додавати його повторно).

Кроки операції：

1. Натисніть знак «+» у зоні редагування, знайдіть і виберіть «Заголовок», щоб створити блок із заголовком.
2. Введіть заголовок (наприклад, "1. Підготовчі роботи перед установкою").
3. Виберіть блок і виберіть H2-H6 у розділі "Рівень заголовка" на правій панелі (H2 для першого рівня заголовків, H3 для другого рівня тощо).

\nНавичкиПісля того, як ви введете текст, виділіть його і натисніть Ctrl+B(Напівжирний шрифт) або Ctrl+I(Виділено жирним шрифтом) дозволяє швидко налаштувати стиль тексту.

II. Вставлення зображень: додайте зображення за допомогою блоку "Зображення" та оптимізуйте їх.

Зображення можуть зробити статтю більш живою. Блок "Зображення" у Гутенберзі дозволяє завантажувати, налаштовувати та оптимізувати зображення. Кроки для цього наступні:

1. Три способи вставки зображень.

• Спосіб 1: Завантажте нове зображення.Натисніть знак «+» → Пошукайте «Зображення» → Натисніть «Завантажити» → Виберіть файл зображення на своєму комп’ютері → Зачекайте, поки завантаження завершиться.
• Спосіб 2: Використовуйте зображення з медіатеки.Якщо зображення вже було завантажено (наприклад, зображення, яке було додано раніше), натисніть на блок "Зображення", виберіть "Медіатека" → виділіть потрібне зображення → натисніть "Вибрати".
• Спосіб 3: безпосередньо вставити зображення.Копіюйте зображення на комп'ютері (виберіть "Копіювати" у контекстному меню), поверніться до області редагування і виберіть "Вставити". Система автоматично створить блок із зображенням і завантажить його.

2. Налаштуйте стиль зображень (обов'язкова оптимізація).

Виберіть блок зображення, і в правій панелі ви зможете налаштувати наступні ключові параметри:

• Вирівнювання：
  • Ліве вирівнювання / Праве вирівнювання: зображення розташовуються по краях, а текст обгортається навколо них;
  • Центральне вирівнювання: зображення відображається по центру, а текст — зверху і знизу;
  • Широке вирівнювання: зображення займають всю ширину області редагування (підходить для великих зображень).
• РозмірЗмініть пропорції, перетягнувши повзунок "Ширина" (рекомендується залишити "Пропорції обмежені", щоб уникнути деформації зображення).
• посилання (на сайті)Натисніть на поле "Посилання", щоб додати посилання на зображення на інші сторінки (наприклад, перейти на сторінку з високою роздільною здатністю зображення, натиснувши на зображення). Якщо посилання не потрібне, це поле можна залишити порожнім.
• Альтернативний текст (Альт-текст)Введіть опис зображення (наприклад, "Скріншот кроків установки WordPress"), щоб допомогти пошуковим системам розпізнати вміст зображення, покращити SEO та сприяти безперешкодному доступу.

3. Вирішення поширених проблем.

• Не вдалося завантажити зображення: перевірте розмір зображення (рекомендується, щоб розмір одного зображення не перевищував 5 МБ), формат (підтримуються JPG, PNG, WebP) або оновіть сторінку та спробуйте ще раз.
• Нечіткі зображення: переконайтеся, що ви завантажуєте оригінальне зображення (роздільна здатність не менше 1000 пікселів за шириною) і не збільшуєте його більше ніж на розмір оригіналу.

III. Вставлення відео: додавання локального або онлайн-відео за допомогою блоку "Відео".

Ви можете додати відео, зняте вами або знайдене на таких платформах, як YouTube або Bilibili, за допомогою блоку "Відео":

1. Вставте локальне відео (відео, завантажене вами).

1. Натисніть знак «+» → пошукайте «відео» → виберіть «завантажити» → виберіть файл відео на своєму комп’ютері (підтримуються формати MP4 та WebM).
2. Після завершення завантаження відео автоматично відображатиметься у блоці, і ви зможете натиснути на нього, щоб перевірити відтворення.

Зверніть увагу.Місцеві відеофайли є великими, тому вони можуть займати місце на сервері та уповільнювати завантаження. Рекомендується використовувати цей метод лише для невеликих відео (не більше 100 МБ), а для великих відео краще користуватися онлайн-платформами.

2. Вставте онлайн-відео (рекомендується!).

Вставлення посилання на відеоплатформу не вимагає зайняття місця на сервері, тому завантаження відбувається швидше:

1. Відкрийте відеоплатформу (наприклад, YouTube, Bilibili, Tencent Video), знайдіть цільове відео і скопіюйте посилання для обміну (наприклад, https://www.bilibili.com/video/BV123456）。
2. У редакторській зоні Гутенберга просто вставте посилання → система автоматично розпізнає його і створить відеоблок із відеоплеєром.

Підтримувані платформиНа таких популярних платформах, як YouTube, Bilibili, Tencent Video, Youku та iQiyi, достатньо вставити посилання і зачекати 2-3 секунди, щоб відео завантажилося.

3. Редагування стилю відео.

Виберіть відеоблок, і в правій панелі ви зможете налаштувати наступне:

• Відомості про вирівнювання (такі самі, як у зображенні; вирівнювання ліворуч/праворуч дозволяє тексту обгортатися навколо зображення);
• Ширина (скорегуйте розмір відеопрогравача; рекомендується, щоб ширина не перевищувала 1000 пікселів, щоб відео можна було повністю відобразити на мобільних пристроях).
• Автоматичне відтворення: не рекомендується включати (більшість браузерів блокують автоматичне відтворення, що погіршує якість роботи).

4. Вставлення посилання: зв'язування тексту або зображень з іншим вмістом.

Посилання є "кровоносними судинами" вебсайту, які пов'язують контент з іншими сторінками та зовнішніми вебсайтами. Гутенберг підтримує додавання посилань на тексти та зображення.

1. Додайте посилання (гіперпосилання) до тексту.

1. Виділіть текст, до якого потрібно додати посилання (наприклад, "Натисніть, щоб переглянути детальний підручник").
2. Натисніть на значок "Посилання" (у формі ланцюга) у верхній панелі інструментів або натисніть комбінацію клавіш. Ctrl+K。
3. Вставте адресу посилання у поле вводу (наприклад, посилання на сторінку сайту). https://你的域名/教程 або зовнішні посилання https://example.com）。
4. Додаткові налаштування:
   • Відмітьте пункт "Відкрити в новій вкладці" (рекомендується відмітити зовнішні посилання, щоб відвідувачі не залишали ваш сайт).
   • Натисніть на значок "Налаштування посилання" (маленький шестерня), щоб додати заголовок посилання (текст підказки, який відображається при наведенні курсору миші).
5. Натисніть "Enter" або "Apply", щоб завершити налаштування. Текст стане синім і підкресленим, що означає, що посилання було успішно додано.

2. Додайте посилання на зображення.

1. Виберіть блок із зображенням і знайдіть поле для введення "Лінк" у правій панелі.
2. Введіть адресу посилання (наприклад, натисніть на зображення, щоб перейти на сторінку з детальною інформацією про продукт).
3. Відмітьте пункт "Відкрити у новій вкладці" (виберіть за потреби) та натисніть на порожнє місце, щоб зберегти зміни.

3. Видалити посилання.

• Посилання на текст: виберіть текст із посиланням, натисніть значок "Видалити посилання" на панелі інструментів (ланцюг із хрестом) або натисніть клавішу <. Ctrl+K Потім видаліть адресу посилання.
• Посилання на зображення: виберіть зображення, а потім видаліть адресу у полі "Посилання" праворуч.

5. Поради для новачків щодо роботи з інструментами.

1. Гарячі клавіші для роботи з блоками：
   • Швидке додавання блоків: введіть / + Назва блоку (наприклад, /图片 (Витягніть блок із зображенням напряму);
   • Мобільний блок: після вибору блоку натисніть ↑/↓ Клавіші зі стрілками або значок "⋮⋮" у лівій частині блоку;
   • Видалити блок: виберіть блок і натисніть Delete Натисніть клавішу Delete або клікніть значок "Видалити" на панелі інструментів блоку.
2. Представлення у реальному часіНатисніть кнопку "Попередній перегляд" у правому верхньому куті сторінки редагування, щоб перевірити, чи працює посилання, а також чи правильно відображаються зображення та відео.
3. Уникайте надмірного форматування.Кольори тексту та фону не повинні бути надто різноманітними (рекомендується не більше 3-х кольорів), щоб сторінка виглядала охайно; розміри зображень і відео мають бути однаковими (наприклад, ширина всіх має бути 800 пікселів), що сприятиме кращій естетичності.

За допомогою вищеописаних кроків ви зможете легко вставляти та редагувати текст, зображення, відео та посилання у редакторі Gutenberg. Пам'ятайте: кожен елемент є окремим "блоком". Виберіть його, а потім налаштуйте параметри у правій панелі, щоб досягти точного форматування. Попрактикуйтеся кілька разів, і ви швидко освоїте це!