Постановка задачи — перенос шаблона на WordPress

Допустим, мы скачали или написали произвольный шаблон сайта. Со своими стилями, div’ами и прочим. Несомненно, добавлять или обновлять на таком сайте контент, как минимум, неудобно. Как максимум, пользователь должен обладать хотя бы начальными знаниями в HTML. Поэтому решено использовать систему управления контентом — WordPress — самую популярную CMS в мире и простую для понимания.

Подготовка необходимых компонентов

Для реализации поставленной задачи нам необходим Веб-сервер. Рекомендую OpenServer — он легок в установке и поддерживает множество функций из коробки, вплоть до программ необходимых для редактирования.

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

Перенос HTML на WordPress

 

Перезапускаем сервер из трея и проверяем — на сайт должен быть доступен по адресу http://test/. Пока в папке пусто, видим следующую картину

Tets OpenServer

С официального сайта WordPress скачиваем последнюю версию версию движка и распаковываем ее в нашу папку test.

Перед запуском также нам необходимо создать БД MySQL для движка. Делается это опять же через управление OpenServer в трее, через тот же MyAdmin. Пароль по-умолчанию пустой, пользователь root.

Итак, WordPress распакован, БД создана. Можно приступать к установке — заходим на наш сайт (http://test/)

WP установка

Указываем название сайта, параметры подключения к БД (127.0.0.1 root пустой пароль) и учетные данные админа.

Wordpress демоВсе. Движок установлен, сайт настроен. На этом подготовительный этап можно считать оконченным.

Основной этап — установка HTML шаблона сверху движка WordPress

Думаю, шаблон HTML Вы уже подготовили.  Для примера я взял шаблон от Quackit.com, скачать его можно по этой ссылке.

Наш HTML шаблон условно делим на следующие блоки : верхнее меню, правый столбец (сайдбар), левый сайдбар и футер.

 

Wordpress блоки шаблона

 

Добавление темы из шаблона HTML в движок

В папке тем нашего сайта ( \wp-content\themes ) , создаем новую тему , я назвал ее test и копируем туда содержимое нашего шаблона.

Worpdpress создать тему

 

Чтобы тема заработала нам необходимо

    1. Файл стилей custom.css из папки css темы переместить в корень темы и переименовать его в style.css
    2. В начало файла style.css добавляем служебные строки с именем темы, ее автором и ссылками
    3. Главный файл темы index.html переименовываем в index.php.
    4. Чтобы наш шаблон увидел таблицы стилей, ищем в нем  строку

      и меняем ее на

Заходим в админку и проверяем:

 

Wordpress тема подключить HTML

 

Но, активировав тему мы увидим что сайт не подтягивает остальные стили и js скрипты. Для этого открываем index.php и перед путями добавляем

Вот так выглядит конец файла:

Функция 

выводит  путь до корня текущего шаблона

Если сделали все правильно, то по адресу http://test у Вас уже будет открываться Ваш шаблон.

Создаем файл шапки — header.php

В корне сайта создаем новый файл header.php  — и переносим в него из файла index.php следующий код:

На место кода в index.php , который мы перенесли в header.php, вставляем строку:

Делаем динамический титл:

Меняем на:

И добавляем функцию wp_head(); — она служит для подключения плагинов к сайту

Меняем строку вывода названия сайта  с

На:

Создаем файл подвала- footer.php

По аналогии  с header.php создаем файл footer.php и вставляем в него содержимое из index.php

Перед тегом </body> вставим хук WordPress для вывода плагинов:

 

В конец файла index.php вместо вырезанного кода футера добавляем:

 

Выводим динамические записи блога

Сейчас для того чтобы вывести список наших записей, мы в файле index.php удаляем код — он выводил статические записи:

И на его место вставляем :

Вот что получилось :


 

Wordpress вывод записей

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

comments powered by HyperComments
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...