How to Convert HTML to WordPress
So, you’ve been looking at recent statistics, saying that WordPress currently powers 33% of websites on the internet. As a website owner, you might consider converting your static HTML site to WordPress.
While it’s still okay to have an HTML-based website as HTML5 is quite powerful, especially for a showcase site. But for everything else, WordPress provides more comfortable solutions. WordPress offers plenty of themes, plugins, and widgets to improve the website and add useful features.
It’s also easy to manage. You can add and remove content without coding. With an HTML site, it’s a different story. Unless you know how to code, updating content with HTML can be difficult.
In this article, you will learn how to convert static HTML to WordPress, and different methods to do it. Let’s get started.
Things to Look Out for When Moving
Before moving out, you need to consider a few things.
- Hosting service. You need to have a hosting plan before starting, as the requirements can be different from an HTML site. You’ll need hosting for your WordPress site. Alternatively, you can host your website locally, and make it live at a later point.
- Code editor. You’ll need a code editor such as Notepad++, Atom, Sublime, etc., to tweak your website HTML code.
- Time and money. You need to consider the time and money you are willing to invest. If you’re ready and committed to learning, this tutorial is perfect for you. Alternatively, you can also hire developers or use WordPress migration apps to help convert. Hiring someone is much easier, but you’ll lose the opportunity to learn, and the process might be expensive.
The Different Ways To Convert HTML To WordPress
There are several methods of converting HTML to WordPress, and they come with different difficulty levels. They are as follow:
- Creating a WordPress Theme from a static HTML site. If you prefer your old HTML website’s design intact, this option is for you. It’s also the most challenging route and requires coding. But, don’t get intimidated. All you need to do is copy/paste the old HTML code into several PHP files.
- Losing the design and keeping the content only. If you’re okay with leaving behind your old website design and find a WordPress theme for a fresh start, this option is for you. You only need to transfer the content to its new home.
- Using a child theme adapted from an existing theme. This is probably the easiest route if you want to retain the old website’s design. With this method, you’ll use a pre-existing WordPress theme and build upon it. As a bonus, you can use WordPress’ powerful features right away.
Creating a WordPress Theme From a Static HTML Site
If your goal is to create a WordPress website that resembles your old HTML site from scratch, you can start here. In this tutorial, we use a static HTML template by Rachel McCollin.
1. Create A Theme Folder And Basic Files
Create a new theme folder on your desktop and name it. We’re naming our folder as my-theme. After that, open your code editor and create the following files:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Leave the editor open. We’re going to come back to it later.
2. Change Old Website CSS to WordPress Style Sheet
Now, we’re going to create a WordPress style sheet by copying your old CSS code into it. Go to style.css file, and paste this code:
This code provides information to WordPress that it’s a theme stylesheet header. You can edit the details like the theme name, author and URL, description, etc.
Right after the header, copy and paste your old CSS code into the file. Save and close it.
3. Split Up Your Old Website HTML
WordPress uses PHP to pull information from its database. So, you need to split up your old website’s HTML into different pieces to make sure it can put them together correctly.
If this seems complicated, don’t worry too much, the process is quite straightforward. First, let’s see how our static website and its code looks.
Now, open your old static website index.html file, we’re going to split that into the newly created WordPress files. (The examples below are our markup).
header.php
Everything from the beginning of your old HTML code up to the main content area goes into this file. The main content area usually expressed with <main> or <div >
Additionally, right before the </head> element, copy and paste this code <?php wp_head();?>. This ensures WordPress plugins work properly. When you finish, save the file.
sidebar.php
Everything belonging to the section <aside … </aside> in your old HTML code, goes into this file. When you finish, save the file.
footer.php
Now, everything up to the end of the file should be the footer information, which goes into this file.
Just before the closing bracket </body>, add this code <?php wp_footer();?> for the same reason as in header.php. When you finish, save it.
Now you’re done with the old index.html file. You can close it along with other files in your theme folder except for header.php and index.php. They still have some work to do.
4. Change the Style to WordPress Format
In the header, all you need to do is change the style sheet from HTML to WordPress format. Look for an existing link in the <head> section. In my case, it’s something like this:
Replace it with this line:
Now, you can save and close the header.php file.
Let’s turn to the index.php file. It should be blank at the moment, so copy and paste these lines of code:
This code will call for the rest of your WordPress files. You should notice the space between the header and the sidebar. It’s where you’ll add The Loop.
The Loop will process each post for display, and format it according to how the content matches the criteria within The Loop tags. It’s an important aspect to add dynamic content to your WordPress site.
To do so, paste the following code right after <?php get_header(); ?>:
After you finish, save your index.php file and close it. You successfully created a WordPress theme. Now, you can add it to your WordPress site.
5. Upload Your Theme to WordPress
After you finish creating the basic theme, you can upload it to WordPress. All files inside your theme folder must be in the same place. To do that, you can zip them.
Go to your WordPress Admin Dashboard. Head over to Appearances -> Themes. Click Add New -> Upload Themes.
In the menu, locate your theme’s zip file, upload, and click Install Now. After that, don’t forget to activate the theme.
Now your front end should look like the old site. You should be aware that while the basic design looks the same, there are more things you should do to make the integration better.
For example, you can’t use WordPress features like the widget area. You also need to adjust CSS markup to make it a part of WordPress’ original design.
Forgoing Design And Keeping Only The Content
If you’re okay with leaving behind the old HTML website design and want to use a new theme instead, this is your option. This method will also make importing content much easier.
All you have to do is to install the theme you prefer and activate it, then follow the steps below.
Important! Always backup your WordPress site before making any change.
1. Install the Import Plugin 2
You need to install the Import Plugin 2. Go to Plugins -> Add New and search it by name. You’ll find it a little bit further down as it’s quite an old plugin but still does a great job. Click install and activate it.
2. Preparing the Import
Now, go to WordPress Settings -> HTML Import. You can import several pages at once or one at a time.
You’ll notice that the plugin points to a specific path like html-files-to-import. It means that you need to upload the HTML file to the same server as your WordPress installation. In case you need more details, you can refer to the official user guide.
In this tutorial, we’re going to import the content. To do that, choose the HTML tag at the top and select its configuration in the following three fields.
Once you’re done, click save settings.
3. Start Importing Your Content
The Import Files button will be available once you save the settings. If you missed it, you can also access it from Tools -> Import and click Run Importer under the HTML options.
Choose if you want to import a directory of files or a single file, then click Submit. Once done, all of your existing content will be available on your new WordPress site.
Using a Child Theme Adapted From an Existing Theme
If you want to retain some of your old website’s design but feel the first method is a bit overwhelming, then using a child theme can be a simple alternative.
Child themes allow you to take advantage of thousands of existing themes (which are called parent themes) on WordPress and build your new site on top of them.
You can also make changes to the appearance of your site without disturbing the parent theme’s core. You won’t lose any modifications made when updating your theme.
We’ve written a more advanced article on how to create a WordPress child theme. In this tutorial, we’ll use Childify Me to simplify the process for beginners.
Important! Always backup your WordPress site before making any change.
1. Pick a Suitable Theme
You need to find a suitable theme as a base for you to build on. It will be great if you can find a theme that’s close to your old website design, so you don’t have to change too many things later.
Browse the WordPress theme directory to find a suitable candidate. In this tutorial, we’ll use the Twenty Seventeen theme as our starting point.
2. Install Childify Me
Go to Plugins -> Add New and search it by name. Install and activate it.
Pro Tip
The Childify Me plugin creates style.css and function.php files. If you want to add custom functions in a functions.php file, new folders/files, you can upload them by using an FTP client. If you use Hostinger, our File Manager will help manage your files right from the control panel.
3. Customize the Parent Theme
Now go to Appearance -> Themes. Make sure that the parent theme is activated. Click Customize, and navigate to the customization panel of your active theme.
4. Childify the Parent Theme
Click the Childify Me button, and give your child theme a name. We suggest you name it similar to the parent theme. Click create. Once you’re done, click activate and preview.
5. Start Importing Your Content
Now that your new WordPress site looks like the old static HTML version, all that’s left is to import the content. Here, you can use the previous method.
You’ve successfully moved your static HTML website to WordPress. Congratulations!
Find out other ways to migrate to WordPress
Conclusion
We’ve covered what needs to be done before converting a static HTML site to WordPress and the different methods of completing the process.
A quick recap – you can create a WordPress theme from scratch. It’s a difficult method but a great option if you know how to code and have some spare time to invest.
Alternatively, you can also use plugins to make the conversion a lot easier, and import all of your content to its new home.
We hope that this article helps ease the process. See you in the next one!
Luqman is a self-proclaimed social scientist. He is passionate about education, technology, and everything in between. He wants to help create a high-quality education system. Having spent the past four years as a social researcher and blog guru, he lends his skills to Hostinger’s digital content team. As for free time, he enjoys reading scientific (and not-so-scientific) literature with a cup of black arabica coffee as a companion.
Как натянуть html шаблон на wordpress
На многих различных хостах есть свои пользовательские инструменты для создания веб-сайтов С их помощью пользователи без опыта кодирования вебсайтов с нуля могут создать собственный сайт.
Тем не менее пользователи отмечают, что эти конструкторы веб-сайтов с поддержкой перетаскивания имеют некоторые недостатки. Поскольку это универсальные предложения, им не хватает функциональных возможностей и персонализированности многих современных сайтов. Кроме того, из-за отсутствия чётких и точных линий, которые иногда создаются при перетаскивании, страница может выглядеть менее профессиональной, а такие сайты не всегда правильно переносятся на мобильные устройства, например телефоны или планшеты.
Переход на WordPress.com может решить эти проблемы, а также повысить уровень профессионализма вашего сайта.
Поскольку многие из конструкторов сайтов с поддержкой перетаскивания и опции только для HTML не предлагают опцию экспорта, вы можете вручную скопировать и вставить содержимое своего сайта, чтобы выполнить перемещение из конструктора на WordPress.com. Это требует времени и усилий, но результат стоит того.
В этом руководстве
Сохранение содержимого
Самым быстрым способом сохранения содержимого в конструкторе сайтов с поддержкой HTML или перетаскивания является сохранение каждой отдельной страницы на своём компьютере.
Для каждой страницы, которую нужно реплицировать, перейдите в раздел Файл > Сохранить страницу как > Веб-страница, завершить
Опция «Сохранить страницу как…» в меню «Файл»
Копии все ваших фотографий и записей будут сохранены на дубликате страницы на вашем компьютере. Кроме того, будут созданы несколько подпапок, где будут находиться ваши файлы:
Сохранение изображений
Если вы используете описанный выше метод для сохранения страниц, изображения будут сохранены, но иногда они будут обрезаны или их размер будет изменён до того, в котором они отображены на веб-сайте. Самым лучшим способом добавить полноразмерные изображения на ваш новый веб-сайт WordPress.com является загрузка оригинальных файлов изображений непосредственно с компьютера.
Создание нового сайта
Если вы ещё не создали свой сайт на WordPress.com, вы можете сделать это, перейдя по ссылке.
Здесь вы получите инструкции по запуску своего сайта. Вы выберете стиль, тему, бесплатный домен и тарифный план. Вы можете изменить свою тему и тарифный план в любое время, поэтому не переживайте о том, что выбрать!
Создание страниц и добавление содержимого
Начните с добавления изображений сайта в Библиотеку файлов. Для этого откройте на своём компьютере папку, где сохранена информация об этой странице и загрузите для неё изображения в формате JPG, GIF или PNG. В этой папке вы найдёте много других файлов, но вам нужно найти и загрузить только изображения. Другие файлы не будут перенесены на WordPress.com.
- Откройте в браузере (например, в Chrome или Firefox) копию скачанного сайта или действующую версию старого веб-сайта и загрузите страницу, которую хотите воссоздать на сайте WordPress.com. на своём сайте WordPress.com. Чтобы создать первую страницу, на консоли перейдите в раздел Страницы → Добавить.
- Скопируйте основной текст старой страницы и вставьте его на свою новую страницу WordPress.com.
Не нужно копировать и вставлять меню навигации своего сайта. Создание меню сайта WordPress.com и управление им осуществляются в другом расположении. Чтобы узнать больше, см. Меню.
Вот пример того, что вам нужно скопировать на своём старом веб-сайте.
Выше представлен пример страницы, созданной в конструкторе страниц вне WordPress.com. Если вы попытаетесь скопировать страницу полностью, она может создать очень занимательный HTML, вид которого может вам не понравиться. Поэтому лучше скопируйте только основной текст отдельной страницы (помните, что вы можете отредактировать общий вид и оформление веб-сайта позже), а затем вставьте изображения для этой страницы и выровняйте их в соответствии с текстом.
Вот пример экрана редактора WordPress.com, демонстрирующий, что нужно скопировать со страницы выше и куда это следует вставить:
Сосредоточьтесь только на добавлении текста и изображений. Если вы обладаете некоторыми навыками кодирования HTML, скопируйте и вставьте немного кодов HTML, но только не все коды, поддерживаемые на сайтах WordPress.com. Щёлкните здесь, чтобы ознакомиться со списком поддерживаемых кодов HTML.
Обратите внимание, что стилизация кода CSS доступна только в плане Premium и выше и находится в отдельном разделе.
Повторите этапы 1, 2 и 3 для всех страниц. Поскольку предварительная настройка может избавить вас от лишних хлопот во время выбора дизайна общего внешнего вида и оформления вашего сайта, мы рекомендуем сначала создать все страницы.
После того как вы создадите все страницы, переместите все тексты и изображения, можете переходить к этапу 4!
Создание меню навигации
Следующим шагом будет создание меню для вашего сайта! Так пользователи смогут находить большинство страниц на вашем сайте.
Меню сайта с поддержкой перетаскивания.
Одним из преимуществ перемещения WordPress.com является возможность быстро настраивать общий вид и делать оформление всего сайта, а не отдельных страниц (как в некоторых конструкторах). Меню можно редактировать в разделе Внешний вид → Меню или Внешний вид → Редактор, в зависимости от выбранной темы.
После создания страница не обязательно должна появиться в главном меню вашего сайта. Вы сами можете выбрать, какие страницы будут отображаться, и создать безупречный внешний вид своего сайта.
Настройка темы
Пришло время установки темы! Тема фактически является общим дизайном и оформлением вашего сайта. У нас есть сотни бесплатных и премиум-тем. Какие-то из них могут напоминать ваш сайт, а некоторые могут выглядеть совершенно по-новому. Независимо от того, хотите вы реплицировать общий вид и оформление своего прошлого сайта или имеете желание попробовать что-то новое, можете быть уверены, что ваш сайт будет иметь безупречный и профессиональный вид.
Если вам нравится текущая тема, перейдите в раздел Внешний вид → Настроить, чтобы изменить её по своему вкусу. Если вы хотите выбрать новую тему или попробовать другие, перейдите по этой ссылке, чтобы ознакомиться со всеми вариантами тем WordPress.com. Все темы отличаются друг от друга и имеют разные возможности. Не существует правильного или неправильного выбора — просто ищите то, что вам нравится!
Последние шаги
На WordPress.com есть множество дополнительных функций, которые вы можете добавить на свой сайт: от подключения к социальным сетям до видео и монетизации сайта, а также многого другого!
Вы купили домен у своего поставщика услуг хостинга с поддержкой перетаскивания или HTML, который хотите использовать с новым веб-сайтом? Ознакомьтесь с руководством по использованию домена для сайта WordPress.com.
Если у вас возникнут затруднения, посетите наш сайт по поддержке, чтобы получить необходимые инструкции, и не бойтесь попросить помощи у нас!
Как перенести HTML сайт на WordPress
Условно процесс переноса любого сайта с одного движка на другой, в том числе преобразование статичного HTML-сайта в динамический сайт на WordPress, можно разделить на две основные составляющие: создание нового или переделка существующего шаблона и перенос данных (текстов, картинок и другого содержимого).
Единого подхода к переносу нет, всё очень индивидуально. Одно дело, когда можно создать аналогичный сайт, без переноса всех деталей, структур адресов, наполнения и т.д. Главное, чтобы сайт работал, индексировался и там были ваши контакты. А другое дело, когда у вас сайт с сотнями или даже тысячами страниц, созданный в каком-нибудь онлайн-конструкторе (таком как Wix, uKit или аналоги), из которого не получится просто взять и «переехать» в один клик. Каждую страницу придётся переносить вручную или писать специальный парсер под вашу структуру, а позже всё равно корректировать всё вручную.
А если у вас сложная структура адресов и нужно сохранить все URL, чтобы не потерять позиции в поисковой выдаче? Что, если замена на аналогичную или похожую тему не подойдёт? Или старый сайт не адаптивный, а нужно переделать в адаптивный? Возможна масса различных нюансов.
Перенос с HTML на WordPress пошагово:
- Создание резервных копий старого сайта
- Анализ структуры страниц, меню и блоков контента
- Выбор оптимального способа переноса
- Приобретение хостинга и его настройка
- Подбор похожей темы/шаблона
- Покупка/установка нового шаблона (без привязки к старому дизайну)
- Натяжка дизайна на WordPress (переделка HTML в шаблон WordPress)
- Создание оригинального шаблона/дизайна с нуля
- Ручное копирование информации и медиаконтента
- Парсинг старого сайта и преобразование ключевой информации в табличный формат
- Автоматическое наполнение базы данных нового сайта из базы парсинга
- Скрипты и сервисы для переноса
- Автоматический подбор подходящего шаблона
- Перенаправление домена на новый хостинг
- Проверка сохранения путей/структуры старых URL
- Настройка редиректов при необходимости
- Сверка важных метатегов (тайтлы, дескрипшны)
- Проверка отображения страниц и медиафайлов
- Проверка форм, контактной информации
- Установка кодов аналитики
- Мониторинг ситуации в панели вебмастера
- Какие данные нужно переносить, а какие нет. Может быть, отдельные страницы были мусорными, из-за них наложены санкции со стороны поисковых систем, они исключены из выдачи как бесполезные и т.д.
- Проверьте структуру имеющихся меню, адресов страниц, категорий (если они имеются). Нуждаются ли они в доработке или оптимизации?
- Вычлените самые важные страницы и иные элементы сайта, обязательно необходимые для эффективной работы. Например, это могут быть страницы с контактными данными, формы обратной связи, онлайн-чаты и т.п.
- Пропарсите старый сайт и просмотрите, заполнены или нет ключевые мета-теги, насколько эффективно это сделано.
- дополнять полезным контентом;
- описывать все ваши услуги (основные и дополнительные), чтобы у каждой из них была своя страница;
- подбирать новые низкоконкурентные ключевые запросы и создавать под них новые полезные материалы;
- и т.д.
- Какие шрифты и какого размера используются для:
- главной страницы;
- заголовков (H1-H5 или даже H6, в зависимости от уровня вложенности ваших заголовков);
- основного текста.
- фон (цвет, изображение, видео и т.п.);
- заливка меню, фона текста в статьях;
- цвет текста (основной, заголовков, ссылок посещённых/непосещённых и т.д.).
Для этого можно воспользоваться консолью разработчика вашего браузера. А ещё лучше – изучить непосредственно таблицы CSS-стилей, если они вынесены отдельными файлами (а не прописаны в свойствах каждого HTML-элемента на страницах).
Некоторые CSS-свойства могут меняться с помощью JS-скриптов уже после загрузки страниц в браузере, поэтому не лишним будет убедиться, что все работает так, как должно.
Новый шаблон
Здесь всё просто – выбираете любой понравившийся вам вариант. Огромное количество бесплатных тем есть в официальном каталоге WordPress. Качественные премиум-шаблоны можно поискать на профильных площадках, таких как ThemeForest или TemplateMonster. Что не менее важно – в состав таких тем могут входить специальные дополнения, которые по-отдельности распространяются платно. Так что покупка становится ещё выгоднее.
Если в шаблоне отсутствует перевод на русский язык, его можно перевести самостоятельно – с помощью программы Poedit или специальных плагинов для WordPress (прямо внутри движка). Не стоит переводить сразу все строки, достаточно перевести только те позиции, которые относятся к интерфейсу пользователя (видны на сайте, а не в админ-панели).
Натяжка дизайна на WordPress (переделка HTML в шаблон WordPress)
Наиболее сложный и тяжёлый процесс, который не получится освоить без понимания основ HTML, CSS, JS, PHP и знания API WordPress. Да, движок хорошо документирован, но документация преимущественно на английском языке.
Если шаблоны страниц простые по виду, вам достаточно будет поделить дизайн на основные зоны: шапка, вывод основного контента (запись блога или страница), боковая панель, футер. И организовать вывод ключевых циклов WordPress:
- меню;
- цикл записей;
- сайдбар;
- иные области расположения виджетов (например, чтобы можно было править содержимое футера или шапки).
Чтобы не путаться с важными настройками темы и типовой структурой шаблонов WordPress, логично скачать своего рода «скелет» (или каркас). Сделать это можно на специальном сайте для разработчиков – underscores.me (вводите желаемое название своей новой темы и нажимаете кнопку Generate, при желании в расширенных опциях можно задать название папки с шаблоном, его описание и другие параметры).
Для сокращения объёма работ по верстке можно в файле functions.php отключить все ненужные функции (удалить или закоментировать строки // в начале):
- поддержка перевода (строка load_theme_textdomain( ‘teme123’, get_template_directory() . ‘/languages’ );)
- RSS-линки (строка add_theme_support( ‘automatic-feed-links’ );)
- кастомный фон, лого, настраиваемая ширина контента;
- и другие опции, которые не будут использоваться на вашем сайте.
Затем нужно перенести все ваши стили и JS-скрипты из HTML в WP-шаблон. Для этого нужно либо скопировать файлы в корень шаблона и подключить их в файле functions, либо скопировать содержимое старых CSS-файлов из папки HTML-сайта в файл style.css. JS-скрипты по умолчанию лежат в каталоге JS папки с темой.
По аналогии можно подключить свои шрифты (если вы не используете web-шрифты от Google).
Теперь остаётся только перенести саму HTML-разметку. Но тут всё гораздо сложнее. В шаблонах WordPress зоны контента делятся на специальные блоки, каждый блок выводится своим PHP-файлом:
- 404.php (для шаблона 404 ошибки);
- archive.php (шаблон архивных записей);
- comments.php (зона вывода дерева комментариев, если они будут на сайте);
- footer.php (только подвал сайта);
- header.php (шапка с меню);
- index.php (главная страница и логика формирования основных циклов);
- page.php (шаблон вывода страницы);
- single.php (шаблон страницы отдельной записи из блога);
- sidebar.php (шаблон боковой панели);
- search.php (страница с результатами поиска).
Перенос HTML-кода в них нужно делать вдумчиво. Где-то нужно добавить лишь недостающие классы (например, в меню), а где-то – скопировать целые HTML-блоки, соответствующие данному типу контента, при необходимости добавив нужные функции вызова.
Например, замена меню.
Стало в header.php:
Основная функция для вывода меню – wp_nav_menu( $args), из аргументов нужно поправить только ID меню (здесь это ‘theme_location’ => ‘menu-1’).
Не забудьте создать само меню в соответствующих настройках сайта.
В WordPress можно выводить отдельные шаблоны для разных типов страниц. Сделать это можно, просто поместив файл page-vashe-nazvanie-shablona.php в корень темы с содержимым:
Теперь в админ-панели можно создать новую страницу с выбранным шаблоном и наполнить её своим HTML-кодом со страницы старого сайта (если не хотите выносить отдельные блоки и делить контент на различные сегменты). Так как HTML-код будет вставлен с указанием стилей, которые вы уже подключили к шаблону в файле functions.php, то отдельно ничего стилизовать не нужно.
Если вывод шапки и/или подвала не нужен, их можно исключить для конкретного шаблона, но стоит понимать, что в шапке выводится не только меню, там же подключаются скрипты/стили, выводятся мета-теги и т.д.
В более сложном переносе логично выделить сегменты для боковой панели, для футера и т.д., но этим контентом нужно будет управлять в разных разделах админ-панели.
Создание оригинального шаблона/дизайна с нуля
Тут вам помогут только профессионалы. Даже если вы самостоятельно сможете натянуть HTML-шаблон на движок, нужно сначала создать качественный макет дизайна и нарезать его на HTML-теги. С этим вам помогут дизайнеры и верстальщики.
Перенос данных
Это наиболее сложный и трудоёмкий процесс.
Если вы использовали подход с шаблонами, который мы указали, то перенести данные можно простым копированием HTML-кода в тело страниц (исключив зону шапки и подвала, их логично делать сквозными для всего сайта).
Но ручной перенос не всегда удобен, особенно, если у вас сотни или даже тысячи страниц на старом сайте, встроенные формы в тексте и т.д.
Ручное копирование информации и медиаконтента
Изображения со страниц желательно вынести в каталог «/wp-content/uploads/». Но стоит помнить, что загруженные вручную картинки не будут отображаться в админ-панели (движок не будет ничего знать о медиаконтенте, если он загружен в обход стандартных форм).
Все пути (ссылки), указывающие на изображения, и другой медиаконтент нужно будет поправить, чтобы они соответствовали новому (актуальному) расположению.
Когда будете переносить наполнение отдельных страниц, обязательно заполняйте мета-теги (тайтл и дескрипшн), без них качество индексации значительно ухудшится.
После публикации проверяйте страницу на наличие ошибок и проблем с вёрсткой.
Автоматическое наполнение базы данных нового сайта из базы парсинга
Средств автоматизации по переносу из HTML в WordPress не так уж много. Обычно разрабатываются уникальные скрипты, которые будут учитывать структуру HTML-сайта, ведь на каждом отдельном сайте она может кардинально отличаться.
Если старая версия сайта работает на одним из онлайн-конструкторов, можно попробовать быстро мигрировать с помощью RSS-канала. Нужно скачать RSS-ленту старого сайта и загрузить её в WordPress-сайт с помощью специального плагина импорта.
Существует специальный онлайн-сервис миграции между разными CMS системами – CMS2CMS. Но он платный. Для направления миграции нужно выбрать формат «HTML» в «WordPress». Перенос 250 материалов обойдётся в 49 USD. Для того, чтобы убедиться в качестве переноса данных, предварительно воспользуйтесь демонстрационным режимом (это бесплатно и поможет вам понять, справится ли скрипт конкретно с вашим сайтом или нет).
Заключительная часть и рекомендации
Ни в коем случае при переносе не должна пострадать юзабилити сайта. Если посетители не смогут пользоваться новой версией ресурса, то перенос даже не стоит затевать.
После того, как данные перенесены на боевой сервер (расположены на хостинге), нужно перенаправить домен и подождать обновления DNS-системы (в некоторых случаях этот процесс может занимать 1-3 дня).
Ни в коем случае не удаляйте сразу старый сайт, сначала убедитесь в работоспособности нового. Проверьте сайт под нагрузкой, просмотрите все страницы, проверьте работу форм и других интерактивных элементов. Просканируйте (спарсите) уже новый сайт и проверьте на наличие проблем:
- везде ли указаны мета-теги;
- нет ли недоступного контента или несуществующих/пустых страниц;
- нет ли ошибок в URL-адресах;
- правильно ли настроены редиректы (если они делались);
- и т.д.
Одновременно отслеживайте сообщения в панелях вебмастера Google и/или Яндекс. Все обнаруженные ошибки нужно проанализировать и по возможности оперативно исправить.
На самом деле, процесс переноса сайта из HTML на динамический движок, особенно на WordPress, достаточно прост и понятен. Новичкам, конечно, придётся подтянуть отдельные знания, но в целом всё это поправимо и реализуемо. Главное – не бояться и строго следовать указанному выше плану. Тогда вы сохраните не только свои данные, но и позиции сайта в поиске.
Как перенести HTML сайт на WordPress
Использование CMS значительно повышает эффективность работы администратора сайта. Особенно в условиях необходимости его масштабирования. Также расширяются возможности по SEO-оптимизации и доработке функциональности. Перенос работающего HTML-сайта на WordPress – распространённая задача, она решается алгоритмами, отточенными многолетним опытом тысяч разработчиков.
Мы покажем шаги, необходимые для успешной миграции HTML-сайта на CMS WordPress. Все их можно выполнить самостоятельно.
Подготовка, общая информация
Суть задачи по переносу сводится к конвертации статических HTML-страниц в формат, подходящий для WordPress, также использующий, помимо HTML/CSS, и PHP-код. То есть один в один перенести код без оптимизации под CMS не получится, он не будет работать.
Далее появляется развилка. Если для вас важно сохранение текущего дизайна сайта (есть хороший трафик, оформление привычно и узнаваемо среди аудитории), то придётся немного повозиться с подгонкой текущего дизайна под формат WP без изменений. Для этого можно использовать плагины (о них дальше).
Также вы можете вручную собрать аналогичный шаблон для WordPress, но этот вариант для новичков неприемлем – он требует навыков опытного разработчика, скорее всего, придётся заказывать эту работу у специалиста. Придётся дополнительно вложиться, зато получите качественный результат.
Если же вы можете позволить себе изменить дизайн без особого ущерба для дела, то можно просто взять более-менее похожий (или совершенно не похожий) шаблон для WP, скопировать материалы (вручную или плагинами), добавить соответствующие формы, коммуникации и прочее из того, что было на оригинальном сайте, и получить сайт с прежним контентом, прошедший редизайн. Это более простой в реализации вариант.
Изначально нужно проанализировать, что из функциональности задействовано на HTML-сайте и подыскать соответствующие плагины либо встроенные инструменты, которые смогут их воспроизвести на WP. Сразу отметим, что это будет несложно, у CMS куча возможностей – там всё есть. Составьте чеклист из необходимого, и вы без труда это найдёте – лишь бы ничего не упустили. И не забудьте сделать бэкап текущей версии HTML-сайта.
Шаг 1 – выбираем хостинг, устанавливаем WordPress и создаём базу данных
Выбор хостинга – важнейший момент. От его качества зависит то, как ваш сайт будет работать – быстро ли, стабильно ли, удобно ли администрировать и вносить тонкие настройки. С 2005 года официально рекомендованным хостингом WordPress.org является Bluehost – крупнейший зарубежный провайдер услуг, обслуживающий более 2 миллионов доменов.
Читайте также
По всему миру разбросано 118 дата-центров, штаб-квартира расположена в американском штате Юта. Серверы для управления всей этой империей там занимают около 5 000 квадратных метров. Всё работает на SSD-дисках, пространства выделяют много, даже на минимальном тарифе для сайтов WordPress ($2.63/мес) его 50 Гб.
Провайдер славится надёжностью, абузоустойчивостью – ваш сайт никогда не закроют просто так лишь потому, что кто-то из конкурентов подал липовую или даже обоснованную чем- то жалобу. Серверы хостинга работают в облаке, используется технология CDN, так что их расположение не влияет на скорость работы сайтов в рунете – она стабильно высокая. Зарубежное происхождение в случае с Bluehost выступает в чистом виде плюсом, опасаться этого фактора нет оснований.
Вам потребуется новая база данных для работы с материалами сайта. Зайдите в раздел «Базы данных», далее в поле «Создать новую базу данных», потом впишите имя пользователя, название БД и пароль доступа к ней. Далее из раздела «Softaculous App Installer» выберите WP и запустите автоматическую установку. В процессе необходимо будет указать используемую (только что созданную) базу данных. Теперь у вас есть хостинг с установленным WP и готовой к работе БД.
Bluehost предоставляет круглосуточную техподдержку, дарит домен на первый год (если потребуется его регистрация), бесплатный SSL, а также обеспечивает 100% манибек в течении 30 дней. Для оптимизированного WP-хостинга вы также получите автоматические установку и обновление до новых версий, доступ к Microsoft Office 365, доменную почту, сотни бесплатных шаблонов, а также удобную и мощную панель управления.
Шаг 2 – работа с дизайном
В зависимости от выбранного пути – подбора похожей темы, использования плагина для переноса существующей либо её ручной адаптации к использованию в связке с WP, открывается 3 различных алгоритма действий. Опишем их в общих чертах.
Выбор нового шаблона
В панели управления в разделе «Дизайн» находится магазин шаблонов. Выберите подходящий и установите его в 1 клик и сделайте активным. Далее в настройках шаблона вы сможете подогнать его дизайн под свои требования (логотип, колонки, цвета, фоны и прочее). Это самый простой способ – создать с нуля сайт на WP с новым шаблоном, а потом подогнать его функциональность и перенести контент.
Конвертация HTML-шаблона
Тут вам помогут сторонние веб-сервисы вроде Theme Matсher, способные обработать и сгенерировать подходящий для WP дизайн на основе HTML-темы. Просто введите название текущего домена, и сервис преобразует файлы темы в формат для WP. Потом вы их просто скачаете и установите через панель управления как новый шаблон. Обычно результат получается хорошим, но могут потребоваться доработки. Это оптимальный вариант для тех, кто желает сохранить дизайн (по крайней мере, основные его элементы), но не владеет продвинутыми навыками кодинга.
Ручная адаптация шаблона под WP
Темы для WordPress состоят из нескольких файлов – style.css, index.php, header.php, sidebar.php и footer.php. Нужно создать пустые заготовки под них, а потом ковырять HTML-шаблон, выбирая из него необходимые элементы (стили и HTML-структуру) и вставляя их в нужные файлы будущего шаблона WP. Также потребуется добавление элементов синтаксиса CMS в различные области для того, чтобы тема оформления была принята системой. Это работа для специалиста, новичкам она не под силу, поэтому даже не будем подробно описывать процесс.
Шаг 3 – перенос контента
На этом этапе снова появляется развилка – ручной перенос контента либо автоматизированный при помощи плагина.
Перенос материалов вручную
Если у вас немного контента, лучше использовать этот вариант. Для этого необходимо скопировать HTML-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги <body></body>, все, что находится выше или ниже — техническая часть, которая для WordPress-страниц не нужна. Потребуется отдельное копирование картинок – лучше оставить их названия такими же, тогда код подхватит их как есть. Не забудьте добавить SEO-данные через редактор или интерфейс соответствующего плагина.
Метод может приводить к некоторым ошибкам в отображении – это зависит от характера контента и используемого на WP шаблона. Скорее всего, что-то придётся подправлять вручную, доводя форматирование до нужной кондиции.
Важно: если структура ссылок на новом сайте отличается от старой, то они перестанут работать. Потребуется настройка 301 редиректов для перенаправления посетителей со старых ссылок на новые (при небольших объёмах контента можно внести правки в .htaccess) либо правка всех ссылок сайта под новый формат (ручная либо с использованием плагина вроде Redirection).
Автоматический перенос средствами плагина
Этот способ выгодно использовать при наличии большого количества статей. Наиболее популярными плагинами для автоматического переноса являются Import HTML Pages и HTML Import 2, которые можно установить из панели управления, поискав по названиям в библиотеке плагинов. Они выдают очень похожий результат, качество адаптации оформления находится на посредственном уровне. Многое придётся дорабатывать вручную. Зато плагин поможет выполнить рутинную работу в больших объёмах, сэкономив кучу времени и сил.
Шаг 4 – тестирование работоспособности
Настало время проверить работу нового сайта по нескольким пунктам:
- Битые ссылки. Убедитесь, что все ссылки рабочие. Если страниц и ссылок много, то для проверки лучше использовать плагин Xenu’s link sleuth, Integrity либо их аналог.
- Битые стили. Если вы конвертировали дизайн либо создавали шаблон вручную по образцу старого, могут быть ошибки отображения. Осмотрите всё – возможно, потребуются дополнительные действия для исправления проблем.
- Нарушения функциональности. Тестируйте всё, что есть на сайте, – формы, панели социалок, кнопки, навигацию, различные опции, плееры и т. д. Убедитесь, что всё это работает как положено.
Шаг 5 – подключение домена к новому сайту
Итак, у вас уже есть WP-сайт с настроенным оформлением, функциональностью и перенесённым контентом. Теперь нужно перейти с технического домена, используемого во время всех работ, на свой. У какого бы регистратора вы не купили домен, общий смысл его подключения к новому сайту сводится к правке в панели управления доменом значений DNS-серверов на те, которые использует новый хостинг-провайдер.
Важно: если ваш домен был зарегистрирован в течение последних 60 дней, то для трансфера придётся подождать ещё столько же. Это политика ICANN, ускорить процесс нельзя. Также необходимо в панели управления доменов деактивировать защиту от краж.
Выводы и рекомендации
При переносе HTML-сайта на WordPress проще всего использовать обновлённый дизайн, выбрав один из готовых шаблонов. На многих этапах вам помогут плагины, но полностью избежать ручной работы и кодинга не удастся. Уделите внимание тестированию, не забудьте о настройке необходимых редиректов, проверке работоспособности ссылок и прочей функциональности, а также заполнении SEO-параметров. Заранее подберите и установите необходимые плагины.
В качестве примера мы описали алгоритм для той ситуации, когда вы планируете менять хостинг-провайдера под новый сайт на WP. Возможен также вариант заливки WP-сайта на хостинг, который обслуживает текущий HTML-сайт. Можно собрать обновлённый сайт на локалхосте (Openhost, Denwer и т. д.), а потом залить его туда, подправив wp-config под имеющуюся базу данных и убрав оттуда старый сайт. Но это уже чуть другая история.
Быстрый, простой и безопасный хостинг с автоматической установкой WordPress за 2 минуты. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Цена: от $2.95* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!
В целом, задача переноса сайта посильна для опытного пользователя ПК, имеющего некоторый опыт в кодинге. Спасают плагины. Полностью ручной перенос под силу только опытным специалистам.
Ненужные пункты, если вы считаете их таковыми, или отдельные виды работ, если они вам не требуются, можно пропустить.
Примечания к подготовительному этапу
Так как в новую версию сайта должно перейти всё самое важное и эффективное, то логично детально изучить старую версию web-ресурса:
Резервное копирование
В большинстве случаев HTML-сайт фактически представляет собой набор статичных HTML-страниц в корне хостинга. Это текстовые файлы, названия которых строго соответствуют URL страниц. Поэтому, всё что вам нужно сделать – скопировать все файлы из корневой папки вашего старого хостинга. Параллельно с .html нужно копировать и другие данные, в том числе дополнительные каталоги, например, css, images или js и т.п., в них хранится дополнительный контент – скрипты, изображения, видео и т.д.
Но доступ к хостингу сохраняется не всегда, особенно если работу по запуску сайта выполнял сторонний специалист, связь с которым утеряна. Плюс, страницы могли быть созданы в специальных онлайн-конструкторах, тогда доступ к исходному коду страниц вообще может быть заблокирован.
В этом случае можно воспользоваться специальным софтом – оффлайн-браузерами. Но будьте осторожны – бесплатные или демонстрационные версии ПО часто включают в HTML-код дополнительную информацию, чтобы вы не могли разместить скачанные страницы на другом хостинге.
Настройка хостинга для WordPress
С одной стороны, для WordPress должен подойти практически любой хостинг с поддержкой динамических сайтов (нужна связка PHP+MySQL). Но выбор хостеров очень большой, велик шанс найти недобросовестный сервис или сервис с низким качеством услуг.
Всё это обязательно отразится на показателях сайта, на доступности его для ваших пользователей, на отношении к нему поисковых систем и на вашей выручке (в конечном итоге).
Поэтому мы рекомендуем не рисковать и выбирать тех провайдеров, которых рекомендуют разработчики WordPress – например, Bluehost. Адекватные тарифы, высокая доступность и стабильность, масса положительных отзывов и специальная оптимизация для лучшей работы WordPress.
Тарифы – от 2,95 USD/месяц. Манибэк – 30 дней. За эту цену вы получаете всё, что нужно для работы одного сайта – 50 Гб SSD-диска, подарочный домен, бесплатные SSL, интеграция с CDN (для лучшей доступности в любом регионе мира).
Если у вас несколько сайтов, есть безлимитные тарифы – от 5,45 USD/месяц. Любое количество сайтов, неограниченное место на диске и дополнительные сервисы.
Выбор способа переноса
Первый способ. Наиболее недорогое решение – найти похожую тему и перенести только самую важную информацию: контактные данные, описание ключевых услуг, ассортимент товаров, ваши преимущества и т.д. Настроить контактные формы, дождаться переиндексации и продолжить развивать сайт на новой базе:
Но такой подход оптимален не всегда. Особенно, если старые страницы давно в индексе поисковых систем и имеют хорошие показатели посещаемости. В этом случае количество клиентов из поиска может сильно сократиться, а заново в выдачу, даже по тем же запросам, попасть будет сложно. Здесь лучше всего сохранить всё так, как это было раньше (в том числе, это касается URL-адреса страниц, метатегов и основного контента).
Второй способ. Чуть дольше и дороже, чем первый. Шаблон, опять же, подбирается похожий, но данные переносятся максимально полно. Если структуру адресов сохранить не получается, обязательно настраиваются редиректы. Оформляются 301-м редиректом в настойках хостинга, через файл .htaccess, или с помощью специальных плагинов для WordPress.
Если станиц немного (до сотни-двух), то их можно и даже нужно перенести их вручную. Так данные будут максимально соответствовать тому, как они выглядели раньше. При автоматизации процесса всегда велик шанс получения множественных ошибок в верстке, в отсутствии медиафайлов, нарушении структуры URL и т.д.
Но если страниц больше – вам поможет только автоматизация. Стандартные скрипты могут не справиться с задачей, поэтому с большой вероятностью придётся привлекать профессиональных программистов.
Третий способ. Дорогой, но надёжный. Нужно преобразовать HTML-файлы старого сайта в шаблон для WordPress. При отсутствии опыта и достаточной квалификации процесс лучше доверить профессионалам. После того, как шаблон будет готов, переносятся данные как во втором способе: вручную или автоматически (скриптами или парсерами).
Четвёртый способ. Разработка нового индивидуального шаблона под ваши требования и специфику бизнеса, тщательный перенос данных. Да, внешний вид сайта изменится, но в некоторых случаях это может быть только на руку, как своего рода ребрендеринг – переход на новые технологии и на новый формат ведения бизнеса. Тут без привлечения профи никак не обойтись. Вам понадобятся услуги профессиональных дизайнеров, верстальщиков, натяжка HTML на движок, написание кастомных функций, установка плагинов и т.д. Всё будет зависеть от ваших «хотелок» и имеющегося бюджета. Верхней планки не существует. Можно даже сверстать отдельную версию шаблона для мобильных устройств или полноценное приложение для смартфонов. У WordPress для этого имеется все необходимое.
Перенос дизайна
Для WordPress есть просто невероятное количество готовых шаблонов. Вы точно сможете подобрать готовый. Это обойдётся намного дешевле, чем разработка своего с нуля, и быстрее, чем натяжка старого HTML на движок силами верстальщиков.
Но это не значит, что так будет лучше во всех отношениях. Иногда разработка уникального шаблона с нуля просто жизненно необходима для серьёзных сайтов. Поиск шаблона тоже отнимет много времени и сил. Плюс, перевод, детальная настройка и «допиливание» шаблона – отдельные пласты задач, с которыми сможет справиться не каждый.
Подбор похожей темы/шаблона
Технологии компьютерного зрения ещё далеки от совершенства, поэтому никакой алгоритм не сможет подобрать полный аналог вашего дизайна в автоматическом режиме. Всё придётся делать своими руками.
Очень важный момент – многие премиум-темы имеют массу возможностей для кастомизации, поэтому не стоит привязываться к дефолтному внешнему виду. Нужно изучать все возможности как можно более детально. Соответственно, времени придётся потратить немало.
Чтобы сократить время на поиск, можно сортировать шаблоны по ключевым признакам: тематика, цветовая гамма, поддержка eCommerce-функций, совместимость с такими плагинами, как Elementor (качественный блочный конструктор страниц с большой свободой действий) и т.д.
Так как многие темы умеют настраивать цвета и шрифты, вам нужно изучить параметры вашего старого сайта: