Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)

Сегодня рассмотрим такую сложную и интересную тему, как создание WordPress шаблонов (тем) и грамотную посадку готовой HTML верстки на WordPress. В качестве Theming-фреймворка будем использоваьть Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS. Ключевые моменты - генерация стартовой Underscores темы, создание кастомных шорткодов для билдера Unyson, работа с адаптивной сеткой, создание Theme Options (опции шаблона) различных типов, создание метабоксов в статьях, на страницах и в категориях, раширение функционала фреймворка, автоматическое подключение плагинов в WordPress посредством TGM.

Ресурсы урока:

Последняя версия Unyson: Скачать

Скачать последнюю версию Unyson с GitHub

• Документация Unyson: Ознакомиться
• Генератор Стартового WordPress шаблона: underscores.me
• Скачать TGM Plugin Activation – Source code (zip) с GitHub
• Темы с публичной информацией об использовании "Unyson": на ThemeForest

Интерфейс WordPress может отличаться, в зависимости от версии, но в целом, все интуитивно понятно, Unyson работает во всех версиях WordPress.

Если у вас установлена русскоязычная версия Unyson, то в списке расширений "Page Builder" - это "Конструктор страниц", "Sliders" - это "Слайдер", "Visual Page Builder" - теперь "Unyson Builder", "Layout Elements" - это "Элементы макета", "Content Elements" - это "Элементы контента".

Пример подключения нового CSS-файла с версией в последних релизах WordPress:

wp_enqueue_style( 'theming-lesson-theme-style', get_template_directory_uri() . '/css/theme.css', array(), _S_VERSION );

Media queries CSS для файла "media.css" (пример из урока). Обратите внимание, в данном файле я рекомендую увеличивать цепочку каскада для переопределения медиа-стилей фреймворка, который подключается позже нашего "media.css". Здесь каскад увеличен за счет элемента body:

/* Extra small devices (phones) */
@media (max-width: 782px) {
	body .fw-container {
		width: 750px;
	}
}

/* Small devices (tablets) */
@media (min-width: 783px) and (max-width: 900px) {
	body .fw-container {
		width: 970px;
	}
}

/* Medium devices (desktops) */
@media (min-width: 901px) and (max-width: 1199px) {
	body .fw-container {
		width: 1170px;
	}
}

/* Large devices (large desktops) */
@media (min-width: 1200px) {
	body .fw-container {
		width: 1170px;
	}
}