Разработка 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 работают практически у всех провайдеров. Тем не менее, сейчас ожидается нечто большее – например:

• домен для разработки/тестирования
• удобное управление электронной почтой
• сертификаты 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

Каждому веб-сайту требуются выходные данные и политика конфиденциальности. Кроме того, необходим функциональный инструмент для получения согласия на использование файлов 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, Карты, Изображения, Видео, Новости и т. д. Мы являемся поставщиками услуг и также несем ответственность за то, какие данные видит посетитель. Часто именно эти данные привлекают посетителя на веб-сайт или побуждают его позвонить.