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

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

об этом путеводителе

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

Цели

Целью данного руководства является помочь вам со следующим:

• План эффективного перемещения в WordPress.
• Прогулка по техническим этапам переноса.
• Получить идеи и ресурсы для решения общих проблем перемещения.

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

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

30 __ |

Основные шаги

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

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

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

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

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

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

Содержание импорта

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

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

• Объединяет ли веб-сайт какие-либо сторонние услуги (сбор данных, резервирование, и т.д.)?
• Существуют ли какие-либо формы, которые необходимо будет перенести? (контактные формы, анкеты и т.д.)
• Является ли доступ к любому контенту ограниченным? (например, только для зарегистрированных членов)
• Будет ли сайт продавать товары (цифровые или физические)
• Нужно ли будет переносить любые административные инструменты (например, пользовательские функции CMS)

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

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

Настройка WordPress

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

Как только вы приведете WordPress в порядок, вы будете готовы к дальнейшим действиям!

53 __ |

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

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

Итак, WordPress установлен, и мы сделаем несколько небольших изменений:

•  Обновление постоянных ссылок. Идем по пути Settings → Permalinks для внесения изменений. В большинстве случаев, я переключаюсь по “адресу ссылки” - это постоянные ссылки стиля.
•  Обновление пользователей. Я создаю уровень администратора для себя и любых администраторов или редакторов, которые необходимы для клиентов и сотрудников. Я также удаляю имя пользователя по умолчанию “Admin”, если он существует (основной и мудрый шаг для безопасности WordPress)

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

• Форма управления перенос формы “как есть”, как правило приносит беспорядок, просто воссоздать ее с помощью формы плагина как правило, легче. Мое сегодняшнее предпочтение это Gravity Forms  (стоимость лицензии $ 39). Другие варианты - Formidable (как с бесплатной версией так и с версией Pro) и  Contact Form 7 (Совершенно бесплатно)
• Управление SEO Поисковая оптимизация (SEO) является щекотливой темой. Моя философия заключается в создании контента для людей, а не для поисковых систем. Это, как говорится, есть подход здравого смысла к поисковой оптимизации, которая прочно поддерживается экосистемой плагинов WordPress. И если ваш старый сайт включает в себя пользовательские метаописания, предоставить им новые адреса во время процесса переноса очень важно. Я рекомендую WordPress SEO (Предоставляется бесплатно)
•  Разнообразие языков Если ваш старый сайт поддерживает несколько языков, WordPress об этом позаботится. Моим выбором является плагин  WPML ($ 79 за лицензию, бесплатно для некоммерческих организаций). Другим вариантом является плагин qTranslate (Предоставляется бесплатно)
•  Безопасность Тема безопасности WordPress близка и дорога мне. Растущая популярность WordPress сделало его мишенью для атак. WordPress сам редко является главной проблемой, обычно дело в плохом обеспечении среды хостинга или устаревшей или слабо развитой системы плагинов. Я использую управляемый хостинг WordPress для большинства моих проектов, которые предлагают хорошую основу для надежной безопасности WordPress. Варианты включают такие плагины, как WPEngine ZippyKid Pagely и Synthesis. В дополнение к управляемому хостингу (и особенно, если вы выберете хост для неуправляемых), вам лучше рассмотреть вопрос об установке подключаемого модуля защиты, такого как  Best WP Security (Предоставляется бесплатно) или Wordfence (также бесплатно). Последнее, но не менее важное — ознакомьтесь с разделом “Закалка WordPress” — Руководство в Codex.
•  Возвраты Если вы выберете опцию управляемого хостинга, то резервное копирования, как правило, будет автоматически включено (однако лучше убедитесь в этом сами). Если вы управляете резервными копиями сами, или вы хотите дополнительный уровень защиты данных, существуют отличные варианты, в том числе VaultPress ($ 15 в месяц), CodeGuard ($ 5 в месяц), BackupBuddy ($ 75 за лицензию) и BackWPup (бесплатно)

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

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

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

Если вашей старой CMS нет в списке или у вас нет CMS вообще, и у вас есть менее 100 страниц, тогда вероятно вам лучше заняться ручным переносом. Скопируйте и вставьте содержимое, отмечая старые URL-адреса, и что вы делаете (отслеживание переноса сайта в электронных таблицах — хорошая идея!!!)

22 __ |

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

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

перенос дизайна

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

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

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

Работа с источником кода

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

3 __ |

Работа с непосредственно исходным кодом в предпочтительном вам браузере сэкономит много времени и, запретит любую важную “негласную” функциональность, даст вам все, в чем вы нуждаетесь. В настоящее время я пользуюсь браузером Google Chrome, и я вытащил наш исходный код образца непосредственно из браузера. (В Chrome, перейдите на Menu → Tools → View Source., или просто щелкните правой кнопкой мыши для вызова контекстного меню)

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

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

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

 Скачайте копию (формат ZIP) темы стартера перемещения или следуйте с вашей собственной предпочтительной вам темой, поскольку мы работаем через соответствующие файлы тем.

1.Таблица стилей

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

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

Примечание об изображениях

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

2. заголовок

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

• Копируем структуру HTML старого веб-сайта.
• Заменяем статическое меню WordPress своим хорошим меню.
• Используем теги ‘заголовок' WordPress и оставляем 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> 

Пояснение

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

23 __ |

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

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

•  Doctype (Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.) Удостоверьтесь, …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Wordpress → 15.05.2013 by Newsbot