Как перенести сайт на WordPress с HTML
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.
Варианты преобразования HTML-сайта в WordPress
Есть три способа перенести HTML-сайт на WordPress:
- Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.
Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.
- Установите одну из существующих тем оформления и перенесите контент.
Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.
- Заказать веб-программисту перенос HTML-сайта на WordPress.
Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.
Подготовка к переносу HTML-сайта на WordPress
Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.
Перенос HTML-сайта вручную
Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.
Шаг 1: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
/* Theme Name: Замените этот текст именем вашей темы. Theme URI: Адрес вашей темы Description: Краткое описание. Version: 1.0 Author: Ваше имя Author URI: Адрес вашего сайта. */
После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .
Вернитесь в index.html . Выделите код разметки боковой панели (например, aside >. Скопируйте и вставьте его в файл sidebar.php .
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
Затем в самом конце index.php вставьте следующий код:
Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:
>
» rel=»bookmark» title=»Permanent Link to «>
Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс. Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Сергей Бензенко автор-переводчик статьи « Converting HTML Sites to WordPress Sites »
Как перенести HTML сайт на WordPress
Изначально Интернет состоял сплошь из текста и статического HTML. Но время шло, технологии развивались. И сейчас очень редко можно встретить чистый статический HTML сайт. На смену статическим сайтам пришли сайты с более сложной организацией, которые обеспечивают более приятный опыт как для посетителей, так и для создателей веб-сайтов. Все это стало возможным благодаря таким проектам, как WordPress. Теперь любой, кто устанавливает WordPress, может быстро создать захватывающий веб-сайт с функциональностью, о которой не могли мечтать на заре эры Интернета.
Что же можно сделать, если у вас возникло желание перенести свой статический HTML сайт на WordPress? К счастью, есть несколько вариантов для решения этой проблемы.
Три способа перенести HTML-сайт на WordPress
1. Создание вручную сайта на WordPress на основе статического HTML сайта
В зависимости от вашего уровня знаний в области кодирования, это может быть простой или сложной задачей. Идея состоит в том, чтобы взять код, который у вас уже есть, и использовать его в качестве основы при создании файлов темы WordPress. Вам понадобится немного опыта в области PHP, CSS и HTML. Но, в конце концов, вы будете много копировать и вставлять.
Плюс этого подхода заключается в том, что у вас будет тема WordPress, похожая на ваш оригинальный сайт. Минусом является то, что у вас не будет гибкости WordPress, которая позволяет использовать виджеты и редактировать свой сайт из админ панели WordPress.
2. Взять готовую тему WordPress, а затем перенесите в нее свой контент
WordPress имеет так много готовых тем, что вы, скорее всего, найдете ту, которая будет похожа на ваш сайт. Вы можете просто настроить ее так, чтобы дизайн и внешний вид напоминали ваш старый сайт. Если вы сделаете это, у вас будет полный доступ ко всем функциям WordPress. В будущем вы сможете расширить существующую тему, используя лучшее из того, что может предложить WordPress.
3. Нанять специалиста, чтобы он сделать все для вас
Преимущество этого варианта в том, что он самый простой в нашем списке. В зависимости от вашего бюджета, вы можете найти кого-то, кто имеет опыт миграции сайтов с HTML на WordPress, чтобы он все сделал за вас. Недостатком этого способа является то, что вы упускаете возможность почувствовать, как работает WordPress. Как только вы поймете, как работает WordPress, вы сможете самостоятельно вносить любые коррективы.
Как вручную создать сайт на WordPress на основе статического HTML
Начните с создания папки темы с основными файлами. Это очень похоже на создание каталога на вашем компьютере, поэтому вы можете выбрать любое имя, какое захотите. Затем используйте редактор кода для создания текстовых файлов. Они должны иметь следующие имена:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
К ним мы вернемся через несколько минут.
Затем скопируйте ваш существующий CSS в таблицу стилей WordPress.
Это файл style.css, который вы создали ранее. Здесь вам сначала нужно будет записать следующую информацию:
- Author — Ваше имя
- Theme Name — Название вашей темы
- Description — Краткое описание вашей темы
- Author URI — Ссылка на вашу домашнюю страницу
После этого служебного заголовка вставьте стили CSS из вашего исходного статического HTML сайта. Сохраните изменения.
Прежде чем приступить к следующему шагу, будет полезно немного разобраться, как работает WordPress. WordPress использует PHP, когда вызывает и извлекает данные из базы данных. Файлы, которые вы создаете, указывают WordPress, где будет отображаться каждый фрагмент контента. На этом этапе вы в основном будете копировать созданный вами HTML код и вставлять его в разные файлы, чтобы WordPress знал, куда их выводить.
Начнем с файла index.html. Ваша задача — скопировать части вашего index.html и вставить их в соответствующий файл темы. Когда копирование будет закончено, сохраните все.
- От начала файла до тега div в файл header.php
- Все внутри тега aside , включая сам тег, в файл sidebar.php
- Все после боковой панели в файл footer.php
- Вся остальная информация, оставшаяся в файле index.html, копируется в файл index.php
Закройте файл index.html.
Теперь, финальная доработка файла index.php.
В самом начале файла добавьте строку . Затем, внизу файла поместите код .
И последнее, что нужно сделать, это организовать цикл. Это то, что WordPress будет использовать для отображения контента для посетителей вашего сайта. Добавьте следующий код:
Сохраните файл index.php и закройте его.
Наконец пришло время загрузить вашу новую тему. Это означает, что вы должны взять все файлы темы, которые вы сохранили в папке вашей темы, и подключить ее к WordPress. Сделать это можно, скопировав папку папку темы в директорию /wp-content/themes/. Затем нужно перейти в раздел Внешний вид > Темы и активировать вашу новую тему. Теперь вам осталось только добавить контент старого сайта.
Что-то все это для меня слишком сложно!
Если вам все вышесказанное кажется слишком сложным, то мы рекомендуем использовать два других способа перевода HTML сайта на WordPress, о которых мы говорили в начале статьи. А именно найти уже готовую тему WordPress наиболее подходящую для вашего сайта и использовать ее, либо же обратиться к специалисту, который все сделает за вас.
Очень скоро вы вольетесь в ряды миллионов пользователей, которые попробовав один раз WordPress уже никогда не захотят вернуться к старым способам создания сайтов. У WordPress множество разнообразных тем, плагинов и ресурсов. А многочисленное и дружелюбное сообщество охотно поделится с вами секретами и приемами, и поможет решить любую проблему.
Как перенести 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-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги , все, что находится выше или ниже — техническая часть, которая для 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 + Bluehost установка CMS в 1-клик на хостинг ↵
Быстрый, простой и безопасный хостинг с автоматической установкой WordPress за 2 минуты. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Цена: от $2.95
* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!
В целом, задача переноса сайта посильна для опытного пользователя ПК, имеющего некоторый опыт в кодинге. Спасают плагины. Полностью ручной перенос под силу только опытным специалистам.
Перенос HTML-сайта на WordPress 6.4.1
WordPress
Автор Алекс На чтение 10 мин Обновлено 26.10.2022
В начале (Интернета) все веб-сайты были созданы только с текстом и статическим HTML кодом. Теперь, спустя более 20 лет, Интернет стал совсем другим. Веб-сайты стали намного сложнее. Они обеспечивают более богатые и приятные впечатления как для создателей сайтов, так и для посетителей.
Это во многом благодаря проектам с открытым исходным кодом, таким как WordPress. Который за последние десять лет или около того преуспел в своей основной миссии по демократизации онлайн-публикации и многого другого в процессе. Так что любой, у кого установлен WordPress и хорошая тема с плагинами, может иметь современный веб-сайт с продвинутым дизайном и функциональность. Никакого кодирования, даже HTML — не требуется.
Вот почему таким заядлым пользователям WordPress, как я, почти трудно поверить, что в 2023 году кто-то все еще может управлять статическим веб-сайтом HTML вместо сайта на WordPress с темой и плагинами. Но факт в том, что все еще существует значительное количество активных сайтов только на HTML либо HTML с небольшим количеством CSS.
Конечно, у этих владельцев сайтов могут быть веские причины не выполнять обновление или преобразование. Может быть, содержание их сайта никогда не меняется, а простое форматирование и дизайн, которые уже есть, можно использовать. Или, может быть, это меньше хлопот, чем беспокоиться об обновлении сайта WordPress. Оба варианта являются уважительными причинами. Яркие примеры: «Не ремонтируйте то, что не сломано».
Однако у меня такое чувство, что это может быть не основной причиной, по которой владельцы HTML сайтов не сделали этого. Самым очевидным является то, что они просто не знают, как преобразовать свой HTML сайт в WordPress. Особенно без потери контента, дизайна или необходимости чрезмерного форматирования на каждой странице.
Как это часто бывает с WordPress, есть несколько способов решить эту проблему. Ниже я собрал несколько вариантов.
Варианты преобразований статический HTML сайт в WordPress
Как вы решите преобразовать свой статический HTML сайт в WordPress, без сомнения, будет зависеть от ваших личных предпочтений, желаемых временных или денежных вложений и уровня навыков работы с кодом. Вы должны сами решить, что лучше для вас, но с приведенными ниже вариантами вы сможете быстро принять решение и сразу перейти к наиболее актуальной информации в этом статье для вашей конкретной ситуации.
Есть три основных варианта как перенести HTML сайт на WordPress:
- Вручную — создайте тему WordPress на основе вашего текущего статического HTML-сайта . Для этого вам потребуется войти в свой код. Вам нужно будет получить доступ к текущему каталогу сайта через FTP и использовать существующий код в качестве отправной точки. Оттуда вам нужно будет создать необходимые файлы для темы WordPress и скопировать фрагменты кода из кодекса WordPress. Это довольно просто и понятно, если у вас есть некоторый опыт работы с HTML, CSS и немного PHP.
- Установить готовую тему и просто перенесите свой контент . Это, наверное, лучший вариант на стыке простоты и стоимости. Предполагая, что у вас уже есть хостинг для вашего текущего веб-сайта, вам нужно будет потратить деньги, только если вы решите приобрести премиальную тему. Плагин, который мы будем использовать для импорта контента, находится в свободном доступе в официальном репозитории плагинов WordPress.
- Олатить услугу преобразования HTML в WordPress, чтобы пересоздать ваш сайт . Это самое простое решение, так как оно не требует от вас особых действий. Однако это не поможет вам познакомиться с WordPress, и стоимость будет варьироваться в зависимости от того, кого вы решите нанять. Я не буду описывать этот вариант в следующих разделах, потому что, если это интересующий вас маршрут, вы можете просто выполнить быстрый поиск поставщиков услуг, и они позаботятся обо всем остальном.
Заказать у специалиста: Перенос html сайта на WordPress
Подготовка: перенос HTML на WordPress
Независимо от того, какой маршрут вы выберете, есть несколько вещей, которые вы захотите сделать перед погружением.
Просмотреть доступные варианты и выбрать пакет, который наилучшим образом соответствует вашим потребностям. Или, может быть, вы хотите вместо этого создать локальную установку WordPress? Вы всегда можете перенести его на хостинг позже.
После того, как вы выбрали, вам нужно будет установить WordPress и войти в WP Admin. Это точка, в которой наши два возможных пути расходятся.
Перенос статического HTML-сайта в WordPress вручную
Если ваша цель — не только перенести контент со статического HTML-сайта в WordPress, но и продублировать ваш текущий дизайн, это означает, что вам нужно будет создать свою собственную тему. К счастью, это не так страшно, как может показаться сначала. Для этого нужно всего лишь создать несколько папок и файлов, немного скопировать и вставить, а затем загрузить результат.
Вам понадобится редактор кода, такой как Sublime или Notepad ++, и доступ как к каталогу вашего HTML-сайта, так и к каталогу вашей новой установки WordPress.
Шаг 1. Создайте новую папку темы и необходимые файлы
На рабочем столе создайте новую папку для хранения файлов вашей темы. Назовите его, как хотите, например myTheme.
Затем создайте несколько файлов (все они будут в папке новой темы) в редакторе кода. Пока ничего с ними не делайте. Просто оставьте их открытыми для дальнейшего редактирования.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2. Скопируйте существующий CSS в файл style.css
Если вы хотите продублировать дизайн, это, вероятно, означает, что у вас есть хотя бы какой-то CSS, который вы хотите сохранить. Итак, первый файл, который вы захотите отредактировать, — это ваш файл Style.css.
Для начала добавьте следующее в начало файла.
HTML страницу перенести в WordPress
Всем привет! Для начала немного предистории и описание конечной цели, возможно кто нибудь подскажет лучше идею! Итак, решили создать сайт саппорта на сабдомене на движке WordPress, имеется документация которая генерируется с помощью ASCII Doctor в HTML, и автоматически заливается на сервер. На этом же сайте есть потребность делать информативные лендинги, предполагается текучка контента, поэтому решили в пользу CMS, что бы человек с минимальными навыками мог взаимодействовать и создавать страницы и контент! А теперь к ПРОБЛЕМЕ: сложность в том что бы сгенерированные страницы документации от ASCII Doc залить как отдельные страницу WordPress сохранив header и footer шаблона, тут более не менее понятно, но так же сохранить стили параметры страниц документации, кто не в курсе, они выглядят как полноценная страница со стилями через style в хедере. Можно было бы закрыть глаза и кинуть их просто в корень WordPress, но требуется так же функционирующий поиск, который по этим страницам тоже будет искать, поиски по типу Google модулей выглядят не привлекательно, с точки зрения дизайна. Буду рад и благодарен за ваши советы и идеи, может кто-то уже сталкивался с подобными задачами!
Отслеживать
задан 29 авг 2018 в 9:25
23 3 3 бронзовых знака
саппорт какой то ! не ужели в русском языке нету слова которое 100% подходит ? надо или писать по английскому или писать по русскому . хэдер — шапка , саппорт — поддержка .
31 авг 2018 в 3:08
спасибо, вы очень помогли! в следующий раз напишу даже в заголовке «Страницу написанную на языкe гипертекстовой разметки перенести в СловоПрессы»
Как перенести сайт на WordPress с HTML
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.
Варианты преобразования HTML-сайта в WordPress
Есть три способа перенести HTML-сайт на WordPress:
- Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.
Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.
- Установите одну из существующих тем оформления и перенесите контент.
Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.
- Заказать веб-программисту перенос HTML-сайта на WordPress.
Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.
Подготовка к переносу HTML-сайта на WordPress
Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.
Перенос HTML-сайта вручную
Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.
Шаг 1: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
/* Theme Name: Замените этот текст именем вашей темы. Theme URI: Адрес вашей темы Description: Краткое описание. Version: 1.0 Author: Ваше имя Author URI: Адрес вашего сайта. */
После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .
Вернитесь в index.html . Выделите код разметки боковой панели (например, aside >. Скопируйте и вставьте его в файл sidebar.php .
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
Затем в самом конце index.php вставьте следующий код:
Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:
>
» rel=»bookmark» title=»Permanent Link to «>
Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс. Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Сергей Бензенко автор-переводчик статьи « Converting HTML Sites to WordPress Sites »
Преобразование 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 и css в wordpress
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.
Варианты преобразования HTML-сайта в WordPress
Есть три способа перенести HTML-сайт на WordPress:
- Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.
Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.
- Установите одну из существующих тем оформления и перенесите контент.
Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.
- Заказать веб-программисту перенос HTML-сайта на WordPress.
Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.
Подготовка к переносу HTML-сайта на WordPress
Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.
Перенос HTML-сайта вручную
Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.
Шаг 1: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .
Вернитесь в index.html . Выделите код разметки боковой панели (например, aside >. Скопируйте и вставьте его в файл sidebar.php .
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
Затем в самом конце index.php вставьте следующий код:
Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:
Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс . Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Пожалуйста, опубликуйте свои комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
Как перенести HTML сайт на WordPress
Изначально Интернет состоял сплошь из текста и статического HTML. Но время шло, технологии развивались. И сейчас очень редко можно встретить чистый статический HTML сайт. На смену статическим сайтам пришли сайты с более сложной организацией, которые обеспечивают более приятный опыт как для посетителей, так и для создателей веб-сайтов. Все это стало возможным благодаря таким проектам, как WordPress. Теперь любой, кто устанавливает WordPress, может быстро создать захватывающий веб-сайт с функциональностью, о которой не могли мечтать на заре эры Интернета.
Что же можно сделать, если у вас возникло желание перенести свой статический HTML сайт на WordPress? К счастью, есть несколько вариантов для решения этой проблемы.
Три способа перенести HTML-сайт на WordPress
1. Создание вручную сайта на WordPress на основе статического HTML сайта
В зависимости от вашего уровня знаний в области кодирования, это может быть простой или сложной задачей. Идея состоит в том, чтобы взять код, который у вас уже есть, и использовать его в качестве основы при создании файлов темы WordPress. Вам понадобится немного опыта в области PHP, CSS и HTML. Но, в конце концов, вы будете много копировать и вставлять.Плюс этого подхода заключается в том, что у вас будет тема WordPress, похожая на ваш оригинальный сайт. Минусом является то, что у вас не будет гибкости WordPress, которая позволяет использовать виджеты и редактировать свой сайт из админ панели WordPress.
2. Взять готовую тему WordPress, а затем перенесите в нее свой контент
WordPress имеет так много готовых тем, что вы, скорее всего, найдете ту, которая будет похожа на ваш сайт. Вы можете просто настроить ее так, чтобы дизайн и внешний вид напоминали ваш старый сайт. Если вы сделаете это, у вас будет полный доступ ко всем функциям WordPress. В будущем вы сможете расширить существующую тему, используя лучшее из того, что может предложить WordPress.3. Нанять специалиста, чтобы он сделать все для вас
Преимущество этого варианта в том, что он самый простой в нашем списке. В зависимости от вашего бюджета, вы можете найти кого-то, кто имеет опыт миграции сайтов с HTML на WordPress, чтобы он все сделал за вас. Недостатком этого способа является то, что вы упускаете возможность почувствовать, как работает WordPress. Как только вы поймете, как работает WordPress, вы сможете самостоятельно вносить любые коррективы.Как вручную создать сайт на WordPress на основе статического HTML
Начните с создания папки темы с основными файлами. Это очень похоже на создание каталога на вашем компьютере, поэтому вы можете выбрать любое имя, какое захотите. Затем используйте редактор кода для создания текстовых файлов. Они должны иметь следующие имена:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
К ним мы вернемся через несколько минут.
Затем скопируйте ваш существующий CSS в таблицу стилей WordPress.
Это файл style.css, который вы создали ранее. Здесь вам сначала нужно будет записать следующую информацию:
- Author — Ваше имя
- Theme Name — Название вашей темы
- Description — Краткое описание вашей темы
- Author URI — Ссылка на вашу домашнюю страницу
После этого служебного заголовка вставьте стили CSS из вашего исходного статического HTML сайта. Сохраните изменения.
Прежде чем приступить к следующему шагу, будет полезно немного разобраться, как работает WordPress. WordPress использует PHP, когда вызывает и извлекает данные из базы данных. Файлы, которые вы создаете, указывают WordPress, где будет отображаться каждый фрагмент контента. На этом этапе вы в основном будете копировать созданный вами HTML код и вставлять его в разные файлы, чтобы WordPress знал, куда их выводить.
Начнем с файла index.html. Ваша задача — скопировать части вашего index.html и вставить их в соответствующий файл темы. Когда копирование будет закончено, сохраните все.
- От начала файла до тега div в файл header.php
- Все внутри тега aside , включая сам тег, в файл sidebar.php
- Все после боковой панели в файл footer.php
- Вся остальная информация, оставшаяся в файле index.html, копируется в файл index.php
Закройте файл index.html.
Теперь, финальная доработка файла index.php.
В самом начале файла добавьте строку . Затем, внизу файла поместите код .
И последнее, что нужно сделать, это организовать цикл. Это то, что WordPress будет использовать для отображения контента для посетителей вашего сайта. Добавьте следующий код:
Сохраните файл index.php и закройте его.
Наконец пришло время загрузить вашу новую тему. Это означает, что вы должны взять все файлы темы, которые вы сохранили в папке вашей темы, и подключить ее к WordPress. Сделать это можно, скопировав папку папку темы в директорию /wp-content/themes/. Затем нужно перейти в раздел Внешний вид > Темы и активировать вашу новую тему. Теперь вам осталось только добавить контент старого сайта.
Что-то все это для меня слишком сложно!
Если вам все вышесказанное кажется слишком сложным, то мы рекомендуем использовать два других способа перевода HTML сайта на WordPress, о которых мы говорили в начале статьи. А именно найти уже готовую тему WordPress наиболее подходящую для вашего сайта и использовать ее, либо же обратиться к специалисту, который все сделает за вас.
Очень скоро вы вольетесь в ряды миллионов пользователей, которые попробовав один раз WordPress уже никогда не захотят вернуться к старым способам создания сайтов. У WordPress множество разнообразных тем, плагинов и ресурсов. А многочисленное и дружелюбное сообщество охотно поделится с вами секретами и приемами, и поможет решить любую проблему.
Как перенести HTML сайт на WordPress?
Не думаем, что подлежит оспариванию факт огромной популярности WordPress – веб-ресурсов, работающих на этой платформе громадное число и в буржнете, и в рунете. Проекты, которые были созданы на менее популярных движках или HTML постепенно переносятся на этот движок. С другими CMS все более просто – они используют шаблоны, которые можно конвертировать для требуемой системы – перенести же HTML сайт на WordPress немного сложнее.
Подготовительная работа
Обязательное требование для специалистов всех уровней – создать резервную копию. Это поможет сохранить работоспособную версию при ошибочных действиях, сравнивать детали во время корректировки файлов. Отмечается весь имеющийся функционал, формы, дополнительные модули – это необходимо для дальнейшей установки в административной консоли. Плагины подбираются на начальном этапе.
- необходимо провести изучение всех элементов сайта, оценить имеющуюся навигацию для дальнейшего дублирования на новой платформе;
- проверить контент, сделать аудит и выявить некачественные материалы;
- выявить все недочеты, которые тормозили работу текущего ресурса или негативно влияли на его продвижение;
- познакомиться с системой WordPress, если нет опыта работы с ней.
Установка WordPress
Все операции рекомендуется проводить на локальном сервере: это обеспечит беспрерывную работу площадки на хостинге, пока проходит конвертация всех элементов. Можно использовать популярную программу Open Server, которая имеет все необходимые инструменты для создания веб-ресурса, базы данных, работы с консолью и конверторами. Такая схема позволит безопасно перенести HTML сайт на WordPress.
На официальной страницу скачиваем движок, распаковываем и загружаем в «/domains/newsite», размещенную в директории программы Open Server. В контекстном меню, заходим в PhpMyAdmin для создания базы данных и пользователя. Вводиться логин – root, пароль отсутствует. Вход в интерфейс выполнен, необходимо перейти во вкладку «Пользователи» и добавить нового. Заполняются все необходимые поля, параметры входа и привилегии (устанавливаются все галочки).
После этого, информация базы данных переносится в соответствующие строки кода файла «wp-config-sample.php» корневой папки движка. Информация внесена, файл сохраняется и переименовывается в «wp-config.php». Далее осуществляется установка CMS: в браузере вводиться название локального домена – «newsite». Загрузиться скрипт установки платформы – все данные заполняются и подтверждаются. Все готово, для входа в консоль следует перейти по ссылке: «newsite/wp-login.php».
Тема и плагины
Текущий этап подразумевает установку и настройку всех необходимых плагинов, чтобы комфортно перенести HTML сайт на WordPress. Основные категории требуемых модулей:
- имеющиеся формы могут некорректно перекочевать на платформу, лучше создать новые при помощи плагина Contact Form 7 или Gravity Forms;
- при использовании всех необходимых SEO-данных в старой версии ресурса, их необходимо перенести, используя Yoast SEO или All in One SEO Pack. Во время переноса контента заполняются мета-теги и параметры оптимизации;
- если предыдущий ресурс использовал несколько языковых версий, следует воспользоваться специализированными плагинами, к примеру, WPML;
- поскольку CMS больше загружают сервер, нежели HTML – обязательно устанавливаются плагины кеширования и оптимизации медиафайлов WP Total Cache и Image Optimizer.
Касаемо темы – поиск следует начать с момента возникновения идеи переноса. Нужно подобрать максимально близкий по структуре, внешнему виду и необходимым функциям шаблон. Это облегчит дальнейшую конвертацию.
Перенос контента
Существует несколько методов, позволяющих импортировать материалы сайта. Самый простой, который в большей части подходит для небольших проектов – перенос контента вручную, скопировав HTML код статьи в редактор WordPress, добавляя SEO-данные в виджете соответствующего плагина. Такой способ может создать некоторые ошибки с отображением. Для исправления этого, рекомендуется применять пользовательские стили, вписав их в шаблон.
Как перенести HTML сайт на WordPress при большом количестве материала? Можно воспользоваться плагином HTML Import 2( к плагину-HTML Import 2) или Import HTML Pages. В их возможности входит импорт контента с элементами форматирования. Адаптация оформления на низком уровне. Поэтому все правки осуществляются вручную.
Стоит отметить, что автоматический перенос материалов не совершенен, он позволяет сократить рутинную работу, но требует доработок по отображению данных. Третий вариант – предоставить работу специалисту, который имеет соответствующие средства и навыки по конвертации сайта на CMS.
Конвертация дизайна
Имеется несколько вариантов действий в такой ситуации. Наиболее простой заключается в создании нового шаблона, а не использование оформления с HTML версии. Этот способ подходит для проектов, в которых нужно кардинально менять внешний вид всех элементов и это не отразиться на поведении пользователей. Чаще всего данный метод выбирается вебмастерами малопосещаемых площадок.
Имеется несколько вариантов действий в такой ситуации. Наиболее простой заключается в создании нового шаблона, а не использование оформления с HTML версии. Этот способ подходит для проектов, в которых нужно кардинально менять внешний вид всех элементов и это не отразиться на поведении пользователей. Чаще всего данный метод выбирается вебмастерами малопосещаемых площадок.
Если аудитория сайта достаточно большая и постоянная (привыкла к оформлению), тогда придется серьезно поработать над конвертированием дизайна с HTML-страницы в шаблон движка. Можно воспользоваться сервисом Theme Matcher, который на основе старого макета сгенерирует файл темы для WordPress. Обычно результаты весьма удачны, требуются лишь незначительные доработки – но задача сохранения общей концепции и внешнего вида проекта выполнена.
Еще один способ – создание новой темы и работа с исходным кодом. В этом случае проводится детализированная обработка каждого элемента темы и исходного дизайна в HTML. Для проведения качественной работы нужны специальные знания. В ином случае необходимо воспользоваться услугами профессионалов (студий дизайна, фрилансеров).
C localhost на хостинг
Перенос HTML сайта на WordPress осуществлялся через локальный сервер, соответственно готовую площадку со всеми изменениями следует перенести на хостинг, где расположена HTML версия. В качестве примера будет использоваться cPanel и PhpMyAdmin.
Для начала, экспортируем базу данных на хостинг. Поскольку используется Open Server, в браузере переходим по следующей ссылке http://127.0.0.1/openserver/phpmyadmin , открывается интерфейс работы с базами данных. Переходим во вкладку «Экспорт» и выбираем файл, с именем, которое указывалось в «wp-config.php» при создании сайта. Вводятся все необходимые параметры:
- Шаблон имени – @DATABASE@;
- Кодировка – UTF8;
- Сжатие – gzip.
После этого, с localhost копируем основную директорию, где находится новый вариант сайта и помещаем в архив. В панели хостинга необходимо создать базу данных. Указываются только надежные имя пользователя и пароль, отмечаются галочкой необходимые права и привилегии.
Используя PhpMyAdmin на хостинге, импортируется база данных, сохраненная с локального сервера. Пункт «Do not use AUTO_INCREMENT for zero values» должен быть отмечен. После этого проводится разархивация новых файлов в основную директорию сервера, чтобы площадка открывалась после ввода доменного имени в адресной строке.
Важно: непосредственно перед копированием новых файлов, следует удалить старые данные HTML-сайта.
Следующий этап: редактирование файла «wp-config.php». В него записываются новые данные пользователя и базы данных. Для констант WP_SITEURL и WP_HOME прописывается доменное имя.
Проверка сайта
Перенос HTML сайт на WordPress закончен и необходимо протестировать все элементы. Прежде всего проверяются элементы оформления, ошибки отображения контента, работоспособность кнопок и модулей. Необходимо убедиться в работоспособности всех ссылок, временные убрать. Плагин Broken Link Checker (к плагину-Broken Link Checker) поможет справиться с проверкой на крупных сайтах, насчитывающих сотни статей.
Заключение
Прежде чем заняться переносом, следует взвесить все за и против. Рекомендуется заранее подобрать необходимые темы, плагины и сервисы, а не уже по факту работы. При отсутствии возможности самостоятельной работы над проектом, следует обратиться в специализированные агентства или к фрилансерам. В любом случае, перед началом работ сделайте резервную копию исходных файлов площадки.
Как перенести 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-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги , все, что находится выше или ниже — техническая часть, которая для 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 и др.!
В целом, задача переноса сайта посильна для опытного пользователя ПК, имеющего некоторый опыт в кодинге. Спасают плагины. Полностью ручной перенос под силу только опытным специалистам.
Похожие публикации:
- Как оптимизировать css код
- Как отключить горизонтальную прокрутку css
- Что выбрать arduino или raspberry
- Что лучше css v34 или css v91