Когда сайт начинает расти, код быстро расползается по разным местам: HTML остаётся в виджетах Elementor, CSS — в настройках темы, JavaScript — в отдельных вставках, а PHP — в functions.php или случайном плагине сниппетов. Пока фрагментов два или три, это терпимо. Когда из них собирается весь сайт, найти нужную часть, безопасно обновить её и перенести на другой проект становится трудно.
Почему код в теме и Elementor быстро превращается в хаос
WordPress позволяет решать одну и ту же задачу несколькими способами. Небольшой CSS можно добавить через настройки оформления, HTML — через редактор или Elementor, а PHP — через дочернюю тему или отдельный плагин. Проблема начинается не в самом способе, а в отсутствии единой системы.
Прямое редактирование файлов родительской темы особенно неудобно для долгой работы: при обновлении темы изменения могут быть потеряны. Официальная документация WordPress рекомендует использовать дочерние темы, когда нужно изменять код темы, не редактируя оригинальные файлы напрямую. Подробнее о дочерних темах в документации WordPress.
- Код трудно найти через несколько месяцев.
- Непонятно, какой фрагмент сейчас активен и где он подключён.
- Одинаковые стили и обработчики начинают дублироваться.
- Большой HTML-виджет Elementor становится неудобно редактировать.
- Перенос одной функции на другой сайт превращается в ручной поиск зависимостей.
- Ошибочная правка PHP может нарушить работу всего сайта.
Блоки кода не отменяют стандартную архитектуру WordPress. Шаблоны темы, сложная бизнес-логика и полноценные плагины по-прежнему лучше хранить в предназначенных для этого файлах. Universal Code Blocks решает другую задачу: управляет самостоятельными фрагментами, которые нужно быстро подключать через шорткоды.
Зачем был создан A — Universal Code Blocks
На сайте anvartar.uz страницы собираются из отдельных логических частей: шапка, главный экран, услуги, проекты, блог, контакты, стили для разных устройств и общий JavaScript. Хранить всё это в одном огромном Elementor-виджете было неудобно, поэтому для проекта был создан собственный плагин A — Universal Code Blocks.
Плагин хранит HTML, CSS, JavaScript, PHP и комбинированные блоки. У каждого блока есть название, короткий ID, тип кода, содержимое, состояние активности и порядок сортировки. Блок выводится в записи, странице, шаблоне или Elementor через шорткод вида .
Шорткоды — это штатный механизм WordPress для подключения специального содержимого к записям и страницам. Плагин регистрирует собственный шорткод, а пользователь вставляет только короткую команду в нужное место. Описание Shortcode API в официальной документации WordPress.
Как устроен один блок
Блок не является отдельной страницей. Это самостоятельный фрагмент, который хранится в базе WordPress и вызывается там, где установлен его шорткод.
Как создать и подключить блок
- Открыть раздел Universal Code BlocksВ админке WordPress перейти к списку кодовых блоков и нажать создание нового блока.
- Дать понятное названиеНазвание должно объяснять назначение: «Контактная секция», «Глобальные стили», «Скрипты карусели».
- Назначить постоянный IDНапример,
contact-sectionилиglobal-css. После подключения шорткода ID не следует менять без необходимости. - Выбрать тип кодаТип помогает отделять разметку, стили, скрипты, PHP и комбинированные фрагменты.
- Вставить полный кодБлок должен быть самостоятельным и не зависеть от случайного фрагмента, оставленного в другом виджете.
- Сохранить и активироватьПосле сохранения проверить, что блок активен и не содержит синтаксических ошибок.
- Вставить шорткодДобавить команду в редактор WordPress, Shortcode-виджет Elementor, запись, страницу или шаблон.
- Проверить результатОткрыть страницу на компьютере и телефоне, проверить консоль браузера и убедиться, что код не дублируется.
Шаг 1. Откройте список блоков
После установки и активации плагина откройте раздел A — Universal Code Blocks в административной панели WordPress. На первой странице отображаются уже созданные блоки, их ID, типы кода, шорткоды и состояние активности.
Шаг 2. Нажмите «Добавить новый блок»
Для создания нового фрагмента используйте кнопку в правой верхней части списка. Плагин откроет отдельную форму, не изменяя существующие блоки.
Шаг 3. Заполните форму блока
Укажите понятное название, постоянный ID и статус. Затем вставьте полный код в редактор. Название помогает находить блок в админке, а ID используется внутри шорткода.
Шаг 4. Выберите правильный тип кода
Тип определяет способ обработки содержимого. Для самостоятельной разметки выбирается HTML, для стилей — CSS, для клиентской логики — JavaScript, для серверной логики — PHP. COMBINED используется, когда один блок действительно объединяет несколько частей.
Шаг 5. Проверьте ID и скопируйте шорткод
После сохранения блок получает готовый шорткод. Его можно скопировать и вставить в редактор WordPress, Shortcode-виджет Elementor, шаблон или запись. ID и шорткод должны оставаться согласованными.
Пример HTML-блока
<a class="btn btn-primary" href="#contact">Обсудить задачу</a>
Такой фрагмент можно вывести в нескольких местах одним шорткодом. Если текст или ссылка изменятся, достаточно отредактировать один блок.
Что можно хранить в отдельных блоках
Разметка
Секции страниц, карточки, баннеры, формы, таблицы, микро-лендинги и повторяемые HTML-компоненты.
Стили и скрипты
Глобальный CSS, адаптивные правила, анимации, карусели, меню и обработчики интерфейса.
Динамический вывод
PHP-фрагменты, данные WordPress, ACF-поля и логика, которую должен выполнять сервер.
HTML
HTML-блоки подходят для самостоятельных секций сайта. На anvartar.uz так подключаются крупные части страниц, а в записи блога помещается только шорткод конкретной статьи.
CSS
Стили удобно отделять от HTML, если один CSS-блок обслуживает несколько секций. При этом важно не создавать бесконечные патчи в конце файла: рабочий раздел лучше заменять целиком, сохраняя существующие классы.
JavaScript
JavaScript-блоки подходят для общей логики интерфейса: меню, анимации, карусели, формы и обработчики событий. Перед добавлением нового скрипта нужно проверить, нет ли уже такого обработчика в другом блоке.
PHP
PHP позволяет выводить динамические данные WordPress и выполнять серверную логику. Это самая ответственная категория: ошибка может привести к критическому сбою, а неизвестный код — создать уязвимость. PHP-блоки должны быть доступны только доверенному администратору и проходить ручную проверку.
Не вставляйте PHP или JavaScript из случайного источника только потому, что фрагмент обещает нужную функцию. WordPress рекомендует проверять права пользователя, валидировать входные данные и экранировать вывод. Основы безопасности в официальной документации WordPress.
Какие функции упрощают работу с большим количеством блоков
Когда блоков становится много, одного поля кода недостаточно. В текущей версии Universal Code Blocks предусмотрены функции, которые помогают поддерживать порядок:
- поиск и фильтрация блоков;
- сортировка и состояние активности;
- дублирование существующего блока;
- массовое удаление с резервной копией;
- импорт и экспорт ZIP-пакетов;
- подсветка синтаксиса и номера строк;
- поиск внутри кода;
- перенос строк и полноэкранный редактор;
- сохранение через
Ctrl + S.
Что важно проверить перед обновлением плагина
Блоки Universal Code Blocks хранятся в базе WordPress, а не только в файлах плагина. Это позволяет обновлять файлы плагина отдельно от содержимого блоков. Но перед крупным обновлением всё равно нужен понятный порядок действий.
- Экспортировать блокиСохранить ZIP-пакет с актуальной структурой.
- Сделать резервную копию базыНе полагаться только на внутренний backup плагина.
- Сохранить старую версиюОставить возможность быстро вернуть рабочую папку плагина.
- Проверить ID и шорткодыПосле обновления открыть основные страницы и убедиться, что существующие блоки выводятся.
- Проверить PHP и JavaScriptУбедиться, что динамические блоки выполняются без ошибок и дублирующихся обработчиков.
Сборка A — Universal Code Blocks 1.3.0 подготовлена для проекта, но перед размещением готового комплекта на Boosty требуется финальное тестирование всех функций на чистой установке и на рабочем сайте. Поэтому в текущем черновике статьи нет кнопки покупки и обещания публичного архива.
Когда блоки удобны, а когда нужен отдельный плагин
Universal Code Blocks удобен для самостоятельных фрагментов, которые нужно быстро подключать и обновлять. Если функция имеет собственную базу данных, сложные права доступа, фоновые задачи, публичные формы или множество связанных файлов, её лучше оформлять как отдельный WordPress-плагин.
Что получает владелец сайта
Главный результат — не просто ещё одно место для вставки кода. Владелец получает понятную карту сайта: какой блок за что отвечает, где он подключён и как его заменить, не разбирая огромный Elementor-виджет или файлы темы.
Для разработчика это также упрощает перенос решений между проектами. Блок можно экспортировать, проверить его зависимости и установить на другом WordPress-сайте, сохранив понятное название и ID.
Другие практические материалы о WordPress, автоматизации и инструментах собраны в разделе «Блог» на anvartar.uz.
Вставлять HTML, CSS, JavaScript и PHP в WordPress без правки темы можно через отдельные управляемые блоки и штатный механизм шорткодов. Такой подход помогает навести порядок, но не отменяет архитектуру WordPress и правила безопасности: PHP должен быть доступен только доверенному администратору, код нужно проверять, а перед обновлениями — сохранять резервные копии.