Итак, здравствуйте. В этой статье или, даже можно сказать, мануале, я расскажу как создавал простенький шаблон для Wordpress, взяв за основу набор CSS-стилей Twitter Bootstrap.
Twitter Bootstrap – это CSS-фреймворк, который представляет собой готовые решения интерфейса и выглядит достаточно красиво. В общем, более подробно можно почитать на сайтах, ссылки на которые дам чуть ниже.
Сам я совсем не верстальщик какой-нибудь и даже специалистом по WP себя считать не могу – я даже PHP знаю лишь немного. Можно сказать, что я и учился ,как раз создавая свой первый шаблон. В Рунете информации про Bootstrap достаточно мало, поэтому порой приходилось читать забугорные ресурсы. Надеюсь, смогу помочь кому-нибудь полезной информацией.
Что ж, не будем медлить и перейдём к делу.
Скачать бутстрэп и почитать про него можно здесь -
http://twitter.github.com/bootstrap/.
Аналогичный
русский сайт с описанием Bootstrap -
http://bootstrap.veliovgroup.comСсыль на сайт, который работает именно на теме, созданной в ходе написание - http://wptheme.baddyblog.ru/ +
в конце есть ссылка на скачку этой темыЧто нужно для начала работы:
- Установленную CMS Wordpress
- Notepad++ - это, пожалуй, самый удобный и лёгкий редактор с подсветкой синтаксиса
- Создать каталог в папке wp-content\themes\, в котором и будет вся тема
- Помнить, что все файлы должны быть в UTF-8 кодировке!
- Желательно знать основы PHP кода и принципы работы Wordpress, иначе вам будет сложнее разобраться и понять суть статьи. Вы можете, конечно, сделать всё по инструкции или скачать тему, но суть именно в понимании.
Также перед началом работы закиньте следующий код в
functions.php, это позволит нам не отвлекаться при непосредственном создании темы:
<?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>',
));
?>
Создавая тему, я задал ей достаточно привычную структуру :
- Index.php – отвечает как выглядит главная страница с постами
- Single.php – отвечает за то, как выглядит страница поста
- Header.php – верхняя часть сайта, шапка
- Footer.php – «подвал» сайта
- Sidebar.php – отвечает за содержимое сайдбара в WP
- Functions.php – данный файл используется для реализации каких-нибудь специальных функций темы
- Папка с bootstrap, где будут еще 3 папки img, js и css.
Да, прямо в будущем шаблоне у нас будет папка со всем необходимым для функционирования компонентов Twitter Bootstrap.
Начнём мы с файла
style.css. Нам следует скопировать туда следующий код:
[php]@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
[/php]
Теперь стили для сайта будут браться из файла
bootstrap.css и
bootstrap-responsive.css, однако это не означает, что сам
style.css не будет учитываться, и мы как раз прописали в нём отступы для содержимого тега
<body>.
Теперь мы будем корректировать файлы шапки и подвала сайта. По логике вещей начнём с шапки, а значит файла
header.php. Вставляем в него следующий код:
<head>
<meta charset="utf-8">
<title>Wordpress на Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <!—Подключили style.css -->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
Что же мы сделали сейчас? Мы открыли тег
<head> и обозначили шапку сайта, указали кодировку, вписали title для главной страницы. И одно из главных – заполнили метатег
viewport, который необходим нам для отображения сайта на мобильных устройствах.
Ещё внизу вы видите 2 фрагмента из PHP-кода. Это так называемые функции Wordpress. Вещи довольно хорошие и сейчас объясню что это такое. Функции Wordpress – это некие команды, которые изначально вшиты в эту CMS и позволяют многое – вызвать список категорий, тегов для страницы, обозначить автора поста и ещё кучу всего. Список всех функций можете посмотреть
здесь. Мы ещё будем использовать их при создании шаблона.
В общем, первая функция помогла нам правильно подключить JS, а вторая необходима, потому что без неё попросту не будут работать некоторые плагины.
На этом наша работа с файлом
header.php не заканчивается. Теперь закидываем в него следующий код (уже после вставленного ранее) :
<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="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
Как видите, мы открыли тег
body. А также вы видите размещённые блоки с присвоенными им классами. Так вот – стили для этих классов уже прописаны в Twitter Bootstrap, в этом и его прелесть. После вставки такого кода у нас появится навигационное меню на сайте:
Здесь будут отображаться все созданные нами страницы. В этом нам помогла функция
wp_list_page, задача которой как раз и заключается в том, чтобы выводить список страниц сайта.
Также мы открыли блок с присвоенным классом
“container”, потом поймете зачем.
Теперь мы перейдём к заполнению файла
footer.php. Копируем туда следующий код:
<hr>
<footer>
<p>Содержание вашего footer.php </p>
<?php wp_footer(); ?>
</footer>
</div> <!-- Закрываем /container -->
</body>
</html>
Тег <hr> это разделитель для визуального отделения подвала нашего сайта. Далее открываем тег <footer> и вписываем туда содержимое нашего футера. Это может быть, к примеру, копирайт.
Также мы закрыли блок с классом
"container", который открывали чуть выше в шапке сайта.
Шапка и подвал окончены – они будут подгружаться к каждой странице сайта.
Сейчас мы перейдём к файлу
index.php, который и отвечает за вывод постов на главной странице. Это будет уже на порядок сложнее.
Итак, с чего мы начнём наш
index.php? С того, что подключим шапку и подвал к этому файлу с помощью функций WP с помощью этого кода:
<?php get_header(); ?>
<?php get_footer(); ?>
Мы подключили хэдер и футер. Между ними будет располагаться остальное содержимое
index.php, поэтому для удобства советую разнести их подальше.
Так как в CSS-фреймворке Twitter Bootstrap уже предусмотрены классы блоков и сетка дизайна, то нам остаётся использовать руководство по bootstrap. Поэтому закидывайте после функции
get_header следующий код:
<div class="row">
<div class="span8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, this page does not exist.'); ?></p>
<?php endif; ?>
В класс
“container”, который мы открыли в
header.php, мы вложили блок с классом
“row”, а дальше с классом
“span8”. Сюда мы вписали конструкцию с циклом, который будет по очереди выводить посты, если они имеются на блоге. Количество постов на странице будет определяться настройками WP в разделе «Параметры» ---> «Чтение».
Но мы же не хотим просто список постов, верно? Нужно сделать более-менее логичное оформление. Тогда после строчки:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Вставляем этот код:
<h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
<p>
Теги: <?php the_tags(' ', ', ', ' ' ); ?>
| <i class="icon-user"></i> <?php the_author_link(); ?> </a>
| <i class="icon-calendar"></i> <?php the_time('d.m.Y'); ?>
| <i class="icon-comment"></i> <?php comments_number(); ?>
</p>
Итак, первой строчкой мы сделали так, чтобы над текстом анонса поста отображалось его название, обрамленное тегом
h2.
Далее я перенёс строчку тегом
<p> и начал формировать информацию о посте, используя иконки из Twitter Bootstrap и функции, встроенные в Wordpress.
Например, написал «Теги» и использовал функцию
the_tags, которая формирует список тегов (меток), присвоенных посту.
Потом я использовал тег
<i>, присваивая ему разные классы. В зависимости от присвоенного класса отображалась та или иная иконка. Полный набор иконок и список классов можно найти на сайтах с документацией к Bootstrap, ссылки на которые я давал в начале.
Рядом с каждой иконкой я использовал функцию.
- Первая (the_author) отображал никнейм автора.
- Вторая (the_time) отображала дату написания поста
- Третья (comments_number) количество комментов к посту.
Ну и после я закончил строчку, закрыв тег
<p>.
Я внёс ещё несколько мелких доработок и в итоге файл
index.php у меня содержал следующий код:
<?php get_header(); ?>
<div class="row">
<div class="span8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
<p>Теги:
<?php the_tags(' ', ', ', ' ' ); ?>
| <i class="icon-user"></i> <?php the_author_link(); ?> </a>
| <i class="icon-calendar"></i> <?php the_time('d.m.Y'); ?>
| <i class="icon-comment"></i> <?php comments_number(); ?>
</p>
<?php the_content(); ?>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, this page does not exist.'); ?></p>
<?php endif; ?>
</div>
<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Из этого кода вы уже должны знать и понимать какой фрагмент и за что отвечает. (Ну хотя бы примерно).
Единственное, чего мы не касались это незнакомая функция
get_sidebar, которая находится в блоге с классом
“span4”, согласно документации Bootstrap. Но, наверное, вы уже догадались, что она подключает к
index.php сайдбар, содержимое, которого мы можем отредактировать в sidebar.php. Содержимым этого файла мы сейчас и займёмся.
В файле
sidebar.php я создал блок и присвоил ему класс
“sidebar”, а после прописал CSS стили для этого класса в
style.css. Вышло так. Содержимое
sidebar.php:
<div class="sidebar">
</div>
Между этими строчками будет всё остальное содержимое сайдбара.
В
style.css дописал:
.sidebar {
background-color: rgb(245, 245, 245);
border: 1px solid rgb(227, 227, 227);
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
}
В итоге теперь сайдбар на сайте будет визуально отделён от остальной части. Туда я решил вставить форму поиска, список категорий и 2 вкладки. В общем, давайте подробнее.
С формой поиска я поступил так – вставил этот код в sidebar.php:
<div class="serch-form">
<form method="get" class="form-search search-query" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" placeholder="Поиск..." value="<?php echo $search_text; ?>"
name="s" id="s" class="with-button"
onblur="if (this.value == '')
{this.value = '<?php echo $search_text; ?>';}"
onfocus="if (this.value == '<?php echo $search_text; ?>')
{this.value = '';}" />
<input type="submit" value="Искать" class="btn" />
<input type="hidden" id="searchsubmit" />
</div>
Форму поиска я тоже вывел в отдельный блок с классом
“search-form”. После того, как закончу описание сайдбара, дам код для
style.css, чтобы всё смотрелось нормально.
Далее я решил вывести список категорий с помощью функции
list_categories и вставил этот код:
<div class="list-categories"
<?php
wp_list_categories();
?>
</div>
Потом сделал 2 вкладки с помощью такого кода:
<div class="posts">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Последние статьи</a></li>
<li><a href="#tab2" data-toggle="tab">Популярные статьи</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Здесь список последних опубликованных статей</p>
</div>
<div class="tab-pane" id="tab2">
<p>Здесь список самых популярных статей</p>
</div>
</div>
</div>
</div>
Этот код выводит 2 вкладки. Их можно использовать по-разному на ваше усмотрение. Например, сделать несколько циклов статей на одну тематику, назвать вкладку названием цикла, а её содержимым сделать список всех статей из цикла в хронологическом порядке.
Кстати, все блоки – поиск, категории и вкладки я разделил с помощью
<hr>.
А теперь, как и говорил, код, который я внёс в
style.css для нормального отображения элементов сайдабра:
.posts {
margin-left: 20px;
}
.list-categories {
margin-left: 15px;
}
.serch-form {
margin-left: 10px;
}
Теперь, наконец-то, после всех проделанных действий вы можете посмотреть на своё творение. Сайт уже должен выглядеть более менее нормально.
Но мы не настроили ещё одну важную вещь – как будет выглядеть страница отдельного поста. Для этого нам нужен файл
single.php. Его содержимое очень похоже на
index.php. Выглядит
single.php так:
<?php get_header(); ?>
<div class="row">
<div class="span8">
<?php if(have_posts() ) : ?>
<?php while(have_posts() ) : the_post(); ?>
<h1> <?php the_title(); ?> </h1>
<p>Теги:
<?php the_tags(' ', ', ', ' ' ); ?>
| <i class="icon-user"></i> <?php the_author_link(); ?> </a>
| <i class="icon-calendar"></i> <?php the_time('d.m.Y'); ?>
| <i class="icon-comment"></i> <?php comments_number(); ?>
</p>
<p><?php the_content(' '); ?></p>
<?php endwhile; ?>
<?php endif; ?>
<?php comments_template(); ?>
</div>
<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Мы также подключили шапку, сайдбар и подвал сайта. В
single.php используется тот же цикл для вывода поста. Единственное, что изменилось – мы добавили функцию
comments_template, которая выводит форму для добавления комментариев.
Но внешний вид комментариев я не настраивал, потому что сам обычно использую систему комментирования DISQUS.
Вот, теперь можно считать работу над простейшим шаблоном законченными. Если вы действительно хоть чуточку шарите в Wordpress, принципах её работы и в PHP-программировании, то вы без особых проблем сможете улучшить тему в разы, потому что она даже черезчур простая да и выглядит не лучшим образом. В общем, кастомизируйте, улучшайте и будет вам модненький дизайн.
Прямая демонстрация работающей темы, которая точно такая же, создание которой описывалось в статье -
http://wptheme.baddyblog.ru/Скачать тему Wordpress с Bootstrap -
wordpress_bootstrap.rar ( 93,33 килобайт )
Кол-во скачиваний: 397Статья не претендует на звание супер-пупер-статьи от профи, я просто постарался изложить свой опыт по работе с WP и Twitter Bootstrap.P.S. Писал очень быстро, поэтому если заметите где-то ошибку, недочёт или возможность написать лучше - напишите в теме, буду благодарен
Сообщение сайта
Как я создавал тему для Wordpress с использованием Twitter Bootstrap
SkyR
72 
Jean
3.12.2012, 14:02;
Ответить: Jean
Продам базу сайтов Wordpress в 16 миллионов доменов! Свежая сборка.
