Разработка CMS-сайтов с WordPress и DIVI, программирование плагинов

Введение в WordPress

Системы управления контентом (CMS) значительно упрощают создание и управление веб-сайтами. Без навыков программирования компании и частные лица могут управлять контентом, настраивать дизайн и делать веб-сайты интерактивными. Самые известные CMS — это WordPress, Joomla, Drupal, Contao и TYPO3, при этом WordPress в настоящее время используется на примерно 43% всех веб-сайтов по всему миру, что делает его самой используемой системой с большим отрывом.

Я сам начинал с Joomla, затем использовал Contao и по веским причинам перешел на WordPress. Среди моих клиентов в профессиональной сфере я до сих пор часто вижу сайты на TYPO3, но они требуют большего освоения из-за TypoScript и поэтому не предлагают быстрого старта для всех пользователей и, в частности, веб-разработчиков. Также сложнее найти того, кто возьмется за расширения или обслуживание.

Пока системы работают стабильно и соответствуют всем техническим требованиям (актуальная версия PHP, обновления безопасности, GDPR, производительность), нет причин для полной переработки. В целом, веб-сайты обычно работают около 4–6 лет, прежде чем их кардинально переделывают.

Хостинг на all-inkl.com и других

WordPress в принципе не требует многого. PHP и MySQL/MariaDB достаточно, поэтому сайты на WordPress работают практически у всех провайдеров. Тем не менее, сейчас ожидается нечто большее – например:

• домен для разработки/тестирования (staging)
• удобное управление электронной почтой
• сертификаты LetsEncrypt для HTTPS, включая автопродление
• доступ по FTP/SFTP или веб-файловый менеджер
• автоматическое резервное копирование и простое восстановление
• быстрая, бесплатная поддержка
• достаточный объем оперативной памяти и актуальные версии PHP (например, 8.1/8.2+)
• возможность настройки собственных DNS-записей
• быстрый перенос и предоставление Auth-кодов по запросу
• простой мастер установки для WordPress и других систем

Предпочтительным провайдером на протяжении многих лет является all-inkl.com (партнерская ссылка), который предлагает очень справедливые цены на пакеты услуг и отличную поддержку. Тем, кто хочет размещать только CMS-системы, он подойдет идеально.

Тем, кому дополнительно требуются MongoDB, Node.js или Express, следует либо арендовать собственный сервер/VPS, либо обратиться к провайдерам, предоставляющим эти функции. Однако 99% всех классических веб-сайтов до сих пор в этом не нуждаются. Тем не менее, благодаря инструментам на базе ИИ все чаще появляются индивидуальные приложения – такие как веб-приложения, API или автоматизации. nuonu.com также является таким приложением, которое расширяет WordPress собственными плагинами и предлагает очень индивидуальные функции.

Почему WordPress и DIVI?

WordPress предлагает удобный интерфейс, огромный выбор расширений (плагинов) и тем, а также очень сильное сообщество. Будь то блог, корпоративный сайт, целевая страница или интернет-магазин – с WordPress можно реализовать практически все типы веб-сайтов. Установка и базовая настройка выполняются быстро, а благодаря конструкторам страниц, таким как DIVI, даже новички могут создавать профессиональные макеты.

Преимущества DIVI как конструктора страниц

DIVI отличается от многих других конструкторов страниц тем, что его можно использовать как полноценную тему + конструктор, и дополнительная тема не требуется. Это означает:

• Полный дизайн из одних рук – никаких дополнительных зависимостей от темы.
• Гибкие возможности дизайна с визуальным редактором Drag-and-Drop.
• Возможности редактирования на стороне клиента непосредственно на странице (фронтенд-редактирование).
• Отличная адаптивность для настольных компьютеров, планшетов и мобильных устройств.
• Готовые макеты и модули, значительно ускоряющие создание новых страниц.

Новое: DIVI 5 – Производительность и перспективы на будущее

DIVI 5 – это больше, чем обычное обновление: конструктор был полностью перестроен внутри и получил современную, значительно более легкую основу. Это обеспечивает заметно более быструю загрузку, меньший объем кода и лучшую основу для будущих функций.

• Новая, легкая базовая система – конструктор был разработан с нуля и работает более экономно.
• Более быстрая загрузка и отзывчивый редактор – особенно сложные страницы с множеством модулей выигрывают от новой архитектуры.
• Меньше шорткодов, более чистый код – это упрощает долгосрочное обслуживание, миграцию и положительно влияет на SEO.
• Новые функции дизайна, такие как переменные дизайна, расширенные единицы, вложенные строки и индивидуально настраиваемые точки останова для еще более точных адаптивных макетов.
• Улучшенная работа с крупными проектами – DIVI 5 разработан для обширных веб-сайтов с множеством шаблонов, глобальных элементов и макетов библиотеки.

Текущее состояние у нас: Сайт nuonu.com уже работает на бета-версии DIVI 5. Все клиентские проекты, реализованные сегодня с DIVI 4, могут быть постепенно и контролируемо перенесены после окончательного выпуска DIVI 5 – в идеале, сначала на тестовой среде. Таким образом, существующие сайты останутся стабильными, но смогут использовать преимущества производительности и удобства новой версии, как только это станет целесообразно и безопасно.

Общая структура современных веб-сайтов

Современные веб-сайты четко структурированы, наглядны и, прежде всего, должны быть адаптивными. При этом решающее значение имеют следующие аспекты:

• Цвета и шрифты должны соответствовать корпоративному дизайну.
• Логотип и отступы должны гармонично вписываться в макет.
• Индивидуальный заголовок и меню для интуитивной навигации.
• Структурированный нижний колонтитул, содержащий юридические ссылки, профили в социальных сетях и контактную информацию.
• Определение главной страницы, чтобы основная страница была установлена через «Настройки > Чтение».

Юридические требования: Выходные данные, Защита данных и Согласие на использование файлов cookie

Каждый веб-сайт нуждается в выходных данных (Impressum) и политике конфиденциальности. Кроме того, требуется работающий инструмент для получения согласия на использование файлов cookie, чтобы соответствовать требованиям GDPR и TTDSG. Примером является Reel Cookie Consent, который можно протестировать и расширить собственными скриптами, чтобы, например, интегрировать Matomo в соответствии с GDPR.

Использование Matomo на поддомене

Matomo может работать как на основном домене, так и на поддомене. Преимущества использования поддомена:

• Улучшенный контроль данных и безопасность – данные полностью остаются на вашем собственном сервере.
• Конфигурация, ориентированная на конфиденциальность, поскольку данные не передаются третьим лицам.
• Собственные возможности отказа для пользователей, чтобы соответствовать требованиям GDPR.

Обязательные плагины для веб-сайта на WordPress

Для профессионального и функционального сайта на WordPress некоторые плагины, на наш взгляд, практически незаменимы (список, конечно, может варьироваться в зависимости от проекта):

• RankMath – SEO-плагин с поддержкой Schema, редиректами и множеством инструментов для оптимизации на странице
• Happy Files – управление файлами с папками для медиа, записей, страниц и многого другого
• Reel Cookie Consent – управление файлами cookie (или альтернативы, такие как Real Cookie Banner, Borlabs Cookie или Complianz)
• DIVI Supreme – расширенные модули и эффекты для DIVI
• WP Armour – защита от спама в формах
• AIOS (All in One Security) – комплексный плагин безопасности для усиления защиты входа, файловой системы и брандмауэра

Настройка безопасности в WordPress

После установки настройки безопасности следует немедленно оптимизировать:

• Активировать AIOS и WP Armour для защиты от атак методом перебора, спама и простых бот-атак.
• Изменить стандартное имя пользователя администратора, чтобы затруднить целенаправленные атаки.
• Двухфакторная аутентификация для большей безопасности (необязательно, но рекомендуется).
• Настроить регулярное резервное копирование (например, с помощью Duplicator, UpdraftPlus или BackWPup) и протестировать восстановление.

Настройка медиафайлов WordPress

По умолчанию WordPress сохраняет медиафайлы в папках, разделенных по месяцам. Это удобно для блогов, но часто непрактично для корпоративных веб-сайтов. Поэтому рекомендуется отключить автоматическую структуру папок в «Настройки > Медиафайлы» и вместо этого организовать медиатеку с помощью такого инструмента, как Happy Files.

Этап дизайна после базовой установки

После базовой установки начинается фактическое оформление:

• Определить цвета, шрифты и отступы – глобально в DIVI как основу дизайна (или дополнительно через переменные дизайна в DIVI 5).
• Создать индивидуальный заголовок и меню, чтобы сделать навигацию интуитивно понятной.
• Настроить нижний колонтитул, который содержит выходные данные, политику конфиденциальности, ссылки на социальные сети и контактную информацию.
• Сделать номера телефонов кликабельными с помощью tel: и адреса электронной почты с помощью mailto:.
• Создать главную страницу и затем установить ее как основную страницу в «Настройки > Чтение».

С этой структурой клиенты получают четкое руководство по созданию современного, юридически безопасного и функционального веб-сайта. Если потребуются дополнительные настройки, упомянутые плагины и инструменты могут быть индивидуально сконфигурированы.

Совместный процесс разработки

Для нас важно, чтобы клиент – если он того желает – как можно раньше участвовал в разработке. Это касается принятия решений и утверждения внешнего вида, а также создания страниц, меню, управления SEO-данными, загрузки медиафайлов и многого другого. Чем больше клиент может сделать сам, тем лучше – и тем легче будет самостоятельное обслуживание в дальнейшем.

Логотип и фавикон

Часто имеются устаревшие или отсутствующие собственные дизайны. В этом случае мы также создаем логотипы и фавиконы в виде векторных файлов и прозрачных PNG. Благодаря Midjourney и Illustrator мы можем по запросу предоставить выбор 2D- и 3D-логотипов. Мы также занимаемся подбором названий, включая проверку и регистрацию свободных доменов или их перенос.

Ссылки на социальные сети

DIVI поставляется с собственным модулем, содержащим готовые, юридически безопасные логотипы многих поставщиков социальных сетей. Глобальные ссылки также можно сохранить на панели управления в разделе DIVI > Настройки темы. Заголовок с логотипом, меню и настраиваемым нижним колонтитулом вы также можете увидеть на этой странице.

Создание SEO-контента

С этого момента мы начинаем создавать страницу за страницей – при этом RankMath следует учитывать немедленно. Заголовок, описание, og:image, h1, h2, h3 … SEO-дружественные и легко читаемые заголовки и тексты со смысловыми выделениями, а также выразительный, хорошо оптимизированный графический материал. SEO first означает: контент создается не только для посетителей, но и для поисковых систем и социальных сетей. Что следует учитывать и какие инструменты вам для этого понадобятся, вы найдете в руководстве по нашей SEO-стратегии.

Завершение всех материалов и SEO-данных

Создание каждой страницы может занимать разное время. Некоторые страницы требуют дополнительных настроек, например, форм и их безопасной отправки через SSL или специальных настроек отслеживания/согласия. В среднем на каждую страницу уходит около часа и более. Только когда все страницы готовы и последняя ссылка протестирована, сайт готов к живому тестированию.

Этап тестирования с оптимизацией производительности

Готовый сайт – это всегда событие, но теперь его необходимо тщательно протестировать. Мы проверяем:

• все внутренние и внешние ссылки,
• все рекомендации RankMath,
• отображение в социальных сетях (например, с помощью отладчика Facebook / отладчиков URL),
• время загрузки с помощью тестов скорости (например, PageSpeed Insights, GTmetrix, WebPageTest).

Только когда все ошибки устранены и сайт демонстрирует убедительные результаты в тестах производительности, он окончательно запускается в работу.

Генерация карты сайта и регистрация в Google Search Console

Финальным этапом создания является регистрация в Google Search Console. Карта сайта, сгенерированная RankMath или WordPress, загружается, чтобы Google мог структурированно индексировать весь релевантный контент.

Краткосрочный и долгосрочный мониторинг

Через несколько дней сайт должен появиться в результатах поиска. С помощью site:domain.de или непосредственно в Google Search Console мы проверяем, действительно ли весь важный контент был проиндексирован. Не позднее этого момента должны быть выявлены и исправлены возможные ошибки.

С этого момента мы также можем регулярно посещать наш поддомен Matomo и оценивать успех сайта в реальном времени. В зависимости от интересов посетителей, контент может быть расширен, поисковые запросы уточнены, а новые целевые страницы созданы. Таким образом, веб-сайт не остается статичным, а развивается вместе с целями компании.

Запись в Google Business

Тот, кто занимается созданием и оптимизацией веб-сайтов, должен также обратить внимание на Google Business, Карты, Изображения, Видео, Новости и т.д. Мы являемся поставщиками услуг и также отвечаем за то, какие данные видит посетитель. Часто именно эти данные привлекают посетителя на веб-сайт или побуждают его к звонку.