Шпаргалка по Wordpress 4

Создание адаптивной темы Wordpress 4 с использованием Bootstrap 3, а также удобные плагины и прочие полезности.

Шпаргалка по Bootstrap 3

Что это и зачем

Bootstrap (БС)  - набор библиотек CSS + jQuery plugins. Нужен для быстрой разработки адаптивных сайтов. Также в связке с jQuery помогает создавать списки, кнопки, меню, всплывающие окна с эффектами и прочие свистелки и перделки, обожаемые фанатами jQ. Качать здесь.

Файлы bootstrap. Что, для чего, и как дополнительно подключать

Внимание!! В тег <head> для мобильных сайтов должен быть включен 

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/css/bootdtrap.css"> - содержит основные стили, необходим для адаптивной верстки, в продакшн грузить bootstrap.min.css

<link rel="stylesheet" href="/css/bootdtrap-theme.css"> - содержит стили кнопок, меню и эффектов, в продакшн грузить bootstrap-theme.min.css

<script type="text/javascript" src="/js/bootstrap.js> - jQuery-plugins для эффектов, напрмер, модальных окон и меню. Требует подключения jQuery до загрузки скрипта. В продакшн подключаем, соответственно min.js

Папка fonts содержит бесплатную часть шрифта Glyphicons. Кстати, вместо него можно использовать Awesome. Полностью бесплатный, постоянно пополняемый, более 600 иконок на момент написания статьи. Правда, громоздок и тащит за собой дополнительный css.

Что полезного

Основной принцип БС для вывода контента - сетка. БС определят 4 типа устройств по ширине через правило @media. Для каждого типа существует предопределенный класс. 

  1. @media (max-width: 767px) - xs
  2. @media (min-width: 768px) - sm
  3. @media (min-width: 992px) - md
  4. @media (min-width: 1200px) - lg

Сетка состоит из строк и вложенных в них колонок. Строки должны быть вложены в блочный элемент с классом 'container' (жесткий дизайн) или 'container-fluid' (резиновый дизайн). Определено 12 колонок для любого типа устройства. Имя класса колонки образуется следующим способом: 

col-<имя типа уст-ва>-<кол-во объединяемых колонок> 

Например: class="col-md-6" означает, что данная колонка при общей ширине  строки от 993px до 1200 px о занимает 1/2 часть (12/6 = 1/2) от ширины строки.

Для сокрытия при выводе контейнера на том или ином устройстве применяется префикс класса hidden. Например: hidden-xs - скрывает блок для маленьких экранов.


Пример:

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 col-sm-8 col-md-6 col-lg-6'>
        Текст в первом блоке
        </div>
        <div class='hidden-xs col-sm-4 col-md-6 col-lg-6>
        Текст во втором блоке
        </div>
    </div>
</div>

Быстрые генератор и готовый код меню.

1. http://bootstrap3-menu.codedorigin.com/ - Максимально настраиваемое по цветам.

2. http://www.w3schools.com/bootstrap/bootstrap_navbar.asp - Отличные примеры.

Также удобно 

Drag-drop построитель шаблонов.

http://www.layoutit.com/

 

 

 

 

Структура темы

 

Минимальная структура темы:

  • css - папка, содержит доп. css
  • fonts - папка, содержит доп. шрифты, если нужна.
  • images - папка, содержит изображения темы
  • js - папка, содержит доп. javascript
  • category.php - файл, содержит оформление вывода записей в рубрике(категории).
  • footer.php - файл, оформление подвала страницы. Подключается вручную к страницам вывода.
  • functions.php - файл, служит для определения фишек, доступных теме (например, вывод миниатюр записей/статей) и полезные функции (например, функцию разбивки текста для вывода). Подключается автоматически.
  • header.php - файл, оформление шапки страницы, подключается вручную.
  • index.php - файл главной страницы темы, также вызывается, если что-то не определено, не найдено и нет файла 404.php
  • page.php - файл вывода статей.
  • screenshot.png - изображение для админки.
  • search.php - файл вывода результатов поиска.
  • searchform.php - форма поиска, отображается при вызове get_search_form();
  • sidebar.php - файл для вставки виджетов.
  • single.php - файл вывода записи блога.
  • style.css - основная таблица стилей.

Иерархия файлов шаблона 

Цикл Wordpress

Основная конструкция вывода.

Используется в шаблонах для вывода всех данных (постов, записей), определенных для данной страницы. 

Примеры:

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <!-- 

    здесь формирование вывода постов,

    где работают теги шаблона относящиеся к циклу, например, the_title()

    -->

    <?php endwhile; ?>

<?php endif; ?>

Или так:

<?php
    global $post;
    $myposts = get_posts('numberposts=5&offset=1&category=1');
    foreach( $myposts as $post ){
        setup_postdata( $post );
?>
    <!-- 
    здесь формирование вывода постов,
    где работают теги шаблона относящиеся к циклу, например, the_title()
    -->
<?php 
    }
?> 

 

Функции и объекты, часто используемые в темах wordpress.

Полные справочники см. wp-kama.ru и codex.wordpress.org

  • $post - глобальная переменная, объект. содержит информацию о текущем посте (записи или странице). Объект создается или изменяется при вызове функции get_post().
  • $authordata - глобальная переменная, объект. содержит информацию об авторе текущего поста. 

Функции шаблона

  • get_template_directory_uri() - возвращает путь к папке с темой. Полезно для первичного подключения js и ccs. Проще всего в самом начале файла header.php определить константу, и дальше пользоваться уже ей, чтобы не вызывать функцию несколько раз: DEFINE('TEMPLATEDIR',get_template_directory_uri())
  • get_footer(), get_header() - в принципе, можно заменить include_once('footer.php'); include_once('header.php'); соответственно
  • string bloginfo(string) - получает заначение какого-либо общего параметра сайта. Принимает строку - имя требуемого прараметра, возвращает значение. 
  • bool have_posts() - используется в цикле Wordpress для проверки существования данных для вывода.

 

Полезные плагины Wordpress

  • rus-to-lat - обязательно устанавливать - для русскоязычных сайтов. Корректно создает ярлыки (используются в URL постов, страниц, рубрик)
  • CKEditor for WordPress - обязательно устанавливать - нормальный редактор.
  • Contact form 7 + Contact form 7 modules - просто и быстро множество форм обратной связи на сайте.
  • Easy FancyBox - организовать вывод чего угодно - от картинки до формы - во всплывающем "окне".
  • Shortcodes - мощнейший инструмент для множества полезных вещей прямо в статьях и постах: аккордеоны, кнопки, слайдшоу, видео, вкладки и много чего ещё.
  • All-in-One Event Calendar - для создания расписаний разных мероприятий.

  • Duplicator - создание бэкапов, переезд сайта на др. хостинг или домен.
  • Enhanced Media Library - помогает более-менее организовать/категоризировать изображения на сайте.
  • Page-list - шорткоды для вывода иерархии страниц в виде списка.
  • Social Media Widget - удобно настраиваемый виджет кнопок соц. сетей.
  • Meta Slider - слайдшоу просто и быстро.