Всемирно известный и популярный фреймворк Bootstrap облегчает разработку сайтов всех уровней. Многие CMS теперь имеют базовые темы, построенные на базе bootstrap. Рассмотрим на примере создания адаптивного шаблона на WordPress, но не будем создавать сайт с нуля, а применим bootstrap. Bootstrap шаблоны wordpress позволяют сократить время на разработку сайта.
Адаптивный шаблон – это такой шаблон, который будет правильно отображаться на всех типах устройств (девайсах). На ноутбуках с разным размером экрана, на стационарных компьютерах, на нетбуках, смартфонах, планшетах и так далее. Этот тип шаблона очень актуален сегодня из-за ускоренного развития технологий и появления все новых и новых устройств.
Создаем обычную тему WordPress со стандартным набором функций. Сюда будет входить пользовательская главная страница, блоговая страница, вывод записей и комментариев, страница информации, а также динамический сайдбар. Когда работа будет завершена, можно отредактировать весь дизайн созданного макета под свои нужды.
Первый этап создания
Скачиваем и устанавливаем WordPress и Bootstrap. Далее в папке под названием wp-content\themes нужно создать еще одну папку и обозвать ее новой темой. Сюда же помещаем папку с Bootstrap, которую предварительно потребуется разархивировать. В этой папке, которая, к примеру, называется «tema», нужно создать файл index.php. И далее вся работа будет осуществляться только в папке «tema».
Шаблоны бутстрап требуют лишь минимальных знаний html кода. Поэтому основой может стать образец, предложенный на самом сайте разработчика Basic marketing site. Код не короткий, его нужно полностью скопировать и вставить в созданный ранее файл index.php.
Второй этап: создаем CSS документ
Он в обязательном порядке должен находиться в корне темы – в этом особенность WordPress. Назвать документ нужно так: style.css. Именно здесь будет располагаться информация об авторстве и версии темы. Не забываем, что все следующие папки и файлы нужно создавать именно в папке «tema».
Теперь нужно посетить нашу админ панель, перейти в дизайн и темы. Тут мы увидим созданную тему и ее нужно активировать. Но перед этим нужно создать скриншот screenshot.png . На самом начале создания bootstrap шаблоны wordpress можно взять образец с сайта разработчика, а потом уже добавить свой. Размеры скриншота должны быть 300х225.
Третий этап: основные файлы
Теперь непосредственно создаем файлы. Нужно создать такие документы: index.php, footer.php, style.css, sidebar.php и header.php. Конечно, шаблон WordPress состоит из большего количества файлов, но мы не будем создавать все, ведь нам нужен простой шаблон в силе минимализм. Только 5 файлов, указанных выше, нам нужны сейчас. Для того чтобы найти код для файлов sidebar.php., header.php и footer.php необходимо открыть index.php и найти там наш добавленный html код. Разбиваем его на футер и основной контент, сайдбар пока не трогаем.
Теперь нужно ввести в WordPress теги, которые будут способствовать подключению хедера и футера к странице. Стоит понимать, что готовые шаблоны bootstrap только помогают в разработке сайта, а файлы нужно создать самостоятельно. К тому же, создаваемый нами сайт динамический, а не статичный, поэтому футер и шапку придется править при каждом добавлении страниц. Там, где будет шапка и футер, нужно вставить тег get_header(), а также get_footer().
Теперь меняем ссылки к JavaScript файлам и файлам CSS. Обычные статические ссылки заменяем на тег подключения стилей bloginfo(). Нужно почистить header.php от лишних тегов. Теперь добавить wp_head(), который нужен для работы плагинов. По такому же подобию изменяем файл footer.php и макет будущего сайта готов, осталось только его наполнить контентом.