Тёмный

Создание сайта на WordPress - Как создать тему 

WebDesign Master
Подписаться 303 тыс.
Просмотров 401 тыс.
50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Сегодня рассмотрим создание WordPress шаблонов (тем) и грамотную посадку готовой HTML верстки на WordPress. В качестве Theming-фреймворка будем использовать Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS.
Страница урока: webdesign-master.ru/blog/cms/...
Таймкоды:
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)
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

 

5 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 360   
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@mrWiled
@mrWiled 6 лет назад
Это лучшее, что я видел по разработке. Никакой воды, все по делу. Просто и понятно. Пинту чая этому господину!
@Mishawitcher
@Mishawitcher 8 лет назад
Уже не один Ваш урок смотрю и всегда они качественные и очень полезные. Большое спасибо, за то что вы делаете.
@nariman022
@nariman022 5 лет назад
"У меня будильник, я должен был что то сделать, но я не помню что, по-этому продолжим" ))
@deabdullin
@deabdullin 8 лет назад
Я бы заплатил за такой полный курс. Спасибо
@ivanvershinin4215
@ivanvershinin4215 2 года назад
полезность видео зашкаливает! в видео затрагивается самая суть "натягивания" и раскрываются такие важные фишечки и нюансы которые много искал в других видео но так и не нашел, а тут они рассказываются по ходу пьесы и очень гармонично вписываются во всю конву повествования. браво автор! нужен урок по посадке сложной верстки на WP!
@elizavetakryazhkova1705
@elizavetakryazhkova1705 8 лет назад
На работе поставили задачу переделать костыльный сайт на WP, ваши уроки здорово помогают!!! Спасибо!
@elkhanhuseynov9759
@elkhanhuseynov9759 8 лет назад
Огромное спасибо тебе дружище и земной тебе поклон ! Сколько сайтов и блогов перелопатил по данному вопросу и везде один воздух гонят. Ты единственный, кто досконально, подробно и честно всё изложил, по крайней мере для меня это так. Дай бог тебе здоровья и бесконечных успехов как в бизнесе так и в личной жизни. И если есть возможность, то сделай пожалуйста вариант доната для тех кто не живёт в России (что то вроде PayPal или обычная оплата платёжными картами ), не могу себе открыть ни яндекс кошелёк ни вебмани.
@maksympustovoit2080
@maksympustovoit2080 5 лет назад
Насколько жизненная цитата) "Так, у меня будильник, мне что-то пора делать, но я не помню что, поэтому мы продолжим..." ))))))
@AndrewMurko
@AndrewMurko 8 лет назад
Огромное спасибо тебе за твои уроки! Тебе просто нет цены, и думаю, что в раю тебе уже приготовлено место! Очень бы хотелось увидеть уроки по Woocommerce, или создание собственной темы с нуля!
@user-tx7jg1ei5k
@user-tx7jg1ei5k 7 лет назад
ОЧЕНЬ, ОЧЕНЬ КРУТОЙ ДЯДЬКА!!! ОБЬЯСНЯЕТ ЛУЧШЕ ВСЕХ КОГО Я ВИДЕЛ ВО ВСЕМ ИНТЕРНЕТЕ, СПЕЦИАЛИСТ И БАУМАНКА ОТДЫХАЮТ, ОНИ ПРОСТО ГНУСАВЫЕ СТАРИЧКИ))))
@IschencoDenis
@IschencoDenis 7 лет назад
Шикарно. Первые адекватные уроки. Вся информация доступна и понятна. Я начинаю вникать в темы изнутри. Спасибо.
@FCatherine
@FCatherine 5 лет назад
Совершенно верно, по своей глубине материала (уроки) русскоязычный сегмент проигрывает зарубежным. Спасибо вам за прекрасный урок!
@gazizzhaiyk9610
@gazizzhaiyk9610 7 лет назад
Целый месяц мучился с созданием шаблона на WP, перепробовал все варианты, ни один не сработал, Но тебе спасибо! После твоего урока сделал шаблон в течение дня!!!
@nariman022
@nariman022 7 лет назад
Очень годные советы, которых я не слышал у других "Веб-разработчиков". Молодец, спасибо за видео.
@AlexJazzEEk
@AlexJazzEEk 8 лет назад
Леха, спасибо огромное за твои видео! Они оказались намного полезнее всяких там webformyself и прочих платных курсов. Ты действительно даешь актуальную информацию на сегодняшний день по веб-разработке. С удовольствием учусь по твоим видео, потому что считаю что учиться надо у профессионала своего дела, а не у всяких инфобизнесменов и начинающих "разработчегов",которые что-то чуть-чуть поковыряли и бегут выкладывать видео на ютуб. Успехов тебе в твоей деятельности!
@snky_
@snky_ 8 лет назад
Это потрясающий урок, я для себя открыл новый мир. Великопный фреймворк, с которым очень приятно работать. Спасибо большое автору. Когда появятся деньги - обязательно отблагодарю.
@wdm
@wdm 8 лет назад
Рад.
@user-en5wy8ku2j
@user-en5wy8ku2j 8 лет назад
Мужик! Браво! Реально просто выручаешь, хвала и уважение! Спасибо!
@andrievskii
@andrievskii 8 лет назад
Супер, красава, не понимаю какая благодарность тебе за это, но ты делаешь очень полезную работу, очень!
@WintorpValentine
@WintorpValentine 8 лет назад
Согласен! Автор, ты большой красава. Все четко, полезно и понятно.
@user-qx9fo7uw6e
@user-qx9fo7uw6e 8 лет назад
Большое спасибо, после вашего видео-урока уже нажимаю кнопку "делит" и переделываю свой проект)
@ed2300
@ed2300 8 лет назад
вот это круто, обалдеть, Вы наверное единственные в рунете, кто сделал такой полезный инфо-видос, огромнейшее спасибо, в принципе структуру ВП использовал, но далеко не так углубленно и судя по-всему не так как нужно, как Вы сказали в начале "оно может и работать, но так делать не правильно"
@sviat3744
@sviat3744 8 лет назад
Думаю лучший канал, по версте и Wordpress
@andrievskii
@andrievskii 8 лет назад
+Олег Гара Да автор заслуживает на похвалу несомненно, нет ничего круче, практикующих видео записей.
@user-sq6xl6pg5g
@user-sq6xl6pg5g 7 лет назад
Бум надеяться. А то я в вп полный 0. Главное чтобы был УЧИТЕЛЬ, а не КОММЕНТАТОР. Многие, кто снимают уроки просто не видят разницы, а это РАЗНЫЕ люди.
@neway026
@neway026 7 лет назад
ооо, это Учитель с Большой Буквы!!! поднимает общий уровень))
@innai_fox
@innai_fox 8 лет назад
Большущее спасибо за такой замечательный туториал :) Как всегда шикарно!!!
@konopatbli
@konopatbli 7 лет назад
Провел с этим видео 3 дня! Спасибо большое! Очень полезная информация!
@First7Try
@First7Try 7 лет назад
Алексей! Просто бесподобные уроки и благо, что существуют такие люди как Вы )) С нетерпением ждет видяшек по woocommerce... ибо больше таким материалом некому поделится.
@nickstojanovic9663
@nickstojanovic9663 5 лет назад
Определенно топовый канал. Очень классная, грамотная, полная и доступная подача материала.
@liravideobylira
@liravideobylira 8 лет назад
Отдельное спасибо за популяризацию знаний английского языка для разработчиков!
@sergey5806
@sergey5806 8 лет назад
А еще будут уроки по unyson? Именно посадка от А до Я :) Спасибо за работу!
@sergeya.3619
@sergeya.3619 8 лет назад
Дружище, ты лучший!!! Так держать, очень интересно смотреть. А самое главное познавательно
@user-lw8dk8dm6x
@user-lw8dk8dm6x 8 лет назад
Большое спасибо! Нереально полезный урок, который я искала!
@user-uf8mj4se7f
@user-uf8mj4se7f 7 лет назад
Я этот видом на ночь слушаю. Убаюкивает, сплю, как младенец.
@user-ei6jm6xs4j
@user-ei6jm6xs4j 8 лет назад
Отличный мастер-класс. Спасибо!
@user-ib3ji7mc6c
@user-ib3ji7mc6c 6 лет назад
Как будто в живую объясняют) Круто
@tanyaborishkevich5858
@tanyaborishkevich5858 8 лет назад
Спасибо, я только пользователь готовых продуктов. Но Вы рассказали всё замечательно.
@jenpsaki8786
@jenpsaki8786 8 лет назад
Интересно. Спасибо! Эхх, еще бы хоть несколько таких уроков. Именно по unyson, кастомизации и натяжке собственной верстки.
@user-dj2tf8xu4q
@user-dj2tf8xu4q 8 лет назад
Плюсую. Шикарнейший канал!
@kirillkoreshkoff9430
@kirillkoreshkoff9430 7 лет назад
Ты крут))) По крайней мере после 10 минут просмотра - очень приятно воспринимается подача информации. И чувствуется, что можно смотреть дальше и не прогадаешь)) Давно хотел научиться натягивать на вордпресс, так как на фрилансе много таких заказов, но как уже было сказано все ресурсы по натяжке сразу видно что тупо не глубоки и не правильны и не хотелось их изучать. Смотрю и подписался)
@ificouldfly4874
@ificouldfly4874 3 года назад
Подача - шикарная. Спасибо за видосы
@olexklym4132
@olexklym4132 5 лет назад
+++TOP! На ютубе самый профессиональный гайд! Спасибо!
@scankomp241
@scankomp241 6 лет назад
лучший канал, по версте и Wordpress
@lexwayne5370
@lexwayne5370 5 лет назад
Чувак, ты просто офигителен! Подписка!
@jackich-ua
@jackich-ua 8 лет назад
Очень информативно!!!!!! Спасибо Вам за такие видео!!!
@sdsaasdasd4683
@sdsaasdasd4683 7 лет назад
спасибо мужик, что бы мы без тебя делали!!!?
@rustem6388
@rustem6388 8 лет назад
Очень круто! Огромное спасибо!
@dezareo
@dezareo 7 лет назад
Thank you for this amazing tutorial. Best regards from Serbia
@NZ1995
@NZ1995 7 лет назад
Спасибо за подробное разъяснение ))
@dmtr_ptrv
@dmtr_ptrv 8 лет назад
Отличный, но довольно нагруженный урок. Вместе с лайком хотелось бы выразить желание увидеть такой же развернутый туториал по грамотной верстке именно с Underscores.
@user-qs4jq5dh7e
@user-qs4jq5dh7e 8 лет назад
Автор, ты просто шикарен. Но есть одна просьба, сможешь сделать подобный урок, только с посадкой не на WordPress, а на Joomla? Заранее благодарен.
@user-uc2gl6kc4x
@user-uc2gl6kc4x 8 лет назад
Спасибо за урок👌
@elvindesign6350
@elvindesign6350 5 лет назад
Респект автору! Особенно улыбнуло пароль из нулей)))
@roduman
@roduman 8 лет назад
Респект автору. Просто супер урок.
@lyudmila3591
@lyudmila3591 8 лет назад
огромное спасибо за информацию!
@sergeygribanov2311
@sergeygribanov2311 7 лет назад
Добрый день! спасибо большое за уроки, смотрю каждый день...мне даже Ваш голос уже кажется до боли знакомым)) В этом видео вы говорите, что смотрите и читаете зарубежные источники, может поделитесь ссылками, думаю многим будет интересно посмотреть, что смотрят профи.
@SCREEDWALLShow
@SCREEDWALLShow 8 лет назад
Спасибо за урок! Перестал бояться читать англоязычные мануалы и документации :D
@user-uc3tz4qb5m
@user-uc3tz4qb5m 7 лет назад
Красавчик, продолжай в том же духе!
@cultgringel6334
@cultgringel6334 8 лет назад
Сдал коллег, Иуда!!!))))
@vadimgercger4055
@vadimgercger4055 8 лет назад
спасибо! много полезного
@FrenkyDev
@FrenkyDev 7 лет назад
Спасибо, крутой урок!Уже давно сижу на твоем канале)Было бы круто, если б ти записал видео урок с живим примером натягивания на вордпресс верстку з нескольками страницами с использиваниям unyson)
@user-kv1rr5ts5c
@user-kv1rr5ts5c 8 лет назад
Огромное спасибо .
@steviesblogazon
@steviesblogazon 7 лет назад
hello, i'm liking this information
@user-ul6wq4gm9j
@user-ul6wq4gm9j 6 лет назад
Почему ты не озвучиваешь фильмы =D божественный голос!
@Avanadis
@Avanadis 6 лет назад
подскажите ка получилосьу вас заменить главную page на page-home ? я сделал в точности как вы сказали, home-page не подменяет page.php
@user-ve1qi5fj8v
@user-ve1qi5fj8v 3 года назад
редактирую page.php и page-home-page.php и все равно нечего не поменялось , из за чего это , извиняюсь за такой банальный вопрос
@MsGercules
@MsGercules 8 лет назад
обожаю музыку в конце видео) mission complete)
@KondratenkoPetr
@KondratenkoPetr 6 лет назад
!
@NicuLucas1993
@NicuLucas1993 8 лет назад
большое вам спасибо :)
@MrAndKost
@MrAndKost 7 лет назад
Уроки шикарные, для woocommerce удобнее всего использовать understrap там и sass и gulp встроенные, вместе с унисоном можно использовать Но вот замечу насколько в wordpress все через одно место сделано. В modx действительно все проще и понятнее
@71ruler
@71ruler 5 лет назад
Блин мне нравится этот чувак
@avetisdiseno1506
@avetisdiseno1506 6 лет назад
Огромное спасибо!!!
@ImIvI
@ImIvI 8 лет назад
Надо сохранятся)) И предохранятся))00))
@krassnow8963
@krassnow8963 7 лет назад
Спасибо огромное тебе! Действительно есть чему поучиться у тебя. Парадокс конечно, ты говоришь не слушать русских инструкции по wp, так то у тебя тоже не на французком:-)))
@eduardnakonechnyi5704
@eduardnakonechnyi5704 8 лет назад
Спасибо! огромное!!!
@stanislavsheshenin9534
@stanislavsheshenin9534 7 лет назад
Здравствуйте, Огромное спасибо за ваши уроки! У мня вот какой вопрос.... Я в унисон в секции установил видео как фон, но оно не проигрывается. В настройках я указал ссылку на ютуб. У меня вордпресс на локальном сервере. Еще раз спасибо за отличные уроки!
@user-tx7jg1ei5k
@user-tx7jg1ei5k 7 лет назад
СПАСИБО ТЕБЕ БРАТ!!!
@bernish
@bernish 6 лет назад
ТЫ просто бог
@oleksandrlitash1751
@oleksandrlitash1751 7 лет назад
спасибо большое!)
@bogdanchirukin1050
@bogdanchirukin1050 7 лет назад
от души тебе СПАСИБО!
@ostroand3722
@ostroand3722 6 лет назад
Как поставить больше лайков? Очень годно
@denistverdokhlebov3059
@denistverdokhlebov3059 8 лет назад
Задам каверзный, но очень важный вопрос)) а может курс мо этому фрейму сделаешь? Буду в числе первых покупателей :) за урок - низкий поклон. Реально радуют твои уроки. Спасибо друг!
@wdm
@wdm 8 лет назад
+Денис Твердохлебов благодарю. Есть такие мысли - шаблон от А до Я именно на унисоне.
@denistverdokhlebov3059
@denistverdokhlebov3059 8 лет назад
Отлично! Жду с нетерпением! :)
@user-jc1ux1tz7n
@user-jc1ux1tz7n 8 лет назад
+WebDesign Master Поддерживаю.
@Tattiuss
@Tattiuss 8 лет назад
+WebDesign Master Пожалуйста, сделайте такой курс!!! Тоже запишусь тут же:) Это праздник какой-то, что я Ваш урок нашла, а-то кругом - одни "инфо-бизнесмены", аки куча осенних листьев:)
@denistverdokhlebov3059
@denistverdokhlebov3059 8 лет назад
Поддержка аудитории и спрос уже есть ;)
@guardmedivh1
@guardmedivh1 6 лет назад
"у меня будильник, но я не помню что мне надо делать, поэтому мы продолжим" ахаххах я так по утрам перед учебой так же делаю
@I__SV__I
@I__SV__I 6 лет назад
Спасибо. Лайк и подписка с меня!
@kombik2864
@kombik2864 6 лет назад
Очень тебе благодарен
@user-po4kc8wc3m
@user-po4kc8wc3m 8 лет назад
Огромное спасибо
@user-ws7bj5oc1d
@user-ws7bj5oc1d 8 лет назад
Вопрос: А как перенести код написан в вёрстке на CMS? То есть, все, что я написал также отображалось в WordPress.
@_slowdream_
@_slowdream_ 8 лет назад
Такой вопрос. У многих елементов можно задавать цвет, размер и т.п. Допустим мы где-то в общих опциях хотим сменить цвет всей темы. Есть ли способ значение этой переменной вывести в исходники .sass (.scss) ? Видел компиляторы для WP, но данный финт ушами не знаю как реализовать. Перекомпиляцию повесить на событие "сохранение" (обновление) страницы с опциями. Лишним грузить сервер не будет.
@user-zb8yl5ms1f
@user-zb8yl5ms1f 7 лет назад
Автор крут!
@nicky14952281
@nicky14952281 8 лет назад
ещё у меня такой вопрос, есть ли способ сделать свой шаблон сначала на голом проекте (при помощи других front-end фреймворков, например yeo man) а потом посадить на wordpress? унисон классный, но как по мне - клёпка сайтов через графический интерфейс админки - не есть путь хиро-вориора. Вот например у меня linux. ибо железо не воспринимает нормально винду - она оч тяжёлая. Я не знаю почему ( все эти же действия проделывал в руте) но при добавлении customclass в options.php - ошибка unexpected ''customclass'', короче зло ваш вордпресс. Никакой свободы разработки тут нет
@ex3meboyXL
@ex3meboyXL 8 лет назад
Спасибо за урок ! Есть парочка вопросов. Если к примеру у меня не адаптивный сайт, или мне не нужны стили Bootstrap, стоит ли использовать данный фреймворк ? Есть ли возможность сброса стилей в данном фреймворке ?
@zwarvanmiller
@zwarvanmiller 8 лет назад
Спасибо огромное! Я тоже заметил, что в рунете нет нормальных туториалов на тему разработки тем для themeforest. Только много мелочей в видео не затронуто. Как например создать в Theme settings вкладки, чтобы все опции темы не растягивать на огромный лист скрола, а наоборот нужные функции в нужные вкладки. Как на премиум темах тем фореста... К примеру: General, Header, Social, Footer и так далее (открываешь каждую вкладку, а там свои метабоксы). Хотелось бы поучиться у тебя и этому, если будет время сделай урок и на эту тему пожалуйста. В любом случае с меня подписка и лайки.
@NotForSale49
@NotForSale49 8 лет назад
Доброго времени суток, посмотрел ваш гайд по unyson, очень полезная вещь. Вопрос такой, если у меня уже есть готовая верстка макета всех страниц, мне придется ее перепиливать с нуля под Unyson? Правильнее ведь сразу верстать с PSD прям под WP средствами unyson?
@PoulFly
@PoulFly 6 лет назад
Вот тут тоже не ясно, ты кстати разобрался с этим делом? год прошел как никак? Поделишься?
@dflip1254
@dflip1254 6 лет назад
Тут, вроде нет проблем. Верстка в html/css/js, а фреймворк php. Разбивай верстку на нужные блоки, ну и стили со скриптами подключай к wp.
@John-xh3qn
@John-xh3qn 8 лет назад
Здравствуйте , в чем разница, использования framework`a для создания темы и посадки верстки , или как в видео уроках по созданию LandingPage WP , и как это делать правильно , просто я услышал некоторые разногласия , может я не совсем понял суть , заранее спасибо
@vadimzozulia3456
@vadimzozulia3456 8 лет назад
Спасибо!
@suren7429
@suren7429 8 лет назад
Thank you!!!!!!!!!!!!!!!!!!!!!! very veryyyyyyyy good!
@user-rg6lr8wb6n
@user-rg6lr8wb6n 8 лет назад
Можно так же смотреть тему для Unyson на github. В ней реализован весь функционал из документации посредством framework-customizations. Просто смотреть как сделано там и вытягивать что нужно для себя :) Ссылка на тему: github.com/ThemeFuse/Scratch-Theme А за урок огромное СПС :)
@wdm
@wdm 8 лет назад
+Константин Алексеев да!
@user-gv3qd3xk7k
@user-gv3qd3xk7k 7 лет назад
Привет! А можешь рассказать как добавить shortcodes? К примеру тот же самый iconbox. Я самостоятельно должен его прописывать или все таки где-то уже есть репозиторий с готовыми решениями?) Спасибо большое за видео!
@prihea
@prihea 8 лет назад
Спасибо!!!Нет планов сделать подобное про OpenCart?
@user-gl3zm6nl2k
@user-gl3zm6nl2k 6 лет назад
Ты крутой)
@MsSofull
@MsSofull 8 лет назад
Спасибо за полезный урок! Осталось не ясным как в блоках Unyson прописывать php вызовы wp функций. Например в нужном мне месте меню и т.д. Или он только для контента а header и footer в php файлах руками ?
@eugeneugen6216
@eugeneugen6216 8 лет назад
Спасибо за уроки, действительно качественные, все разложено по полочкам, даже на Loft блоге, который Вы изредка читаете не находил ничего лучшего. А какая судьба с темой с Интернет-магазином на платной основе? И будут ли в будущем какие-то темы по коммерческим тематикам, например, тот же Woocomerce, на который в принципе нет нормальных уроков.
@wdm
@wdm 8 лет назад
+Eugen Eugen Спасибо. Планируются платные курсы. Курс WooCommerce скорее всего будет бесплатным, но когда - не могу сказать.
@user-ok8yq7qd5h
@user-ok8yq7qd5h 7 лет назад
подскажите пожалуйста, как вывести на страницу Image Picker manual.unyson.io/en/latest/options/built-in/image-picker.html в админке все появилось, но на страницу не получается вывести, как это правильно сделать?
@TheMrbetment
@TheMrbetment 7 лет назад
Установил плагин. Добавляю секцию и колонку, нажимаю редактировать, а настройки затемнены и нет возможности настроить!
Далее
skibidi toilet zombie universe 37 ( New Virus)
03:02
Просмотров 1,5 млн