Курс MODX 3 с нуля: профессиональная разработка на Fenom и Porto

Разработка на MODX 3 — это осознанный выбор профессионалов, которые переросли ограничения конструкторов и стандартных CMS. MODX — это не просто система управления контентом, а полноценный Content Management Framework (CMF). Он даёт фронтенд- и бэкенд-разработчику абсолютный контроль над кодом, производительностью и архитектурой проекта.

В этом практическом руководстве мы пройдём путь от выбора инфраструктуры до сборки динамического бизнес-сайта на базе современного шаблонизатора Fenom.

Почему MODX 3 — хороший выбор в 2026 году?

• Производительность: достижение «зелёной зоны» Google PageSpeed «из коробки» благодаря продвинутому кэшированию;
• чистота кода: система не навязывает свою разметку — вы получаете именно тот HTML, который сверстали;
• безопасность: защита от XSS, SQL-инъекций и CSRF на уровне API;
• масштабируемость: одинаково эффективны и быстрые лендинги, и корпоративные порталы с тысячами страниц.

Путеводитель по курсу

Мы пройдём путь от чистой установки до реактивного сайта.

• Урок 1. База и инструменты — вы здесь: хостинг, пакеты, активация Fenom;
• Урок 2. Файловая структура — учимся не мусорить в админке;
• Урок 3. Центр управления — выносим контакты в ClientConfig;
• Урок 4. Сборка конструктора — внедряем PageBlocks;
• Урок 5. Внутренние страницы — переиспользование блоков;
• Урок 6–7. Формы и модалки — AJAX-отправка данных;
• Урок 8–10. Блог и поиск — работа с контентом и JSON-поиском;
• Урок 11. Права доступа — настраиваем роли для редакторов.

Уровень: новичок → средний. Результат: готовый проект с примерами кода.

Почему Fenom + Файлы + Готовый шаблон?

Fenom вместо тегов MODX: это быстрее. Теги [[+стандарт]] — это вчерашний день. Мы пишем {set $переменная = 'сегодняшний'}.

Файлы вместо БД: мы храним код в /assets/elements/. Это позволяет использовать Git и VS Code с автодополнением, поиском и рефакторингом.

Porto: это не просто вёрстка, это сотни готовых CSS-классов, которые избавят нас от написания своего велосипеда. Вы можете использовать любой другой шаблон — логика разработки не изменится.

База и инструменты

Шаг 1. Закладываем фундамент — хостинг и домен

Любой профессиональный проект начинается с выбора надежной площадки. Для MODX 3 критически важна поддержка PHP 8.1+ и быстрая СУБД (MySQL 8+).

Наша рекомендация для стабильной работы и высокой скорости — хостинг Beget.

Почему именно Бегет

• Оптимизация под MODX: актуальные версии PHP 8.2 + и MySQL 8 прямо «из коробки».
• Скорость: хранилище на NVMe-дисках обеспечивает молниеносный отклик сайта и панели управления.
• Удобство: автоматическая установка SSL-сертификатов (Let’s Encrypt) и развертывание MODX 3 в один клик через апплет «Установка CMS».
• 30 дней бесплатно: полноценный тестовый период с суб доменом — идеально, чтобы начать курс без вложений.

Домен — это лицо вашего проекта. Старайтесь выбирать короткое имя. Для РФ предпочтительна зона .ru, для мультиязычных и международных проектов — .com.

Полезные материалы по теме:

• Как правильно выбрать хостинг для MODX.
• Критерии подбора и регистрации домена.

Шаг 2. Установка и базовая настройка системы

• Установка: пошаговая инструкция: Как установить MODX 3.
• Безопасность: измените путь входа в админку и произведите первоначальную настройку;
• Адаптация шаблона: профессиональная практика — взять качественный HTML-шаблон (Porto) и внедрить его в MODX.

Шаг 3. Установка необходимых дополнений (пакетов)

Для работы нам понадобится «базовый стек» расширений:

Из официального репозитория MODX:

• TinyMCE Rich Text Editor — визуальный редактор для контента.
• FormIt — универсальный комбайн для обработки форм.
• PageBlocks — современный стандарт секционной сборки страниц.
• Translit – плагин транслитерации URL;
• ClientConfig — создание понятного интерфейса для правки контактов и соцсетей.
• pThumb – компонент для создания миниатюр изображений.

Из репозитория Modstore.pro (рекомендуется):

• pdoTools — сердце разработки на MODX. Включает шаблонизатор Fenom и инструменты для ускорения выборок данных.
• FetchIt — надстройка для отправки Ajax-форм через современный Fetch API.
• StaticFilesPlus — пакет специально созданный для этого курса (автоматически создает статические файлы для элементов в MODX).
• Ace – редактор кода с поддержкой Emmet.

Не знаете как добавить репозиторий Modstore и устанавливать пакеты? Изучите урок: установка дополнений в MODX 3.

Шаг 4. Настройка ЧПУ (дружественных URL) для SEO

Чтобы сайт успешно ранжировался в Google и Яндекс, активируйте дружественные URL. В Системных настройках (раздел core) установите:

• friendly_urls — Да
• friendly_urls_strict — Да (избавляет от дублей страниц)
• friendly_alias_translit — Russian (авто-транслитерация ссылок)

Важно! Переименуйте файл ht.access в корне сайта в .htaccess через FTP или менеджер файлов.

Шаг 5. Активация шаблонизатора Fenom

Современная разработка строится на использовании файловых элементов и синтаксиса Fenom. В настройках pdoTools включите:

1. pdotools_fenom_default — Да (обработка чанков).
2. pdotools_fenom_parser — Да (Fenom в шаблонах страниц).
3. pdotools_fenom_modx — Да (доступ к объекту {$modx}).
4. pdotools_fenom_save_on_errors – Да (чтобы сохранять ошибки компиляции Fenom в директорию «core/cache/default/pdotools/error» для последующей отладки).

Почему файлы + Fenom:

• Git-контроль: весь код в репозитории — полная история изменений;
• IDE на максимум: работа в VS Code / PhpStorm с автодополнением;
• скорость переноса: деплой = git pull (экономия 40% времени);
• командная работа: нет конфликтов при совместной разработке.

Подробнее: обзор шаблонизаторов и подходы к архитектуре.

Проверьте себя перед началом

Технический чек-лист:

• PHP: версия 8.1 или 8.2 (на 7.4 MODX 3 работает нестабильно);
• база: MySQL 8.0 или MariaDB 10.6+;
• ЧПУ: файл ht.access переименован в .htaccess, иначе ссылки будут выдавать 404;
• Fenom: в настройках pdoTools включены все 4 опции pdotools_fenom_*.

Домашнее задание

1. Установите как минимум пакеты pdoTools и ClientConfig;
2. включите Fenom в настройках (все 4 опции);
3. проверьте работу Fenom: создайте тестовую страницу и вставьте в поле «Содержимое»:

   {set $result = 9 * 9} Проверка Fenom: {$result}

4. если увидели «Проверка Fenom: 81» — вы готовы к следующему уроку.

Теоретическая подготовка:

• Сжатая документация Fenom — изучите {set}, {if}, {foreach};
• Файловые элементы pdoTools — разберитесь с @FILE и @INLINE.

Заключение

Что мы сделали:

• Настроили инфраструктуру: хостинг, домен, MODX 3;
• установили базовый стек дополнений;
• активировали ЧПУ и Fenom;
• подготовили систему к работе с файловыми элементами.

В следующем уроке: мы организуем файловую структуру /assets/elements/ и начнём перенос HTML-вёрстки Porto в MODX.

Перейти к Уроку 2. Организуем файлы и шаблоны →