Условно процесс переноса любого сайта с одного движка на другой, в том числе преобразование статичного HTML-сайта в динамический сайт на WordPress, можно разделить на две основные составляющие: создание нового или переделка существующего шаблона и перенос данных (текстов, картинок и другого содержимого).
Единого подхода к переносу нет, всё очень индивидуально. Одно дело, когда можно создать аналогичный сайт, без переноса всех деталей, структур адресов, наполнения и т.д. Главное, чтобы сайт работал, индексировался и там были ваши контакты. А другое дело, когда у вас сайт с сотнями или даже тысячами страниц, созданный в каком-нибудь онлайн-конструкторе (таком как Wix, uKit или аналоги), из которого не получится просто взять и «переехать» в один клик. Каждую страницу придётся переносить вручную или писать специальный парсер под вашу структуру, а позже всё равно корректировать всё вручную.
А если у вас сложная структура адресов и нужно сохранить все URL, чтобы не потерять позиции в поисковой выдаче? Что, если замена на аналогичную или похожую тему не подойдёт? Или старый сайт не адаптивный, а нужно переделать в адаптивный? Возможна масса различных нюансов.
[H2]Примечания к подготовительному этапу[/H2]
Так как в новую версию сайта должно перейти всё самое важное и эффективное, то логично детально изучить старую версию web-ресурса:
В большинстве случаев HTML-сайт фактически представляет собой набор статичных HTML-страниц в корне хостинга. Это текстовые файлы, названия которых строго соответствуют URL страниц. Поэтому, всё что вам нужно сделать – скопировать все файлы из корневой папки вашего старого хостинга. Параллельно с .html нужно копировать и другие данные, в том числе дополнительные каталоги, например, css, images или js и т.п., в них хранится дополнительный контент – скрипты, изображения, видео и т.д.
Но доступ к хостингу сохраняется не всегда, особенно если работу по запуску сайта выполнял сторонний специалист, связь с которым утеряна. Плюс, страницы могли быть созданы в специальных онлайн-конструкторах, тогда доступ к исходному коду страниц вообще может быть заблокирован.
В этом случае можно воспользоваться специальным софтом – оффлайн-браузерами. Но будьте осторожны – бесплатные или демонстрационные версии ПО часто включают в HTML-код дополнительную информацию, чтобы вы не могли разместить скачанные страницы на другом хостинге.
[H2]Настройка хостинга для WordPress[/H2]
С одной стороны, для WordPress должен подойти практически любой хостинг с поддержкой динамических сайтов (нужна связка PHP+MySQL). Но выбор хостеров очень большой, велик шанс найти недобросовестный сервис или сервис с низким качеством услуг.
Всё это обязательно отразится на показателях сайта, на доступности его для ваших пользователей, на отношении к нему поисковых систем и на вашей выручке (в конечном итоге).
Поэтому мы рекомендуем не рисковать и выбирать тех провайдеров, которых рекомендуют разработчики WordPress – например, . Адекватные тарифы, высокая доступность и стабильность, масса положительных отзывов и специальная оптимизация для лучшей работы WordPress.
Тарифы – от 2,95 USD/месяц. Манибэк – 30 дней. За эту цену вы получаете всё, что нужно для работы одного сайта – 50 Гб SSD-диска, подарочный домен, бесплатные SSL, интеграция с CDN (для лучшей доступности в любом регионе мира).
Если у вас несколько сайтов, есть безлимитные тарифы – от 5,45 USD/месяц. Любое количество сайтов, неограниченное место на диске и дополнительные сервисы.
[H2]Выбор способа переноса[/H2]
Первый способ. Наиболее недорогое решение – найти похожую тему и перенести только самую важную информацию: контактные данные, описание ключевых услуг, ассортимент товаров, ваши преимущества и т.д. Настроить контактные формы, дождаться переиндексации и продолжить развивать сайт на новой базе:
Но такой подход оптимален не всегда. Особенно, если старые страницы давно в индексе поисковых систем и имеют хорошие показатели посещаемости. В этом случае количество клиентов из поиска может сильно сократиться, а заново в выдачу, даже по тем же запросам, попасть будет сложно. Здесь лучше всего сохранить всё так, как это было раньше (в том числе, это касается URL-адреса страниц, метатегов и основного контента).
Второй способ. Чуть дольше и дороже, чем первый. Шаблон, опять же, подбирается похожий, но данные переносятся максимально полно. Если структуру адресов сохранить не получается, обязательно настраиваются редиректы. Оформляются 301-м редиректом в настойках хостинга, через файл .htaccess, или с помощью специальных плагинов для WordPress.
Если станиц немного (до сотни-двух), то их можно и даже нужно перенести их вручную. Так данные будут максимально соответствовать тому, как они выглядели раньше. При автоматизации процесса всегда велик шанс получения множественных ошибок в верстке, в отсутствии медиафайлов, нарушении структуры URL и т.д.
Но если страниц больше – вам поможет только автоматизация. Стандартные скрипты могут не справиться с задачей, поэтому с большой вероятностью придётся привлекать профессиональных программистов.
Третий способ. Дорогой, но надёжный. Нужно преобразовать HTML-файлы старого сайта в шаблон для WordPress. При отсутствии опыта и достаточной квалификации процесс лучше доверить профессионалам. После того, как шаблон будет готов, переносятся данные как во втором способе: вручную или автоматически (скриптами или парсерами).
Четвёртый способ. Разработка нового индивидуального шаблона под ваши требования и специфику бизнеса, тщательный перенос данных. Да, внешний вид сайта изменится, но в некоторых случаях это может быть только на руку, как своего рода ребрендеринг – переход на новые технологии и на новый формат ведения бизнеса. Тут без привлечения профи никак не обойтись. Вам понадобятся услуги профессиональных дизайнеров, верстальщиков, натяжка HTML на движок, написание кастомных функций, установка плагинов и т.д. Всё будет зависеть от ваших «хотелок» и имеющегося бюджета. Верхней планки не существует. Можно даже сверстать отдельную версию шаблона для мобильных устройств или полноценное приложение для смартфонов. У WordPress для этого имеется все необходимое.
[H2]Перенос дизайна[/H2]
Для WordPress есть просто невероятное количество готовых шаблонов. Вы точно сможете подобрать готовый. Это обойдётся намного дешевле, чем разработка своего с нуля, и быстрее, чем натяжка старого HTML на движок силами верстальщиков.
Но это не значит, что так будет лучше во всех отношениях. Иногда разработка уникального шаблона с нуля просто жизненно необходима для серьёзных сайтов. Поиск шаблона тоже отнимет много времени и сил. Плюс, перевод, детальная настройка и «допиливание» шаблона – отдельные пласты задач, с которыми сможет справиться не каждый.
[H2]Подбор похожей темы/шаблона[/H2]
Технологии компьютерного зрения ещё далеки от совершенства, поэтому никакой алгоритм не сможет подобрать полный аналог вашего дизайна в автоматическом режиме. Всё придётся делать своими руками.
Очень важный момент – многие премиум-темы имеют массу возможностей для кастомизации, поэтому не стоит привязываться к дефолтному внешнему виду. Нужно изучать все возможности как можно более детально. Соответственно, времени придётся потратить немало.
Чтобы сократить время на поиск, можно сортировать шаблоны по ключевым признакам: тематика, цветовая гамма, поддержка eCommerce-функций, совместимость с такими плагинами, как Elementor (качественный блочный конструктор страниц с большой свободой действий) и т.д.
Так как многие темы умеют настраивать цвета и шрифты, вам нужно изучить параметры вашего старого сайта:
Некоторые CSS-свойства могут меняться с помощью JS-скриптов уже после загрузки страниц в браузере, поэтому не лишним будет убедиться, что все работает так, как должно.
[H2]Новый шаблон[/H2]
Здесь всё просто – выбираете любой понравившийся вам вариант. Огромное количество бесплатных тем есть в официальном каталоге WordPress. Качественные премиум-шаблоны можно поискать на профильных площадках, таких как или . Что не менее важно – в состав таких тем могут входить специальные дополнения, которые по-отдельности распространяются платно. Так что покупка становится ещё выгоднее.
Если в шаблоне отсутствует перевод на русский язык, его можно перевести самостоятельно – с помощью программы или специальных плагинов для WordPress (прямо внутри движка). Не стоит переводить сразу все строки, достаточно перевести только те позиции, которые относятся к интерфейсу пользователя (видны на сайте, а не в админ-панели).
[H2]Натяжка дизайна на WordPress (переделка HTML в шаблон WordPress)[/H2]
Наиболее сложный и тяжёлый процесс, который не получится освоить без понимания основ HTML, CSS, JS, PHP и знания API WordPress. Да, движок хорошо документирован, но документация преимущественно на английском языке.
Если шаблоны страниц простые по виду, вам достаточно будет поделить дизайн на основные зоны: шапка, вывод основного контента (запись блога или страница), боковая панель, футер. И организовать вывод ключевых циклов WordPress:
Для сокращения объёма работ по верстке можно в файле functions.php отключить все ненужные функции (удалить или закоментировать строки // в начале):
По аналогии можно подключить свои шрифты (если вы не используете web-шрифты от Google).
Теперь остаётся только перенести саму HTML-разметку. Но тут всё гораздо сложнее. В шаблонах WordPress зоны контента делятся на специальные блоки, каждый блок выводится своим PHP-файлом:
Например, замена меню.
Было в HTML:
<div id="stuck_container" class="stuck_container">
<div class="container">
<nav class="nav">
<ul data-type="navbar" class="sf-menu">
<li class="active"><a href="./">Главная</a>
</li>
<li><a href="index-1.html">О нас</a>
<ul>
<li><a href="#">Подпункт</a></li>
<li><a href="#">Ещё вложенное меню</a></li>
<li><a href="#">Вложенное подменю
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
</ul></a></li>
<li><a href="#">Пункт N</a></li>
<li><a href="#"> Пункт N2</a></li>
<li><a href="#"> Пункт N3</a></li>
</ul>
</li>
<li><a href="index-2.html">Услуги</a>
</li>
<li><a href="index-3.html">ФАК</a>
</li>
<li><a href="index-4.html">Контакты</a>
</li>
</ul>
</nav>
</div>
</div>
Стало в header.php:
<div id="stuck_container" class="stuck_container">
<div class="container">
<nav class="nav">
<?php
$args = array(
'theme_location' => 'menu-1',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'sf-menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id = "%1$s" data-type="navbar" class = "%2$s">%3$s</ul>',
);
wp_nav_menu( $args );
?>
</nav>
</div>
</div>
Основная функция для вывода меню – wp_nav_menu( $args), из аргументов нужно поправить только ID меню (здесь это 'theme_location' => 'menu-1').
Не забудьте создать само меню в соответствующих настройках сайта.
В WordPress можно выводить отдельные шаблоны для разных типов страниц. Сделать это можно, просто поместив файл page-vashe-nazvanie-shablona.php в корень темы с содержимым:
<?php
/**
* Template Name: Ваше название шаблона
*/
get_header();
?>
<section>
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</section>
<?php get_footer(); ?>
Теперь в админ-панели можно создать новую страницу с выбранным шаблоном и наполнить её своим HTML-кодом со страницы старого сайта (если не хотите выносить отдельные блоки и делить контент на различные сегменты). Так как HTML-код будет вставлен с указанием стилей, которые вы уже подключили к шаблону в файле functions.php, то отдельно ничего стилизовать не нужно.
Если вывод шапки и/или подвала не нужен, их можно исключить для конкретного шаблона, но стоит понимать, что в шапке выводится не только меню, там же подключаются скрипты/стили, выводятся мета-теги и т.д.
В более сложном переносе логично выделить сегменты для боковой панели, для футера и т.д., но этим контентом нужно будет управлять в разных разделах админ-панели.
[H2]Создание оригинального шаблона/дизайна с нуля[/H2]
Тут вам помогут только профессионалы. Даже если вы самостоятельно сможете натянуть HTML-шаблон на движок, нужно сначала создать качественный макет дизайна и нарезать его на HTML-теги. С этим вам помогут дизайнеры и верстальщики.
[H2]Перенос данных[/H2]
Это наиболее сложный и трудоёмкий процесс.
Если вы использовали подход с шаблонами, который мы указали, то перенести данные можно простым копированием HTML-кода в тело страниц (исключив зону шапки и подвала, их логично делать сквозными для всего сайта).
Но ручной перенос не всегда удобен, особенно, если у вас сотни или даже тысячи страниц на старом сайте, встроенные формы в тексте и т.д.
[H2]Ручное копирование информации и медиаконтента[/H2]
Изображения со страниц желательно вынести в каталог «/wp-content/uploads/». Но стоит помнить, что загруженные вручную картинки не будут отображаться в админ-панели (движок не будет ничего знать о медиаконтенте, если он загружен в обход стандартных форм).
Все пути (ссылки), указывающие на изображения, и другой медиаконтент нужно будет поправить, чтобы они соответствовали новому (актуальному) расположению.
Когда будете переносить наполнение отдельных страниц, обязательно заполняйте мета-теги (тайтл и дескрипшн), без них качество индексации значительно ухудшится.
После публикации проверяйте страницу на наличие ошибок и проблем с вёрсткой.
[H2]Автоматическое наполнение базы данных нового сайта из базы парсинга[/H2]
Средств автоматизации по переносу из HTML в WordPress не так уж много. Обычно разрабатываются уникальные скрипты, которые будут учитывать структуру HTML-сайта, ведь на каждом отдельном сайте она может кардинально отличаться.
Если старая версия сайта работает на одним из онлайн-конструкторов, можно попробовать быстро мигрировать с помощью RSS-канала. Нужно скачать RSS-ленту старого сайта и загрузить её в WordPress-сайт с помощью специального плагина импорта.
Существует специальный онлайн-сервис миграции между разными CMS системами – CMS2CMS. Но он платный. Для направления миграции нужно выбрать формат «HTML» в «WordPress». Перенос 250 материалов обойдётся в 49 USD. Для того, чтобы убедиться в качестве переноса данных, предварительно воспользуйтесь демонстрационным режимом (это бесплатно и поможет вам понять, справится ли скрипт конкретно с вашим сайтом или нет).
[H2]Заключительная часть и рекомендации[/H2]
Ни в коем случае при переносе не должна пострадать юзабилити сайта. Если посетители не смогут пользоваться новой версией ресурса, то перенос даже не стоит затевать.
После того, как данные перенесены на боевой сервер (расположены на хостинге), нужно перенаправить домен и подождать обновления DNS-системы (в некоторых случаях этот процесс может занимать 1-3 дня).
Ни в коем случае не удаляйте сразу старый сайт, сначала убедитесь в работоспособности нового. Проверьте сайт под нагрузкой, просмотрите все страницы, проверьте работу форм и других интерактивных элементов. Просканируйте (спарсите) уже новый сайт и проверьте на наличие проблем:
На самом деле, процесс переноса сайта из HTML на динамический движок, особенно на WordPress, достаточно прост и понятен. Новичкам, конечно, придётся подтянуть отдельные знания, но в целом всё это поправимо и реализуемо. Главное – не бояться и строго следовать указанному выше плану. Тогда вы сохраните не только свои данные, но и позиции сайта в поиске.
Единого подхода к переносу нет, всё очень индивидуально. Одно дело, когда можно создать аналогичный сайт, без переноса всех деталей, структур адресов, наполнения и т.д. Главное, чтобы сайт работал, индексировался и там были ваши контакты. А другое дело, когда у вас сайт с сотнями или даже тысячами страниц, созданный в каком-нибудь онлайн-конструкторе (таком как Wix, uKit или аналоги), из которого не получится просто взять и «переехать» в один клик. Каждую страницу придётся переносить вручную или писать специальный парсер под вашу структуру, а позже всё равно корректировать всё вручную.
А если у вас сложная структура адресов и нужно сохранить все URL, чтобы не потерять позиции в поисковой выдаче? Что, если замена на аналогичную или похожую тему не подойдёт? Или старый сайт не адаптивный, а нужно переделать в адаптивный? Возможна масса различных нюансов.
[H2]Перенос с HTML на WordPress пошагово:[/H2]- Подготовительный этап
- Создание резервных копий старого сайта
- Анализ структуры страниц, меню и блоков контента
- Выбор оптимального способа переноса
- Приобретение хостинга и его настройка
- Перенос дизайна
- Подбор похожей темы/шаблона
- Покупка/установка нового шаблона (без привязки к старому дизайну)
- Натяжка дизайна на WordPress (переделка HTML в шаблон WordPress)
- Создание оригинального шаблона/дизайна с нуля
- Перенос данных
- Ручное копирование информации и медиаконтента
- Парсинг старого сайта и преобразование ключевой информации в табличный формат
- Автоматическое наполнение базы данных нового сайта из базы парсинга
- Частичная автоматизация процесса
- Скрипты и сервисы для переноса
- Автоматический подбор подходящего шаблона
- Заключительный этап
- Перенаправление домена на новый хостинг
- Проверка сохранения путей/структуры старых URL
- Настройка редиректов при необходимости
- Сверка важных метатегов (тайтлы, дескрипшны)
- Проверка отображения страниц и медиафайлов
- Проверка форм, контактной информации
- Установка кодов аналитики
- Мониторинг ситуации в панели вебмастера
[H2]Примечания к подготовительному этапу[/H2]
Так как в новую версию сайта должно перейти всё самое важное и эффективное, то логично детально изучить старую версию web-ресурса:
- Какие данные нужно переносить, а какие нет. Может быть, отдельные страницы были мусорными, из-за них наложены санкции со стороны поисковых систем, они исключены из выдачи как бесполезные и т.д.
- Проверьте структуру имеющихся меню, адресов страниц, категорий (если они имеются). Нуждаются ли они в доработке или оптимизации?
- Вычлените самые важные страницы и иные элементы сайта, обязательно необходимые для эффективной работы. Например, это могут быть страницы с контактными данными, формы обратной связи, онлайн-чаты и т.п.
- Пропарсите старый сайт и просмотрите, заполнены или нет ключевые мета-теги, насколько эффективно это сделано.
В большинстве случаев HTML-сайт фактически представляет собой набор статичных HTML-страниц в корне хостинга. Это текстовые файлы, названия которых строго соответствуют URL страниц. Поэтому, всё что вам нужно сделать – скопировать все файлы из корневой папки вашего старого хостинга. Параллельно с .html нужно копировать и другие данные, в том числе дополнительные каталоги, например, css, images или js и т.п., в них хранится дополнительный контент – скрипты, изображения, видео и т.д.
Но доступ к хостингу сохраняется не всегда, особенно если работу по запуску сайта выполнял сторонний специалист, связь с которым утеряна. Плюс, страницы могли быть созданы в специальных онлайн-конструкторах, тогда доступ к исходному коду страниц вообще может быть заблокирован.
В этом случае можно воспользоваться специальным софтом – оффлайн-браузерами. Но будьте осторожны – бесплатные или демонстрационные версии ПО часто включают в HTML-код дополнительную информацию, чтобы вы не могли разместить скачанные страницы на другом хостинге.
[H2]Настройка хостинга для WordPress[/H2]
С одной стороны, для WordPress должен подойти практически любой хостинг с поддержкой динамических сайтов (нужна связка PHP+MySQL). Но выбор хостеров очень большой, велик шанс найти недобросовестный сервис или сервис с низким качеством услуг.
Всё это обязательно отразится на показателях сайта, на доступности его для ваших пользователей, на отношении к нему поисковых систем и на вашей выручке (в конечном итоге).
Поэтому мы рекомендуем не рисковать и выбирать тех провайдеров, которых рекомендуют разработчики WordPress – например, . Адекватные тарифы, высокая доступность и стабильность, масса положительных отзывов и специальная оптимизация для лучшей работы WordPress.
Тарифы – от 2,95 USD/месяц. Манибэк – 30 дней. За эту цену вы получаете всё, что нужно для работы одного сайта – 50 Гб SSD-диска, подарочный домен, бесплатные SSL, интеграция с CDN (для лучшей доступности в любом регионе мира).
Если у вас несколько сайтов, есть безлимитные тарифы – от 5,45 USD/месяц. Любое количество сайтов, неограниченное место на диске и дополнительные сервисы.
[H2]Выбор способа переноса[/H2]
Первый способ. Наиболее недорогое решение – найти похожую тему и перенести только самую важную информацию: контактные данные, описание ключевых услуг, ассортимент товаров, ваши преимущества и т.д. Настроить контактные формы, дождаться переиндексации и продолжить развивать сайт на новой базе:
- дополнять полезным контентом;
- описывать все ваши услуги (основные и дополнительные), чтобы у каждой из них была своя страница;
- подбирать новые низкоконкурентные ключевые запросы и создавать под них новые полезные материалы;
- и т.д.
Но такой подход оптимален не всегда. Особенно, если старые страницы давно в индексе поисковых систем и имеют хорошие показатели посещаемости. В этом случае количество клиентов из поиска может сильно сократиться, а заново в выдачу, даже по тем же запросам, попасть будет сложно. Здесь лучше всего сохранить всё так, как это было раньше (в том числе, это касается URL-адреса страниц, метатегов и основного контента).
Второй способ. Чуть дольше и дороже, чем первый. Шаблон, опять же, подбирается похожий, но данные переносятся максимально полно. Если структуру адресов сохранить не получается, обязательно настраиваются редиректы. Оформляются 301-м редиректом в настойках хостинга, через файл .htaccess, или с помощью специальных плагинов для WordPress.
Если станиц немного (до сотни-двух), то их можно и даже нужно перенести их вручную. Так данные будут максимально соответствовать тому, как они выглядели раньше. При автоматизации процесса всегда велик шанс получения множественных ошибок в верстке, в отсутствии медиафайлов, нарушении структуры URL и т.д.
Но если страниц больше – вам поможет только автоматизация. Стандартные скрипты могут не справиться с задачей, поэтому с большой вероятностью придётся привлекать профессиональных программистов.
Третий способ. Дорогой, но надёжный. Нужно преобразовать HTML-файлы старого сайта в шаблон для WordPress. При отсутствии опыта и достаточной квалификации процесс лучше доверить профессионалам. После того, как шаблон будет готов, переносятся данные как во втором способе: вручную или автоматически (скриптами или парсерами).
Четвёртый способ. Разработка нового индивидуального шаблона под ваши требования и специфику бизнеса, тщательный перенос данных. Да, внешний вид сайта изменится, но в некоторых случаях это может быть только на руку, как своего рода ребрендеринг – переход на новые технологии и на новый формат ведения бизнеса. Тут без привлечения профи никак не обойтись. Вам понадобятся услуги профессиональных дизайнеров, верстальщиков, натяжка HTML на движок, написание кастомных функций, установка плагинов и т.д. Всё будет зависеть от ваших «хотелок» и имеющегося бюджета. Верхней планки не существует. Можно даже сверстать отдельную версию шаблона для мобильных устройств или полноценное приложение для смартфонов. У WordPress для этого имеется все необходимое.
[H2]Перенос дизайна[/H2]
Для WordPress есть просто невероятное количество готовых шаблонов. Вы точно сможете подобрать готовый. Это обойдётся намного дешевле, чем разработка своего с нуля, и быстрее, чем натяжка старого HTML на движок силами верстальщиков.
Но это не значит, что так будет лучше во всех отношениях. Иногда разработка уникального шаблона с нуля просто жизненно необходима для серьёзных сайтов. Поиск шаблона тоже отнимет много времени и сил. Плюс, перевод, детальная настройка и «допиливание» шаблона – отдельные пласты задач, с которыми сможет справиться не каждый.
[H2]Подбор похожей темы/шаблона[/H2]
Технологии компьютерного зрения ещё далеки от совершенства, поэтому никакой алгоритм не сможет подобрать полный аналог вашего дизайна в автоматическом режиме. Всё придётся делать своими руками.
Очень важный момент – многие премиум-темы имеют массу возможностей для кастомизации, поэтому не стоит привязываться к дефолтному внешнему виду. Нужно изучать все возможности как можно более детально. Соответственно, времени придётся потратить немало.
Чтобы сократить время на поиск, можно сортировать шаблоны по ключевым признакам: тематика, цветовая гамма, поддержка eCommerce-функций, совместимость с такими плагинами, как Elementor (качественный блочный конструктор страниц с большой свободой действий) и т.д.
Так как многие темы умеют настраивать цвета и шрифты, вам нужно изучить параметры вашего старого сайта:
- Какие шрифты и какого размера используются для:
- главной страницы;
- заголовков (H1-H5 или даже H6, в зависимости от уровня вложенности ваших заголовков);
- основного текста.
- Цветовые палитры:
- фон (цвет, изображение, видео и т.п.);
- заливка меню, фона текста в статьях;
- цвет текста (основной, заголовков, ссылок посещённых/непосещённых и т.д.).
Некоторые CSS-свойства могут меняться с помощью JS-скриптов уже после загрузки страниц в браузере, поэтому не лишним будет убедиться, что все работает так, как должно.
[H2]Новый шаблон[/H2]
Здесь всё просто – выбираете любой понравившийся вам вариант. Огромное количество бесплатных тем есть в официальном каталоге WordPress. Качественные премиум-шаблоны можно поискать на профильных площадках, таких как или . Что не менее важно – в состав таких тем могут входить специальные дополнения, которые по-отдельности распространяются платно. Так что покупка становится ещё выгоднее.
Если в шаблоне отсутствует перевод на русский язык, его можно перевести самостоятельно – с помощью программы или специальных плагинов для WordPress (прямо внутри движка). Не стоит переводить сразу все строки, достаточно перевести только те позиции, которые относятся к интерфейсу пользователя (видны на сайте, а не в админ-панели).
[H2]Натяжка дизайна на WordPress (переделка HTML в шаблон WordPress)[/H2]
Наиболее сложный и тяжёлый процесс, который не получится освоить без понимания основ HTML, CSS, JS, PHP и знания API WordPress. Да, движок хорошо документирован, но документация преимущественно на английском языке.
Если шаблоны страниц простые по виду, вам достаточно будет поделить дизайн на основные зоны: шапка, вывод основного контента (запись блога или страница), боковая панель, футер. И организовать вывод ключевых циклов WordPress:
- меню;
- цикл записей;
- сайдбар;
- иные области расположения виджетов (например, чтобы можно было править содержимое футера или шапки).
Для сокращения объёма работ по верстке можно в файле functions.php отключить все ненужные функции (удалить или закоментировать строки // в начале):
- поддержка перевода (строка load_theme_textdomain( 'teme123', get_template_directory() . '/languages' );)
- RSS-линки (строка add_theme_support( 'automatic-feed-links' );)
- кастомный фон, лого, настраиваемая ширина контента;
- и другие опции, которые не будут использоваться на вашем сайте.
По аналогии можно подключить свои шрифты (если вы не используете web-шрифты от Google).
Теперь остаётся только перенести саму HTML-разметку. Но тут всё гораздо сложнее. В шаблонах WordPress зоны контента делятся на специальные блоки, каждый блок выводится своим PHP-файлом:
- 404.php (для шаблона 404 ошибки);
- archive.php (шаблон архивных записей);
- comments.php (зона вывода дерева комментариев, если они будут на сайте);
- footer.php (только подвал сайта);
- header.php (шапка с меню);
- index.php (главная страница и логика формирования основных циклов);
- page.php (шаблон вывода страницы);
- single.php (шаблон страницы отдельной записи из блога);
- sidebar.php (шаблон боковой панели);
- search.php (страница с результатами поиска).
Например, замена меню.
Было в HTML:
<div id="stuck_container" class="stuck_container">
<div class="container">
<nav class="nav">
<ul data-type="navbar" class="sf-menu">
<li class="active"><a href="./">Главная</a>
</li>
<li><a href="index-1.html">О нас</a>
<ul>
<li><a href="#">Подпункт</a></li>
<li><a href="#">Ещё вложенное меню</a></li>
<li><a href="#">Вложенное подменю
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
</ul></a></li>
<li><a href="#">Пункт N</a></li>
<li><a href="#"> Пункт N2</a></li>
<li><a href="#"> Пункт N3</a></li>
</ul>
</li>
<li><a href="index-2.html">Услуги</a>
</li>
<li><a href="index-3.html">ФАК</a>
</li>
<li><a href="index-4.html">Контакты</a>
</li>
</ul>
</nav>
</div>
</div>
Стало в header.php:
<div id="stuck_container" class="stuck_container">
<div class="container">
<nav class="nav">
<?php
$args = array(
'theme_location' => 'menu-1',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'sf-menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id = "%1$s" data-type="navbar" class = "%2$s">%3$s</ul>',
);
wp_nav_menu( $args );
?>
</nav>
</div>
</div>
Основная функция для вывода меню – wp_nav_menu( $args), из аргументов нужно поправить только ID меню (здесь это 'theme_location' => 'menu-1').
Не забудьте создать само меню в соответствующих настройках сайта.
В WordPress можно выводить отдельные шаблоны для разных типов страниц. Сделать это можно, просто поместив файл page-vashe-nazvanie-shablona.php в корень темы с содержимым:
<?php
/**
* Template Name: Ваше название шаблона
*/
get_header();
?>
<section>
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</section>
<?php get_footer(); ?>
Теперь в админ-панели можно создать новую страницу с выбранным шаблоном и наполнить её своим HTML-кодом со страницы старого сайта (если не хотите выносить отдельные блоки и делить контент на различные сегменты). Так как HTML-код будет вставлен с указанием стилей, которые вы уже подключили к шаблону в файле functions.php, то отдельно ничего стилизовать не нужно.
Если вывод шапки и/или подвала не нужен, их можно исключить для конкретного шаблона, но стоит понимать, что в шапке выводится не только меню, там же подключаются скрипты/стили, выводятся мета-теги и т.д.
В более сложном переносе логично выделить сегменты для боковой панели, для футера и т.д., но этим контентом нужно будет управлять в разных разделах админ-панели.
[H2]Создание оригинального шаблона/дизайна с нуля[/H2]
Тут вам помогут только профессионалы. Даже если вы самостоятельно сможете натянуть HTML-шаблон на движок, нужно сначала создать качественный макет дизайна и нарезать его на HTML-теги. С этим вам помогут дизайнеры и верстальщики.
[H2]Перенос данных[/H2]
Это наиболее сложный и трудоёмкий процесс.
Если вы использовали подход с шаблонами, который мы указали, то перенести данные можно простым копированием HTML-кода в тело страниц (исключив зону шапки и подвала, их логично делать сквозными для всего сайта).
Но ручной перенос не всегда удобен, особенно, если у вас сотни или даже тысячи страниц на старом сайте, встроенные формы в тексте и т.д.
[H2]Ручное копирование информации и медиаконтента[/H2]
Изображения со страниц желательно вынести в каталог «/wp-content/uploads/». Но стоит помнить, что загруженные вручную картинки не будут отображаться в админ-панели (движок не будет ничего знать о медиаконтенте, если он загружен в обход стандартных форм).
Все пути (ссылки), указывающие на изображения, и другой медиаконтент нужно будет поправить, чтобы они соответствовали новому (актуальному) расположению.
Когда будете переносить наполнение отдельных страниц, обязательно заполняйте мета-теги (тайтл и дескрипшн), без них качество индексации значительно ухудшится.
После публикации проверяйте страницу на наличие ошибок и проблем с вёрсткой.
[H2]Автоматическое наполнение базы данных нового сайта из базы парсинга[/H2]
Средств автоматизации по переносу из HTML в WordPress не так уж много. Обычно разрабатываются уникальные скрипты, которые будут учитывать структуру HTML-сайта, ведь на каждом отдельном сайте она может кардинально отличаться.
Если старая версия сайта работает на одним из онлайн-конструкторов, можно попробовать быстро мигрировать с помощью RSS-канала. Нужно скачать RSS-ленту старого сайта и загрузить её в WordPress-сайт с помощью специального плагина импорта.
Существует специальный онлайн-сервис миграции между разными CMS системами – CMS2CMS. Но он платный. Для направления миграции нужно выбрать формат «HTML» в «WordPress». Перенос 250 материалов обойдётся в 49 USD. Для того, чтобы убедиться в качестве переноса данных, предварительно воспользуйтесь демонстрационным режимом (это бесплатно и поможет вам понять, справится ли скрипт конкретно с вашим сайтом или нет).
[H2]Заключительная часть и рекомендации[/H2]
Ни в коем случае при переносе не должна пострадать юзабилити сайта. Если посетители не смогут пользоваться новой версией ресурса, то перенос даже не стоит затевать.
После того, как данные перенесены на боевой сервер (расположены на хостинге), нужно перенаправить домен и подождать обновления DNS-системы (в некоторых случаях этот процесс может занимать 1-3 дня).
Ни в коем случае не удаляйте сразу старый сайт, сначала убедитесь в работоспособности нового. Проверьте сайт под нагрузкой, просмотрите все страницы, проверьте работу форм и других интерактивных элементов. Просканируйте (спарсите) уже новый сайт и проверьте на наличие проблем:
- везде ли указаны мета-теги;
- нет ли недоступного контента или несуществующих/пустых страниц;
- нет ли ошибок в URL-адресах;
- правильно ли настроены редиректы (если они делались);
- и т.д.
На самом деле, процесс переноса сайта из HTML на динамический движок, особенно на WordPress, достаточно прост и понятен. Новичкам, конечно, придётся подтянуть отдельные знания, но в целом всё это поправимо и реализуемо. Главное – не бояться и строго следовать указанному выше плану. Тогда вы сохраните не только свои данные, но и позиции сайта в поиске.
