Создание WordPress темы из Bootstrap шаблона

Введение

В этой статье мы рассмотрим пошаговый процесс натягивания шаблона Bootstrap на движок WordPress. Вероятно, вы уже читали моё другое похожее руководство как конвертировать html шаблон в рабочую тему wordpress.

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

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

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

Bootstrap-3-Template-Theme-Flathood.png

Приступим!

к содержанию ↑

Создание новой Bootstrap темы в WordPress

Качаем шаблон Flathood с сайта, распаковываем архив, и переносим файлы в папку wordpress wp-content/themes/flathood, — так будет называться тема.

Для того, чтобы тема заработала, нужно сначала создать файл style.css

/* Theme Name: Flathood
   Theme URI: <a href="//www.bootstrapzero.com/bootstrap-template/flathood">//www.bootstrapzero.com/bootstrap-template/flathood</a>
   Author: Bootply
   Author URI: Bootply.com
   Description: A popular tech news site was the inspiration for this 2-column bold, bright design. This template uses the Bootstrap affix plugin to pin the sidebar after scrolling past the top header. 
   Version: 1.0.0 License: MIT
   License URI: <a href="//opensource.org/licenses/MIT">//opensource.org/licenses/MIT</a> */

Подключаем стили bootstrap из папки css

@import url('css/bootstrap.min.css');

инструкцию @import использовать в wordpress не рекомендуется, данный способ считается устаревшим. Позже мы используем файл functions.php для правильного подключения стилей и скриптов.

Копируем в style.css весь код из файла css/styles.css, который после чего можно удалить.

Wordpress-bootstrap-theme-Flathood-Style.css.png

к содержанию ↑

Создаем файл header.php

Копируем в header.php следующий код из шаблона flathood index.html. Сразу подправим некоторый динамический контент, который выводится с помощью функций WordPress. Ниже я объясню как они работают.

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title><?php bloginfo('name'); ?></title>
      <meta name="generator" content="Bootply" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <!&#x2013;[if lt IE 9]>                         <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>                 <![endif]&#x2013;>                 
      <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <?php wp_head(); ?>         
   </head>
   <body>
      <nav class="navbar navbar-static">
         <div class="container">
            <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">         <span class="glyphicon glyphicon-chevron-down"></span>       </a>       
            <div class="nav-collapse collase">
               <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
               </ul>
               <ul class="nav navbar-right navbar-nav">
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>             
                     <ul class="dropdown-menu" style="padding:12px;">
                        <form class="form-inline">
                           <div class="input-group">
                              <input type="text" class="form-control" placeholder="Search">                      
                              <div class="input-group-btn">                                     <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>                      </div>
                           </div>
                        </form>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>             
                     <ul class="dropdown-menu">
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="#">About</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <!&#x2013; /.navbar &#x2013;> </p>
      <p> 
      <header class="masthead">
         <div class="container">
            <div class="row">
               <div class="col col-sm-6">
                  <h1>
                     <a href="#" title="<?php bloginfo('name'); ?>">BNW Template</a>           
                     <p class="lead"><?php bloginfo('description'); ?></p>
                  </h1>
               </div>
               <div class="col col-sm-6">
                  <div class="well pull-right">           <img src="//placehold.it/280x100/E7E7E7">         </div>
               </div>
            </div>
         </div>
         <div class="container">
            <div class="row">
               <div class="col col-sm-12">
                  </p>
                  <p> 
                  <div class="panel">
                     <div class="panel-body">   You may want to put some news here  <span class="glyphicon glyphicon-heart-empty"></span> </div>
                  </div>
                  </p>
                  <p>       
               </div>
            </div>
         </div>
      </header> 

<title><?php bloginfo('name'); ?></title>

— название сайта

<?php bloginfo('stylesheet_url'); ?>

— путь к style.css

<?php bloginfo('description'); ?>

— описание сайта

<?php wp_head(); ?>

— важный хук wordpress, который необходим для правильного подключения и работы скриптов и плагинов.

Описание и название WordPress берет из Общих настроек.

Меню пока не трогаем.

к содержанию ↑

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

Он попроще.

<h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>
</p>
<p>                       
<hr>
<h4><a href="<?php bloginfo('url'); ?>">Bootply</a></h4>
<hr>
</div></div></div></div> </p>
<p>
   <?php wp_footer(); ?>
         <!-- script references -->
         <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> -->
         <!-- <script src="js/bootstrap.min.js"></script> -->
         <!-- <script src="js/scripts.js"></script> -->         
</body>
</html>

Здесь стоит отметить:

<?php bloginfo('url'); ?>

— выводит url сайта

<?php wp_footer(); ?>

— хук, аналогичный wp-head для футера

Обратите внимание, я закомментировал подключение скриптов в подвале, потому что мы их подключим в functions.php
к содержанию ↑

Создаем главный шаблон index.php

Копируем из index.html весь оставшийся код между заголовком и подвалом. Я также удалил статический аккордеон и статический контент внизу страницы. Мы добавим их другим образом, о чем я расскажу во второй части статьи. Вот получившийся код страницы index.php.

<?php get_header(); ?> <!-- Begin Body --> 
<div class="container">
<div class="row">
<div class="col col-sm-3">
   <div id="sidebar">
      <ul class="nav nav-stacked">
         <li>
            <h3 class="highlight">Channels <i class="glyphicon glyphicon-dashboard pull-right"></i></h3>
         </li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
   </div>
</div>
<div class="col col-sm-9">
<div class="panel">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>                 
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>                 <?php endwhile; else : ?>                     
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>                 
<div>
   <p><?php posts_nav_link(); ?></p>
</div>
</p>
<p> <?php get_footer(); ?>

<?php get_header(); ?>

— подключаем header.php

<?php get_footer(); ?>

— подключаем footer.php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    <?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>
    <div><p><?php posts_nav_link(); ?></p></div>

Динамически вывести записи, если они есть, иначе вывести сообщение пользователю. Функция posts_nav_link() возвращает нам постраничную навигацию.

Сохраняем результат, смотрим что получилось.

к содержанию ↑

Создаем файл functions.php

Сразу же подключаем в нём наши скрипты и стили

if (!is_admin()) {
 //Load the theme CSS function theme_styles() { 
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');     
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css'); }
 //Load the theme JS function theme_js() { 
    wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'scripts_js', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '', true );
 } 

add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' ); } 

Функции отрабатывают только если мы НЕ находимся в консоли WordPress (мы не хотим загружать bootstrap и стили в панели администратора)

Обратите внимание, мы подключили также основной файл стилей Style.css, поэтому нужно убрать строку его подключения из header.php

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

— удаляем

к содержанию ↑

Создаем динамическое меню WordPress

Скачиваем php класс wp bootstrap navwalker, копируем в папку с темой.

Подключаем данный файл в functions.php

// Register Custom Navigation Walker
 require_once('wp_bootstrap_navwalker.php');

А также регистрируем динамическое меню

register_nav_menus( array(
     'primary' => __( 'Primary Menu', 'flathood' ),
 ) );

Теперь нужно вернуться в header.php, и адаптировать код. Вот весь листинг с подсветкой измененных строк

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title><?php bloginfo('name'); ?></title>
      <meta name="generator" content="Bootply" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <!--[if lt IE 9]>                         <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>                 <![endif]-->         
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <?php wp_head(); ?>         
   </head>
   <body>
      <nav class="navbar">
         <div class="container">
            <div class="row">
               <div class="col col-sm-9">
                   <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">         <span class="glyphicon glyphicon-chevron-down"></span>       </a>
               <?php wp_nav_menu( array(
                 'menu'              => 'primary',
                 'theme_location'    => 'primary',
                 'depth'             => 2,
                 'container'         => 'div',
                 'container_class'   => 'collapse navbar-collapse',
                 'container_id'      => 'bs-example-navbar-collapse-1',
                 'menu_class'        => 'nav navbar-nav',
                 'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                 'walker'            => new wp_bootstrap_navwalker())
               ); ?> </div>
               <div class="col col-sm-3">
                  <ul class="nav navbar-right navbar-nav">
                     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>             
                        <ul class="dropdown-menu" style="padding:12px;">
                           <form class="form-inline">
                              <div class="input-group">
                                 <input type="text" class="form-control" placeholder="Search">                      
                                 <div class="input-group-btn">                                     <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>                      </div>
                              </div>
                           </form>
                        </ul>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </nav>
      <!-- /.navbar --> </p>
      <p> 
      <header class="masthead">
         <div class="container">
            <div class="row">
               <div class="col col-sm-6">
                  <h1>
                     <a href="#" title="<?php bloginfo('name'); ?>">BNW Template</a>           
                     <p class="lead"><?php bloginfo('description'); ?></p>
                  </h1>
               </div>
               <div class="col col-sm-6">
                  <div class="well pull-right">           <img src="//placehold.it/280x100/E7E7E7">         </div>
               </div>
            </div>
         </div>
         <div class="container">
            <div class="row">
               <div class="col col-sm-12">
                  </p>
                  <p> 
                  <div class="panel">
                     <div class="panel-body">   You may want to put some news here  <span class="glyphicon glyphicon-heart-empty"></span> </div>
                  </div>
                  </p>
                  <p>       
               </div>
            </div>
         </div>
      </header>

Пояснения. Код, который формирует динамическое меню.

<?php wp_nav_menu( array( 
          'menu'              => 'primary',
          'theme_location'    => 'primary',
          'depth'             => 2, 
          'container'         => 'div',
          'container_class'   => 'collapse navbar-collapse',
          'container_id'      => 'bs-example-navbar-collapse-1',
          'menu_class'        => 'nav navbar-nav',
          'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
          'walker'            => new wp_bootstrap_navwalker())            
); ?>

Я также сделал несколько изменений в разметке. Добавил строку с двумя колонками (col-sm-9 и col-sm-3, чтобы уместить поиск рядом с меню на одной строке (row). Дополнительное меню пользователя в правом верхнем углу я удалил, чтобы не усложнять на данном этапе процесс разработки.

к содержанию ↑

Сделаем динамический сайдбар

Регистрируем сайдбар в functions.php

 
//register sidebar
add_action( 'widgets_init', 'flathood_widgets_init' );
function flathood_widgets_init() {
     register_sidebar( array(
         'name' => __( 'Main Sidebar', 'flathood' ),
         'id' => 'sidebar-1',
         'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'flathood' ),
         'before_widget' => '<li id="%1$s" class="widget %2$s">',
         'after_widget'  => '</li>',
         'before_title'  => '<h2 class="widgettitle">',
         'after_title'   => '</h2>',
     ) ); } 

Функцию я утащил из https://codex.wordpress.org/Function_Reference/register_sidebar» target=»_blank»>примера в кодексе.

к содержанию ↑

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

 <div id="sidebar">
     <?php if ( ! dynamic_sidebar('sidebar-1') ) : ?>
         <ul class="nav nav-stacked"> 
                <li><h3 class="highlight">Channels <i class="glyphicon glyphicon-dashboard pull-right"></i></h3></li>
                 <li><a href="#">Link</a></li>
                 <li><a href="#">Link</a></li>
             </ul>
     <?php endif; ?>
 </div> 

Обратите внимание на функцию, если сайдбар пустой, то выводится статический контент.

Саму разметку я, разумеется, скопировал из шаблона flathood. Вы замечаете как работает копи-паст? Создание темы для WordPress не такая уж сложная вещь.

к содержанию ↑

Подключаем сайдбар в index.php

<?php get_sidebar(); ?>

Wordpress-bootstrap-theme-Flathood-Index.php_.png

Смотрим. Сайдбар работает. Если виджеты не добавлены, отображается статический контент.

На этом первая часть заканчивается. Шаблоны page.php и post.php, для страниц и записей соответственно, делать не будем. Смотрите руководство как натянуть HTML шаблон на WordPress.

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

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

Конечно, существуют и другие способы вывести дополнительный контент на страницу. Но мы рассмотрим Theme Hook Alliance, потому что это очень интересный, функциональный, но вместе с тем очень простой способ вывода динамического содержания в заданное расположение темы.

Оставайтесь на связи, и задавайте вопросы. Здесь же будет ссылка на вторую часть, когда инструкция будет готова.

к содержанию ↑

Рекомендую к изучению

Курс Bootstrap 3 для начинающих: Создайте профессиональную страницу захвата.

Как сделать профессиональный отзывчивый лендинг для вашего приложения, портфолио, бизнеса или блога.

Bootstrap 3 Beginners: Create a Professional Landing Page