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

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

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

Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

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

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

Или скачать Unyson – Source code (zip) c GitHub (если первый вариант недоступен)

  • Документация Unyson: Ознакомиться
  • Генератор Стартового WordPress шаблона: underscores.me
  • Скачать TGM Plugin Activation – Source code (zip) с GitHub
  • Документация фреймворка: manual.unyson.io
  • Темы с публичной информацией об использовании "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;
	}
}

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «WordPress»

  • Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере
  • Руководство по созданию тем на WordPress и StyleKit's с использованием Layers Framework
  • Layers. Быстрая разработка сайтов на WordPress #1. Знакомство с Layers WP
  • Создание Responsive Landing Page на WordPress

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2022 © WebDesign Master