Как перенести сайт на WordPress? Инструкция по переезду сайта на WordPress
Около 17% веб сайтов построены на WordPress платформе. Эта CMS набирает популярность в кругах большинства разработчиков. Как же быть с уже существующими сайтами, на других движках или вообще без них? Значит ли это, что перенос сайта на wordpress платформу займет массу времени, усилий и денег? Или нужно вообще все начать заново?
Перенос сайта на WordPress на самом деле легче нежели вы можете представить. В этой статье мы рассмотрим процесс переезда сайта шаг за шагом, на реальном примере. Постараемся охватить и обсудить все существующие с этим проблемы.
Основные шаги
Вот главные моменты, которые нельзя упустить при миграции сайта на WordPress:
- Оцените существующий сайт. Работайте аккуратно рассматривая страницы существующего сайта. Определите все типы контента (страницы, фотогалереи, ресурсные страницы и т.д.), рассмотрите поля и формы. Запишите все на бумаге и создайте резервную копию существующего сайта.
- Подготовьте место обитания нового сайта. Настройте WordPress и подготовьте все для импорта контента.
- Импорт контента. Перенесите контент на новую платформу. Для маленьких сайтов это можно делать вручную. Для больших проектов можно использовать плагины.
- Перенесите дизайн сайта. Переделайте стандартную тему WordPress в соответствии с дизайном существующего сайта.
- Пересмотрите, протестируйте. Осторожно проверьте все еще раз и сделайте резервную копию нового сайта. Внесите корректировки, настройте редирект url со старого сайта на новый. Тестируйте!
Это базовый план переноса сайта на новую платформу. Теперь рассмотрим каждый из этапов подробнее.
Начните с плана
Ключевой момент успешного переезда сайта – оценка существующего веб проекта. Вам надо осмыслить, как импортировать и структурировать контент в WordPress. Основные моменты переноса сайтов не меняются, вся сложность в деталях, которые специфичны для каждого проекта.
Ниже список вопросов, которыми надо руководствоваться при оценке контента:
- Сколько контента должно быть импортировано? Количество страниц, изображений и т.д.
- Возможно, импортировать контент вручную? Или надо использовать инструмент?
- Если использовать инструмент, существует ли он?
- Можно ли организовать контент в «постах» и «страницах», или он отличается от стандартных типов?
- Нужно ли переносить дополнительные элементы контента (поля ввода, примеры, видео и т.д.)?
- Поменяется ли структура URL? Если да, то надо не забыть о редиректе со старых страниц на новые.
- Открыт ли контент для общего доступа? Или существуют страницы только для зарегистрированных пользователей?
Настройка WordPress
Перед тем как перенести контент, нужно подготовить wordpress. Если Вы только экспериментируете, установите wordpress локально. В ином случае, надо это сделать на хостинге.
Когда WordPress установлен, можно действовать!
Настройка URL
Перейдите в Settings –> Permalinks для внесения изменений. В большинстве случаев, ссылки лучше хранить в виде названия поста.
Аккаунты пользователей
Если на вашем сайте были зарегистрированы пользователи, необходимо создать для них аккаунты в установленном wordpress. После окончания переноса сайта, будет хорошо сообщить пользователям об этом по email.
Необходимые плагины
Плагины подбираются под конкретные нужды сайта (контактная форма, слайдер контента, галерея, социальные закладки и т.д.). Вот официальная директория плагинов. Единственное, обратите внимание на организацию резервного копирования данных (backup).
Импорт контента в платформу WordPress
Это рутинная и ответственная работа!
Если ваш старый сайт использовал CMS, возможен вариант автоматического импорта контента. Пересмотрите список скриптов позволяющих сделать это. Следуйте инструкциям и сделайте это!
Если ваша старая CMS не в списке, или сайт самописный, с количеством страниц не более 100, тогда лучше всего сделать все вручную. Копируйте и вставляйте контент, записывая перенесенные url страниц.
Если в вашем распоряжении база данных с контентом в несколько тысяч, тогда придется позаботиться о специалисте. Или найти решение для автоматического импорта.
Перенос дизайна сайта
Если вам не так критичен новый дизайн, можно просто подобрать существующую тему. Или подкорректировать стандартную (заменить логотип, футер и поменять цветовую гамму).
В случае переноса раскрученного и узнаваемого пользователями сайта, лучше всего сохранить дизайн прежним.
Работаем с исходным кодом
На собственном опыте, лучше всего работать с исходным кодом в браузере. Если брать файлы с хостинга, можно сделать множество ошибок. В браузере мы видим сайт таким, каким видят его пользователи.
В Google Chrome это делается так: Меню -> Инструменты -> Исходный код, или нажатие правой кнопки мыши для вызова контекстного меню.
Создание темы
Если Вы новичок в этом, узнайте более об использовании тем в кодексе. Можно создать новую тему с нуля, но лучше просто отредактировать существующую. Так вероятнее всего, будет меньше ошибок, и проще будет ориентироваться.
Для исходной темы подойдет стандартная Twenty Twelve, которую можно скачать с нашего сайта (ZIP).
Файл стилей
Первым шагом в создании темы будет копирование существующих стилей в файл стилей wordpress темы: style.css
Для этого достаточно открыть этот файл для редактирования, поменять информацию о теме (закомментированная в начале файла), вставить стили со старого сайта.
НЕ забудьте о url картинок! Вероятнее всего они поменяются в связи с новой структурой папок. Поэтому внимательно следите за этим как в файле стилей, так и в теме соответственно.
Шапка (Header) сайта
Следующим шагом будет создание верхушки сайта. Здесь надо объединить структуру текущего html кода с кодом 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>
Рассмотрим все что мы сделали!
Doctype
Убедитесь что перенесли старый doctype. В ином случае, использование нового HTML5 doctype для кода старых спецификаций, может вызывать перебои в работе шаблона (особенно в старых браузерах).
Мета теги
Как правило переносятся все основные теги. Исключением в нашем случае является подключение файла стилей, которое вставляется автоматически с помощью wp_enqueue_style в файле functions.php
Скрипты
Со скриптами могут возникать трудности. Если скрипт подключен на каждую страницу сайта (например, главный файл скриптов или скрипт шрифта), тогда можно смело прописать его в header или footer темы. Если необходимо подключить только на определенной странице, тогда можно использовать условные теги. Лучим способом будет зарегистрировать все скрипты и добавить их с помощью wp_enqueue_script.
wp_head
Вставьте <?php wp_head(); ?> внизу </head> тега. WordPress использует это для подключения собственных скриптов и стилей темы. Также для установленных плагинов. Без wp_head, большинство фронт-энд плагинов не будут работать.
body_class
Заметьте применение нашего <?php body_class(); ?> тега. WordPress использует его для предоставления серии полезных классов для <body> тега. Эти классы вставляются в зависимости от типа страницы автоматически.
WordPress меню
Вывод WordPress меню, это одно из самых сложных заданий при переносе сайта на этот движок. В нашем примере, мы имеем меню с простой разметкой, которая использует active класс (сгенерированный с помощью PHP), для определения просматриваемой страницы. Функция wp_nav_menu очень гибкая и предоставляет множество встроенных решений для организации меню. В примере, мы взяли стили с active класса и поместили их в эквивалентный wordpress класс current-menu-item.
Подвал (Footer) сайта
Как правило в подвале сайта меньше всего изменяется. Все так, как в случае с шапкой сайта. Сделаем слияние HTML кода.
Старый 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>
Некоторые из футеров сложно перенести на wordpress тему. Например, которые содержат меню и разные виджеты. Большинство из футеров простые, как в нашем примере. Главное не забудьте вставить <?php wp_footer(); ?> тег перед </body> тегом.
Главная страница
Сделать работу можно разными способами. Главная страница яркий пример этому, так как она отличается от остальной структуры веб сайта. В нашем примере, мы полностью встроим главную страницу в шаблон WordPress. Любые изменения можно будет сделать позже.
Старый код главной страницы
<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 -->
Новый код главной страницы (/page-templates/front-page.php)
<?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, для получения динамических адресов к папкам картинок нашей темы.
Шаблон стандартных страниц
Для экономии времени, перейдем к готовой странице WordPress шаблона:
Шаблон страницы с постами (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>
Есть несколько моментов, на которых надо остановиться:
Цикл
Если WordPress для вас что-то новое, тогда кусок кода в блоке #content может показаться сложным. Цикл – это кусок кода для вывода превьюшек постов. Вы можете изучить детальнее о циклах в кодексе. Просто убедитесь что этот участок кода присутствует, в ином случае не будет выводится список постов на странице.
get_template_part
Эта функция, хороший вариант организовать контент, особенно в сложных проектах. Несмотря на то, что этот проект простой, мы используем ее как пример.
post_class
Также вставляем эту строку, для легкости внесения изменений в дизайн.
Полноформатный шаблон (full-width.php)
Шаблон позволяет использовать полноформатную страницу, при просмотре которой, стандартная страница изменяется соответственно по ширине.
templates/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(); ?>
После этого, в интерфейсе администраторской панели можно открыть «Редактировать страницу», найти блок «Атрибутов страницы» (как правило ниже и справа от блока публикации), после чего выбрать «Полноформатный шаблон» из выпадающего списка шаблонов.
Пересматриваем, тестируем
Пришло время пересмотреть нашу работу. Тестируйте и рассматривайте внимательно. Для большого сайта, сфокусируйтесь на разных шаблонах. Вот, некоторые вещи на которые стоит обратить внимание:
Битые ссылки
Убедитесь, что все ссылки работают как надо. Если у вас несколько страниц, можно сделать это вручную. Для автоматизации можно использовать Integrity (бесплатно, для Mac) или Xenus Link Sleuth (бесплатно, для Windows).
Несоответствующие стили
Тем или иным способом, некоторые элементы дизайна могут отображаться неправильно. Внимательно сравнивайте старый и новый HTML код.
Функциональность
Проверьте работоспособность кнопок «Купить сейчас», контактных форм, рассылку, прикрепленных карт, медиа плееров и т.д.
Временные ссылки
В процессе переноса сайта на wordpress, могли появится временные ссылки на папки и пустые страницы. Внимательно рассмотрите и уберите их.
Настройка редиректа
Если структура ваших ссылок поменялась, убедитесь что пользователи и поисковые машины будут перенаправлены на новые адреса. Для небольшого количества адресов, зачастую используют .htaccess файл.
Откройте этот файл из папки WordPress движка. Если не видите его, измените параметры FTP клиента, чтобы показывал скрытые файлы. Теперь будем писать указания для редиректа каждой из страниц:
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/
Завершение!
Теперь ваш сайт обновлен! Надеемся, вы перенесли сайт на движок WordPress успешно. Если вы все еще на каком-то из этапов переезда сайта, и что-то не получается, пишите в комментарии.
На этом все, теперь вы знаете как перенести сайт на WordPress платформу!
Источник материала ...
Дальше: Разработка высококачественного сайта для мобильного устройства
Development — Taras Moroz