Меню Рубрики

Установка html сайта на wordpress

Преобразование HTML-сайтов в WordPress

Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.

На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как преобразовать действующий HTML-сайт в WordPress. К счастью, 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: Создание папки с новой темой и необходимых файлов

Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:

Шаг 2: Скопируйте существующий CSS- код в новый файл стилей

Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.

После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.

Шаг 3: Выделите ваш текущий HTML-код

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

Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .

Вернитесь в index.html . Выделите код разметки боковой панели (например, as >. Скопируйте и вставьте его в файл 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.

Данная публикация представляет собой перевод статьи « Converting HTML Sites to WordPress Sites » , подготовленной дружной командой проекта Интернет-технологии.ру

источник

Как перенести 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-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги

Читайте также:  Установка ibox для душа

источник

Из HTML в WordPress за 10 минут

Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут. На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.

Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:

Заходим в админ. панель WordPress

Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин. Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-contentthemes и создаем папку с названием нашей новой темы «truestory»

Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.

Открываем файл header.php в стандартной теме WordPress ➜ «twentyfifteen» и смотрим, как там всё устроено. Правим по аналогии файл header.php из нашей темы, копируем в неё стандартные php вставки, вплоть до вставок wp_head и body_class. Пути к стилям тоже не забываем подправить. Что касается картинки логотипа, то её путь мы сейчас не можем вывести динамично, так как у нас ещё нет таких настроек в админке WP. Давайте исправим эту ситуацию прямо сейчас.

В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:

Дальше нам надо активировать саму тему, но сейчас она попросту не обнаруживается WP в разделе «Внешний вид». Чтобы это исправить создаем файлик style.css в корне нашей темы и вписываем туда простой css комментарий вот такого вида:

Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.

В файле header.php можно вывести логотип вот таким образом:

Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.

Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.

Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.

Выносим структуру статей в файл content.php и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen». Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет, поэтому копируйте код ниже.

Вывод списка категорий на WordPress:

Вывод даты публикации на WordPress:

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

В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:

Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.

На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.

Для наглядности посмотрите видео версию урока от «Хауди Хо»

источник

High Star

Уроки веб-мастеру

Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

Как перевести обычный статичный сайт html на вордпресс

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

Сейчас, с появлением 3-й версии, WordPress превратился в полнофункциональную CMS, на базе которой можно строить практически любые сайты. Но как перевести обычный сайт на платформу WordPress? Этой теме будет посвящена серия наших статей.

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

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

Читайте также:  Установка cisco eap fast

Нелишним также будет составить список (хотя бы с использованием Excel) всех страниц Вашего сайта вместе с их адресами (URL). В дальнейшем этот список будет полезен Вам, когда Вы станете устанавливать редирект старых адресов на новые.

Установка WordPress

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

Желательно сразу брать русскоязычный вариант установочной версии. Раньше я для этой цели часто пользовался инсталляционными версиями от Lecactus’а. Однако, похоже, что с появлением версии 3.0 WordPress, работы по русификации Lecactus’а прекратились. Во всяком случае, мне таковые неизвестны. Поэтому берем файлы WordPress на сайте ru.wordpress.org. Естественно, следует использовать последний имеющийся вариант.

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

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

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

После установки

Сразу после того, как Вы установили WordPress, надо временно «скрыть» его как от посетителей сайта, так и от роботов поисковых машин.

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

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

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

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

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

Начинаем переносить контент

Итак, что мы имеем теперь? Создан сайт WordPress, пока еще пустой. В качестве темы (шаблона) этого сайта действует новая стандартная тема WordPress, Twenty Ten.

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

А можно перенести свой прошлый дизайн сайта на новую платформу, создав для этого новую тему. Этот путь более трудный, но он предпочтителен в том случае, если Ваш сайт уже хорошо известен, и люди узнают его по внешнему виду. Как это сделать, мы будем подробно говорить в дальнейшем.

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

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

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

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

Если страниц очень много, то есть способ облегчить, то есть автоматизировать, задачу. Для этого существует плагин (модуль расширения) WordPress под названием import-html-pages. Для того чтобы использовать этот плагин, требуется наличие PHP 5 на Вашем хостинге. Необходимо установить и активировать этот плагин. Затем зайти в его настройки и установить требуемые значения параметров. После чего нажимаем на Import using these options. Плагин автоматически формирует новые страницы и переносит туда контент.

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

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

Теперь информация из действующего сайта перенесена в новый сайт. Но работа над дизайном только начинается. О ней мы подробно поговорим в следующих статьях цикла.

источник

Добавить комментарий