X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как я создавал тему для Wordpress с использованием Twitter Bootstrap
SkyR
SkyR
Topic Starter сообщение 30.11.2012, 23:24; Ответить: SkyR
Сообщение #1


Итак, здравствуйте. В этой статье или, даже можно сказать, мануале, я расскажу как создавал простенький шаблон для 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, ссылки на которые я давал в начале.
Рядом с каждой иконкой я использовал функцию.
  1. Первая (the_author) отображал никнейм автора.
  2. Вторая (the_time) отображала дату написания поста
  3. Третья (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. Писал очень быстро, поэтому если заметите где-то ошибку, недочёт или возможность написать лучше - напишите в теме, буду благодарен :D

0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jean
Jean
сообщение 3.12.2012, 14:02; Ответить: Jean
Сообщение #2


Очень интересно было бы почитать про Yii фреймверк, все таки более популярен.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SkyR
SkyR
Topic Starter сообщение 3.12.2012, 21:57; Ответить: SkyR
Сообщение #3


[member=Jean], ну Yii фреймворк это уже другое совсем. ;)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ищу программу для проверки новостей.
4 MakDonald 739 Вчера, 22:51
автор: NikosTM
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыРазработка логотипа для салона красоты
3 Favna 253 Вчера, 21:37
автор: Filadelso
Открытая тема (нет новых ответов) Андроид приставка для телевизора
14 zyzy 214 Вчера, 21:12
автор: Filadelso
Открытая тема (нет новых ответов) Как в Wordpress центрировать изображение по умолчанию?
4 SkyFire 708 Вчера, 18:37
автор: SkyFire
Открытая тема (нет новых ответов) Продаю недорогие и качественные статьи для Вашего сайта.
Подбор качественного контента из Вебархива.
9 kuz999 1794 Вчера, 11:35
автор: kuz999


 



RSS Текстовая версия Сейчас: 12.4.2021, 4:52
Дизайн