Как изменить дизайн сайта WordPress: окончательный контрольный список

Аааа, редизайн сайта на WordPress…

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

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

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

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

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

Вашим лучшим проектам WordPress нужен лучший хостинг!

WPMarmite рекомендует Bluehost: отличная производительность, отличная поддержка. Все, что нужно для отличного старта.

Попробуйте Блюхост

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

4 шага перед редизайном вашего сайта WordPress

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

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

1. Установите цели вашего редизайна

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

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

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

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

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

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

Создавайте свои каркасы

Термин «вайрфреймы» звонит в колокольчик?

Быстрый обзор предмета необходим, так как этот шаг имеет решающее значение.

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

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

Я привел вам пример в этой статье, и вот он снова, чтобы проиллюстрировать мою точку зрения:

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

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

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

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

И на этом этапе у вас есть более четкое представление о том, чего ожидать от редизайна вашего сайта WordPress.

Дизайн ваших мокапов

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

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

Итак, вопрос: вам действительно нужно создавать графические макеты для вашего редизайна? Ответ прост:

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

Присоединяйтесь к подписчикам WPMarmite

Получите последние сообщения WPMarmite (а также эксклюзивные ресурсы).

ПОДПИШИСЬ СЕЙЧАС

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

Да, я вас успокаиваю, мы все же говорим о редизайне сайта, а не о садоводстве!

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

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

Итак, как это сделать?

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

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

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

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

Разработка вашей спецификации

Что ж, на данном этапе вы хорошо снабжены структурирующими элементами. Пришло время собрать все это в ключевой документ: спецификацию.

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

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

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

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

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

Теперь пришло время перейти к делу.

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

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

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

Найдите лучших экспертов WordPress

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

Попробуйте Кодируемый

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

«Хорошо, вот и все!»

Легкий! Есть еще один последний шаг, которым слишком часто пренебрегают при редизайне вашего веб-сайта: создание плана перенаправления .

Позволь мне объяснить.

Часто при редизайне веб-сайта меняются URL-адреса. Это особенно актуально, если вы создаете новые страницы.

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

Чтобы разработать план перенаправления, нет ничего проще. Откройте Excel или Google Sheets и создайте таблицу следующим образом:

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

Умно, не так ли?

Хорошо: сделайте глубокий вдох и давайте поговорим о самом редизайне.

Ускорьте свой сайт с помощью WP Rocket

Превратите свой сайт в ракету с помощью самого мощного плагина кэширования, признанного экспертами WordPress.

Попробуйте WP Rocket

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

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

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

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

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

Что влекут за собой эти два варианта?

Работать онлайн прямо на своем сайте — это варварство.

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

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

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

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

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

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

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

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

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

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

Помните: вы указали их в своих спецификациях.

Это может включать :

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

Не знаете, какие плагины использовать? Возможно, вы найдете то, что ищете, в нашем обязательном списке.

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

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

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

Во время редизайна веб-сайта неизбежно остается содержимое предыдущего веб-сайта, которое можно восстановить.

Изображения, тексты, конфигурация плагинов: подумайте об этом!

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

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

Так что подумайте о своей SEO-стратегии , которая так важна для хорошего ранжирования вашего нового (отличного) веб-сайта.

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

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

Чтобы помочь вам с внутренней SEO-оптимизацией вашего веб-сайта (оптимизация контента), используйте специальный плагин SEO.

WPMarmite использует самый известный из них, Yoast SEO, но он не единственный, кто эффективен на рынке. Откройте для себя наше подробное сравнение его конкурентов в этой статье.

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

3 шага к успешному запуску вашего сайта

Я чувствую, что вы взволнованы тем, что представляете миру свой новый веб-сайт WordPress.

Потратьте время, чтобы просмотреть эти 3 шага и тщательно выполнить их: вы будете рады, что сделали это, я обещаю.

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

Вам ничего не говорит термин «предварительный сервер»? Не волнуйтесь, давайте сделаем небольшой перерыв для определения.

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

Итак, зачем вам использовать этот preprod сервер?

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

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

2. Проверьте свой новый веб-сайт на возможные проблемы

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

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

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

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

Все красиво, функционально, хорошо связано и хорошо собрано? Поздравляем! Последний шаг усилит большую улыбку, которую я вижу на ваших лицах отсюда.

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

Давай, ты почти у цели!

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

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

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

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

Тадам! Ваш новый веб-сайт с обновленным дизайном, улучшенной производительностью, более впечатляющим дизайном и улучшенной структурой готов получать трафик, которого он заслуживает. Это была тяжелая работа, но она того стоила, не так ли?

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

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

Расскажите нам обо всем этом в комментариях: команда WPMarmite внимательно их все читает.