Урок №1. «Абзац» в WordPress.

Что такое блок «Абзац»

Блок «Абзац» — базовый строительный элемент в редакторе WordPress (Gutenberg), который используется для добавления и форматирования текстового содержимого на страницах и в публикациях. Он появляется автоматически при создании новой записи или страницы.

Основные возможности блока «Абзац»

Форматирование текста:

• Жирный и курсивный шрифт. Можно выделить текст и использовать соответствующие кнопки в панели инструментов.
• Зачёркивание. Доступна опция strikethrough. 
• Ссылки. Нужно выделить текст, нажать иконку ссылки, ввести или вставить URL и подтвердить действие. 
• Подстрочный и надстрочный текст. Доступны опции subscript и superscript. 

Настройки блока:

• Выравнивание. Можно выбрать выравнивание текста по левому краю (по умолчанию), по центру или по правому краю.
• Размер шрифта. Доступна настройка через ползунок или ввод конкретного значения в пикселях. 
• Цвет текста и фона. Можно выбрать предустановленный цвет или использовать цветовой круг. 
• Капитель (Drop Cap). Увеличивает размер первой буквы первого слова, делает её полужирной, а окружающий текст обтекает эту букву. 

Дополнительные возможности:

• Преобразование в другие блоки. Абзац можно преобразовать в заголовок, список, цитату, блок кода и другие типы блоков.
• CSS-классы. Можно добавить дополнительные CSS-классы для кастомного стилинга. 
• Вставка медиа. В некоторых случаях возможно добавление изображений или других медиаэлементов непосредственно в текст абзаца.

Особенности работы

• Если выделить любой текст в абзаце, появится окно форматирования, где можно изменить стиль текста или преобразовать блок в другой тип. 
• Чтобы удалить блок абзаца, нужно выделить его и в меню дополнительных опций (три точки) выбрать «Удалить блок». 
• В некоторых темах доступна настройка межстрочного интервала (line height) через типографические настройки блока. 

Ограничения

В стандартном Gutenberg нет встроенной опции для выравнивания текста по ширине (justify). Для этого можно использовать плагины (например, «Обоснование для блока абзацев») или добавлять CSS-стили вручную.

Также в Gutenberg нельзя напрямую вставить изображение внутрь абзаца как в классическом редакторе. Нужно создавать отдельный блок изображения, а затем располагать его относительно текстового блока но можно вставлять особые строчные знаки и эмодзи.

Если вам нужны дополнительные детали о конкретных функциях или сравнение с другими блоками, уточните запрос.

Как добавить блок «Абзац»

Есть несколько способов:

1. Автоматически: начните вводить текст в редакторе — он автоматически преобразуется в блок «Абзац».
2. Через кнопку «+»:
   • нажмите на значок «+» в верхней панели инструментов или в правом нижнем углу пустого блока;
   • найдите блок «Абзац» через строку поиска;
   • щёлкните по нему, чтобы вставить в редактор.
3. С помощью клавиши Enter: нажмите Enter после существующего текстового блока — создастся новый блок «Абзац».
4. Через слэш (/): введите / в новой строке, затем начните печатать «абзац» для быстрого поиска блока.

Панель инструментов блока

При выделении блока сверху появляется панель с опциями:

• Преобразовать в — позволяет изменить тип блока (например, на заголовок, список, цитату и т. д.).
• Инструменты перемещения — перетаскивание блока или перемещение стрелками вверх/вниз.
• Выравнивание текста — по левому краю, центру, правому краю.
• Форматирование текста:
  • жирный шрифт (Ctrl + B / Command + B);
  • курсив (Ctrl + I / Command + I);
  • зачёркивание;
  • подчёркивание;
  • верхний/нижний индекс.
• Вставка ссылки — добавление гиперссылки к выделенному тексту.
• Дополнительные опции (меню с тремя точками):
  • выделение цветом текста или фона;
  • вставка встроенного изображения (например, эмодзи);
  • ввод с клавиатуры (моноширинный шрифт);
  • дублирование блока;
  • редактирование в формате HTML.

Сочетания клавиш для форматирования

• Alt + Shift + 1–6 — преобразовать текст в заголовок соответствующего уровня;
• Alt + Shift + 0 — вернуть текст из заголовка в обычный абзац;
• Ctrl + B (Command + B) — жирный шрифт;
• Ctrl + I (Command + I) — курсив;
• Shift + Enter — новая строка внутри блока без создания нового абзаца.

Как в WordPress соединить два абзаца в один или заголовок с абзацем

Разберу пошагово, как объединить элементы в WordPress — отдельно для классического редактора и для Gutenberg (современного блочного).

В редакторе Gutenberg (блочном)

Чтобы соединить два абзаца:

1. Откройте запись/страницу в редакторе.
2. Кликните на первый абзац, который хотите объединить, — появится панель инструментов.
3. Поставьте курсор в конец первого абзаца (в самый конец текста).
4. Нажмите клавишу Backspace (не Enter!) — это удалит разделитель между блоками, и второй абзац «подтянется» к первому.
5. Если между абзацами был лишний пробел, удалите его клавишей Delete.
6. Теперь текст из двух абзацев находится в одном блоке. При необходимости отредактируйте его (добавьте пробел, запятую и т. д.).

Чтобы соединить заголовок с абзацем:

1. Выделите блок с заголовком.
2. Поставьте курсор в самый конец заголовка (после последнего слова).
3. Нажмите Backspace. Текст заголовка «сольётся» с первым словом абзаца.
4. Добавьте пробел и/или знаки препинания, чтобы текст стал читабельным.
5. Преобразуйте получившийся блок обратно в абзац:
   • нажмите на значок «Преобразовать в» на панели инструментов (иконка с квадратом и стрелками);
   • выберите «Абзац» в выпадающем меню.

Альтернативный способ (через HTML‑режим):

1. В правом верхнем углу редактора нажмите на три вертикальные точки → «Редактор кода» (или используйте сочетание клавиш Ctrl + Shift + Alt + M).
2. Найдите HTML‑теги: заголовок будет внутри <h1>...</h1> (или <h2>, <h3> и т. д.), а абзац — внутри <p>...</p>.
3. Удалите закрывающий тег заголовка (</h1>) и открывающий тег абзаца (<p>).
4. Удалите строку между тегами, если она есть.
5. Убедитесь, что текст теперь находится между <h1> и </p> (это некорректно, но сработает для объединения).
6. Вернитесь в визуальный редактор (три точки → «Визуальный редактор»). WordPress автоматически исправит разметку, поместив весь текст в <p>.

В классическом редакторе (TinyMCE)

1. Переключитесь на вкладку «Текст» (вверху редактора, рядом с «Визуально»).
2. Найдите в HTML‑коде теги абзацев: каждый абзац окружён <p>...</p>. Заголовок — <h1>...</h1> или подобным.
3. Чтобы объединить два абзаца:
   • удалите закрывающий тег первого абзаца (</p>);
   • удалите открывающий тег второго абзаца (<p>);
   • удалите переносы строк между ними, если они есть.
4. Чтобы объединить заголовок и абзац:
   • удалите закрывающий тег заголовка (</h1>);
   • удалите открывающий тег абзаца (<p>);
   • добавьте пробел между последним словом заголовка и первым словом абзаца, если нужно.
5. Переключитесь обратно на вкладку «Визуально», чтобы проверить результат.

Важные нюансы и советы

• Backspace vs Delete. Всегда используйте Backspace, когда курсор стоит в конце верхнего блока. Delete работает, только если курсор стоит в начале нижнего блока.
• Форматирование. При объединении блоков может сброситься форматирование (жирный, курсив, ссылки). Проверьте итоговый текст и при необходимости восстановите его.
• Пробелы и знаки препинания. После объединения часто нужно вручную добавить пробел, запятую, тире или точку, чтобы текст выглядел естественно.
• Резервная копия. Перед массовыми правками в HTML‑режиме сохраните черновик (нажмите «Сохранить черновик»).
• Проверка на сайте. После сохранения изменений откройте страницу на сайте (не в редакторе), чтобы убедиться, что всё отображается корректно.

Backspace: что это за кнопка

Backspace (буквально — «пробел назад») — клавиша на клавиатуре, которая удаляет символ, находящийся перед курсором (слева — при письме слева направо).

Основные характеристики

• Назначение: удаление символов слева от курсора.
• Расположение: обычно находится в верхнем цифровом ряду клавиатуры, крайняя справа; занимает ширину примерно двух обычных клавиш.
• Обозначение: может быть подписана как Backspace, Bksp или обозначена значком стрелки, направленной влево (←) либо ⌫.
• ASCII‑код: 0x08 (управляющий символ).
• Произношение: по‑русски — «бэкспэйс».

Как работает

1. Поставьте курсор после символа, который хотите удалить (курсор должен находиться справа от него).
2. Нажмите клавишу Backspace.
3. Символ слева от курсора исчезнет.

Примеры использования

• Исправить опечатку: напечатали «приветт» → поставьте курсор после второго «т» и нажмите Backspace один раз → получится «привет».
• Удалить несколько символов: удерживайте Backspace нажатой — символы будут удаляться один за другим, пока вы не отпустите клавишу.
• Удалить слово целиком: сочетание Ctrl + Backspace (в большинстве текстовых редакторов и браузеров) удаляет последнее слово целиком.

Чем отличается от Delete

Параметр	Backspace	Delete
Что удаляет	Символы перед курсором (слева)	Символы после курсора (справа)
Расположение	В верхнем цифровом ряду, справа	В группе клавиш управления курсором или на цифровой клавиатуре
Обозначение	Стрелка ← или надпись Backspace	Надпись Delete или Del
Дополнительные функции	В браузерах иногда — переход на предыдущую страницу	В ОС — удаление файлов/папок

Пример разницы

Текст: при|вет (курсор обозначен как |).

• Нажали Backspace → удалится буква «и»: првет.
• Нажали Delete → удалится буква «в»: приет.

Особые случаи

• На клавиатурах Apple: клавиша называется Delete, но выполняет ту же функцию, что и Backspace на PC.
• В мобильных устройствах: на экранной клавиатуре обычно есть кнопка с изображением стрелки ← или ⌫ — это аналог Backspace.
• В файловых менеджерах: иногда Backspace используется для перехода в родительскую папку.
• В браузерах: в некоторых старых версиях Backspace служил для перехода на предыдущую страницу (сейчас чаще используют Alt + ←).

Настройки блока (правая боковая панель)

Чтобы открыть настройки, выберите блок и нажмите значок настроек

(квадрат с двумя колонками) в правом верхнем углу.

Доступны следующие настройки:

1. Цвет:
   • цвет текста;
   • цвет фона;
   • цвет ссылок.
2. Типография:
   • размер шрифта (маленький, средний, большой или пользовательское значение);
   • семейство шрифтов;
   • стиль (обычный, курсив);
   • толщина (от тонкого до жирного);
   • высота строки (межстрочный интервал);
   • регистр (все прописные, строчные и т. д.);
   • интервал между буквами.
3. Размеры:
   • ширина и высота блока;
   • внутренние отступы (padding);
   • внешние отступы (margin).
4. Граница:
   • цвет, толщина, радиус скругления границы.
5. Дополнительно:
   • HTML‑якорь (для ссылок на конкретный раздел страницы);
   • CSS‑классы (для индивидуальной стилизации).

Практические советы

• Чтобы добавить отступ в текст, сгруппируйте блоки «Абзац» в блок «Группа» и настройте отступы там.
• Для изменения цвета отдельных слов используйте опцию «Выделение» на панели инструментов (не общие настройки цвета блока).
• Встроенное изображение (например, эмодзи) вставляется через меню дополнительных опций — оно будет находиться в той же строке, что и текст.
• Используйте режим навигации (List View) на верхней панели для удобной работы с большим количеством блоков.

Как в WordPress заголовок и абзац сделать одним блоком

Разберу подробно, как объединить заголовок и абзац в один блок в WordPress (редактор Gutenberg).

Способ 1. Использование блока «Группа» (рекомендуемый)

Этот способ сохраняет редактируемость каждого элемента и даёт гибкость в настройке.

Пошаговая инструкция:

1. Добавьте блок «Заголовок» и введите текст заголовка.
2. Добавьте блок «Абзац» под заголовком и введите текст абзаца.
3. Выделите оба блока:
   • зажмите клавишу Shift;
   • кликните (выделите) сначала на блок «Заголовок», затем на блок «Абзац»;
   • либо используйте List View (значок списка в верхнем левом углу редактора), чтобы выделить оба блока.
4. Нажмите на значок «Группа» (квадрат с двумя слоями) в панели инструментов над выделенными блоками.
5. Теперь заголовок и абзац находятся внутри блока «Группа». Вы можете:
   • добавлять отступы (padding) для всей группы;
   • менять фон для группы целиком;
   • перемещать группу как единый элемент.

Плюсы:

• сохраняется возможность редактировать заголовок и абзац отдельно;
• можно применять общие стили к группе (фон, отступы, границы);
• легко добавить другие блоки в группу позже.

Минусы:

• немного сложнее структура HTML‑кода.

Способ 2. Использование блока «Столбцы» (для боксового размещения)
Подходит, если нужно разместить заголовок и текст рядом (например, в карточке).

Пошаговая инструкция:

1. Добавьте блок «Столбцы» (Columns). Выберите макет с 1 колонкой.
2. Внутри столбца добавьте блок «Заголовок» и блок «Абзац».
3. Настройте отступы и выравнивание внутри столбца.
4. Если нужно разместить заголовок слева, а текст справа:
   • выберите макет столбцов с 2 колонками;
   • в левую колонку поместите заголовок, в правую — абзац.

Плюсы:

• гибкость в размещении элементов;
• возможность создавать сложные макеты.

Минусы:

• избыточно, если элементы должны идти друг за другом.

Способ 3. Преобразование в блок «Произвольный HTML» (для полного контроля)
Подходит для продвинутых пользователей, которые хотят вручную управлять кодом.

Пошаговая инструкция:

1. Создайте заголовок и абзац обычными блоками.
2. Выделите оба блока.
3. В меню дополнительных опций (три точки) выберите «Преобразовать в HTML‑блок».
4. В открывшемся редакторе кода вы увидите HTML:

html

<h2>Ваш заголовок</h2> <p>Ваш текст абзаца</p>

5. Вы можете отредактировать код вручную или оставить как есть.

Плюсы:

• полный контроль над HTML‑структурой;
• меньший вес страницы (меньше вложенных блоков).

Минусы:

• потеря визуального редактора для этих элементов;
• требуется знание HTML.

Способ 4. Использование кастомного блока (для разработчиков)
Если вы создаёте тему или плагин, можно зарегистрировать собственный блок, объединяющий заголовок и абзац.

Пример кода (functions.php):

php

function register_custom_heading_paragraph_block() {
    register_block_type('my-theme/heading-paragraph', array(
        'editor_script' => 'my-block-script',
        'render_callback' => 'render_heading_paragraph_block'
    ));
}
add_action('init', 'register_custom_heading_paragraph_block');

Плюсы:

• полная кастомизация;
• единообразие на всём сайте.

Минусы:

• требует навыков программирования.

Сравнение способов

Способ	Простота	Редактируемость	Гибкость	Для кого
Группа	★★★★☆☆	★★★★★☆	★★★★☆☆	Начинающие и продвинутые
Столбцы	★★★★☆☆	★★☆☆☆	★★★★★☆	Для сложных макетов
HTML‑блок	★★☆☆☆	★☆☆☆☆	★★★★★★	Продвинутые пользователи
Кастомный блок	☆☆☆☆☆	★★★★☆☆	★★★★★☆	Разработчики

Практический совет: лучший подход для большинства случаев

Для 90 % задач оптимально использовать блок «Группа»:

1. Создавайте заголовок и абзац как отдельные блоки.
2. Группируйте их.
3. Применяйте общие стили к группе:
   • фон (цвет или градиент);
   • отступы (внутренние и внешние);
   • границы и тени;
   • выравнивание содержимого.

Это сохранит гибкость редактирования и даст возможность легко вносить изменения в будущем.

Частые проблемы и решения

• Проблема: после группировки нельзя редактировать заголовок.
  Решение: кликните внутри блока «Группа», затем кликните на заголовок — он выделится внутри группы.
• Проблема: группа занимает слишком много места.
  Решение: уменьшите отступы (padding) в настройках группы.
• Проблема: нужно разделить группу обратно на блоки.
  Решение: в меню группы (три точки) выберите «Разгруппировать».

---

Практическое занятие

Цель: отработать навыки работы с блоком «Абзац» в редакторе WordPress Gutenberg.

Задание 1. Создание и форматирование абзацев

1. Откройте редактор WordPress (создайте новую запись или страницу).
2. Добавьте 3 блока «Абзац», используя разные способы: автоматически, через кнопку «+», через клавишу Enter.
3. Отформатируйте текст в каждом блоке:
   • в первом — сделайте часть текста жирным и курсивом;
   • во втором — добавьте ссылку на любой сайт;
   • в третьем — выделите цветом фрагмент текста.
4. Используйте сочетания клавиш для форматирования (Ctrl + B, Ctrl + I и т. д.).

Задание 2. Объединение блоков

1. Создайте блок «Заголовок» (уровень 2) и блок «Абзац» с произвольным текстом.
2. Объедините заголовок и абзац в один блок с помощью клавиши Backspace.
3. Проверьте, что форматирование сохранилось. При необходимости восстановите его.
4. Добавьте пробел и точку между текстом заголовка и абзаца для корректного отображения.

Задание 3. Группировка элементов

1. Создайте новый заголовок (уровень 3) и два абзаца с текстом.
2. Сгруппируйте все три блока в один блок «Группа».
3. Настройте фон группы (выберите любой цвет).
4. Измените внутренние отступы группы (padding) так, чтобы текст не прилипал к границам.
5. Попробуйте отредактировать заголовок внутри группы — убедитесь, что это возможно.

Задание 4. Работа с настройками блока

1. Выберите один из созданных абзацев.
2. Откройте панель настроек (правая боковая панель).
3. Измените:
   • размер шрифта на «большой»;
   • межстрочный интервал;
   • добавьте границу (выберите цвет и толщину).
4. Сохраните изменения и проверьте, как выглядит блок на сайте (предварительный просмотр).

Задание 5. Вставка эмодзи

1. Скопируйте любой эмодзи с сайта Emojipedia (emojipedia.org) или EmojiCopy (emojicopy.org).
2. Вставьте эмодзи в один из абзацев.
3. Попробуйте изменить размер эмодзи через настройки шрифта.
4. Добавьте эмодзи в заголовок и проверьте, как он отображается.

Итоговый результат: у вас должна получиться страница с:

• несколькими отформатированными абзацами;
• объединённым блоком (заголовок