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

  1. Об авторе
  2. Дальнейшее чтение на SmashingMag:
  3. Цели
  4. Предположения
  5. Основные шаги
  6. Начните с плана
  7. Импортированный контент
  8. Настроить WordPress
  9. Настройки и плагины
  10. Импортировать контент
  11. Принесите дизайн
  12. Оценка дизайна
  13. Работа с исходным кодом
  14. Создать собственную тему
  15. 1. Таблица стилей
  16. Примечание об изображениях
  17. Оригинальный HTML
  18. Оригинальный HTML
  19. 4. Домашняя страница
  20. Оригинальный HTML
  21. 5. Стандартный шаблон страницы
  22. Объединенный шаблон (page.php)
  23. 5. Шаблон полной ширины (full-width.php)
  24. Объединенный шаблон (templates / full-width.php)
  25. Обзор веб-сайта
  26. Настройка перенаправлений
  27. В прямом эфире
  28. Указывая на новый сервер
  29. Заключение

Об авторе

Джонатан Уолд - муж прекрасной рыжей по имени Джослин и отец мальчика по имени Джейден. Он работает в Sabramedia , веб-дизайн и разработка… Подробнее о Джонатане ...

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

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

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

Дальнейшее чтение на SmashingMag:

Об этом руководстве

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

Цели

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

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

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

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

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

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

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

Помня об этом, давайте проработаем каждый шаг в деталях.

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

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

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

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

  • Сколько контента необходимо импортировать (количество страниц, количество изображений и т. Д.)?
  • Достаточно ли низок объем, чтобы его можно было импортировать вручную, или вам нужен инструмент?
  • Если вам нужен инструмент, он уже существует?
  • Можно ли разделить контент на стандартные «посты» и «страницы», или он требует пользовательских типов постов?
  • Нужно ли хранить дополнительный контент для определенных страниц (пользовательских полей, таксономий и т. Д.)?
  • Изменится ли структура URL? Если да, нужно ли перенаправлять старые URL?

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

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

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

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

Настроить WordPress

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

Как только WordPress запущен и работает, вы готовы к действию!

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

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

С установленным WordPress мы внесем несколько незначительных изменений:

  • Обновите постоянные ссылки. , Перейдите в Настройки → Постоянные ссылки, чтобы внести изменения. В большинстве случаев я переключаюсь на постоянные ссылки в стиле «postname».
  • Обновление пользователей. , Я создаю учетную запись уровня администратора для себя и любых учетных записей администратора или редактора, которые необходимы клиентам и сотрудникам. Я также удаляю имя пользователя по умолчанию «admin», если оно существует (основной, но мудрый шаг для безопасности WordPress).

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

  • Форма управления . Миграция формы «как есть» обычно является беспорядком; просто воссоздать его с помощью плагина форм обычно проще. Мой любимый сейчас Гравитационные Формы ($ 39 + за лицензию). Другие варианты грозный (с бесплатной и профессиональной версиями) и Контактная форма 7 (совершенно бесплатно).
  • SEO управление . Поисковая оптимизация (SEO) - тема очень важная. Моя философия - создавать контент для людей, а не для поисковых систем. При этом существует SEO-подход, основанный на здравом смысле, который полностью поддерживается экосистемой плагинов WordPress. И если ваш старый веб-сайт содержит пользовательские мета-описания, важно предоставить им новый дом во время процесса импорта. рекомендую WordPress SEO (свободно).
  • Несколько языков . Если ваш старый веб-сайт поддерживает несколько языков, WordPress обеспечит вас. Мой плагин выбора WPML (79 долларов США за лицензию, бесплатно для некоммерческих организаций). Другой вариант MultilingualPress (свободно).
  • Безопасность Безопасность WordPress - тема близкая и дорогая для меня. Растущая популярность WordPress сделала его мишенью для атак безопасности. Сам WordPress редко является проблемой; плохо защищенная среда хостинга или устаревший или плохо разработанный плагин. Я использую управляемый хостинг WordPress для большинства своих проектов, что обеспечивает хорошую основу для надежной безопасности WordPress. Варианты включают WPEngine , ZippyKid , Pagely а также Синтез , В дополнение к управляемому хостингу (и особенно если вы выбираете неуправляемый хост), рассмотрите возможность установки подключаемого модуля безопасности, такого как Лучшая безопасность WP (бесплатно) или Wordfence (также бесплатно). И последнее, но не менее важное, обзор « Укрепление WordPress Руководство в Кодексе.
  • Резервные копии . Если вы выбираете управляемый хостинг, резервные копии обычно включаются (хотя убедитесь). Если вы сами управляете резервным копированием или хотите получить дополнительный уровень защиты данных, доступны отличные варианты, в том числе VaultPress (15 долларов США + в месяц), CodeGuard (5 долларов + месяц), BackupBuddy ($ 75 + за лицензию) и BackWPup (свободно).

Импортировать контент

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

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

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

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

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

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

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

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

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

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

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

Переход непосредственно к исходному коду в выбранном вами браузере сэкономит много времени и, за исключением любых важных «закулисных» функций, даст вам все необходимое. Гугл Хром в настоящее время мой браузер по выбору, и я взял наши образцы исходного кода непосредственно из браузера. (В Chrome перейдите в «Меню» → «Инструменты» → «Просмотреть исходный код» или просто щелкните правой кнопкой мыши, чтобы вызвать контекстное меню.)

Создать собственную тему

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

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

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

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

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

  1. Откройте style.css.
  2. Замените детали темы («Имя», «URI», «Описание» и т. Д.) Своими собственными.
  3. Вставьте в стили из старого сайта.

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

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

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

  • Реплицируйте структуру HTML старого сайта.
  • Замените статическое меню на меню с поддержкой WordPress.
  • Используйте тег заголовка WordPress и оставьте хук wp_head на месте.
  • Объедините любые другие соответствующие теги из старого заголовка.

Давайте углубимся в код!

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

<! DOCTYPE HTML> <html> <head> <title> Плакаты, открытки и обои Vegan Food Pyramid </ title> <meta http-эквивалент = "Тип контента" content = "text / html; charset = utf-8" /> <meta name = "google-site-verify" content = "PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" /> <link rel = "stylesheet" type = "text / css" href = "style.css" media = "screen" /> <link rel = "ярлык" 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 "> Пирамида веганских продуктов </ h1> </a> <ul class =" menu "> <li> <a class =" active "href =" http: //veganfoodpyramid.com">Продукты </a> </ li> <li> <a href="http://veganfoodpyramid.com/wallpaper.php"> Обои </a> </ li> <li> < a href = "http://veganfoodpyramid.com/about.php"> О </a> </ li> <li> <a href="http://veganfoodpyramid.com/contact.php"> Связаться </ a> </ li> </ ul> <! DOCTYPE html> <html> <h ead> <title> <? php wp_title ('|', true, 'right'); ?> </ title> <meta http-equ = "Content-Type" content = "text / html; charset = utf-8" /> <meta name = "google-site-validation" content = "PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" /> <link rel = "ярлык" 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"> Пирамида веганских продуктов </ h1> </a> <? php wp_nav_menu (array ('theme_location' = > 'primary', 'container' => false, 'menu_class' => 'menu')); ?> </ header>

объяснение

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

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

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

  • Doctype . Обязательно возьмите с собой тот же тип документа. В этом случае исходный HTML уже имеет тип документа HTML5 (относительно редкое явление на старых веб-сайтах). Использование современного типа документа в базе кода, написанной для более старой спецификации (такой как XHTML или HTML4), может нарушить компоновку (особенно в старых браузерах).
  • Метатеги Я обычно привожу большинство метатегов как есть, заменяя их в WordPress. Исключением в нашем случае является ссылка на таблицу стилей, которая вставляется автоматически через wp_enqueue_style в файле functions.php.
  • Скрипты Скрипты могут быть хитрыми. Если скрипт присутствует на каждой странице (например, скрипт отслеживания или скрипт шрифта), тогда лучше всего поместить его непосредственно в файл верхнего или нижнего колонтитула. Если он должен появляться только на определенных страницах, то условный тег сделает свое дело. Рекомендуется зарегистрировать все сценарии и добавить их в верхний или нижний колонтитул с помощью wp_enqueue_script , Если вы готовы принять вызов, я рекомендую сделать это так. (Проверьте учебник по постановке в очередь TypeKit правильный путь.)
  • wp_head . Оставьте <? Php wp_head (); ?> в нижней части тега </ head> в объединенном заголовочном файле. WordPress использует wp_head среди прочего, ставить в очередь скрипты и таблицы стилей, на которые есть ссылки в теме (обычно в functions.php) и в установленных плагинах. Без wp_head большинство внешних плагинов не будет работать.
  • body_class . Обратите внимание на наше использование <? Php body_class (); ?> тег. WordPress использует это для предоставления ряда полезных классов тегу <body> в зависимости от просматриваемой страницы. В нашем примере классы <body> не использовались. У вас могут быть уникальные идентификаторы или классы на каждой странице, и в этом случае вы можете создать пользовательскую функцию, используя условные теги для добавления соответствующих классов на соответствующие страницы. Посмотрите на Кодекс для некоторых примеров.
  • WordPress меню . Переключение в меню на WordPress - одна из самых сложных задач в большинстве основных миграций. Это будет довольно просто для нас. У нас есть меню с простой разметкой, которая использует активный класс (сгенерированный через PHP), чтобы указать, какую страницу просматривает посетитель. wp_nav_menu Функция очень гибкая и предлагает встроенную функциональность для обработки текущего состояния элемента в меню. Я обновил ссылки в таблице стилей на активный класс и изменил их, чтобы использовать эквивалент, сгенерированный 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> <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, чтобы он обновлялся с каждым годом.

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

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

Давайте посмотрим на код, исключая верхний и нижний колонтитулы, которые мы уже рассмотрели.

Оригинальный 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> Плакат </ h2> <p> A 30 × 20-дюймовый плакат, иллюстрирующий более 125 веганских продуктов питания в качестве альтернативы традиционной пищевой пирамиде. Этот плакат привлечет внимание людей и послужит предложением для идей о еде. </ P> <h3> 30 долларов США каждый </ h3> <p> Включает бесплатную доставку по всему миру </ p> <a class = "button" href = "https : //www.paypal.com/cgi-bin/webscr? cmd = _s-xclick & hosted_button_id = 2FKQT879CXYYG "> Купить </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 = "Всплеск открыток" /> </a> <div class = "description"> <h2> Открытки </ h2> <p> Красивые открытки 4 × 6, которые можно отправить по почте и поделиться с друзьями и семьей. Раздайте их на мероприятиях. Разместите их на стенах. Поделитесь веганской любовью! </ P> <h3> 50 долларов за 50 </ h3> <p> Включает бесплатную доставку по всему миру </ p> <a class = "button" href = "https://www.paypal.com/ cgi-bin / webscr? cmd = _s-xclick & hosted_button_id = EN387WHNSSFMW "> Купить </a> </ div> </ div> </ div> <! - конец содержимого ->

Объединенная домашняя страница (/page-templates/front-page.php)

<? php / ** * Имя шаблона: Шаблон передней страницы * / 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> Плакат </ h2> <p> 30х20-дюймовый плакат, иллюстрирующий более 125 веганских продуктов питания в качестве альтернативы традиционной пищевой пирамиде. Этот плакат привлечет внимание людей и послужит предложением для идей о еде. </ P> <h3> 30 долларов США каждый </ h3> <p> Включает бесплатную доставку по всему миру </ p> <a class = "button" href = "https : //www.paypal.com/cgi-bin/webscr? cmd = _s-xclick & hosted_button_id = 2FKQT879CXYYG "> Купить </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 =" Всплеск открыток "/> </a> <div class =" description "> <h2> Открытки </ h2> <p> Красивые открытки 4 × 6, которые можно отправить по почте и поделиться с друзьями и семьи. Раздайте их на мероприятиях. Разместите их на стенах. Поделитесь веганской любовью! </ P> <h3> 50 долларов за 50 </ h3> <p> Включает бесплатную доставку по всему миру </ p> <a class = "button" href = "https://www.paypal.com/ cgi-bin / webscr? cmd = _s-xclick & hosted_button_id = EN387WHNSSFMW "> Купить </a> </ div> </ div> </ div> <! - end #content -> <? php get_footer (); ?>

объяснение

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

5. Стандартный шаблон страницы

С готовым верхним и нижним колонтитулами стандартные шаблоны обычно довольно просты. Ради краткости мы перейдем непосредственно к объединенным шаблонам.

Объединенный шаблон (page.php)

<? php / ** * Шаблон для отображения всех страниц. * / get_header (); ?> <div id = "content"> <? php while (have_posts ()): the_post (); ?> <? php get_template_part ('content', 'page'); ?> <? php endween; ?> </ div> <? php get_footer (); ?>

Шаблон контента (content-page.php)

<? php / ** * Шаблон, используемый для отображения содержимого страницы в page.php * /?> <article <? php post_class (); ? >> <? php the_content (); ?> </ article>

объяснение

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

  • Петля . Если вы новичок в WordPress или программировании в целом, этот фрагмент кода в контейнере #content может выглядеть пугающим. «Цикл» - это код, используемый WordPress для отображения содержимого сообщения. Вы можете узнать больше о цикле в Кодексе. А пока просто убедитесь, что он там есть, иначе контент, сохраненный в WordPress, не будет отображаться.
  • get_template_part . Наш шаблон страницы здесь использует удобный get_template_part функция, которая является отличным способом держать контент организованным, особенно в сложных проектах. Наш веб-сайт достаточно прост, чтобы этого не требовалось, но я оставил его только для того, чтобы показать вам.
  • post_class . Я также добавил ссылку на <статью> (с соответствующей post_class функция), чтобы сделать дальнейшую настройку дизайна проще.

5. Шаблон полной ширины (full-width.php)

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

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

Объединенный шаблон (templates / full-width.php)

<? php / ** * Имя шаблона: шаблон полной ширины * / get_header (); ?> <div id = "content" class = "full-width"> <? php while (have_posts ()): the_post (); ?> <? php get_template_part ('content', 'page'); ?> <? php endween; ?> </ div> <? php get_footer (); ?>

объяснение

С созданным шаблоном остается только назначить его странице. В интерфейсе «Редактировать страницу» найдите поле «Атрибуты страницы» (обычно прямо под полем «Публикация») и выберите «Шаблон полной ширины» в раскрывающемся меню «Шаблоны».

Теперь давайте рассмотрим некоторые «дополнительные возможности», которые иногда возникают как проблемы при миграции на WordPress.

  • Панировочные сухари Панировочные сухари относительно распространены на веб-сайтах. Самый простой способ воспроизвести их с помощью плагина. Мой любимый сейчас Панировочный сухарь NavXT (свободно). WordPress SEO также предлагает встроенные панировочные сухари.
  • Виджеты Если в проекте, который вы переносите, есть боковая панель, вы можете либо воспроизвести ее как есть (тема миграции имеет образец боковой панели на месте), либо интегрировать виджеты WordPress, чтобы обеспечить динамически управляемую боковую панель. Ребята из Automattic подготовили удобный руководство по темам виджетов , Начни там.
  • Ограниченный контент . Если какой-то контент должен быть ограничен, WordPress предлагает базовая защита паролем по умолчанию. Если вы хотите больше контроля, используйте плагин. Для базового управления ролями и разрешениями на содержание я рекомендую члены (свободно). Для более расширенного контроля (особенно, если речь идет об оплате), рассмотрим членство (которая имеет базовую и премиальную версии), s2Member (также бесплатно и премиум) и WP-пользователей (свободно).
  • Пользовательские типы сообщений . Некоторые миграции, особенно с большим количеством разных типов контента, требуют «пользовательских типов записей». Вы можете узнать о пользовательские типы сообщений в Кодексе , Чтобы настроить их, я рекомендую использовать плагин. Два хороших выбора Пользовательский интерфейс типа сообщения а также Типы (оба бесплатно).

Обзор веб-сайта

Теперь, когда мы завершили работу над темой, пришло время для обзора. Тщательно проработайте страницы на перенесенном веб-сайте. Для большого сайта сфокусируйтесь на разных шаблонах. Когда вы просматриваете, вот некоторые вещи, на которые стоит обратить внимание:

  1. Неработающие ссылки Убедитесь, что все ссылки работают так, как должны. Если у вас есть только несколько страниц, вы можете проверить вручную. Для автоматической проверки используйте целостность (бесплатно, для Mac) или Xenu's Link Sleuth (бесплатно, для Windows).
  2. Нарушение стилей Иногда, по той или иной причине, элемент дизайна вашего сайта может быть поврежден во время миграции. Тщательно сравните старый HTML с новым, чтобы убедиться, что вы не пропустили ни одного важного кода и что соответствующие правила таблицы стилей перенесены. Если ничего не помогает, можно быстро перестроить элемент дизайна на новом веб-сайте.
  3. Нарушенная функциональность Проверьте все функции, которые вы перенесли, такие как кнопки «Купить сейчас», контактные формы, подписка на рассылку новостей, контент «только для членов», встроенные карты, медиаплееры и т. Д.
  4. Временные ссылки В зависимости от того, как вы выполнили миграцию, временные ссылки на подпапку или тестовый домен могут появляться в вашем контенте или теме. Вы хотите обновить их, прежде чем начать жить. Использовать Поиск и замена Плагин (бесплатно) для проверки и обновления ссылок в вашем контенте.

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

Если ваша структура ссылок изменилась (и, как правило, даже немного), убедитесь, что посетители перенаправляются со старых страниц на новые. Для небольших объемов содержимого одним из самых простых способов настройки перенаправлений является добавление их в файл .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 файла не вариант или если вы имеете дело с большим количеством перенаправлений, посмотрите на Перенаправление (свободно).

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

В прямом эфире

Запуск с веб-сайта обычно включает в себя одну из двух задач:

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

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

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

Указывая на новый сервер

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

Кроме того, если вы планируете обновить серверы имен для своего домена, сначала разрешите все зависимости в текущих записях DNS (такие как размещенная электронная почта и сторонние службы). Я обычно живу с доменом, обновляя записи A, оставляя серверы имен на месте.

Заключение

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

Похожие

Создать пересылку
Файлы htaccess, известные с серверов Apache, не работают под nginx. В Timme Hosting вы все еще можете легко создавать и управлять своими перенаправлениями, используя специальную форму в ISPConfig. Перенаправление также называется перенаправлением, правилом перезаписи или перенаправлением. Войдите в ISPConfig и нажмите веб-страницы в главном меню.
Лучшие SEO плагины для WordPress
... на самом деле это лучшая платформа для этого типа услуг, потому что она может быть адаптирована с помощью ряда плагинов. На практике вы можете превратить свой блог или сайт в нечто большее. Но каковы лучшие плагины SEO? Вот небольшой список: WordPress SEO от Yoast Все в одном пакете SEO
Редизайн сайта, модернизация или модернизация сайта
Быстрые и эффективные услуги по редизайну, обновлению или доработке веб-сайтов! В современном мире недостаточно просто иметь веб-сайт; конкуренция жесткая, и эксперты сходятся во мнении, что производительность веб-сайта должна оцениваться постоянно, а дизайн и функциональность сайта должны регулярно обновляться, обновляться и улучшаться, чтобы не отставать от конкурентов. Мы предоставляем
Местная SEO работа
Международная Цифровая Медиа Компания Работа удаленно с гибкими часами Vortala была основана в 2004 году с целью предоставить медицинским работникам сервис веб-сайтов мирового уровня, предназначенный для развития их практики.
SEO оптимизация сайта
В настоящее время наиболее распространенный вопрос, который мы слышим от владельца сайта: как быть первым в поисковой системе, как быть первым в Google ? Как интернет-поисковики оказываются на позиции перед конкурентами? Наиболее уязвимая операция называется SEO оптимизация сайта . В большинстве случаев пользователи ищут дизайн сайта компании. Веб-сайт создается (как только дизайн согласован), и история останавливается, но история успешной
Excel: поиск цели
В этом уроке объясняется, как использовать поиск цели в Excel. Это включает объяснение этой особенности с несколькими практическими примерами. Что такое поиск цели? Goal Seek - это встроенная утилита Excel, которая решает уравнение и помогает вам ответить на вопрос «Каково будет входное значение для получения желаемого результата». Он просит нас ввести три параметра: Формула в клетке Целевое / желаемое значение Какую
Урок № 2. Продвижение сайта - как повысить видимость сайта
... найти вашу веб-страницу? Во-первых, используйте поисковые системы, другие сайты, социальные сети и почтовый маркетинг. Просто помните, что очень важно иметь четкую стратегию привлечения посетителей на ваш сайт, иметь конкретный план и последовательно выполнять все шаги. Есть несколько основных способов привлечь больше посетителей на ваш сайт с помощью электронного маркетинга. Первый - поисковые системы: Google, Bing, Yahoo и др. Когда пользователь Интернета
"Wix vs. WordPress" для SEO, блогов или электронной коммерции (6 факторов, 1 вердикт)
... HTML, CSS, атрибутами изображений, дизайном и структурой URL. Однако нас по-настоящему выигрывают варианты плагинов, позволяющие получить преимущество в SEO: Подобные инструменты действительно дают пользователям WordPress преимущество над владельцами веб-сайтов Wix. Не только SEO ресурсы для WordPress Обилие, но плагины и приложения приносят подход WYSIWYG к иным пугающим предметам. Wix
Легкий веб-дизайн Ирландия | Низкие цены на дизайн сайта
Главная GhoshWebdesign
Что такое карта сайта XML и что вы можете сделать с картой сайта XML?
Карта сайта XML - это файл со списком веб-страниц и, возможно, видео и изображений, которые есть на вашем сайте. Карта сайта XM рассказывает поисковым системам, таким как Google, о том, как устроен ваш сайт, и позволяет паукам более легко выполнять поиск на вашем сайте. Почему карта сайта XML? Существует 2 разных
Целевая страница и домашняя страница: в чем разница?
Примечание редактора: Этот пост был изначально написан в марте 2018 года и был обновлен для полноты и точности. Целевая страница против домашней страницы. Они одно и то же, верно? Просто разные названия для одной и той же вещи. Неправильно! Ну, технически вы можете попасть на домашнюю страницу, но это никоим образом не делает ее целевой страницей. И вы не должны ссылаться на них, как будто они взаимозаменяемы. Принципиальное

Комментарии

Когда вы ищете что-то в Интернете, как часто вы смотрите дальше, чем первые 4 или 5 списков, прежде чем найти то, что вы ищете, или сделать новый поиск?
Когда вы ищете что-то в Интернете, как часто вы смотрите дальше, чем первые 4 или 5 списков, прежде чем найти то, что вы ищете, или сделать новый поиск? Чем выше сайт в рейтинге Google, тем лучше он предоставляет информацию о поисковом термине. Для вас это будет названием вашего клуба. Смешайте его с лучшими в топе Google для вашего названия клуба, и в конечном итоге это приведет к увеличению трафика для вашего сайта. Советы для поднятия рейтинга поиска Хотя
Вопрос в том, что, хотя вы знаете, как использовать ключевые слова на своем сайте, знаете ли вы, как оптимизировать свой имидж SEO для WordPress?
Вопрос в том, что, хотя вы знаете, как использовать ключевые слова на своем сайте, знаете ли вы, как оптимизировать свой имидж SEO для WordPress? Здесь мы рассмотрим, как вы можете улучшить свой имидж SEO: Используя лучшие изображения Выбор правильного имени файла Масштабирование фотографий для SEO Использование технического изображения SEO Давайте начнем! Шаг 1: Использование лучших изображений
Вы оставляете этот сервер включенным или перемещаете сайт на сервер с новым доменом и оставляете его активным?
Вы оставляете этот сервер включенным или перемещаете сайт на сервер с новым доменом и оставляете его активным? Я видел это много раз, но лучший способ сделать это обычно на уровне DNS. Затем возникли другие проблемы, такие как перенаправление всех поддоменов, перенаправление всего на одну страницу или сохранение структуры папок? Теперь, если вы изменили структуру папок или URL-адреса, это приведет к большому количеству 404, которые необходимо будет идентифицировать и перенаправить. Вещи
У вас есть оригинальный и ценный контент на каждой странице, или вы копируете его или даже используете контент конкурента?
У вас есть оригинальный и ценный контент на каждой странице, или вы копируете его или даже используете контент конкурента? Доступность контента - контент сайта доступен, завершен и может просматриваться на сайте без его использования. JavaScript , фотографии и CSS ? URL - Являются ли URL-адреса сайта удобочитаемыми
Если вы ищете советы для начинающих по садоводству, сколько страниц вы собираетесь прокрутить, прежде чем нажимать на веб-сайт, прежде чем проверить его?
Если вы ищете советы для начинающих по садоводству, сколько страниц вы собираетесь прокрутить, прежде чем нажимать на веб-сайт, прежде чем проверить его? Подавляющее большинство людей никогда не переходят мимо первой страницы. Эта страница - главная недвижимость и где вы хотите быть. —–> Если вы еще не завели блог, но хотите, я покажу вам, как здесь можно выпить кофе Когда я начинал, я понятия
Что ж, если вы новичок, который хочет создать блог, вы обычно спрашиваете, выбираете blogspot или wordpress?
Что ж, если вы новичок, который хочет создать блог, вы обычно спрашиваете, выбираете blogspot или wordpress? WordPress Dot Com или WordPress самостоятельно хостинг? Если я сам предпочитаю использовать WordPress Selfhosting. Во-первых, потому что создание блога создает личный брендинг, а сам хостинг WordPress предлагает много преимуществ, которые действительно помогают новичку создать профессиональный блог. Как сделать легкий и увлекательный блог WordPress? Пожалуйста, посетите статью Как сделать
Пока вы можете отслеживать, каким образом пользователи заполняют вашу контактную форму, тогда вы готовы идти… Это то, что вы хотели, верно?
Пока вы можете отслеживать, каким образом пользователи заполняют вашу контактную форму, тогда вы готовы идти… Это то, что вы хотели, верно? Они выходят из вашего сайта, потому что вы их сделали. Если дело обстоит именно так, сделайте себе одолжение и начните отслеживать, сколько раз они нажимали на вашу кнопку «заполнить контактную форму», и сравнивайте эти данные с количеством форм, которые вы фактически получите в конце месяца. ,
О, я почти забыл сказать вам, знаете ли вы, что вы получаете Heat Map, если вы нажмете подкатегорию «Click Map» в разделе «Поведение»?
О, я почти забыл сказать вам, знаете ли вы, что вы получаете Heat Map, если вы нажмете подкатегорию «Click Map» в разделе «Поведение»? Как это работает? Легко, просто выберите страницу из выпадающего меню, и вы получите результаты; показывая вам, где нажимают ваши посетители, давайте посмотрим. Удивительный, не так ли? Вы
Представьте, что вы управляете компанией и предлагаете какие-то продукты или услуги, не хотите ли вы ориентироваться на миллионы людей, которые ищут продукт или услуги, которые вы предлагаете?
Представьте, что вы управляете компанией и предлагаете какие-то продукты или услуги, не хотите ли вы ориентироваться на миллионы людей, которые ищут продукт или услуги, которые вы предлагаете? Вы позволите им перейти к вашим конкурентам - вероятно, нет !!! Вам нужен клиент ... так что зайдите на первую страницу Google Yahoo и Bing, найдите этих потенциальных клиентов и улучшите свой бизнес. Так вы думаете, как сделать поисковую оптимизацию? ... Это то, что мы обучаем вас. Так
Вопрос, который вы можете задать SEO-компании, которую вы оцениваете: «Гарантируете ли вы, что мой сайт может попасть на первую страницу?
Вопрос, который вы можете задать SEO-компании, которую вы оцениваете: «Гарантируете ли вы, что мой сайт может попасть на первую страницу?». Также прочитайте: Все больше и больше экспертов и экспертов по SEO в Индонезии? ЗАКРЫТИЕ Может быть, четыре шага выше кажутся хлопотными, но это важно для долгосрочной устойчивости вашего бизнес-сайта в Google. На мой взгляд, вам нужно оценить
Когда вы в последний раз отправляли Yoast записку, чтобы сказать им, насколько вы цените все замечательные вещи, которые их плагин сделал для вашего сайта?
Когда вы в последний раз отправляли Yoast записку, чтобы сказать им, насколько вы цените все замечательные вещи, которые их плагин сделал для вашего сайта? (До этого релиза) Вы потратили минуту, чтобы дать им рейтинг на WordPress.org ? Вы пометили версии как / совместимые, чтобы другие пользователи WordPress знали, когда это безопасно для установки? Общие правила для всех плагинов Давайте использовать

Но как насчет сайтов, созданных с устаревшей CMS или вообще без CMS?
Означает ли переход на WordPress начинать заново и терять все время, энергию и деньги, вложенные в текущий сайт?
Но как насчет сайтов, созданных с устаревшей CMS или вообще без CMS?
Означает ли переход на WordPress начинать заново и терять все время, энергию и деньги, вложенные в текущий сайт?
Достаточно ли низок объем, чтобы его можно было импортировать вручную, или вам нужен инструмент?
Если вам нужен инструмент, он уже существует?
Можно ли разделить контент на стандартные «посты» и «страницы», или он требует пользовательских типов постов?
Нужно ли хранить дополнительный контент для определенных страниц (пользовательских полей, таксономий и т. Д.)?
Изменится ли структура URL?
Если да, нужно ли перенаправлять старые URL?