Как сделать редизайн WordPress-сайта

Редизайн сайта WordPress: большой стрессовый момент.

Кто не мечтает в этот ключевой момент выполнить на своем сервере простую команду Command + Option + Escape или Ctlr + Alt + Del и начать все сначала?

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

Готовы ли вы? В этой статье я подробно рассказываю обо всех элементах, которые необходимо продумать для редизайна вашего WordPress-сайта, начиная от стратегии развития и заканчивая запуском в эксплуатацию.

4 шага, предшествующие редизайну сайта на WordPress

Еще до того, как вы возьмете в руки WordPress для редизайна своего сайта, вам придется поработать над различными структурными элементами.

Правильно: вы же не думали приступить к работе, не зная, во что ввязываетесь?

1. Определите цели редизайна

Как и для любого проекта, для редизайна WordPress-сайта необходимы цели, которые необходимо точно определить (независимо от того, являетесь ли вы фрилансером, веб-агентством или непрофессиональным веб-мастером).
Именно эти четкие и ясные цели будут определять ваши дальнейшие действия.

Здесь необходимо задать себе вопрос: зачем вам нужен редизайн сайта? Причин для этого может быть множество:

• Изменение дизайна сайта, выбор новой темы или использование конструктора страниц.
• Обновление администрирования сайта. Это может произойти, если плагины или версия CMS WordPress никогда не обновлялись, если существуют конфликты между различными плагинами или если тема была изменена нестабильно. Все это может повлиять на производительность сайта и его ежедневное управление.
• Оптимизация SEO. Цель, на которую стоит обратить внимание, особенно если трафик упал или не растет, если пользовательский опыт нестабилен или если ваш HTML-код не оптимизирован для роботов Google.
• Добавление на сайт новых функций, которые не могут быть реализованы в текущем дизайне. Возможно, вы захотите сделать его более интуитивным и удобным для посетителей.
• Усовершенствование технической структуры сайта-витрины (или сайта электронной коммерции) с целью усиления его безопасности, повышения скорости загрузки и изменения древовидной структуры.
• Перенос сайта на другой хостинг-сервер.
• Увеличение продаж, особенно если у вас есть магазин WooCommerce.
• Приведение сайта в соответствие с требованиями конкурентов, предлагающих более современные сайты. Вы выиграете, улучшив имидж своего бренда и репутацию.

Запишите в хорошо структурированном документе эти различные цели. Вы увидите, что они станут структурообразующими элементами для организации редизайна вашего сайта.

2. Структурирование проекта редизайна

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

Подумайте о новой древовидной структуре.

Создать древовидную структуру — значит представить себе связи, которые будут существовать между различными страницами, и продумать все способы, с помощью которых посетитель сможет ориентироваться на сайте.

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

Как же это сделать?

Разработайте древовидную структуру и не забудьте включить в нее:

• Главное навигационное меню, а также возможные второстепенные меню
• Нижний колонтитул и ссылки, которые он может содержать
• Возможные боковые панели, особенно в блоге
• Различные категории вашего блога
• и т.д.

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

Такую диаграмму можно создать на листе бумаги или использовать онлайн-инструмент, например GlooMaps или Octopus.

Создайте свои структурные схемы.
Вам ничего не напоминает термин wireframes?

Wireframes: что это такое?

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

Wireframes — это структурные макеты, которые помогают расположить различные элементы веб-страниц на одном документе.

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

Вот пример, иллюстрирующий мою мысль:

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

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

Я могу порекомендовать несколько инструментов для этого:

• Balsamiq Wireframes: Это платное программное обеспечение, но бесплатная 30-дневная пробная версия дает вам достаточно времени для разработки хорошо продуманных схем.
• MockFlow: это удобный онлайн-инструмент, предоставляемый по принципу freemium. Его бесплатная версия позволяет создавать до 3 страниц для начала.
• Sketch: Очень мощная платформа для совместной работы над веб-дизайном, если вы знаете, как правильно ее использовать. Предлагается бесплатная 30-дневная пробная версия, а затем платная — от 9 долл. в месяц.
• Figma: Этот инструмент позволяет редактировать три файла в бесплатной версии и предлагает версию Pro от 12 долл. в месяц за одного редактора.

 

Разработка макетов

Если wireframes дают представление о структуре переделанных страниц, то mockups интегрируют сам дизайн.

Макеты создаются с помощью программы для верстки страниц (например, Adobe InDesign), поэтому верстка веб-страниц может носить технический характер и отнимать довольно много времени.

Поэтому возникает вопрос: действительно ли необходимо создавать графические макеты для редизайна? Ответ прост:

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

Теперь вы имеете представление о том, чего ожидать от редизайна вашего сайта.

Совет: среди элементов, на которые следует обратить внимание при выборе темы, не забудьте проверить:

• Что ваша тема оптимизирована для SEO.
• Что она оптимизирована для всех браузеров, используемых пользователями Интернета (как минимум Chrome, Safari, Firefox и Edge).
• Что она выполнена в отзывчивом дизайне, т.е. оптимизирована для всех устройств (настольных компьютеров, смартфонов и планшетов).

Это избавит вас от множества проблем при редизайне сайта!

Проектирование спецификации

Итак, на данном этапе вы хорошо обеспечены элементами структурирования. Настало время собрать все это в ключевой документ — спецификацию.

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

Если вы работаете над проектом для клиента, то он, возможно, предоставил вам спецификацию или, по крайней мере, описал свои потребности.

В Интернете можно найти множество шаблонов спецификаций. Однако ваша спецификация обязательно должна содержать:

• Описание вашего веб-проекта и вашей компании, а также роль, которую играет ваш сайт в этом проекте.
• Целевая аудитория нового сайта, по возможности точно описанная.
• Цели редизайна, по возможности проиллюстрированные цифрами. Если одной из целей является, например, увеличение посещаемости, не забудьте указать посещаемость вашего текущего сайта.
• Элементы, которые необходимо перенести с текущего сайта: содержание страниц, возможные изображения и т.д.
• Графические пути, по которым вы хотите двигаться. Для этого включите в спецификацию wireframes и mock-ups, а также руководство по стилю (определяющее визуальную идентичность).
• Новые функциональные элементы перепроектированного сайта, например, добавление магазина электронной коммерции, блога, модуля opt-in, нового администрирования (бэк-офиса) и т.д.
• Основные этапы проекта редизайна: Когда вы хотите получить предварительный просмотр вашего сайта? Когда вы хотите запустить его в работу?

Теперь все стало намного понятнее, не так ли?

3. Подумайте о ресурсах, имеющихся в вашем распоряжении

Теперь пора приступать к делу.

Ваша задача, если вы ее принимаете, состоит в том, чтобы перечислить имеющиеся в вашем распоряжении ресурсы с точки зрения:

• Бюджет: Сколько средств вы хотите вложить в редизайн?
• Время: Сколько времени у вас есть в распоряжении для редизайна этого WordPress-сайта?
• Навыки: Есть ли у вас возможность самостоятельно достичь всех целей редизайна?
• Инструменты: Плагины, темы, конструкторы страниц… Могут ли эти типы инструментов помочь вам в достижении ваших целей?

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

4. Создать план перенаправления

Остался последний шаг, которым слишком часто пренебрегают при редизайне сайта: создание плана переадресации.

Часто при редизайне сайта происходит изменение URL. Это особенно верно, если вы создаете новые страницы.

Но что произойдет, если вы разместите новый сайт в Интернете, не подумав о настройке перенаправления? Множество ошибок 404, что негативно скажется на SEO и навигации посетителей.

Чтобы избежать этой проблемы, необходимо создать план перенаправления, в котором старые URL-адреса сайта будут указаны вместе с новыми:

Ставки в этой операции высоки: перенести трафик и популярность старого URL сайта на новый URL сайта, ничего не нарушив.

Как только ваш сайт будет запущен, вы можете установить плагин Redirection и напрямую импортировать эту таблицу.

3 шага для запуска редизайна

Итак, что же делать дальше, когда ваш проект хорошо структурирован и организован? Эти 3 основных шага помогут вам.

1. Выбор локальной или прямой работы с текущим сайтом

Прежде чем перейти к техническим аспектам, начните с выбора способа работы:

1. Либо непосредственно на текущем сайте и интегрировать изменения «вживую».
2. Либо на серверах разработки и предпроизводственных серверах, чтобы протестировать новый сайт, прежде чем предоставить его аудитории.

Что подразумевают эти два варианта?

Работа в режиме онлайн непосредственно на вашем сайте — это варварство.

В этом случае все ваши посетители видят изменения вживую и выступают в роли «подопытных кроликов» для ваших новых возможностей со всеми вытекающими отсюда ошибками.

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

Чтобы избежать всех этих проблем, можно выполнить редизайн сайта на месте.

Преимущества локальной работы многочисленны:

• безопасное внесение изменений
• без риска протестировать плагины
• предварительный просмотр окончательного варианта перед выходом в Интернет

Это также идеальное решение, если вы хотите сохранить администрирование WP в том виде, в котором оно было настроено в данный момент. Другими словами, вы сможете модифицировать сайт WordPress, не удаляя существующий.

Однако если вы хотите начать работу с нуля, с совершенно новой администрацией, посмотрите, как следует выполнять локальную установку WordPress.

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

2. Приобретите инструменты, необходимые для редизайна

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

Помните: вы перечислили их в своем техническом задании.

Сюда могут входить:

• Новая тема, если вам приглянулась одна из многочисленных тем, представленных в официальном каталоге (например, очень популярная Astra).
• Конструктор страниц, например Elementor или Beaver Builder, если вы хотите не копаться в коде.
• Новые плагины для интеграции удивительных функций.

Ваш набор инструментов готов? Давайте подготовим все это и перейдем к последнему важному этапу редизайна: контенту.

3. Подготовьте содержание вашего нового сайта

Прежде всего, важный момент, о котором не стоит забывать.

При редизайне сайта неизбежно сохраняется содержимое предыдущего сайта.

Изображения, тексты, конфигурации плагинов.

Поэтому сделайте резервную копию текущего WordPress-сайта и сохраните то, что вы хотите включить в редизайн.

Однако я полагаю, что если вы делаете редизайн, то это еще и изменение содержимого вашего сайта, чтобы сделать его более актуальным и привлекательным для ваших целей и, конечно же, для поисковых систем!

Поэтому продумайте свою SEO-стратегию, которая так важна для хорошего ранжирования вашего нового (потрясающего) сайта.

Хотя сложно кратко описать все шаги, которые необходимо предпринять, я могу привести здесь основные направления:

• Во-первых, определите ключевые слова, по которым вы хотите ранжироваться. Это те выражения, которые ваши целевые аудитории спонтанно вводят в Яндекс, чтобы найти нужную им информацию.
• Затем определите, где необходимо интегрировать эти ключевые слова на каждой странице. Например, теги заголовков (hn) или альтернативный текст изображений должны быть оптимизированы для SEO: Яндекс очень любит их, и именно здесь он будет пытаться понять ваш сайт в первую очередь!
• После того как новое содержимое будет интегрировано в переработанный сайт, можно проверить, все ли в порядке. В частности, подумайте о названиях изображений, заголовках и метаописаниях страниц, которыми слишком часто пренебрегают.

Чтобы помочь вам с внутристраничным SEO вашего сайта (оптимизацией контента), воспользуйтесь специальным SEO-плагином. Самый известный из них — Yoast SEO, но это не единственный эффективный вариант на рынке.

Ранжирование сайта — это работа сама по себе. Однако при соблюдении некоторых правил можно добиться хороших результатов и успешно продвигаться по целевым запросам.

Шаг за шагом, на своем сервере разработки, локально, с использованием всех необходимых инструментов WordPress, вы можете видеть, как продвигается ваш проект и приближается ваш запуск в Интернете.

Три шага к успешному запуску вашего сайта

1. Выберите прямой производственный или предпроизводственный сервер

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

Так зачем же использовать этот preprod-сервер?

Если вы разработчик WordPress, то для того, чтобы:

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

После того как все подтверждено, можно приступать к запуску нового сайта. Если вы уверены в своих силах, то, конечно же, можете сразу перейти к запуску.

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

2. Протестируйте новый сайт на предмет потенциальных проблем

На предпроизводственном сервере (или на живом, если вы любитель WordPress) вам необходимо протестировать новый сайт.

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

Скорее всего, вы увидите проблемы с дизайном и структурой. Но не забудьте также проверить:

• Перенаправления, которые не были сделаны, которые порождают мертвые ссылки или белые страницы
• производительность сайта, проверяя ее с помощью GTMetrix, Pingdom или теста PageSpeed Insights от Google.
• Проверьте, хорошо ли работают точки входа на сайт.
• Контактные формы, формы предложений и т.д.
• Оплата, если у вас есть сайт электронной коммерции (включая письма с подтверждением, доступ к сайту участника и т.д.)

3. Повторно активируйте и подключите все сторонние службы

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

• Плагин кэширования
• Плагины, измеряющие аудиторию, особенно те, которые используют Google Analytics, например MonsterInsights
• Плагины, использующие социальные сети, такие как Facebook или Instagram
• Различные лицензионные ключи для ваших плагинов и тем

А поскольку безопасность — дело каждого (и особенно ваше), не забудьте снова включить все элементы, обеспечивающие безопасность вашего сайта.

Готовы к работе? Тогда начните индексировать свой новый сайт в Google Search Console. Эта манипуляция заставит роботов Google посетить ваше детище, а значит, быстрее проиндексировать его в новой версии.

А вы проводили редизайн WordPress-сайта в последнее время?

С какими проблемами вы столкнулись или какими моментами гордились, когда делали это?