Создаем адаптивный шаблон для 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. Размещаем в нем текст:
|
1 2 3 4 5 6 7 8 9 10 11 |
/*! Theme Name: MyTheme Theme URI: https://jul-collection.com Description: Free responsive portfolio/blog theme Author: Bootstrap Author URI: https://twitter.github.com/bootstrap/ Version: 1.0 License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) License URI: https://creativecommons.org/licenses/by-sa/3.0/ */ |
Шаг 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 принимает следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php get_header(); ?> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-large">Learn more »</a></p> </div> <!-- Example row of columns --> <div class="row"> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div> </div> <?php get_footer(); ?> |
Шаг 10. На данном этапе нам необходимо поменять ссылки к CSS и JavaScript файлам. Вместо статичных ссылок используем специальный WordPres тег для подключения таблиц стилей ко всем страницам - bloginfo(). Начнем их менять в header.php.
Находим код
|
1 2 3 4 5 6 7 |
<!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> |
и меняем его на
|
1 2 |
<!-- Le styles --> <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> |
Также чистим header.php от ненужных для WordPress темы тегов и добавляем один из ключевых тегов wp_head(), который важен тем, что без него не смогут работать подключаемые к сайту плагины. Также над wp_head() добавим функцию wp_enqueue_script() для подключения jQuery. После проделанных изменений наш header.php приобретает вот такой вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Le styles --> <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form pull-right"> <input class="span2" type="text" placeholder="Email"> <input class="span2" type="password" placeholder="Password"> <button type="submit" class="btn">Sign in</button> </form> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> |
Шаг 11. Теперь в файле style.css произведем изменения, добавим код, который подключит к нашей основной таблице стилей (style.css) стили из bootstrap. Делаем мы это с помощью тега @import.
|
1 2 3 4 5 6 |
@import url('bootstrap/css/bootstrap.css'); @import url('bootstrap/css/bootstrap-responsive.css'); body { padding-top: 60px; padding-bottom: 40px; } |
Обновляем главную страницу нашего сайта и наблюдаем произошедшие изменения: таблицы стилей творят чудеса
Шаг 12. Нечто похожее, что мы делали в header.php проделаем и в файле footer.php – уберем статичные ссылки на JavaScrip файлы. Мы заменим их специальным тегом wp_footer(), который, как и wp_head(), необходим для того, чтобы впоследствии мы могли использовать на нашем сайте различные плагины и они корректно работали.
Найдем код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../assets/js/jquery.js"></script> <script src="../assets/js/bootstrap-transition.js"></script> <script src="../assets/js/bootstrap-alert.js"></script> <script src="../assets/js/bootstrap-modal.js"></script> <script src="../assets/js/bootstrap-dropdown.js"></script> <script src="../assets/js/bootstrap-scrollspy.js"></script> <script src="../assets/js/bootstrap-tab.js"></script> <script src="../assets/js/bootstrap-tooltip.js"></script> <script src="../assets/js/bootstrap-popover.js"></script> <script src="../assets/js/bootstrap-button.js"></script> <script src="../assets/js/bootstrap-collapse.js"></script> <script src="../assets/js/bootstrap-carousel.js"></script> <script src="../assets/js/bootstrap-typeahead.js"></script> |
|
1 |
<?php wp_footer(); ?> |
Теперь footer.php принял более краткий, но и более функциональный вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<hr> <footer> <p>© Company 2012</p> </footer> </div> <!-- /container --> <?php wp_footer(); ?> </body> </html> |
Шаг 13. Создадим новый файл в папке MyThemes – functions.php из которого и будут подгружаться JavaScript. Разместим в нем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php function wpbootstrap_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); ?> |
Для того, чтобы проверить работает ли наш functions.php, перейдем к нашему сайту и изменим его размер до размеров планшета или мобильного устройства, кликнем по значку справа и увидим как меняется меню – работает выпадающее меню:
Если у вас не срабатывает выдающее меню, то проверьте корректность кода в functions.php и убедитесь, что в папке bootstrap загружены javascript файлы.
Шаг 14. Начнем работу над главной страницей нашей темы. Отправляемся в админ-панель и создаем страницу под именем Home или Главная. Переключаемся в режим HTML редактора и вырезав весь код, который касается главной страницы, из нашего index.php, переносим его на эту страницу и сохраняем.
Теперь index.php содержит в себе лишь вывод футера и шапки:
|
1 2 3 |
<?php get_header(); ?> <?php get_footer(); ?> |
Для того же, чтобы подключить главную страницу из админки, мы добавим немаловажную функцию в наш index.php – функцию loop. При помощи этой функции будут выводиться такие детали как дата публикации, авторство, количество комментариев и т.д. После добавления этой функци, index.php принимает следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; else: ?> <p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p> <?php endif; ?> <?php get_footer(); ?> |
Теперь мы сделаем динамичными вывод контента и заголовка. В этом нам помогут два тега: the_title() для вывода названия и the_content() для вывода контента. После строки <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> добавляем код:
|
1 2 3 |
<h1><?php the_title(); ?></h1> <?php the_content(); ?> |
После того, как изменения были внсены в код файлов темы, переходим в Админ-панель/Настройки/Чтение и выбираем постоянную страницу для отображения на главной. И, соответсвенно, в списке выбираем созданную нами страницу “Home”.
Обновим главную страницу нашего сайта и увидим, что на главной теперь отображается тот текст, который мы добавили в админку. Никаких признаков, указывающих на это, нет, но появившийся заголовок “Home” говорит сам за себя. И его то нам и необходимо убрать, так как подобная надпись на главной странице нам не нужна. Отправляемся в редактор и убираем строку вывода title. Код главной страницы теперь такой:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_content(); ?> <?php endwhile; else: ?> <p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p> <?php endif; ?> <?php get_footer(); ?> |
Для того, чтобы убедиться, что изменения на главной осуществляются из админки, внесем некоторые изменения на странице “Home” и проверим результат. К примеру, уберем три столбца и пустим вместо них один сплошной текст:
Шаг 15. Добавим информационные страницы.
Для этого в админке создадим несколько страниц: About, News и Contact. Почему именно эти страницы? Потому, что они по умолчанию стоят в используемом нами шаблоне с Bootstrap. Если хотите, в можете смело называть их иначе, и не обязательно на английском. Заполните их любой тестовой информацией, например, тем же Lorem Ipsum или Fillerati, а позже наполните их необходимым контентом или даже удалите и добавите совсем другие страницы.
Шаг 16. Поработаем над навигацией.
На данный момент у нас на сайте есть верхнее меню – основная навигация на сайте, но оно статичное, те страницы, которые мы создаем в админке, в меню не появляются, так как в шапке (header.php) нет соответствующего кода. Вот этот код мы сейчас и добавим. В header.php ищем строки со списком ссылок меню
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> |
и меняем их на очень короткий код, который выведет список страниц:
|
1 2 3 |
<ul class="nav"> <?php wp_list_pages(array('title_li' => '')); ?> </ul> |
Теперь, обновив главную страницу своего сайта, мы видим изменения: в меню вывелись наши страницы.
Немного подкорректировав меню, мы сможем добиться того, чтобы в нем остались только нужные страницы и чтобы располагались они в нужном порядке. Для этого “Пример страницы” просто удаляем, а остальным страницам, в Атрибутах страницы или при Быстром редактировании, устанавливаем порядок сортировки. При этом учитываем, что есть нулевое значение, которое в данном случае, можно присвоить странице “Home”.
И проверяем изменения на сайте:
Шаг 17. Сделаем наш логотип ссылкой на главную.
Сейчас ситуация на сайте такова, что мы можем перейти на любую страницу, которая находится в меню, но вернуться на главную мы сможем только нажав вкладку “Home”, как же нам добиться того. чтобы логотип был ссылкой на главную страницу сайта?
Для этого мы используем тег wp_title().
Внутрь тегов <title></title> (файл header.php) добавляем код, который поможет нам давать нам имя сайту не посредством кода, а просто из админки.
Вместо
|
1 |
<title>Bootstrap, from Twitter</title> |
используем
|
1 |
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title> |
После изменения этого кода мы увидим, что название нашего сайта во вкладке браузера изменилось на наше название, которое при установке WordPress, мы задали нашему сайту.
Теперь, для того, чтобы наше название отобразилось не только во вкладке браузера, но и в шапке сайта, изменим строку
|
1 |
<a class="brand" href="#">Project name</a> |
на
|
1 |
<a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a> |
Поскольку наш логотип теперь является ссылкой на главную, то нет нужды держать в меню вкладку “Home”. Естественно, оставлять Главную в меню или нет, – дело лично каждого, но если вам действительно необходимо удалить главную из меню, то идем следующим путем:
- узнаем ID страницы
- в header.php находим код, отвечающий за вывод списка меню, который мы добавляли раннее
|
1 2 3 |
<ul class="nav"> <?php wp_list_pages(array('title_li' => '')); ?> </ul> |
- и используем функцию exclude, которая исключит страницу из списка. Если же мы хотим добавить какую-то страницу, то используем функцию include. Итак, вид кода теперь у нас следующий:
|
1 2 3 |
<ul class="nav"> <?php wp_list_pages(array('title_li' => '','exclude' => 4)); ?> </ul> |
Шаг 18. Изменим стили нашего меню, а точнее, добавим.
Для этого нам необходимо открыть файл wp-content\themes\MyTheme\bootstrap\css\bootstrap.css[/service] и перейти к строке 4589. Здесь заданы стили для нашего меню, мы же их немного усовершенствуем, добавив еще несколько стилей:
|
1 2 3 4 5 6 7 8 9 |
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus, .navbar-inverse .nav .current_page_item a, .navbar-inverse .nav .current_page_item a:hover, .navbar-inverse .nav .current_page_item a:focus, .navbar-inverse .nav .current_page_parent a, .navbar-inverse .nav .current_page_parent a:hover, .navbar-inverse .nav .current_page_parent a:focus |
Обновляем сайт и походим по вкладкам меню:
Цвет активной кнопки мы можем менять в зависимости от гаммы нашего сайта, так же и цвет шрифта меню. По умолчанию, в 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 – окончательный вариант:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php get_header(); ?> <div class="row"> <div class="span8"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <p> <?php _e('К сожалению, такой страницы не существует.'); ?> </p> <?php endif; ?> </div> <div class="span4"> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?> |
Шаг 20. Создаем файл sidebar.php.
Поскольку мы уже подключили сайдбар к странице, то нам необходимо позаботиться о том, чтобы этот самый сайдбар отобразился на странице.
В sidebar.php размещаем код, который мы позже изменим (сделаем его динамичным), но пока, для наглядности, он нам необходим хотя бы в таком виде:
|
1 |
<h2>Сайдбар</h2> |
И теперь страницы имеют сайдбар, пока что пустой, но он есть. Не забываем менять кодировку.
Шаг 21. Один из самых важных шагов – создание страницы с записями. Ведь какой блог может обойтись без записей?
- В админ-панели создадим страницу для вывода записей – “Блог”.
- Создадим новый файл home.php, который и будет блоговой страницей.
- Скопируем весь код page.php и заполним ним home.php.
- Пропишем название страницы и поместим название в теги <h1></h1>.
- Используем тег the_permalink() для связи краткой записи (анонса) в блоге непосредственно с самой записью. И выведем название записи тегом the_title(). Всю конструкцию поместим в теги <h2></h2>
|
1 |
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> |
- Выведем дату публикации тегом the_time(). Формат даты: число, месяц, год. Если хотите использовать дату в другом формате, то можете сменить порядок вывода данных.
1<?php the_time('l, F jS, Y'); ?> - Исправим фразу “К сожалению, такой страницы не существует.”.
Окончательный код home.php выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php get_header(); ?> <div> <div> <h1>Блог</h1> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><em><?php the_time('l, F jS, Y'); ?></em></p> <hr> <?php endwhile; else: ?> <p> <?php _e('К сожалению, здесь нет записей.'); ?> </p> <?php endif; ?> </div> <div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?> |
Шаг 22. Установим нашу страницу “Блог” как страницу по умолчанию для вывода записей.
Идем в Админ-панель/Настройки/Чтение и в выпадающем списке “Страница записей” выберем созданную нами страницу “Блог”.
И, пока мы находимся в админ-панели, добавим пару-тройку тестовых записей для того, чтобы увидеть как работает наш блог.
Шаг 23. Создадим файл отвечающий за вывод отельной записи.
Страница блога готова, но записи еще не открываются, так что нам необходимо исправить этот момент.
Пересохраним файл page.php как single.php, так как именно single.php является файлом для каждого отдельного поста в WordPress.
Внесем некоторые изменения в код:
- После вывода заголовка (title) выведем дату публикации, как мы это делали для блоговой страницы:
|
1 |
<p><em><?php the_time('l, F jS, Y'); ?></em></p> |
- Используя тег comments_template() создадим возможность комментирования записи.
Окончательный вид single.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php get_header(); ?> <div class="row"> <div class="span8"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <p><em><?php the_time('jS F , Y'); ?></em></p> <?php the_content(); ?> <hr> <?php comments_template(); ?> <?php endwhile; else: ?> <p><?php _e('К сожалению, такой страницы не существует.'); ?></p> <?php endif; ?> </div> <div class="span4"> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?> |
Шаг 24. Вернемся к сайдбару.
Раннее мы создали файл sidebar.php, но кроме заголовка в него ничего не добавили. И прежде, чем заполнить его необходимым кодом, откроем файл functions.php и добавим в него код, который будет отвечать за динамичность сайдбара – за добавление виджетов из админ-панели в сайдбар. После добавления кода sidebar.php принимает следующий, уже окончательный, вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php function wpbootstrap_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); ?> |
Теперь вернемся к sidebar.php и, удалив
|
1 |
<h2>Сайдбар</h2> |
вставим в него код:
|
1 2 |
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <?php endif; ?> |
Для того, чтобы проверить работает ли добавленный нами код, зайдем в Админ-панель/Дизайн/Виджеты и перетащим в сайдбар какой-нибудь виджет. Обновим страницу своего сайта и увидим сайдбар в новом обличии.
На этом, создание адаптивного шаблона с использованием 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
Спасибо за перевод этой крутейшей статьи!
Такая проблема:
На шаге 11 не подключаются стили.
Возможно это из-за размещения на локальном хостинге(денвер).
Не подскажите как это можно решить? В чем может быть проблема?
Да, статья Зака просто отличнейшая – одна из наилучших, на мой взгляд, по созданию шаблона на Bootstrap.
Надеюсь, у Вас, Михаил, уже получилось разобраться с возникшей проблемой, если же нет, то я могу посоветовать немногое: перепроверить все свои предыдущие шаги, так как фактически каждый шаг зависит от предыдущего. Размещение сайта на локалхосте никак не влияет на его создание (создаваемый мною сайт в статье, также находится на локалхосте).
По правде сказать, ни один из создаваемых мною шаблонов на Bootstrap, не доставлял хлопот с подключением родных бутстраповских стилей через @import.
Проблема в том, что даже когда ставлю окончательный вариант, все-равно показывается не пойми что.
Все равно спасибо, буду дальше разбираться)
Экспериментируйте, у Вас всё получится!)
Была та же проблема, на 11 шаге, оказалось что на шаге 2 архив почему-то распаковывается в bootstrap и путь выглядел как bootstrap\bootstrap\css\style.css проверьте, может и у вас.
Отличный перевод. Спасибо!
Мне очень помог разобраться, наконец, с созданием адаптивной темы.
Спасибо, Людмила!
Рада, что оказалась для Вас полезной.
Хотел испробовать другом образце, но что то у меня не получается, кто пытался сделать на другом готовом образце?
Спасибо большое за такой полезный урок! Единственная загвоздка вот в этом коде: Когда его в таком виде ставишь в файл home.php, выдает ошибку. И у Вас дальше в шаге 24 он уже стоит как Если ставить так, то всё ок. В целом всё очень доступно, грамотно и подробно. Сделала шаблон и очень довольна результатом. Еще раз большое спасибо за материал и удачи Вам в развитии Вашего блога.
Спасибо, Ева, за отзыв и пожелание!
Удивлена, что у Вас возникала ошибка при добавлении тегов [em] в код главной страницы. У меня ошибки не было, в источнике, который послужил идеей урока, эти теги также стоят в коде home.php, да и они настолько просты и незначительны (курсив большой роли для кода не играет…), что даже любопытно как они мыгли вызвать ошибку. Но главное, что Вы во всем разобрались и у Вас получился собственный шаблон! Успехов и Вам!
Ну, может у меня какие-то настройки стояли не те. Я в теме php не сильна пока. Но Вы правы, главное то, что у меня в итоге всё получилось, благодаря Вам. Так что еще раз спасибо. Ваш сайтик в закладочках. Буду заходить :-)
Спасибо! Буду рада Вашим посещениям!)
Здравствуйте, дохожу до 11 шага и всё ступор, тема такого вида не получается( что делать.
извините разобрался с ошибкой не так извлёк папку с bootstrap
Спасибо! Мне очень помогло!
Отлично! Вам спасибо за отзыв.
Ничего себе сколько всего нужно сделать что бы подключить шаблон=(
Проще скачать готовый и править))
И то верно))) Но порой самостоятельно охота поваять, вот тогда-то и подойдет данный метод.
Очень познавательный пост. А на счет готовых шаблонов, то это просто ужас, что с ними можно установить себе на сайт, начиная от левых ссылок до скриптов шпионов и дорвеев, то, что лучше потратить время и сделать шаблон под себя.
Спасибо, Ольга, за отзыв.
Здравствуйте, отличная статья. Но есть вопрос касательно функции “exclude”. Допустим я хочу исключить несколько страниц, то как мне будет корректно указать страницы в коде ”,’exclude’ => 4)); ?>
Александр, возможно, здесь Вы найдете полезную информацию по данному вопросу.
Вот уж действительно спасибо Вам, помогли! Я два дня, по куче запросов искал как мне свой сверстанный html шаблон запилить в вордпресс, всю голову сломал , одна вода в рунете!!
Jul, спасибо большое за интересную статью. Материал изложен доходчиво и интересно. Вообще очень понравился Ваш ресурс. Видно, что сделан для людей. Побольше бы таких в Интернете. Удачи Вам в ваших начинаниях.
P.S. Просматривал Ваш сайт со смартфона, все отлично отображается. Адаптивная верстка работает :-).
Спасибо, Сергей) Заходите еще))
Очень хороший перевод, спасибо. Как раз заинтересовался разработкой шаблона bootstrap для своего нового сайта. Статья как раз во время, не тратил много времени. Удачи вам и процветания вашему блогу :)
Дмитрий, спасибо за доброжелательный отзыв! И Вам удачи в начинаниях и блоггинге)
Наконец то нашел толковое описание. Огромное спасибо!!!
Почему то все криво стало отображаться. Неделю или две назад заходил на ваш сайт, читал эту статью, все было отлично.
Спасибо, что подметили и сообщили. После обновления wordpress и ряда плагинов поломался код, еще не все статьи успела поправить. Эта статья теперь в порядке.
А как же всплывающее (вложенное) меню?
К сожалению, не нашел этого момента…
Добавил несколько дочерних страниц в родительскую, чтобы проверить всплывающее меню, ан нет, обломище, однако…
Если есть желание, освятите, пожалуйста, сею тему.
Был бы очень признателен.
Статья интересная, только, к сожалению, в конце почему-то отказалась отображаться страница с записями(Блог).
Второй раз делал просто копировал все коды поочередно и в новые файлы и до проверки “Блога” все было прекрасно… и страница с записями открылась… остальное доделал и страница статей открывается белой((((
А все так хорошо начиналось…
Выпас фишку..
В строке про время публикации пропущен первый апостроф, сразу после открывающей скобки.
Должно быть так –
Доброго! Как сделать так что бы при добавлении изображений через админку этому изображению присваивался “фирменный” класс bootstrap, который эту картинку делает адаптивной.
Спасибо!
Статья уже немного устарела, комментарии для версии 3.0, для версии 4.1 уже не подходят……. Сайдбар встает криво на главной странице, дата и время не отображаются….. Короче статья все же не для новичков, многое не понятно…. А так спасибо огромное за перевод, статья помгла мне во многом разобраться!!!!!!!!!!!