Перейти к содержимому



Как я создавал тему для Wordpress с использованием Twitter Bootstrap

#1 Sky-R

Sky-R
  • Пользователь
  • 417 сообщений
  • Репутация: 72
3

Отправлено 30 Ноябрь 2012 - 22:24

Итак, здравствуйте. В этой статье или, даже можно сказать, мануале, я расскажу как создавал простенький шаблон для 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. Нам следует скопировать туда следующий код:

@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}


Теперь стили для сайта будут браться из файла 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, в этом и его прелесть. После вставки такого кода у нас появится навигационное меню на сайте:


navmenu.png


Здесь будут отображаться все созданные нами страницы. В этом нам помогла функция 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 в разделе «Параметры» ---> «Чтение».

postonpage.png


Но мы же не хотим просто список постов, верно? Нужно сделать более-менее логичное оформление. Тогда после строчки:

<?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К   Количество загрузок: 343

Статья не претендует на звание супер-пупер-статьи от профи, я просто постарался изложить свой опыт по работе с WP и Twitter Bootstrap.
P.S. Писал очень быстро, поэтому если заметите где-то ошибку, недочёт или возможность написать лучше - напишите в теме, буду благодарен :D



При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение


 

 

  • 2

#2 Jean

Jean
  • Пользователь PRO
  • 1 237 сообщений
  • Репутация: 218

Отправлено 03 Декабрь 2012 - 13:02

Очень интересно было бы почитать про Yii фреймверк, все таки более популярен.
  • 0
Научу вас Seo оптимизировать и продвигать сайт, стоимость от 150р час, теория+практика
Консультирую по Интернет рекламе


#3 Sky-R

Sky-R
    Topic Starter
  • Пользователь
  • 417 сообщений
  • Репутация: 72

Отправлено 03 Декабрь 2012 - 20:57

Jean, ну Yii фреймворк это уже другое совсем. ;)
  • 0


Оформление форума – IPBSkins.ru