Как установить html шаблон на wordpress

Как перенести HTML-код на WordPress: пошаговая инструкция с советами

Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.

Варианты переноса HTML-сайта на WordPress

Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:

1. Переносить вручную. На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
2. Приобрести готовую тему. Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
3. Заказать перенос. Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.

Пример редактора тем в WordPress

Подробно будет рассмотрен только первый вариант.

Установка WordPress

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

1. Скачайте архив с дистрибутивом WordPress с официального сайта.
2. Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
3. Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
4. Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
5. Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
6. Перейдите в любом браузере по ссылке 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-код выглядит так:

Теперь осталось только доделать мелкие детали, например, переподключить сторонние файлы, что-то подправить, если верстка в итоге съехала и можно сохранять файл. На этом создание темы для WordPress завершено.

Этап 5: Добавление темы в WordPress

Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта. Теперь останется только выбрать загруженную тему в панели управления:

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

2. Переключитесь во вкладку “Внешний вид” в левом меню.

3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.

Переход к разделу с темами

4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.

Загрузка готовой темы через WordPress

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

Заключение

Преобразовать готовую верстку в полноценный HTML-шаблон несложно, но важно потом проверить код и саму тему на корректность работы. Наиболее “уязвимыми” местами являются адреса для привязки файлов, так как они могут быть изменены при преобразовании верстки в полноценную тему, следовательно, разработчику придется менять адреса на корректные. Также из-за добавления постороннего кода в index-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.

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

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

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

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

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

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-content ➜ themes и создаем папку с названием нашей новой темы «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 код:

if( !defined('FM') ) die('Silence is golden'); $options = array( 'logo_image' => array( 'type' => 'upload', 'label' => __('Logo','truestory'), 'images_only' => true ) );

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

/* Theme Name: True Story */

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

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

echo fw_get_db_settings_option('logo-image')['url'];

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

register_nav_menus(array( 'primary' => __('Primary Menu', 'truestory') )); add_theme_support('post-thumbnails'); set_post_thumbnail_size(360, 500, true);

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

wp_nav_menu( array( 'theme_location' => 'social', 'depth' => 1, 'link_before' => '', 'link_after' => '', ) );

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

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

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

‘; wp_list_categories( $args ); echo ‘

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

the_date();

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

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

get_footer();

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

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

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

Заказать натяжку сайта на WordPress

Как натянуть свой шаблон на WordPress движок?

Добрый день, друзья!
У меня появилась задача с которой мне сложно справится одному, поэтому я вынужден просить вашей помощи. Задача следующая: натянуть свой шаблон сайта на движок WordPress так, чтобы можно было управлять содержимым из админ панели WordPress (у меня конечно же есть HTML разметка и таблица стилей CSS). Подскажите пожалуйста как это лучше всего сделать. Мне приходила в голову мысль, что можно разбить общий шаблон контента на плагины. Но опять же таки как это сделать, и где регистрировать эти плагины? Надеюсь на вашу помощь!

• Вопрос задан более трёх лет назад
• 102500 просмотров

Комментировать
Решения вопроса 2

Лучше всего посмотреть видеоуроки по адаптации чистого HTML/CSS для WordPress. Вот сам учился на этом уроке: https://www.youtube.com/playlist?list=PLzi5JvpYf_h.

UPD: текстовая статья на Хабре habrahabr.ru/post/228523

Как натянуть html шаблон на WordPress на примере

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

Алгоритм установки любого html шаблона на WordPress

1. Устанавливаем CMS WordPress на локальный хостинг.
2. Скачиваем пустую тему
3. Скачиваем html-шаблон
4. Устанавливаем пустую тему
5. Переносим содержимое html-шаблона: стили, скрипты, картинки в папку с пустой темой
6. Создаем каркасы страниц
7. Задаем пути для стилей, картинок, скриптов
8. Настраиваем файлы темы WordPress
9. Заменяем статический контент на динамический

Вот 9 шагов, следую которым можно установить любой html-шаблон

Установка CMS WordPress на локальный хостинг

Рекомендую в качестве локального хостинга использовать Open server. Преимущество локального хостинга в скорости и удобстве работы над сайтом. Скачать последнюю версию можно с официального сайта. На момент написания этой статьи доступна версия 5.3.7, которая весит 835 Мб. Итак, скачиваем файл установки, распаковываем и устанавливаем.

Производим установку WordPress на OpenServer:

1. В папке на компьютере \OpenServer\domains\ создаем папку с доменом (в моем случае папка будет называться setup).
2. Распаковываем содержимое CMS WordPress в только что созданную папку \OpenServer\domains\setup
3. Создаем домен для нашего проекта, для этого в программе Openserver переходим Меню -> Настройки -> Домены. Далее выбираете из выпадающего списка УПРАВЛЕНИЕ ДОМЕНАМИ пункт РУЧНОЕ УПРАВЛЕНИЕ. Вводите имя домена (в моем случае setup) и указываете папку setup и нажимаете кнопку ДОБАВИТЬ и затем кнопку СОХРАНИТЬ
4. Создаем базу данных, для этого открываем Дополнительно -> PhpMyAdmin. Далее в открывшемся окне вводим имя пользователя root и пароль root и создаем базу данных.
5. Вводим в браузере адрес http://setup и производим установку CMS WordPress

Эта была приведена краткая инструкция по установке wordpress на openserver. Подробную инструкцию читайте здесь.

Скачиваем пустую тему для WordPress

Для создания пустых тем я использую сервис Underscores (Андерскорс), который позволяет создавать стартовую тему. Сама тема не имеет никакого дизайна, но обладает рядом преимуществ:

• в тему включены все теги и функции
• минимальный набор CSS
• поддержка виджетов, меню

Для того, чтобы создать пустую тему переходим по ссылке, вводим в окне название нашего будущего шаблона (в моем случае тема будет называться setup) и нажимаем кнопку GENERATE. После этого сохраняем архив с темой на компьютер.

Скачиваем html-шаблон

Есть много сайтов, где представлены красивые и бесплатные html шаблоны. В моем случае я буду использовать бесплатный и простой шаблон Freelancer, скачать который по ссылке

Установка пустой (стартовой) темы на WordPress

После того как мы установили WordPress на хостинг, переходим к установке стартовой темы на сайт. Для этого заходим в админку сайта, выбираем вкладку ВНЕШНИЙ ВИД -> ТЕМЫ и нажимаем кнопку ДОБАВИТЬ. Затем в открывшемся окне нажимаем кнопку ЗАГРУЗИТЬ ТЕМУ, выбираем файл и жмем кнопку УСТАНОВИТЬ. Через некоторое время тема будет установлена. После установки вышеуказанной темы нажимаем кнопку АКТИВИРОВАТЬ. После активации темы переходим на наш сайт и смотрим. Вот что получилось.

Копирование html шаблона в папку с темой WordPress

1. Теперь открываем наш html шаблон и копируем файлы в папку с темой wordpress.
2. Производим настройку WordPress. Для этого открываем в админке НАСТРОЙКИ ->ЧТЕНИЕ и выбираем НА ГЛАВНОЙ СТРАНИЦЕ ОТОБРАЖАТЬ СТАТИЧЕСКУЮ СТРАНИЦУ И выбираем ПРИМЕР СТРАНИЦЫ.
3. Открываем в редакторе Sublime файл index.html нашего шаблона. Выделяем весь код и копируем его в файл page.php нашей темы и сохраняем. Переносим папку с нашей темой на wordpress в редактор Sublime. Переходим на свой сайт и смотрим что получилось.

На сегодня все. В следующих статьях мы дальше пойдем по алгоритму и продолжим интеграцию html шаблона на WordPress.