Верстка сайта и посадка на wordpress

В видео сначала полностью с нуля, с psd макета верстаю сайт, а потом плавно и без боли переношу свою верстку на wordpress. Видео подойдет всем кто хочет разобраться с cms системой вордпрес и научиться создавать новые темы, переносить готовую верстку на движек. Вы поймете основные принципы такой работы, как все устроенно, и что вам нужно делать, чтобы без проблем выполнять такие заказы на фрилансе.

Доп видео для урока:
установка Open Server https://youtu.be/SBTroONAzrU

Ссылка на psd макет: https://drive.google.com/drive/folders/1AA03IjQJknBnYM-QDmXeqUpxgPWCJ0VQ?usp=sharing

Подпишитесь на канал, если вам понравилось данное видео:
http://bit.ly/2IFzwBZ

Видео о сss grid:

Верстка сайта он начала до завершения:

About admin

100 comments

  1. Олег Десятников

    Полезное видео! Спасибо!

  2. Огромное спасибо!=)То что вы делаете – это просто бесценно !))Всё очень послдеовательно,доходчиво,информатвно и позитивно =)

  3. Олег Десятников

    Удивительно)) Сколько у тебя терпения, НЕ сказать что вордпресс это днище)) Зато бабки на фрилансе платят 🙂

  4. ~~~~~~~Люблю Тебя ЧуваГ!!!!! ~~~~~~~СПАСИБО!!!!!!!!

  5. Спасибо за прекрасную вечеринку

  6. andrey voytovich

    Вадим!как всегда,просто великолепно!!!!!

  7. Василий Иванов

    После видосов про гоу серф и многой верстки, я смотрю этот видос на 1.25, и на изи пролетаю опережая Вадима. Жду с нетерпением блог или интернет магазин, уже очень хочется узнать нюансы wordpress! Спасибо за труд! 🙂

  8. Владос, что делать если после подключения jquery и скриптов не появляется админ панель?

  9. Василий Иванов

    Тут некоторая часть отсутствует про скачивание и т.д., это пофигу за верстал на изи, главное чтобы новички не напряглись 😀

  10. Василий Иванов

    Я на x2 досмотрел, классный урок! Будет круто уже полноценный сайт сделать, с блогом, добавлением в блог новостей, магазин и т.д.! Спасибо за урок!

  11. Сергей Федюков

    Влад го сайт магазина с 0 до натяжки такого контента нет

  12. Спасибо! Видео супер – нашла ответы практически на все вопросы!

  13. Vladyslav Lanchak

    Хоть и долго но овер юзфул!!! Спасибо.

  14. Богдан Билайк

    люди используйте инсайдерскую версию vs code там логотип зеленый а не синий

  15. Юлия Соболева

    Вадим, спасибо за твои видео! Подача просто боженька говорит. Все понятно. Я нашла работу как раз связанную с вордпрессом. Почему я так осмелела, спросите вы? Да благодаря этим видео! Бесконечное спасибо.

  16. Сергей Николаев

    Сколько лет верстаешь?

  17. Павел Кожемрак

    Спасибо за очень очень познавательное видео!
    впервые доступно и понятно объяснили как верстать под вордпресс и создавать темы Но не только ещё
    познакомили с Visual Studio Code реально удобный редактор кода оказался (возможно я даже нашел замену Dreamweaver'у)
    с новыми фишками фотошопа 2018г. он оказывается слои по отдельности может импортировать и с svg научился работать (в сс 2014 этого нету)
    локал машину тоже апробую (мож не такая хрень как Денвер) а то всё на живом хосте делаю а он не резиновый

  18. Спасибо бро ! Ты настоящий друг !

  19. Ставлю 100 лайков

  20. Огромное спасибо !

  21. Василий Иванов

    Куда еще лайк поставить, чтобы выходили новые видео-уроки по WP? 🙂

  22. Вадим, необходим полный видос про записи) что то плохо понял(думаю, и не только я

  23. На сколько мне показалось, была пропущена часть с project__name и dowload.

  24. Maxim Gritsutenko

    Спасибо за видос Владос )). Красавчик))

  25. Вадим очень крутое видео, спасибо. Интересно и доходчиво рассказываешь. Ставил бы лайк за каждую минуту, жалко поставить можно только один.

  26. Даниил Костюк

    А можешь запилить видос, по поводу того, чем занимаешься в компании. Я понимаю что фронт, но допустим, что именно входит в твои обязанности кроме верстки? Очень интересно узнать.

  27. Раскажите как сделать регистрационную форму на сайте или помогите..

  28. Спасибо за видео! Было много нового и интересно.

  29. Vitaliy Kostin

    Благодарю за видео! Скажите пожалуйста, уже есть видео про верстку интернет магазина? (в этом видео упоминалось о планах создания такого видоса).

  30. Огромное спасибо за видео! Лайк и подписка от меня)

  31. на 07.2020 при первом логине пароль и логин от PHP mysql mysql

  32. Не знаю, может кому поможет: в вижуал студио: двойной клик – выбор слова, тройной – выделение строки, четверной (если есть такое слово:)) – выбор всего текста документа

  33. 2 часа 13 минут, наверное лучше в функции bloginfo указать name вместо discription (дискрип – это вместо описания сайта, наверное)?

  34. "Знаете какая идея мне пришла в голову…? Нет не знаете" :))))

  35. владимир жалеев

    а что находиться в main.js?

  36. владимир жалеев

    аааа…мой косяк просмотрел, а magnifik-popup не хочет чет работать ….

  37. У меня одного WP словил глюков с плагином ACF в локалке? пропадает отображение полей, не меняется содержимое поля в админке, удалишь поле, создашь заново, подхватывает сохраненную копию. PS: все вертится на опенсервере php7/3; PSS: я нубчик.

  38. Dmitry Varnavskikh

    Если у кого тоже не работает wh magnific popup light и просто черный фон вокруг, картинки без стрелок перемотки, просто закомментируйте прошлый магнифик в файле functions.php,( все скрипты js там и один магнифик css вверху) и должно заработать. 2 часа с этим мучался, не работал плагин. Может кому-то поможет.

  39. владимир жалеев

    ну да …дизайнер вобще красавЧег! кнопку картинкой пришлось сделать….

  40. anastasia uiux

    Очень полезный урок. Спасибо!

  41. владимир жалеев

    может кому пригодиться, три картинки на фон должны по моему меняться :
    @keyframes clr

    {

    0% {background-image: url('../timber/assets/img/bg1.jpg');}

    50% {background-image: url('../timber/assets/img/bg2.jpg') ;}

    100% {background-image: url('../timber/assets/img/bg1.jpg');}

    }

    .header{

    width:100wh;

    animation: clr 10s infinite;

    }

  42. 1:16:49 таймкод, часть пропущенного кода

  43. Когда будет сайт блог на вп?)

  44. Василь Заячківський

    Спасибо за видос, годнота) запили как залить все ето на хостинг!

  45. 2 вопроса. 1ый: где взять папку "Start_Project"? 2ой: как автор так быстро печатает названия классов и дивы? Через какие горячие клавиши?
    Очень полезно, спасибо)

  46. Oleg Dyachenko

    Спасибо за видео. Много стало понятно.

  47. Спасибо, Герман!)

  48. Крутое видео! Очень хочется увидеть, как заливать вп на какой-то хост!

  49. Programming FBS-end

    за чувство юмора отдельное спасибо!

  50. ты не просто делаешь полезное дело, это благотворительность)

  51. Блииин, я зашла посмотреть видос просто о верстке, в итоге тут вордпрес! Я ИСКАЛА МЕДЬ, А НАШЛА ЗОЛОТО!!!!!!!!!!!!!!!!!!!!!!!СПАСИБО
    лайк, колокольчик для поддержки. Спасибо, от души

  52. Andriy Lazarenko

    Не підключаються стилі через <?php wp_head(); ?> Не можу знайти помилку. Може це Cannot validate since no PHP executable is set. Use the setting 'php.validate.executablePath' to configure the PHP executable.

  53. Вадим, большое спасибо за видос, ты крут!)

  54. Олег Подваленко

    дважды пробовал переделывать, всё равно одно и то же – не хочет срабатывать плагин WF Magnific Lightbox… именно всплывашка не работает, при клике на картинку, браузер пытается открыть её в новом окне, и в адресной строке он указывает путь через какую-то папку simple-page, которую я в директории ну вообще не виду… всплывающего окна при клике на картинку нету 🙁 2 раза переделывал, всё равно один и тот же результат, 20 раз перепроверял, код один в один напечатан….. что может быть не так ? 🙁 причём пробовал другой плагин поставить WP Magnific Popup, такая же история, открывает новую страницу, а на ней ничего, вместо всплывающего окна…

  55. Если после фронтенда, интеесует углубится в бэкэнд для коммереских сайтов, по типу доставок, магазинов и тд, + с разными функциями по типу бронирований, записей и т.д. И еще дальше перейти на верстку и создание моб.приложений с теми-же потребностями – Стоит ли изуать WP ?
    Вопросов как и инфы много, а конкретных дельных советов мало. Такой себе Информационный шум, после которго поитав и погуглив уже не знаешь что как и зачем )
    Заранее спасибо за ответ )
    Можт кому не лень просветить посоветовать киньте телегу )
    + лайк, и коммент побольше.
    ПС: Сильно не засирайте )

  56. Павел Фёдоров

    Вадос, ну ты капец усидчивый, 5 часов почти с полными комментариями))
    Убрал-таки страх этого Вордпресса) Теперь осталось закрепить на макете посложнее

  57. От 0 до 1 Привет! Наткнулся на статью, что не рекомендуют использовать бэм для WP, так как при подключении меню, nav>ul классы можно определить, но в li>a WP уже сам генерирует верстку и классы не прописать! Можно стилизовать css, nav li {}; nav a{}; Но я думаю это не правильно! Или правильно? Как в таких случаях поступать? Или я наткнулся на старую статью?

    И еще, почему не используют <?= ?> ???

  58. Диана Димитрова

    Спасибо за эту вечеринку!

  59. Диана Димитрова

    Жду еще видео про wordpress и как загружать на хостинг 🙂

  60. Дмитрий Синько

    Если шрифты подключеные в css через font-face, как их в ВП?
    Если картинки подключены в стилях?

  61. Урок хороший. Но сам вордпрес, это еще тот костыль…

  62. Grimjjov Jeagerjaques

    спасибо за видео !

  63. Ашимов Бектур

    Здравствуйту Вадим это просто бомбический урок вы открыли мне глаза.!!!!!!

  64. Пишу коммент чтобы толкать этот локомотив! Как говорится респект и уважуха за видосы и подачу. Ждем еще по WP видосы и мне было бы интересно посмотреть про webpack и разбор того в каких случаях лучше применять его, а в каких Gulp

  65. Диас Абдолдаев

    Спасибо)) Все подробно, и понятным языком объяснили))

  66. Dima Nezdymenko

    Жду не дождусь еще видео по WordPress)

  67. 1:35:00 можно провернуть такое на js?

  68. Диас Абдолдаев

    Привет) пожалуйста помоги, где можно увидеть логин и пароль для PhpMyAdmin?

  69. ВАДИМ ЗДАРОВА посмотри видео от 1:05:38 до 1:11:04 минут вообще непонятно ещё какие то коды написано или раньше написал ну сколько раз рассмотрел не понял или ты выключил камеру хз пни пж

  70. Милая Любимая

    Все сделала как на видео (только название сайта другое), но почему-то, не отображаются изображения, хотя в view-source:http://test-wp/ можно найти строчку кода – <link rel='stylesheet' id='main-style-css' href='http://test-wp/wp-content/themes/timber/style.css?ver=5.5.1&#39; type='text/css' media='all' />, что указывает на обязанность нормального отображения изображений, но их нет(((

  71. РИСУНКИ ДЛЯ СРИСОВКИ FaniBiz

    Когда добавляю вторую страницу, то в ней отображаются css свойства с файла index html, я уже все перепробывал, голову сломал, покажи как добавлять вторую страницу и интегрировать. Спасибо

  72. Кто из 2020, не у кого при использовании get_template_directory_uri() в wp_enqueue_style, не появлялась пустая страница с сообщением фатальная ошибка строка(например) 8.( Там как раз get_template_directory_uri() ).

    Изменил на get_stylesheet_uri() и всё прошло, но всё равно хочу знать что это было

  73. В Группах Полей нужно скрыть текстовый редактор …

  74. Андрей Майер

    Спасибо огромное за это видео!!! ВЫ и Ваш канал очень помогает в изучении вёрстки.

  75. 2:21:54 Важный момент)))

  76. Олег Щербань ТКС-20М

    Чел , спасибо помог сделать тест задание для роботы

  77. 0:35 чувак, не стоит так мучиться. Просто изначально трансформировал бы выделение и все.

  78. Все конечно хорошо с советами идти на фриланс и брать заказы, но кто тебе заказ-то даст, если ты еще ничего не делал? ))) Весь фриланс рынок уже поделен между теми, кто уже не первый год этим занимается. Ну какой смысл заказчику отдавать заказ тебе, когда есть более опытные люди, которые уже более 10 лет эти занимаются? Уж только если свои услуги вообще за копейки продавать. Но тогда рискуешь даже электричество не окупить ))) У меня знакомый уже пару месяцев ищет заказы на фрилансе. Конкуренция дикая, на новичков даже внимания никто не обращает. Даже очень опытные люди готовы сайт сверстать под ключ за $50. На что можно тогда новичку надеяться, на $5?
    Я в вебе на фрилансе сам не работал, но работал с дизайном, в т.ч. сайтов. Даже лет 5 назад уже было практически не реально взять заказ. Опять же, только если почти за даром делать.

  79. Чем больше смотрю, тем больше кажется, что подобный лендинг проще сделать на каком-нибудь фреймворке, даже с учетом того, что потребовалось бы запилить какую-то админку. По времени ушло бы скорее всего столько же времени, но мне кажется, сам процесс был бы куда удобнее. А если без админки, то и быстрее.

  80. 2:21 подпишитесь на канал

  81. Mirabbos Mirsamiqov

    класс

  82. Жаль нельзя много лайков накидать

  83. Почему OpenServer не видит "Мои сайты"?

  84. Данис Зарипов

    Наконец то дельный видос, который проливает свет на связку админки с вёрсткой. Спасибо.

  85. Спасибо Вам большое, за Ваш труд. Вы очень помогаете и мотивируете!

  86. Олег Иванов

    Просто супер урок!!! Спасибо! Теперь моя копилка знаний пополнилась еще больше! P/S Очень крутая подача у автора, респект!

  87. Kirill Kononov

    Непонятно, для чего нужно статичному лендингу делать динамичный WP?

  88. Спасибо тебе большое!!!!

  89. Rail Batyrshin

    эта верстка была как я понял по БЭМ?

  90. после вставки background-image в html ничего не заработало

  91. Вадим, спасибо за интересные видео. ACF, до сих пор актуально? Может пора смотреть в сторону использования кастомных блоков и Gutenberg, к примеру с использованием плагина Lazy Blocks или Genesis Custom Blocks? Интересно твоё мнение. Я пришел в WordPress после Drupal и OctoberCMS, потому как все хотят WP 🙁
    На фрилансе до сих пор натягивают с использованием ACF? Для меня это дико и не юзерфрендли выглядит после Drupal и OctoberCMS 🙂

  92. Ребят , кто нибудь помогите , почему у меня не подключается админ панель , как у Вадима после подключения скриптов ???

  93. Александр

    Го ещё про WP

  94. Денис Свистоплясов

    4:36:54
    Названия для домов "Веточка из глины… Белочка спит в лесу"
    Че-то так проорал с этого))))

  95. Tatyana Tatyana

    Спасибо за видео! Вы уже идею посадить на WP что-то сложнее оставили?

  96. Диас Абдолдаев

    Привет! Помоги пожалуйста) Как сделать внутренние страницы на вордпресс?

  97. Tatyana Tatyana

    ul и li в последнем цикле можно вообще убрать, если они не нужны и просто поставить часть кода вместо li, который необходимо циклично выводить..

  98. Красавчик вообще, супер игрупер видосы, смотрю, учусь, радуюсь, спасибо )

  99. Про Триминг в photoshop уже в курсе?

  100. bloginfo(), есть же объект $_SERVER

Leave a Reply

Your email address will not be published. Required fields are marked *