Прочитав серию моих статей о верстке для WordPress, вы сможете натянуть любой html-шаблон на WordPress самостоятельно. Всю работу я буду проводить на примере. Кроме того, мы рассмотрим как подключить html шаблон к админке WordPress, чтобы оперативно вносить изменения в содержимое шаблона. Весь курс будет состоять из нескольких статей, где я подробно по шагам и с примерами описываю весь процесс установки html-сайта на CMS. Если Вы хотите научиться устанавливать любые html шаблоны, то следуйте моим инструкциям.
Алгоритм установки любого html шаблона на WordPress
- Устанавливаем CMS WordPress на локальный хостинг.
- Скачиваем пустую тему
- Скачиваем html-шаблон
- Устанавливаем пустую тему
- Переносим содержимое html-шаблона: стили, скрипты, картинки в папку с пустой темой
- Создаем каркасы страниц
- Задаем пути для стилей, картинок, скриптов
- Настраиваем файлы темы WordPress
- Заменяем статический контент на динамический
Вот 9 шагов, следую которым можно установить любой html-шаблон
Установка CMS WordPress на локальный хостинг
Рекомендую в качестве локального хостинга использовать Open server. Преимущество локального хостинга в скорости и удобстве работы над сайтом. Скачать последнюю версию можно с официального сайта. На момент написания этой статьи доступна версия 5.3.7, которая весит 835 Мб. Итак, скачиваем файл установки, распаковываем и устанавливаем.
Производим установку WordPress на OpenServer:
- В папке на компьютере \OpenServer\domains\ создаем папку с доменом (в моем случае папка будет называться setup).
- Распаковываем содержимое CMS WordPress в только что созданную папку \OpenServer\domains\setup
- Создаем домен для нашего проекта, для этого в программе Openserver переходим Меню -> Настройки -> Домены. Далее выбираете из выпадающего списка УПРАВЛЕНИЕ ДОМЕНАМИ пункт РУЧНОЕ УПРАВЛЕНИЕ. Вводите имя домена (в моем случае setup) и указываете папку setup и нажимаете кнопку ДОБАВИТЬ и затем кнопку СОХРАНИТЬ
- Создаем базу данных, для этого открываем Дополнительно -> PhpMyAdmin. Далее в открывшемся окне вводим имя пользователя root и пароль root и создаем базу данных.
- Вводим в браузере адрес http://setup и производим установку CMS WordPress
Эта была приведена краткая инструкция по установке wordpress на openserver. Подробную инструкцию читайте здесь.
Скачиваем пустую тему для WordPress
Для создания пустых тем я использую сервис Underscores (Андерскорс), который позволяет создавать стартовую тему. Сама тема не имеет никакого дизайна, но обладает рядом преимуществ:
- в тему включены все теги и функции
- минимальный набор CSS
- поддержка виджетов, меню
Для того, чтобы создать пустую тему переходим по ссылке, вводим в окне название нашего будущего шаблона (в моем случае тема будет называться setup) и нажимаем кнопку GENERATE. После этого сохраняем архив с темой на компьютер.
Скачиваем html-шаблон
Есть много сайтов, где представлены красивые и бесплатные html шаблоны. В моем случае я буду использовать бесплатный и простой шаблон Freelancer, скачать который по ссылке
Установка пустой (стартовой) темы на WordPress
После того как мы установили WordPress на хостинг, переходим к установке стартовой темы на сайт. Для этого заходим в админку сайта, выбираем вкладку ВНЕШНИЙ ВИД -> ТЕМЫ и нажимаем кнопку ДОБАВИТЬ. Затем в открывшемся окне нажимаем кнопку ЗАГРУЗИТЬ ТЕМУ, выбираем файл и жмем кнопку УСТАНОВИТЬ. Через некоторое время тема будет установлена. После установки вышеуказанной темы нажимаем кнопку АКТИВИРОВАТЬ. После активации темы переходим на наш сайт и смотрим. Вот что получилось.
Копирование html шаблона в папку с темой WordPress
- Теперь открываем наш html шаблон и копируем файлы в папку с темой wordpress.
- Производим настройку WordPress. Для этого открываем в админке НАСТРОЙКИ ->ЧТЕНИЕ и выбираем НА ГЛАВНОЙ СТРАНИЦЕ ОТОБРАЖАТЬ СТАТИЧЕСКУЮ СТРАНИЦУ И выбираем ПРИМЕР СТРАНИЦЫ.
- Открываем в редакторе Sublime файл index.html нашего шаблона. Выделяем весь код и копируем его в файл page.php нашей темы и сохраняем. Переносим папку с нашей темой на wordpress в редактор Sublime. Переходим на свой сайт и смотрим что получилось.
На сегодня все. В следующих статьях мы дальше пойдем по алгоритму и продолжим интеграцию html шаблона на WordPress.
Приветствую. Написал недавно мини руководство о том, как конвертировать Html шаблон в рабочую тему движка По сути, ничего сложного. Создаем динамическое меню, сайдбар и вывод записей. Остальное можно дорабатывать по необходимости.
Добрый день, друзья! У меня появилась задача с которой мне сложно справится одному, поэтому я вынужден просить вашей помощи. Задача следующая: натянуть свой шаблон сайта на движок WordPress так, чтобы можно было управлять содержимым из админ панели WordPress (у меня конечно же есть HTML разметка и таблица стилей CSS). Подскажите пожалуйста как это лучше всего сделать. Мне приходила в голову мысль, что можно разбить общий шаблон контента на плагины. Но опять же таки как это сделать, и где регистрировать эти плагины? Надеюсь на вашу помощь!
Читайте мой сайт и со временем вы найдете ответы на все ваши впоросы