Загрузка страницы

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

Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9
Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
Создание крутого слайдера (+посадка на CMS): https://bit.ly/jVLyQ8

Все курсы в одном комплекте: https://wd-m.ru/bundle

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

Материалы урока, полезные ссылки: https://webdesign-master.ru/blog/wordpress/576.html

Таймкоды:
00:00 Начало урока
06:05 Требования к WordPress-фреймворку
10:55 Установка и настройка WordPress
15:14 Стартер Underscores
17:32 Активация темы Underscores
18:56 Подготовка страницы в админке WordPress
19:19 Назначение статической страницы
19:38 Создание главной страницы в шаблоне
24:13 Установка плагинов с помощью TGM
33:20 Установка расширений Unyson
34:57 Визуальный редактор страницы
37:26 Настройка сетки
38:02 Ширина сетки и кастомный CSS
46:03 Тестирование других элементов билдера
47:58 Кастомизация фреймворка (framework-customizations)
57:11 Вывод настроек в верстку
1:04:10 CSS-стилизация кастомных классов
1:06:25 Создание собственных шорткодов
1:22:43 Вывод своего компонента (шорткода) в HTML
1:27:06 Работа с изображениями
1:45:09 Опции темы (Theme Options)
1:52:22 Вывод опций темы в шаблоне
2:00:03 Дополнительные поля поста (WordPress Metabox)

ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://wd-m.ru/zen

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

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
16 ноября 2015 г. 3:32:39
02:06:57
Другие видео канала
Натяжка верстки на wordpressНатяжка верстки на wordpress[2022] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета[2022] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макетаКак сделать сайт на Wordpress (2021) - урок в 23 ПРОСТЫХ шагаКак сделать сайт на Wordpress (2021) - урок в 23 ПРОСТЫХ шага$1,000 в месяц на WordPress ► Из HTML в WordPress за 10 минут!$1,000 в месяц на WordPress ► Из HTML в WordPress за 10 минут!HTML верстка макета Figma. Часть 1 | Создание коммерческого сайта от А до Я. Урок 16HTML верстка макета Figma. Часть 1 | Создание коммерческого сайта от А до Я. Урок 16Курс по WordPress | Урок 2. Создание темы | Академия вёрсткиКурс по WordPress | Урок 2. Создание темы | Академия вёрсткиИзучение WordPress с нуля за час! Создание веб-сайта на основе ВордПрессИзучение WordPress с нуля за час! Создание веб-сайта на основе ВордПрессСоздание крутого 3D сайта с анимацией прокрутки | HTML, CSS, JavaScriptСоздание крутого 3D сайта с анимацией прокрутки | HTML, CSS, JavaScriptСоздание дизайна сайта в Figma на реальном примере. Большой курсСоздание дизайна сайта в Figma на реальном примере. Большой курс[HOT] Wordpress: «натягиваем» верстку на движок[HOT] Wordpress: «натягиваем» верстку на движок3D Background | Mesh Tool | Adobe Illustrator Tutorial3D Background | Mesh Tool | Adobe Illustrator TutorialСоздание потрясающей галереи на HTML, CSS и JavaScript | CSS-анимация, Blur, Parallax, GradientСоздание потрясающей галереи на HTML, CSS и JavaScript | CSS-анимация, Blur, Parallax, GradientНатяжка вёрстки на Wordpress l Часть 1Натяжка вёрстки на Wordpress l Часть 1Перенос сайта на WordPress с помощью плагина DuplicatorПеренос сайта на WordPress с помощью плагина DuplicatorCSS анимация - появление текста при наведении на иконку. CSS animation - custom tooltip. CSS3 HTML5CSS анимация - появление текста при наведении на иконку. CSS animation - custom tooltip. CSS3 HTML5Тонкости адаптивной верстки на Тильде: мастер-классТонкости адаптивной верстки на Тильде: мастер-классДизайн сайта с нуля в Adobe Photoshop CC за 45 мин. Part 1 || Уроки Виталия МенчуковскогоДизайн сайта с нуля в Adobe Photoshop CC за 45 мин. Part 1 || Уроки Виталия МенчуковскогоКак сделать тему Wordpress. Верстка темы с нуля.Как сделать тему Wordpress. Верстка темы с нуля.КАК СОЗДАТЬ ИНТЕРНЕТ-МАГАЗИН? Как создать сайт самостоятельно на wordpress (woocommerce)КАК СОЗДАТЬ ИНТЕРНЕТ-МАГАЗИН? Как создать сайт самостоятельно на wordpress (woocommerce)
Яндекс.Метрика