Создаем адаптивный шаблон для WordPress используя Bootstrap

Сегодня мы  будем создавать адаптивный шаблон для WordPress, при этом некоторые элементы мы создавать с нуля не будем, вместо этого используем Bootstrap. Для кого это понятие ново, может узнать много интересного здесь.Если же в двух словах, то Bootstrap – это удобный фреймворк для разработчиков, который помогает сократить время на создание шаблона.

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

Адаптивным (responsive) же называется тот шаблон, который адекватно отображается на различных девайсах: ноутбуках, мониторах, нетбуках, планшетах, смартфонах и других мобильных устройствах. Учитывая, что в последнее время, прогресс развивается семимильными шагами в плане технологий, то данный вид шаблонов весьма актуален и удобен.

Создавать мы будем простую WordPress тему, так сказать, макет с самым необходимым набором функций:

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

По завершении работы, вы сможете изменить дизайн созданного макета так, как вам будет необходимо.

Весь процесс создания темы, для удобства, разобьем по шагам:

Шаг 1. Устанавливаем WordPress и скачиваем Bootstrap.

Шаг 2. В папке с темами wp-content\themes создаем новую папку, которой даем название  нашей новой темы, к примеру MyTheme. В эту папку закачиваем папку bootstrap, предварительно разархивировав.

Шаг 3. Теперь, в созданной нами папке MyTheme, создаем новый документ index.php. К слову, теперь все работы будут происходить только в папке темы – MyTheme.

Шаг 4. Нам необходим html код будущего сайта и за основу мы возьмем один из образцов, которые предложены на сайте Bootstrap – Basic marketing site. Главная страница сайта выглядит следующим образом:

 

 

Код сайта-образца.

Код слишком длинный для публикации в записи, поэтому открываем ссылку, копируем его из текстового документа и вставляем в наш index.php.

Шаг 5.  Итак, html страница у нас есть, теперь займемся созданием CSS документа.

Особенность WordPress заключается в том, что CSS документ обязательно должен присутствовать в корне темы и он должен носить имя style.css. Этот документ будет носить в себе информацию о теме: авторство, версию и т.д.

Поэтому создаем документ style.css, при этом не забываем, что создаем мы все новые файлы и документы в папке MyTheme. Размещаем в нем текст:

 

Шаг 6. Теперь, прежде чем мы активируем создаваемую нами тему в админ-панели, добавим скриншот под именемscreenshot.png Мы можем использовать для начала образец с сайта Bootstrap, а позже, после завершения работы над сайтом, добавить скрин собственного сайта. Скриншот должен иметь размеры 300х225 пикселей.

На данный момент наша тема MyTheme содержит: index.php, style.css, screenshot.png и папку bootstrap.

Шаг 7. Заходим в Админ-панель/Дизайн/Темы и видим нашу тему в списке тем. Активируем ее.

 

Я занимаюсь созданием темы на локальном хостинге, надеюсь, и вы тоже. Но если Вы решили поэкспериментировать на реальном хостинге, на действующем сайте, то вам стоит использовать плагин Theme Test Drive.

Перейдя на свой сайт мы увидим, что он принял вот такой облик:

Шаг 8. Перейдем непосредственно к созданию файлов, которые должны быть в WordPress теме:

  • index.php
  • style.css
  • header.php
  • footer.php
  • sidebar.php

WordPress шаблон содержит в себе гораздо большее количество файлов, но в данном случае мы будем создавать не все из них, так как у нас должен получиться простой минималистичный шаблон. И на данном этапе нам нужны лишь те пять файлов, которые указаны в списке. Поскольку index.php и style.css у нас уже есть, мы создадим пустые header.php, footer.php и sidebar.php. Чуть позже мы добавим еще некоторые файлы, которые важны и необходимы для работы темы.

Где же взять код для наших новых файлов? Все необходимое мы возьмем из нашего html кода, который мы раннее добавили в index.php. Смотрим на код и разбиваем его на части: шапку сайта, основной контент и футер, которые и будем размещать по соответствующим файлам. Сайдбар у нас пока что остается пустым, ним мы займемся позже.

Код для каждого файла берем по ссылкам (код длинный, поэтому экономим пространство и копируем код из текстовых файлов):

 

Шаг 9. С этого шага мы начнем вводить в код WordPress теги.

Поскольку мы вырезали шапку и футер из  index.php и вставили их в отдельные файлы, необходимо в index.php добавить теги, которые будут отвечать за подключение футера и хедера к странице. К тому же, мы создаем не статичный сайт, а динамический, в котором, при добавлении новых страниц, нет надобности снова и снова править шапку и футер сайта.

Эти теги: get_header() и get_footer(). Вставлять эти теги в код необходимо в тех местах, где должны находиться футер и шапка. После добавления этих тегов, index.php принимает следующий вид:

 

Шаг 10. На данном этапе нам необходимо поменять ссылки к CSS и JavaScript файлам. Вместо статичных ссылок используем специальный WordPres тег для подключения таблиц стилей ко всем страницам — bloginfo(). Начнем их менять в header.php.

 

Находим код

и меняем его на

Также чистим header.php от ненужных для WordPress темы тегов и добавляем один из ключевых тегов wp_head(), который важен тем, что без него не смогут работать подключаемые к сайту плагины. Также над wp_head() добавим функцию wp_enqueue_script()для подключения jQuery. После проделанных изменений наш header.php приобретает вот такой вид:

 

Шаг 11. Теперь в файле style.css произведем изменения, добавим код, который подключит к нашей основной таблице стилей (style.css) стили из bootstrap. Делаем мы это с помощью тега  @import.

Обновляем главную страницу нашего сайта и наблюдаем произошедшие изменения: таблицы стилей творят чудеса

Шаг 12. Нечто похожее, что мы делали в header.php проделаем и в файле footer.php – уберем статичные ссылки на JavaScrip файлы. Мы заменим их специальным тегом wp_footer(), который, как и wp_head(),  необходим для того, чтобы впоследствии мы могли использовать на нашем сайте различные плагины и они корректно работали.

Найдем код

и зменим его на

Теперь footer.php принял более краткий, но и более функциональный вид:

Шаг 13. Создадим новый файл в папке MyThemes – functions.php из которого и будут подгружаться JavaScript. Разместим в нем следующий код:

Для того, чтобы проверить работает ли наш functions.php, перейдем к нашему сайту и изменим его размер до размеров планшета или мобильного устройства, кликнем по значку справа и увидим как меняется меню – работает выпадающее меню:

 

Если у вас не срабатывает выдающее меню, то проверьте корректность кода в functions.php и убедитесь, что в папке bootstrap загружены javascript файлы.

Шаг 14. Начнем работу над главной страницей нашей темы. Отправляемся в админ-панель и создаем страницу под именемHome или Главная. Переключаемся в режим HTML редактора и вырезав весь код, который касается главной страницы, из нашегоindex.php, переносим его на эту страницу и сохраняем.

Теперь index.php содержит в себе лишь вывод футера и шапки:

 

Для того же, чтобы подключить главную страницу из админки, мы добавим немаловажную функцию в наш index.php – функцию loop. При помощи этой функции будут выводиться такие детали как дата публикации, авторство, количество комментариев и т.д.  После добавления этой функци, index.php принимает следующий вид:

 

Теперь мы сделаем динамичными вывод контента и заголовка. В этом нам помогут два тега: the_title() для вывода названия иthe_content() для вывода контента. После строки <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> добавляем код:

 

После того, как изменения были внсены в код файлов темы, переходим в Админ-панель/Настройки/Чтение и выбираем постоянную страницу для отображения на главной. И, соответсвенно, в списке выбираем созданную нами страницу “Home”.

Обновим главную страницу нашего сайта и увидим, что на главной теперь отображается тот текст, который мы добавили в админку. Никаких признаков, указывающих на это, нет, но появившийся заголовок “Home” говорит сам за себя. И его то нам и необходимо убрать, так как подобная надпись на главной странице нам не нужна. Отправляемся в редактор и убираем строку вывода title. Код главной страницы теперь такой:

 

Для того, чтобы убедиться, что изменения на главной осуществляются из админки, внесем некоторые изменения на странице “Home” и проверим результат. К примеру, уберем три столбца и пустим вместо них один сплошной текст:

Шаг 15. Добавим информационные страницы.

Для этого в админке создадим несколько страниц: About, News и Contact. Почему именно эти страницы? Потому, что они по умолчанию стоят в используемом нами шаблоне с Bootstrap. Если хотите, в можете смело называть их иначе, и не обязательно на английском. Заполните их любой тестовой информацией, например, тем же Lorem Ipsum или Fillerati, а позже наполните их необходимым контентом или даже удалите и добавите совсем другие страницы.

Шаг 16. Поработаем над навигацией.

На данный момент у нас на сайте есть верхнее меню – основная навигация на сайте, но оно статичное, те страницы, которые мы создаем в админке, в меню не появляются, так как в шапке (header.php) нет соответствующего кода. Вот этот код мы сейчас и добавим. В header.php ищем строки со списком ссылок меню

 

и меняем их на очень короткий код, который выведет список страниц:

 

Теперь, обновив главную страницу своего сайта, мы видим изменения: в меню вывелись наши страницы.

Немного подкорректировав меню, мы сможем добиться того, чтобы в нем остались только нужные страницы и чтобы располагались они в нужном порядке. Для этого “Пример страницы” просто удаляем, а остальным страницам, в Атрибутах страницы или при Быстром редактировании, устанавливаем порядок сортировки. При этом учитываем, что есть нулевое значение, которое в данном случае, можно присвоить странице “Home”.

И проверяем изменения на сайте:

Шаг 17. Сделаем наш логотип ссылкой на главную.

Сейчас ситуация на сайте такова, что мы можем перейти на любую страницу, которая находится в меню, но вернуться на главную мы сможем только нажав вкладку “Home”, как же нам добиться того. чтобы логотип был ссылкой на главную страницу сайта?

Для этого мы используем тег wp_title().

Внутрь тегов <title></title> (файл header.php)  добавляем код, который поможет нам давать нам имя сайту не посредством кода, а просто из админки.

Вместо

используем

 

После изменения этого кода мы увидим, что название нашего сайта во вкладке браузера изменилось на наше название, которое при установке WordPress, мы задали нашему сайту.

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

на

Поскольку наш логотип теперь является ссылкой на главную, то нет нужды держать в меню вкладку “Home”. Естественно, оставлять Главную в меню или нет, – дело лично каждого, но если вам действительно необходимо удалить главную из меню, то идем следующим путем:

  • узнаем ID страницы

 

  • в header.php находим код, отвечающий за вывод списка меню, который мы добавляли раннее

 

 

  • и используем функцию exclude, которая исключит страницу из списка. Если же мы хотим добавить какую-то страницу, то используем функцию include. Итак, вид кода теперь у нас следующий:

 

Шаг 18. Изменим стили нашего меню, а точнее, добавим.

Для этого нам необходимо открыть файл wp-content\themes\MyTheme\bootstrap\css\bootstrap.css[/service] и перейти к строке 4589. Здесь заданы стили для нашего меню, мы же их немного усовершенствуем, добавив еще несколько стилей:

Обновляем сайт и походим по вкладкам меню:

Цвет активной кнопки мы можем менять в зависимости от гаммы нашего сайта, так же и цвет шрифта меню. По умолчанию, в botstrap.css для фона кнопки был указан серый цвет #E5E5E5, но я изменила его на такой цвет, какой использован на главной странице – цвет кнопки “Learn more” – #007CCC.

Шаг 19. Вернемся к созданию файлов и создадим файл, который отвечает за вывод страниц – page.php.

  • Заходим в index.php и копируем все его содержимое и вставим весь этот код в page.php.
  • Изменим текст “Sorry, no posts matched your criteria.”, во-первых переведем его на русский язык, во-вторых по смыслу этот текст подходит для главной страницы, а не для информационных страниц. Можем написать “К сожалению, такой страницы не существует.”. А в index.php этот текст мы можем перевести как-то так: “К сожалению, ничего не найдено по Вашему запросу.” Не забываем преобразовывать кодировку в utf-8!
  • Добавим вывод названия страницы (на главной мы его удаляли раннее).
  • Разобьем страницу на две колонки, для того, чтобы у нас наконец-то мог появиться сайдбар. Для этого мы используем классы из bootstrap.css: “span8″ для контента страницы и “span4″ для сайдбара. Вы можете найти точные размеры всех классов span в bootstrap.css начиная со строки 294. А контейнером для span будет класс “row”.
  • Подключим сайдбар с помощью тега get_sidebar().
  • Пересохраним  index.php как front-page.php, так как именно этот название WordPress позволяет использовать для главной страницы, если она не блоговая (убедиться в этом можно в wp-includes/template.php). Если же файл не переименовать, то он использует свойства файла page.php. НО index.php не удаляем, иначе тема не будет работоспособной.

 

Код страницы page.php – окончательный вариант:

 

Шаг 20. Создаем файл sidebar.php.

Поскольку мы уже подключили сайдбар к странице, то нам необходимо позаботиться о том, чтобы этот самый сайдбар отобразился на странице.

В sidebar.php размещаем код, который мы позже изменим (сделаем его динамичным), но пока, для наглядности, он нам необходим хотя бы в таком виде:

И теперь страницы имеют сайдбар, пока что пустой, но он есть. Не забываем менять кодировку.

Шаг 21. Один из самых важных шагов – создание страницы с записями. Ведь какой блог может обойтись без записей?

  • В админ-панели создадим страницу для вывода записей – “Блог”.
  • Создадим новый файл home.php, который и будет блоговой страницей.
  • Скопируем весь код page.php и заполним ним home.php.
  • Пропишем название страницы и поместим название в теги <h1></h1>.
  • Используем тег the_permalink() для связи краткой записи (анонса) в блоге непосредственно с самой записью. И выведем название записи тегом the_title(). Всю конструкцию поместим в теги <h2></h2>
  • Выведем дату публикации тегом the_time(). Формат даты: число, месяц, год. Если хотите использовать дату в другом формате, то можете сменить порядок вывода данных.
  • Исправим фразу “К сожалению, такой страницы не существует.”.

 

Окончательный код home.php выглядит так:

 

Шаг 22. Установим нашу страницу “Блог” как страницу по умолчанию для вывода записей.

Идем в Админ-панель/Настройки/Чтение и в выпадающем списке “Страница записей” выберем созданную нами страницу “Блог”.

И, пока мы находимся в админ-панели, добавим пару-тройку тестовых записей для того, чтобы увидеть как работает наш блог.

Шаг 23.  Создадим файл отвечающий за вывод отельной записи.

Страница блога готова, но записи еще не открываются, так что нам необходимо исправить этот момент.

Пересохраним файл page.php как single.php, так как именно single.php является файлом для каждого отдельного поста в WordPress.

Внесем некоторые изменения в код:

 

  • После вывода заголовка (title) выведем дату публикации, как мы это делали для блоговой страницы:

 

 

  • Используя тег comments_template() создадим возможность комментирования записи.

 

Окончательный вид single.php:

 

Шаг 24.  Вернемся к сайдбару.

Раннее мы создали файл sidebar.php, но кроме заголовка в него ничего не добавили. И прежде, чем заполнить его необходимым кодом, откроем файл functions.php и добавим в него код, который будет отвечать за динамичность сайдбара – за добавление виджетов из админ-панели в сайдбар. После добавления кода sidebar.php принимает следующий, уже окончательный, вид:

Теперь вернемся к sidebar.php и, удалив

вставим в него код:

Для того, чтобы проверить работает ли добавленный нами код, зайдем в Админ-панель/Дизайн/Виджеты и перетащим в сайдбар какой-нибудь виджет. Обновим страницу своего сайта и увидим сайдбар в новом обличии.

 

На этом, создание адаптивного шаблона с использованием Bootstrap, мы закончим. Мы создали все основные элементы шаблона: главную страницу, блоговую страницу, информационные страницы и записи, добавили динамичный сайдбар. Конечно, еще можно много чего добавить или усовершенствовать, для получения более полной информации по всем WordPress тегам, переходим по ссылке и получаем массу полезной информации.

В завершении, созданная нами тема, имеет в себе следующие файлы: footer.php, front-page.php, functions.pfp, header.php, home.php, page.php, sidebar.php, single.php, style.css, screenshot.png и папку bootstrap.

Что касается дизайна, то в нынешнем состоянии шаблон использовать, естественно, невозможно. Необходимо хотя бы в CSS поправить размер шрифтов, чтобы заголовки так не кричали, поправить форму комментариев, чтобы она больше стала похожей на стандартную форму, а не на миниатюрное окошко. Ну, а, в общем, вооружившись редактором, всеми CSS файлами, Photoshopом или готовыми исходниками для создания красивого дизайна, можно сделать такой шаблон, который будет радовать глаз.

Повторюсь еще раз, что этот урок будет интересен тем, кто только начинает пытаться самостоятельно создавать шаблоны для WordPress. Если вы прошли этот урок и у вас получился первый, самостоятельно созданный шаблон, поздравляю!

Скачать готовую тему можно здесь: MyTheme.

Источник идеи создания урока: www.blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial#comments

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *