Перенос сайта на WordPress проще, чем вы думаете

Сейчас, поддерживая около 17% сетевого контента, WordPress стремительно становится наиболее предпочитаемой CMS для среднестатистического пользователя. Но что делать с сайтами, созданными с устаревшей CMS, или без нее вообще? Означает ли переход на WordPress то, что вам придется начать все сначала и потерять уйму времени, энергии и денег, которые вы вложили в этот веб-сайт? Нет!

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

Подробнее, об этом уроке

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

Цели

Данный урок призван помочь вам со следующим:

• планирование эффективного перехода на WordPress;
• проведение через технические моменты, связанные с переносом;
• решение наиболее частых сложностей, связанных с переносом.

Предположения

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

Первые шаги

Здесь описаны начальные шаги, которым рекомендуется следовать в процессе перехода на WordPress:

1. Оцените веб-сайт. Внимательно просмотрите страницы на вашем существующем веб-сайте и определите тип контента (стандартные страницы, фотогалереи, страницы ресурсов и т.д.), обратите внимание на любую информацию, которую можно посчитать важной.
2. Подготовьте среду. Настройте WordPress и приготовьтесь к импорту.
3. Импортируйте контент. Перенесите и организуйте ваш контент через утилиту импорта, вручную (для небольшого количества контента, когда утилиты недоступны) или через настраиваемый процесс переноса.
4. Перенесите дизайн. Встройте свой существующий дизайн в предустановленную тему WordPress.
5. Проверьте веб-сайт и начинайте. Внимательно проверьте результат импорта, подправьте, где необходимо, установите редиректы URL и начинайте!

С этим планом в голове давайте начнём прорабатывать каждый шаг подробно.

Начните с плана

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

Импортируемый контент

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

Существующая функциональность

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

Рабочий пример

Мой брат решил пожертвовать свой сайт для примера: его проект продает постеры и открытки компании вегетарианской еды. Он построил сайт на простом HTML, с вставками PHP базового уровня для шапки и нижнего колонтитула. Ниже представлен скринкаст, где я изменяю этот сайт, чтобы вы поняли процесс работы. Наслаждайтесь!

Установка WordPress

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

После того, как wordpress настроен и запущен, вы можете начинать работу!

Для нашего примера, мы установили wordpress  на тот же хостинг, в директорию /wp для продолжения процесса переноса.

Настройки и плагины

С установленным wordpress нам остается сделать минимальные поправки:

• Обновите постоянные ссылки. Кликните “Настройки->Постоянные ссылки” , чтобы внести изменения. В большинстве случаев я просто изменяю  постоянные ссылки на “postname”.
• Обновите пользователей. Я создал аккаунт андимистраторского уровня для себя и для любого администратора или редактора, что необходимы для клиентов и партнеров. Я также убираю дефолтное имя пользователя “admin”, если оно существует.

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

• Управление формами. Перенос форм так, как они есть может превратить все в хаос. Простое создание форм с нуля гораздо проще. Моим фаворитом является gravity forms. Другие варианты – это formidable и contact form 7.
• Управление SEO. SEO – очень деликатное явление. Смысл моей работы заключается в создании контента для людей, а не для поисковых систем. Поэтому, существует адекватный подход к SEO, поддерживаемый экосистемой wordpress. И если на вашем старом сайте есть пользовательские мета-описания, необходимо их перенести без потерь. Для этого поможет wordpress SEO.
• Множество языков. Если ваш сайт поддерживает несколько языков, у WordPress есть решение. Мой выбор – плагин WPML. Еще одним решением может стать qTranslate.
• Безопасность. Безопасность на WordPress – это хорошо знакомая мне тема. Возрастающая популярность WordPress сделало его неплохой целью для различного рода атак. Сам WordPress редко является проблемой, в основном она кроется в плохо охраняемой хостинговой среде и устаревших или плохо разработанных плагинах. Для большинства своих проектов я использую регулируемые хостинги WordPress, которые предлагают неплохие стандарты безопасности. В ряде опций можно назвать WPEngine, ZippyKid, Pagely и Synthesis. В добавок в регулируемому хостингу обратите внимание на плагины безопасности, такие как Better WP Security или WordFence.
• Бэкапы. Если вы выбрали управляемый хостинг, то бэкапы обычно включены. Если вы сами делаете бэкап или вы хотите дополнительный слой защиты для данных, то есть отличные варианты, как например, VaultPress, CodeGuard, BackupBuddy, BackWPup.

Импорт контента

Итак, мы запустили и настроили WordPress, теперь самое время перенести весь ваш контент.

Если у вашего старого сайта есть CMS, вам может быть доступна утилита. Начните искать скрип для переноса контента в Кодексе. Ели есть совпадение – здорово! Следуйте инструкциям и принимайтесь за работу. Если всё хорошо, то вы перенесёте свой сайт без каких-либо проблем.

Если вашей CMS нет в списке или у вас нет CMS и у вас менее 100 страниц, тогда пригодится ручной перенос. Копируйте и переносите контент, записывая старые URL.

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

В нашем случае, мы перенесли контент вручную и заменили существующую навигацию меню WordPress. Вы сможете посмотреть процесс в этом скринкасте.

Перенести дизайн

Теперь настало время перенести на WordPress наш дизайн. Если вы хотите обновить внешний вид сайта, тогда стоит приглядеться к множеству отличный тем WordPress в официальном хранилище и сторонних магазинах, например ThemeForest и Creative Market. В нашем случае, представим, что вы полностью довольны дизайном.

Оценка дизайна

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

Работа с исходным кодом

Следуя своему опыту, могу сказать, что наиболее простой способ переноса дизайна – это работа с исходным кодом в браузере. Хотя доступ в хостинговой среде может быть полезно (особенно при работе с изображениями и скачиваемыми файлами), однако способы построения веб-сайтов настолько различаются, что вам придется переделывать оригинальную архитектуру, чтобы добиться чего-либо полезного.

Прямая работа с исходным кодом сэкономит ваше время, покажет скрытые полезные функции и предоставит вам все, что нужно. Я пользуюсь браузером Google Chrome.

Создание пользовательской темы

Если вы в этом новичок, просмотрите информацию об использовании тем в Кодексе. Для процесса переноса вы можете создать новую тему WordPress с нуля, или изменить уже существующую тему, чтобы она соответствовала вашим вкусам. Я советую второй способ.

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

Скачайте копию (zip) шаблона для переноса или продолжайте со своей темой, на выбор.

Стиль страницы.

Нашим первым шагом будет перенос стилей со старого сайта. В большинстве случаев это не сложнее, чем поиск в исходном коде соответствий на .css:

1. Откройте style.css.
2. Замените детали в теме (имя, URL, описание и т. д.) на ваши собственные.
3. Вставьте стили со старого сайта.

Заметка по поводу картинок

Если вы переносите стиль страницы, найдите и обновите любую информацию об изображениях. В общем, мне нравится держать все изображения в папке /images/ в директории темы. Чаще всего необходимо менять расположение изображений в оригинальной CSS, и я удостоверился, что поменял все ссылки и шаблоны соответственно.

Заголовок

Следующим шагом будет создание заголовка для нашей новой темы. Нашей целью будет совместить структуру текущего кода с шаблонами WordPress. Вот что нам стоит сделать:

• Скопируйте HTML структуру старого сайта.
• Замените статическое меню на меню, поддерживаемое WordPress.
• Используйте тэг WordPress title и оставьте wp_head на месте.
• Вставьте другие важные теги из старого заголовка.

Давайте взглянем на код!

Оригинальный HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Vegan Food Pyramid posters, postcards and wallpapers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
<script type="text/javascript" src="//use.typekit.net/tty6xpj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

</head>
<body>
<a href="http://veganfoodpyramid.com"><h1 id="logo">Vegan Food Pyramid</h1></a>
<ul class="menu">
   <li><a class="active" href="http://veganfoodpyramid.com">Products</a></li>
   <li><a href="http://veganfoodpyramid.com/wallpaper.php">Wallpaper</a></li>
   <li><a href="http://veganfoodpyramid.com/about.php">About</a></li> 
   <li><a href="http://veganfoodpyramid.com/contact.php">Contact</a></li>
</ul>

Подогнанный заголовок (header.php)

<!DOCTYPE html>
<html>
<head>
   <title><?php wp_title( '|', true, 'right' ); ?></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
   <link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
   <script type="text/javascript" src="//use.typekit.net/tty6xpj.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

   <header>
      <a href="http://veganfoodpyramid.com"><h1 id="logo">Vegan Food Pyramid</h1></a>
      <?php wp_nav_menu( array( 
            'theme_location' => 'primary',
            'container' => false,
            'menu_class' => 'menu'
      ) ); ?>
   </header>

Объяснение

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

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

Давайте проработаем изменения, которые мы внесли.

• Тип документа. Убедитесь, что вы перенесли тот же самый тип. В этом случае оригинальный html уже имеет доктайп HTML5 (относительно редкий случай на старых сайтах). Используя современный доктайп в коде, написанном для старого кода вы можете испортить шаблон.
• Мета-теги. Я обычно переношу большую часть метатегов так, как они и есть , заменяя их в WordPress. Исключение в нашем случае составляет ссылка на файл стилей, вставляемая автоматически через wp_enqueue_style в файле functions.php.
• Скрипты. Скрипты могут быть запутанными. Если скрипт находится на каждой странице (например, трекинговый скрипт, или скрипт шрифта), тогда необходимо разместить его в файле заголовка или нижнего колонтитула. Если необходимо, чтобы он появлялся лишь в отдельных местах, то подойдут теги условий. Лучше всего добавьте все скрипты в заголовок через wp_enqueue_script. Если вы готовы принять вызов, то я советую вам этот способ.
• wp_head. Оставьте <?php wp_head ?> внизу тега </head> в файле header.php. WordPress также использует wp_head, чтобы расставить скрипты и файлы стилей, используемые в теме и в плагинах, что вы установили. Без wp_head большинство плагинов просто не будут работать.
• Body_class. Обратите внимание на использование тега <?php body_class(); ?>. WordPress использует это, чтобы предоставить ряд полезных классов к тегу <body> пока вы присматриваете страницу. В нашем примере они не используются. Ваши должны иметь уникальные ID или классы на каждой странице, в этом случае вам нужно создать произвольные функции используя теги условий, чтобы добавить соответствующие классы для каждой страницы.
• Меню WordPress. Переход на меню WordPress является одним им самых сложных задач в переносе. Он будет у нас довольно прямолинейный. У нас есть простое меню, которые использует класс active (сгенерированый через PHP), чтобы показать, какую страницу посещает пользователь. Функция wp_nav_menu очень гибкая и предлагает встроенную функциональность, чтобы обрабатывать текущее состояние элемента в меню. Я обновил условия в файле стилей на active и изменил их, чтобы они использовали эквивалент, сгенерированный wp_nav_menu, который является current-menu-item. Смотрите скринкаст о переносе контента, чтобы понять, как настраивать меню на нашем примере.

Вот и готова оболочка. Давайте приступил к следующему шагу.

Подвал

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

Оригинальный HTML

<div id="footer"><p>© 2013 VeganFoodPyramid.com</p></div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

Подогнанный футер (footer.php)

<div id="footer"><p>© <?php echo date('Y'); ?> VeganFoodPyramid.com</p></div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}</script>

<?php wp_footer(); ?>

</body>
</html>

Объяснение

Некоторые подвалы сложно перенести (например, со сложными меню и виджетами), но в большинстве случаев это довольно просто. В нашем случае мы объединили HTML с нашим шаблоном подвала, оставляя обращение wp_footer. Мы также изменили ссылку на дату, чтобы использовать PHP и быть уверенными, что он обновляется каждый год.

Домашняя страница

Одна из проблем переноса – это то, что существует куча способов выполнить эту работу. Хорошим примером может служить домашняя страница, потому что она обычно наиболее отличается от остальной части сайта. Самый простой способ обычно самый верный. Я решил разместить весь контент с домашней страницы прямо в шаблоне. Изменять ее придется редко и это всегда можно будет сделать, изменяя шаблон.

Давайте посмотрим на код без заголовка и футера, который мы уже перенесли.

Оригинальный HTML

<div id="content">

<div id="poster">
<a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg" /></a>
<div class="description">
<h2>Poster</h2>
<p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
<h3>$30 each</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2FKQT879CXYYG">Buy</a>
</div>
</div>

<div id="postcard">
<a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="http://veganfoodpyramid.com/images/postcard-splash.jpg" alt="Postcard Splash" /></a>
<div class="description">
<h2>Postcards</h2>
<p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
<h3>$50 for 50</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EN387WHNSSFMW">Buy</a>
</div>
</div>

</div> <!-- end content -->

Подогнанная главная страница

<?php
/**
 * Template Name: Front Page Template
 */

get_header(); ?>

<div id="content">

   <div id="poster">
      <a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg" /></a>
      <div class="description">
         <h2>Poster</h2>
         <p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
         <h3>$30 each</h3>
         <p>Includes free shipping worldwide</p>
         <a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2FKQT879CXYYG">Buy</a>
      </div>
   </div>

   <div id="postcard">
      <a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/postcard-splash.jpg" alt="Postcard Splash" /></a>
      <div class="description">
         <h2>Postcards</h2>
         <p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
         <h3>$50 for 50</h3>
         <p>Includes free shipping worldwide</p>
         <a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EN387WHNSSFMW">Buy</a>
      </div>
   </div>

</div> <!-- end #content -->

<?php get_footer(); ?>

Объяснение

Шаблон front-page.php начинается и заканчивается ссылкой на заголовок и футер, которые я только что подготовил. Также я объединю туда оставшуюся часть HTML и мы используем функцию  get_stylesheet_directory_uri, которая автоматически генерирует ссылки к папке с изображениями в вашей новой теме.

Шаблон стандартной страницы

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

Подогнанный шаблон (page.php)

<?php
/**
 * The template for displaying all pages.
 */

get_header(); ?>

<div id="content">

   <?php while ( have_posts() ) : the_post(); ?>

      <?php get_template_part( 'content', 'page' ); ?>

   <?php endwhile; ?>

</div>

<?php get_footer(); ?>

Подогнанный шаблон (content-page.php)

<?php
/**
 * The template used for displaying page content in page.php
 */
?>

   <article <?php post_class(); ?>>
      <?php the_content(); ?>
   </article>

Объяснение

Здесь необходимо рассмотреть некоторые пункты:

• Loop. Если вы новичок в WordPress или в программировании в общем, эта часть кода в #content может немного смутить. Loop – это код, используемый WordPress, чтобы показать содержимое поста. Необходимо убедится, что он присутствует, иначе сохраненный в WordPress контент не будет отображаться.
• Get_template_part. Наш шаблон страницы использует удобную функцию get_template_part, которая отлично подходит для организации контента, особенно в сложных проектах. Наш веб сайт довольно мал, чтобы полагаться на нее, но я оставил ее, чтобы показать вам.
• Post_class. Я также добавил ссылку на <article>, чтобы упростить дальнейшее изменение дизайна.

Полноформатный шаблон (full-width.php)

Хоть это и не показано в скринкасте, дизайн включает полноформатный шаблон чтобы использовать на странице “wallpaper”, в то время, как стандартный шаблон страницы изменен до узких размеров.

Давайте посмотрим.

Подогнанный шаблон (full-width.php)

<?php
/**
 * Template Name: Full-Width Template
 */

get_header(); ?>

<div id="content" class="full-width">

   <?php while ( have_posts() ) : the_post(); ?>

      <?php get_template_part( 'content', 'page' ); ?>

   <?php endwhile; ?>

</div>

<?php get_footer(); ?>

Объяснение

С созданным шаблоном, все, что нам остается – это привязать его к странице. Найдите “атрибуты страницы” при редактировании страницы, обычно под формой “опубликовать” и выберите “full-width template” из каскадного меню “шаблоны”.

Дополнения

А теперь давайте возьмемся за некоторые “дополнения”, которые иногда вызывают трудности при переходе на WordPress.

• Breadcrumbs. Довольно часты на сайтах. Самый простой способ – воссоздать их с плагином. Мой любимый – это breadcrumbs NavXT. WordPress также предлагает бесплатные Breadcrumbs.
• Виджеты. Если у дизайна, который вы переносите есть боковая панель, вы можете перенести ее так, как она есть, или интегрировать виджеты WordPress, чтобы иметь возможность динамически изменять боковую панель.
• Запрещенный контент. В случае, если контент необходимо ограничить, WordPress предлагает базовую защиту паролем по умолчанию. Если вам нужен больший контроль – используйте плагин. Для базового управления пользователями и ограничения контента я рекомендую Members. Для более продвинутого контроля, особенно если вовлечены платежи, примите во внимание Membership, s2Member или wpmember.
• Пользовательский тип постов. Некоторые переносы, особенно с большим количеством различного контента требуют пользовательского типа постов. Об этом вы можете узнать подробнее в Кодексе. Для их настройки я рекомендую использовать плагин. Два достойных выбора – это custom post type ui и types.

Проверьте сайт

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

1. Битые ссылки. Убедитесь, что все ссылки работают так, как должны. Если у вас всего пара страниц, то вы можете сделать это вручную. Для автоматической проверки используйте Integrity или Xenu’s link sleuth.
2. Битые стили. Иногда по каким-либо причинам элементы вашего сайта могут быть нарушены при переносе. Внимательно сравните старый HTML с новым и убедитесь, что вы не пропустили важный код и что соответствующие элементы стиля были перенесены верно. Если что-нибудь пойдет не так, может понадобится быстрая перестройка дизайна.
3. Нарушенная функциональность. Протестируйте любые функции, которые вы перенесли, такие как кнопки “приобрести сейчас”, контактные формы, опции новостных рассылок, контент для пользователей, встроенные карты, медиа-плееры и так далее.
4. Временные ссылки. В зависимости от того, как вы перенесли перенос, временные ссылки к подпапкам или тестовым доменам могут отображаться в вашем контента или теме. Вам нужно будет решить этот вопрос перед тем как запускать сайт. Используйте плагин Search and Replace, чтобы проверить и обновить ссылки в вашем контенте.

Настройка редиректов

Если структура ваших ссылок изменилась (а обычно это так, даже если и слегка), убедитесь, что пользователи перенаправлены со старых ссылок на новые. Для небольших объемов контента самый простой способ – это добавить их в файл .htaccess.

Откройте файл .htaccess в директории WordPress. Если вы не можете его найти, то настройте ваш FTP клиент на отображение скрытых файлов. Теперь создайте редиректы для старых страниц. Убедитесь, что вы разместили их после блока опций WordPress.

Вот переписанные опции для наших ссылок:

Redirect 301 /wallpaper.php http://veganfoodpyramid.com/wallpaper/
Redirect 301 /about.php http://veganfoodpyramid.com/about/
Redirect 301 /contact.php http://veganfoodpyramid.com/contact/
Redirect 301 /contactthanks.php http://veganfoodpyramid.com/contact/thanks/

Если изменение файла .htaccess не вариант или вам приходится иметь дело с множеством перенаправлений, тогда при смотритесь к Redirection.

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

Конечная стадия

Конечная стадия переноса веб-сайта включает две задачи:

1. Перенос WordPress из папки разработки в корневую директорию.
2. Привязка домена со старого сервера на новый сервер WordPress.

 

Перенос WordPress

Если вы настроили WordPress в подпапке (как сделали мы), тогда запуск включает пару простых шагов.

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

Направление на новый сервер

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

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

Заключение

Вот и все! Успех переноса сайта на WordPress заключается в деталях и даже если этот урок непонятен для вас, у вас теперь есть хороший план процесса и представление о трудностях, с которыми вам придется столкнуться, а также идеи, как их разрешить. Если вы сталкиваетесь с трудностями в процессе, то делитесь ими в комментариях. А теперь не бойтесь переходить на WordPress!

Источник: http://www.smashingmagazine.com/2013/05/15/migrate-existing-website-to-wordpress/