Как перенести сайт с Tilda на WordPress: пошаговая инструкция для начинающих

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

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

Подготовительный этап

WordPress написан на PHP, поэтому требует от хостинга поддержки этого языка web-программирования. Без хостинга и баз данных MySQL движок работать не будет, но настройка хостинга – это только один из этапов. Нужно будет настроить саму CMS-систему и только затем переходить к переносу данных. Особое внимание сайтам нужно будет уделить, если требуется не только перенос данных/страниц, но и доменного имени с сохранением позиций в поиске. Итак, начнём.

Выбор хостинга

Сервисов, соответствующих минимальным техническим требованиям WordPress, огромное множество, это практически любой shared-хостинг. Но это не значит, что все хостинги однотипны и их функционал практически ничем не отличается. Где-то могут применяться нестандартные (самописные) хостинг-панели, где-то имеется поддержка SSH-подключений (можно использовать linux-команды в консоли), кто-то предлагает автоматическую установку CMS в пару кликов и т.д.

Плюс, есть такие критерии выбора, как доступность серверов (аптайм), наличие и оперативность технической поддержки, возможность смены версий PHP, объём предоставляемых ресурсов, ограничения на количество одновременных сессий и т.п. У каждого пользователя свои критерии оценки хостинга.

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

Не хотите тратить время на поиск лучшего хостинга для WordPress? Тогда прислушайтесь к нашим рекомендациям.. HostGator – номер один в списке лучших хостингов уже не первый год. В наличии не только специальные тарифы для WordPress (в формате полного управления), но и масса профильных сервисов: установка в один клик, поддержка SSH-консоли, полная совместимость с интернет-магазинами (на базе связки WooCommerce+WordPress) и т.д. Новичков порадуют безлимитные тарифы (дисковое пространство и размер баз данных никак не ограничиваются). Стоимость – от 3,75 USD/месяц (чем больше период оплаты, тем больше скидка).

Если сайт будет работать только с российской аудиторией, то стоит присмотреться к хостингу AdminVPS (номер 1 в рейтинге российских хостеров). Бесплатная базовая защита от DDoS, услуги базового администрирования, ежедневные бэкапы, ru/рф-домены в подарок и т.д. Тарифы – от 95 руб./месяц. VPS-серверы с KVM-виртуализацией (обеспечивается отличная изоляция контейнеров и полный контроль ресурсов) – от 179 руб./месяц.

Регистрация или перенаправление домена

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

1. Зарегистрировать новый домен и не сохранять структуру адресов старых страниц. Фактически вы создаёте новый сайт на новом домене, в этом случае индексация и продвижение будут реализовываться заново.
2. Зарегистрировать новый домен, но сохранить старую структуру страниц. Тогда можно добавить новый сайт в качестве зеркала старого и после индексации определить сайт как новое главное зеркало. Через несколько апдейтов старый сайт вытеснится из индекса новым, после этого его можно будет удалить. Основные позиции и трафик сначала немного просядут, но потом полностью вернутся в норму.
3. Создать новый сайт (с новой структурой страниц) и перенаправить на него старый домен. Так как многие старые URL будут недоступны, трафик просядет, пока сайт не будет проиндексирован снова. Часть позиций в поиске будет утеряна безвозвратно.
4. Создать новый сайт, сохранить старую структуру страниц и перенаправить имеющийся домен на новый хостинг. В этом случае трафик и позиции будут полностью сохранены. Вместо полного сохранения структуры можно задействовать 301-редиректы. Они будут работать в рамках нового хостинга, поэтому старый сайт на Tilda больше не понадобится.

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

• Через тег rel=»canonical». У Тильды этот тег управляется автоматически на уровне всего сайта и изменяться вручную не может. Исключение – добавление специального блока T223 (из категории «Другие»). Его нужно вручную добавлять на каждую из имеющихся страниц.
• Через редирект файла robots.txt. В Тильде этот файл генерируется автоматически, изменить его вручную нельзя.
• Через 301 редиректы на уровне сервера. В Тильде есть настройка редиректов, но они работают только в рамках одного домена.

Соответственно для переадресации на новый домен их использовать не получится.

Как итог, если вы хотите сохранить позиции, то у вас фактически остаётся только один адекватный вариант – создать полную копию сайта и перенаправить старый домен на новый хостинг.

Алгоритм может немного усложниться, если вы регистрировали старый домен через Tilda (регистрация происходит на аккаунт регистратора REG.RU, стандартный перенос его в свой аккаунт у того же регистратора максимально простой, всё делается в течение одного дня, но если вам важна смена регистратора, то процедура уже может занять больше времени, например, делегирование возможно не ранее, чем через 60 дней после последнего переноса или после регистрации домена).

Процесс обновления DNS-системы может занимать до 3-х суток, всё это время и в течение периода, необходимого для переноса данных, сайт будет недоступен в поисковых системах. Это может негативно отразиться на SEO. Поэтому не удаляйте сайт из Tilda сразу – пусть он работает до окончания всех процедур переноса.

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

• Так называемые «технические домены». Это домены третьего уровня, которые предоставляют некоторые хостинги, чтобы вы могли протестировать работу услуг без необходимости регистрации нового домена второго уровня. Обратите внимание, что если вы настроите работу движка на таком поддомене, то при окончательном переносе нужно будет не забыть исправить все неправильные ссылки – те, что будут содержать в себе «технический поддомен».
• Локальный сервер. Внутри виртуальной машины или внутри локального сервера вы можете сразу использовать актуальный действующий домен. Просто учтите, что он будет работать только в виртуальной среде. В этом случае файлы сайта можно переносить на боевой сервер (на новый хостинг) без каких-либо изменений.

Установка и настройка WordPress

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

1. Направление домена на серверы хостинга (может занять время из-за обновления DNS-системы).
2. Установка движка (если ваш хостер, к примеру, как HostGator, поддерживает установку в «один клик», то нужно будет только активировать специальный мастер и заполнить основные данные, все базовые конфигурации и процесс подключения к базе данных выполнятся автоматически):
   1. скачивание архива, распаковывание и перенос файлов в корень сайта,
   2. создание базы данных, подключение к ней движка,
   3. запуск мастера установки.
3. Установка необходимых плагинов и их настройка.
4. Настройка HTTPS-версии сайта (получение SSL-сертификата и настройка редиректа с HTTP версии сайта на HTTPS).

Подробная инструкция по установке и настройке WordPress приведена здесь.

Помимо базовых настроек вы можете уделить внимание почте для домена (для уведомлений с сайта и просто для переписки с клиентами будет использоваться корпоративный адрес почты вида account@ваш-сайт.ру) и смене редактора (штатный редактор страниц Gutenberg работает с блочным контентом, но он не такой удобный, как Elementor).

Перенос данных с Tilda на WordPress

Платформа Tilda позволяет экспортировать созданные страницы для размещения их на своём сервере. Но проблема в том, что экспортирование доступно только на отдельном тарифе (Business), а сами страницы экспортируются только в HTML. Часть блоков и скриптов экспортируется отдельно, что усложняет перенос динамического контента. Есть возможность использования API, но это путь для профессиональных разработчиков.

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

Поэтому фактически данные придётся переносить вручную. Какие именно данные нужно переносить:

• Формы (обратная связь, запрос обратного звонка, отправка файлов, заполнение комментариев к статье и т.п.).
• Мета-теги (title и description каждой страницы, другие теги, необходимые для поисковых систем, мобильных платформ, социальных сетей и т.п.).
• URL-страниц (адрес страниц в WordPress можно указать вручную, но структура адресов разделов и рубрик генерируется автоматически, поэтому придётся настраивать редиректы).
• Тексты, изображения, видеозаписи и другой медиаконтент со страниц.
• Стиль оформления (Tilda использует много профессиональных анимаций и переходов, общий внешний вид можно реализовать за счёт уникального или премиум-шаблона, его можно сделать на заказ или приобрести готовый лот на соответствующих площадках).
• Виджеты/отдельные значимые блоки на страницах (например, онлайн-карты с офисами и т.п.).
• Структура меню (особо будет важна для старых/постоянных пользователей).
• Коды аналитик, сторонних сервисов (онлайн-калькуляторы, презентации и т.п.).

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

Ручной перенос

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

На что нужно обратить особое внимание:

• Форматирование (стиль начертания, размер шрифта, расположение текста относительно других блоков, анимации переходов и т.д.).
• Изображения и видеофайлы (если они загружались не через специальные сервисы) нужно предварительно сохранить на свой ПК, а потом уже загрузить на новый сервер. В отдельных случаях могут помочь специальные плагины, например, Import External Images.
• Аналогичным образом нужно скачать и пересохранить другие файлы (например, текстовые документы, таблицы, прайсы и т.п.).
• Если контент вставляется с помощью специального кода, например, как ролики с YouTube, нужно скопировать этот код или перейти в соответствующий сервис и получить новый код для вставки.
• SEO-атрибуты и URL. Обязательно скопируйте title и description, если хотите, чтобы ваши страницы сохранили свои прежние позиции в поиске. WordPress позволяет указывать URL вручную, поэтому вы можете сохранить старые ссылки для многих страниц (для некоторых таксономий добавляются автоматические части адреса, но и их можно убрать с помощью специальных плагинов).

Если какие-то ссылки сохранить в исходном виде не получается – используйте редиректы.

Пример ручного переноса вместе с дизайном

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

Реальные перенос данных с полным сохранением вёрстки возможен следующими способами:

1. За счёт натяжки имеющегося дизайна на стандартную/дефолтную тему WordPress (или на любой каркас, который можно найти в сети).
2. За счёт полного копирования страниц – тут потребуется шаблон, который не имеет вывода меню (шапки), подвала и боковой панели (если в выбранной теме такого шаблона нет, то его можно создать самостоятельно).

Так как при одиночном копировании страниц вам всё равно придётся подключать CSS-стили и JS-скрипты на уровне темы, то наиболее простой и доступный метод – натяжка HTML-дизайна на новый шаблон WordPress.

Алгоритм натяжки HTML-шаблона на тему WordPress:

• Скачивается каркас типовой темы для WordPress, например, отсюда (вместо этого можно использовать любую тему, поставляемую вместе с движком, все они лежат в папке /wp-content/themes). Если есть качественный мануал под рукой, например, Кодекс WordPress, то все файлы можно создать с нуля.
• С помощью браузера (а лучше с помощью специальных утилит или сервисов, таких как web2zip, WebCloner, WebSite-Watcher, Web Dumper и т.п.) страницы старого сайта сохраняются в виде HTML (обязательно со связанными файлами). Если у вас активен Business-тариф, то можно напрямую экспортировать весь сайт в виде набора HTML-страниц.
• Далее в текстовом блокноте (это может быть штатный софт Windows, альтернативные реализации, такие как NotePad++, или полноценные IDE для web-разработки) анализируется структура HTML. Задача – разделить страницу на глобальные блоки: шапка, футер и основной контент.
• На уровне файла functions.php шаблона подключаются все необходимые вспомогательные файлы – CSS-стили, JS-скрипты, иконки и пр. Это есть всё то, что обычно скачивается вместе с основной HTML-страницей. Например, браузер Chrome сохраняет файлы в папку «Название сраницы_files». Но часть стилей может быть вынесена и в шапке HTML-файла.
• Далее части шаблона разносятся по соответствующим файлам темы (index.php, page.php, single.php, 404.php, footer.php, header.php и пр.). По желанию добавляются вызовы стандартных элементов WordPress – меню, циклы записей, блоки об авторе и пр.
• Когда тема готова, её нужно протестировать на работоспособность (лишний раз проверить правильность подключения стилей и скриптов. Всё ненужное для работы нового сайта можно удалить из кода.
• Теперь остаётся наполнить сайт: перенести контент страниц. Его можно взять из тех же HTML-файлов. Обратите внимание, блоки, которые вы используете на страницах конструктора, обычно начинаются и заканчиваются примечаниями вида <! — /T396 —> (это номера секций Tilda).
• Чтобы снизить объём работ, нужно использовать полностью пустой шаблон страницы (без боковой страницы, без меню и аналогичных элементов). Так код старой страницы можно будет копировать практически в неизменном виде.
• Особое внимание нужно уделить изображениям. По умолчанию они хранятся на CDN-серверах Тильды (ссылки вида https://static.tildacdn.com/tild3736-6333-4231-a337-646133386562/favicon.ico). Картинки можно автоматически пересохранить на своём сервере с помощью плагина GL Import External Images form URLs или аналогичных решений. Если с плагинами решить задачу не получается, то всё можно пересохранить вручную (скачать на ПК, а затем загрузить на новый сервер и поправить ссылку на медиафайл).
• Не забывайте копировать URL, заголовки, Title, Description и другие атрибуты страниц. Только так можно сохранить исходную структуру сайта, чтобы он не выпал из индекса поисковиков.

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

Более подробная инструкция о переносе HTML-сайта на WordPress.

Автоматический перенос с помощью официального плагина

Tilda не ограничивает взаимодействие с другими платформами. Разработчики даже предлагают специальный плагин, с помощью которого, можно настроить выгрузку страниц с Tilda в блог на WordPress. Взаимодействие происходит по API, функционал доступен только на тарифе Business.

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

• Выгружается только часть с блоком контента (body), меню, шапка, подвал и другие элементы сайта на WordPress остаются системными (берутся с вашего сайта на WordPress).
• Сам контент выгружается в HTML-код, поэтому никуда не пропадает со временем.
• При необходимости вы можете синхронизировать изменения в Tilda с контентом сайта на WordPress. Это делается в настройках нужной страницы в сервисе Tilda или с помощью кнопки «синхронизировать» в нужной записи на WordPress.
• Когда связь/интеграция пропадают, у вас заканчивается подписка, блок, выгруженный из Tilda, остаётся «как есть».
• При необходимости вы можете отредактировать его вручную, путём правки HTML-кода.

Для переноса страниц нужно установить оригинальный плагин на своём wordpress-сайте и получить ключи для интеграции по API (их нужно сгенерировать в сервисе). Теперь в окне редактора при создании новой записи или страницы в WordPress можно выбрать подключение страниц из списка доступных на Tilda. После нажатия кнопки «Синхронизировать» контент загружается в WordPress.

Так вы можете перенести все страницы из Tilda. Лучше всего перенос осуществлять в шаблоны без боковых колонок (рассчитанные на всю ширину страниц).

Полный экспорт всего проекта на Tilda через API

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

Смысл выгрузки сводится к тому, что предварительно в проекте нужно задать названия каталогов, в которых будет хранится тот или иной тип контента: js, img, css и т.д.

Чтобы организовать соотнесение нужной страницы с нужным контентом, нужно организовать перебор массива элементов в цикле. Получить список всех страниц проекта можно с помощью getpageslist. Данные для отдельной страницы в массиве – getpagefullexport.

Экспорт страниц через RSS

Если с API смогут справиться только опытные программисты, то для выгрузки страниц в RSS-ленту никаких специальных знаний не требуется.

• Активируйте в настройках проекта RSS-ленту («Настройки сайта» -> пункт «Ещё» -> галочка «Включить генерацию RSS-ленты»).
• Откройте каждую страницу и выполните перепубликацию.
• Перейдите по адресу «ваш-сайт-на-tilda.ru/rss.xml».
• Сохраните содержимое в файл (можно назвать его так, как вам угодно, в качестве расширения лучше ввести .xml).
• Активируйте плагин импорта RSS на вашем WordPress-сайте («Инструменты» -> пункт «Импорт» -> блок RSS, нажать ссылку «Установить»).
• Нажмите ссылку «Запустить импорт» после установки плагина и выберите сохранённый .xml файл.

Платформа выгружает в ленту только сокращённую версию страниц. Зато такой метод подходит для любого тарифа Tilda (функция экспорта не нужна).

Выводы и рекомендации

Перенос контента с Tilda на WordPress возможен даже без профессиональных знаний и навыков. Гарантированный способ переноса – ручной. Но есть и автоматические варианты. Tilda предоставляет доступ к API и даже имеет специальный плагин для интеграции с WordPress, но эти функции работают только на тарифе Business.

Без перехода на дорогой тариф можно воспользоваться RSS-лентой. Если ни один из предложенных вариантов не подходит, всегда можно нанять специалиста или воспользоваться специальным сервисом, таким как CMS2CMS (платный, в случае с Tilda нужно выбирать перенос HTML -> WordPress).