Разработка кастомного шаблона ProcessWire под ключ

Вы запустили интернет-магазин на ProcessWire, но страницы грузятся по 3 секунды, а LCP зашкаливает? Стандартная тема добавила кучу лишних скриптов, а вёрстка не адаптируется под нужные данные. Кастомный шаблон решает это — вы получаете ровно то, что нужно, без мусора. За 8 лет работы с ProcessWire мы накопили опыт, позволяющий гарантировать надёжное решение. Переход на кастомные шаблоны снижает TTFB в 2–3 раза за счёт исключения неиспользуемых модулей.

Как разработать кастомный шаблон ProcessWire?

Шаблон в ProcessWire — PHP-файл в /site/templates/, имя которого совпадает с именем шаблона в базе. Файл получает объект $page с данными текущей страницы и полный доступ к $pages, $config, $user и остальному API. Чистый PHP — никакого движка по умолчанию, хотя можно подключить Twig через модуль TemplateEngineTwig. Для продакшена мы рекомендуем чистый PHP: он быстрее и не добавляет лишний слой абстракции.

Почему кастомный шаблон лучше стандартного?

Стандартные темы часто перегружены неиспользуемыми скриптами и стилями, что увеличивает LCP и CLS. Кастомный шаблон выводит только нужные данные, использует server-side rendering для тяжёлых компонентов и внедряет lazy loading для изображений. В одном из наших проектов — интернет-магазин на ProcessWire с 5000+ товаров — переход на кастомные шаблоны снизил потребление памяти на 60% и ускорил генерацию страниц в 2 раза. Дополнительно мы уменьшили количество запросов к БД с 50 до 3 на страницу.

Архитектура шаблонов: варианты разделения

Вариант 1: _init.php + _main.php

Самый распространённый подход. ProcessWire автоматически включает _init.php перед каждым шаблоном и _main.php после, если включена опция «Prepend/Append template file» в настройках шаблона:

// _init.php и _main.php — единый поток
$baseUrl = $config->urls->root;
$homePage = $pages->get("/");
$mainNav = $pages->find("parent=/,template!=error404,sort=sort");
?><!DOCTYPE html>
<html lang="<?= $user->language->name ?>">
<head>
    <meta charset="utf-8">
    <title><?= $page->title ?> | <?= $homePage->title ?></title>
    <link rel="stylesheet" href="<?= $config->urls->templates ?>css/main.css">
</head>
<body>
    <?php include("partials/nav.php"); ?>
    <main><?= $content ?></main>
    <?php include("partials/footer.php"); ?>
</body>
</html>

Вариант 2: контроллер + вид

Для сложных шаблонов логику выносят в отдельный файл-контроллер. Это упрощает поддержку и тестирование:

// templates/services.php — точка входа
require __DIR__ . '/controllers/services.php';
extract($viewData);
require __DIR__ . '/views/services.view.php';

// templates/controllers/services.php — контроллер
$viewData = [
    'items' => $pages->find("template=service, sort=sort, limit=12"),
    'categories' => $pages->find("template=service-category, sort=sort"),
    'pagination' => $modules->get("MarkupPagerNav"),
];

Сравнение подходов

Работа с изображениями

ProcessWire обрабатывает изображения на лету через метод size(). Пример с WebP:

$img = $page->images->first();
if ($img) {
    $thumb = $img->size(800, 600, ['cropping' => 'center', 'quality' => 85]);
    echo "<img src='{$thumb->url}' alt='{$img->description}' loading='lazy'>";
    $webp = $img->size(800, 600, ['suffix' => 'webp', 'webpAdd' => true]);
}

Кастомные 404 и редиректы

if ($page->redirect_url) {
    $session->redirect($page->redirect_url, 301);
}
if (!$user->isLoggedin() && $page->requires_login) {
    throw new Wire404Exception();
}

Как оптимизировать изображения: пошаговая инструкция

1. Выберите изображение из галереи страницы.
2. Вызовите $img->size() с нужными параметрами.
3. Укажите suffix: 'webp' и webpAdd: true для генерации WebP.
4. Добавьте атрибут loading='lazy' для отложенной загрузки.
5. Используйте $pages->findMany() для массовой конвертации на высоконагруженных сайтах.

Производительность: ленивая загрузка связей

По умолчанию FieldtypePage загружает связанные объекты при обращении. При больших списках используйте $pages->findMany() — потоковая обработка без загрузки всего в память:

foreach ($pages->findMany("template=product, sort=title") as $product) {
    echo $product->title . "\n";
}

Типовые сроки разработки шаблонов

Что входит в разработку?

• Архитектура шаблонов (init/main или controller+view)
• Настройка prepend/append файлов
• Вёрстка всех типовых страниц (список, детальная, 404)
• Оптимизация изображений (size, WebP, lazy loading)
• Базовая SEO-разметка (meta title, description, og:image)
• Документация по шаблонам и доступам
• Обучение команды заказчика (1 час онлайн)
• Гарантия на код 3 месяца

Обучение и документация — отдельный пункт: мы передаём знания, чтобы вы могли поддерживать проект самостоятельно.

Типичные проблемы и их решение

Неиспользование буферизации вывода при prepend/append приводит к дублированию заголовков. Решение — всегда включать prepend/append или применять паттерн контроллера. Загрузка всех связанных страниц сразу — для наборов более 100 записей используйте $pages->findMany(). Игнорирование кэша изображений: ProcessWire кэширует варианты, но при частой смене контента очищайте кэш в /site/assets/files/. 404-страница обязательна: всегда выбрасывайте Wire404Exception для защищённых разделов.

Свяжитесь с нами для консультации — обсудим ваш проект. Закажите разработку кастомного шаблона ProcessWire и получите гибкость и производительность.

MDN Lazy loading guide — подробнее об атрибуте loading. Wikipedia Core Web Vitals — метрики производительности.