Как сделать из wordpress html
Обновлено: 07.07.2024
Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.
Варианты переноса HTML-сайта на WordPress
Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:
- Переносить вручную. На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
- Приобрести готовую тему. Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
- Заказать перенос. Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.
Пример редактора тем в WordPress
Подробно будет рассмотрен только первый вариант.
Установка WordPress
Вне зависимости от выбранного варианта вам придется изначально выполнить установку WordPress. Если он уже установлен, то пропускайте этот этап. Рассмотрим процесс установки вкратце:
- Скачайте архив с дистрибутивом WordPress с официального сайта.
- Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
- Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
- Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
- Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
- Перейдите в любом браузере по ссылке wp-admin/install.php для доступа к админки вашего сайта. Там вам придется указать имя пользователя и пароль.
Добавление информации для доступа к админ-панели
Перенос готового HTML-шаблона на WordPress
Если вам нужно перенести не только контент сайта, но и его дизайн, то придется создавать тему. Для этого потребуется не только доступ ко всем файлам сайта, но и удобный редактор кода, например VisualStudio Code или другой похожий. Далее разделим для удобства весь процесс на несколько этапов.
Этап 1: Создание файлов темы
Создайте на компьютере отдельную папку, где будет хранится информация о вашей теме. Эту папку нужно открыть в выбранном для работы редакторе кода. Создавать в ней новые файлы рекомендуется как раз через редактор кода. В Visual Studio Code это можно сделать. Создайте файлы со следующими наименованиями:
- style.css;
- index.php;
- header.php;
- sidebar.php;
- footer.php.
Базовая файловая структура для темы
Пока вы только создали структуру. Представленные файлы придется правильно заполнить, чтобы WordPress распознал вашу тему.
Этап 2: Прописывание стилей
Для начала вам придется отредактировать файл style.css. В него, в самом начале пропишите этот код:
После этого кода вставьте основные стили вашего сайта. Они должны быть записаны в файлу style.css или main.css, который находится в директории сайта. Просто откройте данный файл и скопируйте все его содержимое. Затем переключитесь на файл style.css, который расположен в корневой папке темы и вставьте туда CSS-код после вводных данных, которые были прописаны ранее.
Этап 3: Перенос HTML-кода
На этом этапе нужно перенести данные из файла index.html в index.php. Ничего страшного, что верстка будет в PHP-файле. Он умеет корректно обрабатывать HTML. Это необходимо из-за особенностей WordPress, так как HTML-файлы он воспринимает не очень хорошо, поэтому все ключевые элементы сайта желательно прописывать в PHP-файлах, пускай PHP-кода там почти и нет.
Откройте header.php. В него из главного HTML-файла сайта скопируйте отрывок, который отвечает за функционирование меню и всей верхней части сайта. Аналогичную операцию нужно провести для файла sidebar.php, но только скопировать и вставить код боковой панели или панелей. В случае с файлом footer.php нужно скопировать и вставить часть отвечающую за подвал сайта.
Все, что осталось в index.html копируйте в index.php. Не нужно копировать данные о шапке, боковых меню и футере, так как они уже добавлены в отдельный файл.
Этап 4: Инициализация index.php
В качестве завершающего этапа настройки темы нужно провести инициализацию файла index.php. Перед началом основного HTML-кода вставьте строку:
Она необходима для подключения файла header.php. В скобках пропишите путь до объекта. По аналогии пропишите в самом конце HTML-разметки строки для вызова бокового меню и подвала:
В качестве завершающего этапа нужно настроить вывод новых статей и других важных новостей ресурса на главной странице сайта. Код нужно добавить в блок с контентом на главной странице. Сам PHP-код выглядит так:
Этап 5: Добавление темы в WordPress
Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта. Теперь останется только выбрать загруженную тему в панели управления:
2. Переключитесь во вкладку “Внешний вид” в левом меню.
3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.
Переход к разделу с темами
4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.
Загрузка готовой темы через 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, если Вам были понятны прошлые мои уроки, то и этот урок будет прост для Вас. Но прежде чем начать давайте перечислим те инструменты, которые нам понадобятся:
Локальный сервер
Без локального сервера на Вашем ПК ничего не получиться. Так как исправлять и редактировать наш шаблон лучше на локальном сервере чем на хостинге, так на много быстрее и удобнее.
После того как Вы установите Денвер Вам нужно будет установить сам WordPress на локальный сервер. Устанавливается не сложно, Вам всего лишь нужно скинуть файлы движка в указанную папку на ПК, и установить движёк. Подробно на этом останавливаться не буду.
Браузер Опера
После того как WordPress уже работает на Вашем компьютере, нам нужно установить, если у Вас её нет, Оперу не выше 12 версии, так как после того как Опера перешла на Вебкит, она лишилась HTML редактора, что очень плохо.
Конечно же Вы можете использовать другой редактор, просто мне удобен именно от оперы, в нём можно посмотреть сразу результат. Пока что я так и не нашёл подобных редакторов, по этому до сих пор пользуюсь этим.
И вот теперь когда у нас всё настроено и поставлено, а так же работает как часики :) мы будем заниматься самым интересным процессом, а именно вёрсткой шаблона HTML в шаблон для WordPress.
Вступление
Сейчас хочу Вам немного рассказать как в настоящее время у меня проходит процесс верстки. Так как у меня шаблонов уже несколько, я наработал некий шаблон вёрстки, по которому проходит весь процесс. Таким образом я просто меняю изображения и стили, и немного редактирую код на локальном сервере, до то желаемого результата. Надеюсь понятно объяснил.
Самый сложный был первый шаблон, в который нужно было вставлять код отдельно. Ох и намучился я. Но всё же получилось. А второй шаблон я уже делал по первому и так далее.
Файлы
Теперь нам нужно создать файлы в которые мы потом будем помещать весь код шаблона. Для начала создайте новую папку и назовите её как угодно Вам. Открываем папку и создаём ещё одну папку под названием images. В этой папке у нас будут храниться все изображения шаблона. А изображения нужно скопировать с нашего HTML шаблона в папку images будущего шаблона для WordPress.
После этого создаём следующие текстовые файлы и не забываем менять формат *txt на формат *php. Вот полный список файлов:
- archive.php
- comments.php
- footer.php
- functions.php
- header.php
- index.php
- page.php
- search.php
- sidebar.php
- single.php
И ещё не забываем создать файл style.css обратите внимание, что расширение у него должно быть именно CSS, в этом файле будут находиться все стили шаблона.
Ну а сейчас мы рассмотрим каждый файл по порядку, за что он отвечает и какой код в него мы будем вставлять.
header.php
Судя по названию ясно за что отвечает этот файл, он отвечает полностью за верхнюю часть шаблона. Код в этом файле пишется один раз, потом его не нужно писать заново, а просто можно использовать переменную в других файлах.
А вот сам код, который должен содержать этот файл:
отвечает за вывод заголовка для блога и заголовков записей которые Вы создаёте.
За вывод верхнего меню служит вот этот код:
С помощью этого кода выводится список страниц, которые созданы Вами, заметьте, не список рубрик, а именно список страниц. За вывод списка рубрик служит следующий код:
Всё, пока с этим файлом закончили, переходим к следующему.
index.php
Этот php файл отвечает за вывод записей на главной странице блога. Вот, что в него входит:
В коде я постарался описать что за код и за что он отвечает.
sidebar.php
Данный файл отвечает за вывод боковой колонки блога. Он довольно короткий, содержит код для вывода поиска и вывода виджетов, которые можно изменять из админки блога:
footer.php
С помощью этого файла мы отображаем низ сайта. В данном случае шаблон простой, по этому и кода в нём не слишком много:
single.php
Данный файл выводит саму запись созданную пользователем в админке блога, вот что в него входит:
archive.php
Этот файл отвечает за страницы рубрик, меток, а так же навигации на блоге. Например можно вывести все записи с одной рубрики, или же все записи отмеченные одной и той же меткой.
Хочу заметить, что данный файл практически ничем не отличается от index.php, только выводом названия рубрик и меток.
search.php
comments.php
Выводим комментарии на сайте
page.php
Он такой же как и single.php.
functions.php
Этот файл отвечает за вывод некоторых функций на блоге, в него можно добавлять практически любой код. Например, можно вывести хлебные крошки без плагина, просто добавить нужный код, и просто его потом использовать на любой странице сайта.
К каждому коду я оставил комментарии какой код за что отвечает.
Всё, теперь мы сделали большую часть работы, теперь нам осталось немного отредактировать стили CSS, а также добавить некоторые строчки.
Стили CSS
Берём все стили с шаблона, который мы недавно делали и копируем в файл под названием style.css.
После того как все стили были скопированы, в самом начале добавьте следующие строчки:
Эти строчки отвечают за название, описание шаблона, а так же за вывод автора, и описания автора. Обязательно добавьте эти строчки, иначе шаблон не запустится.
Теперь нам нужно немного изменить стили выпадающего меню, ищем строчку
И класс .sub_nav меняем на ul li ul в итоге вот что должно получиться:
Ну а теперь давайте я Вам представлю весь, уже готовый CSS код, который Вам нужно скопировать:
Установка шаблона
Ну а вот теперь, друзья, когда весь код уже на месте, нам нужно все файлы заархивировать. Это можно сделать с помощью любого архиватора, например, я пользуюсь WinRar.
Затем выбираем разрешение .ZIP и нажимаем OK.
Всё! Наш шаблон готов для установки! Теперь Вы его можете установить и протестировать.
Или же Вы можете посмотреть уже готовый шаблон, или скачать и посмотреть как он работает.
Друзья, если у Вас будет что то не получаться, или что то не получиться, спрашивайте в комментариях, я обязательно помогу. Спасибо.
В былые времена интернет-сайты оформлялись исключительно с помощью языка разметки HTML. Вследствие этого, все страницы имели в конце своего адреса символы “.html” (например, page-name.html). По-другому и быть не могло, так как каждая страница сайта размещалась в отдельном HTML-файле. На сегодняшний день почти нигде не встречаются такие веб-ресурсы. Сейчас существует довольно различных технологий и языков, специально разработанных для веб-разработки. Но часто некоторые пользователи все же желают вернутся в те времена и все таки добавить к страницами своих сайтов “.html”.
Следует отметить, что совсем недавно поисковые системы все же отдавали предпочтение ресурсам, в которых URL-страницы имели это окончание. На сегодняшний день это в прошлом, и в индекс тех же Гугл или Яндекс попадают сайты с самыми разнообразными адресами.
В каких случаях добавляют .html?
Обычно если владелец сайта хочет на своем сайте видеть “.html”, то исключительно для статичных страниц, информация на которых изменяется довольно редко. Например, страницы О сайте или Об авторе.
Как добавить .html к страницам WordPress?
В WordPress присутствуют инструменты, которые позволяют гибко управлять адресаций на сайте. Для этого служит админ-раздел Настройки -> Постоянные ссылки.
Способ 1. Плагин .html in url
Этот способ предусматривает установку бесплатного плагина .html in url , который без каких-либо настроек добавит к страницам Вашего WordPress-сайта необходимое окончание. Отметим, что после его активации необходимо перейти в админ-раздел Настройки -> Постоянные ссылки и нажать кнопку Сохранить изменения. Таким образом будет гарантироваться его корректная работа.
Способ 2. Вручную
Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.
Итак, в самый конец файла нужно вставить следующие строки:
После добавления кода, Вам нужно будет перейти в настройки постоянных ссылок и убедится, что они настроены нужным образом и обязательно нажать на кнопку сохранения, чтобы закрепить результат.
Все, теперь Ваши страницы имеют в конце адреса окончание .html.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Wordpress
В начале (Интернета) все веб-сайты были созданы только с текстом и статическим HTML кодом. Теперь, спустя более 20 лет, Интернет стал совсем другим. Веб-сайты стали намного сложнее. Они обеспечивают более богатые и приятные впечатления как для создателей сайтов, так и для посетителей.
Это во многом благодаря проектам с открытым исходным кодом, таким как WordPress. Который за последние десять лет или около того преуспел в своей основной миссии по демократизации онлайн-публикации и многого другого в процессе. Так что любой, у кого установлен WordPress и хорошая тема с плагинами, может иметь современный веб-сайт с продвинутым дизайном и функциональность. Никакого кодирования, даже HTML — не требуется.
Вот почему таким заядлым пользователям WordPress, как я, почти трудно поверить, что в 2022 году кто-то все еще может управлять статическим веб-сайтом HTML вместо сайта на WordPress с темой и плагинами. Но факт в том, что все еще существует значительное количество активных сайтов только на HTML либо HTML с небольшим количеством CSS.
Однако у меня такое чувство, что это может быть не основной причиной, по которой владельцы HTML сайтов не сделали этого. Самым очевидным является то, что они просто не знают, как преобразовать свой HTML сайт в WordPress. Особенно без потери контента, дизайна или необходимости чрезмерного форматирования на каждой странице.
Как это часто бывает с WordPress, есть несколько способов решить эту проблему. Ниже я собрал несколько вариантов.
Варианты преобразований статический HTML сайт в WordPress
Как вы решите преобразовать свой статический HTML сайт в WordPress, без сомнения, будет зависеть от ваших личных предпочтений, желаемых временных или денежных вложений и уровня навыков работы с кодом. Вы должны сами решить, что лучше для вас, но с приведенными ниже вариантами вы сможете быстро принять решение и сразу перейти к наиболее актуальной информации в этом статье для вашей конкретной ситуации.
Есть три основных варианта как перенести HTML сайт на WordPress:
- Вручную — создайте тему WordPress на основе вашего текущего статического HTML-сайта . Для этого вам потребуется войти в свой код. Вам нужно будет получить доступ к текущему каталогу сайта через FTP и использовать существующий код в качестве отправной точки. Оттуда вам нужно будет создать необходимые файлы для темы WordPress и скопировать фрагменты кода из кодекса WordPress. Это довольно просто и понятно, если у вас есть некоторый опыт работы с HTML, CSS и немного PHP.
- Установить готовую тему и просто перенесите свой контент . Это, наверное, лучший вариант на стыке простоты и стоимости. Предполагая, что у вас уже есть хостинг для вашего текущего веб-сайта, вам нужно будет потратить деньги, только если вы решите приобрести премиальную тему. Плагин, который мы будем использовать для импорта контента, находится в свободном доступе в официальном репозитории плагинов WordPress.
- Олатить услугу преобразования HTML в WordPress, чтобы пересоздать ваш сайт . Это самое простое решение, так как оно не требует от вас особых действий. Однако это не поможет вам познакомиться с WordPress, и стоимость будет варьироваться в зависимости от того, кого вы решите нанять. Я не буду описывать этот вариант в следующих разделах, потому что, если это интересующий вас маршрут, вы можете просто выполнить быстрый поиск поставщиков услуг, и они позаботятся обо всем остальном.
Подготовка: перенос HTML на WordPress
Независимо от того, какой маршрут вы выберете, есть несколько вещей, которые вы захотите сделать перед погружением.
Просмотреть доступные варианты и выбрать пакет, который наилучшим образом соответствует вашим потребностям. Или, может быть, вы хотите вместо этого создать локальную установку WordPress? Вы всегда можете перенести его на хостинг позже.
После того, как вы выбрали, вам нужно будет установить WordPress и войти в WP Admin. Это точка, в которой наши два возможных пути расходятся.
Перенос статического HTML-сайта в WordPress вручную
Если ваша цель — не только перенести контент со статического HTML-сайта в WordPress, но и продублировать ваш текущий дизайн, это означает, что вам нужно будет создать свою собственную тему. К счастью, это не так страшно, как может показаться сначала. Для этого нужно всего лишь создать несколько папок и файлов, немного скопировать и вставить, а затем загрузить результат.
Вам понадобится редактор кода, такой как Sublime или Notepad ++, и доступ как к каталогу вашего HTML-сайта, так и к каталогу вашей новой установки WordPress.
Шаг 1. Создайте новую папку темы и необходимые файлы
На рабочем столе создайте новую папку для хранения файлов вашей темы. Назовите его, как хотите, например myTheme.
Затем создайте несколько файлов (все они будут в папке новой темы) в редакторе кода. Пока ничего с ними не делайте. Просто оставьте их открытыми для дальнейшего редактирования.
Читайте также: