Посадка верстки на Wordpress | Создание блога с нуля
HTML-код
- Опубликовано: 6 июн 2024
- ✅ Запишись на курс Wordpress до 14 апреля (включительно): frontendblok.com/courses/word..., чтобы получить:
- Низкую стоимость за обучение на старте продаж
- 3 сверстанных сайта в подарок для практики с Wordpress, которые пойдут в ваше портфолио
- Лучшему ученику индивидуального тарифа передам заказ на создание блога для FrontendBlok
🙌 Используем хостинг Webnames: www.webnames.ru/
⚡️ Вёрстку и код готовых файлов можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/tpverstak
3) разовая оплата через крипту new.donatepay.ru/@annblok (в комментариях напишите email и название видео)
👇 Таймкоды:
00:00:00 Коротко про проект
00:01:07 Курс Wordpress на FrontendBlok
00:02:13 Что будем использовать?
00:03:22 Установка Wordpress на хостинг
00:07:20 Знакомство с версткой
00:08:20 Авторизация в админке
00:09:05 Создание темы в Wordpress
00:12:10 Создание шапки и подвала сайта
00:14:17 Посадка главной страницы
00:14:55 Подключение стилей и скриптов
00:18:49 Подключение изображений
00:21:48 Подключение favicon
00:22:17 Замечание про header
00:23:09 Посадка страницы блога
00:26:56 Подключение шапки для блога
00:28:53 Работа с сайдбаром
00:36:01 Наполнение блога статьями
00:37:56 Перенос стилей для категорий
00:42:36 Работа с тегами
00:49:30 Отображение статей в блоге
01:01:01 Работа с пагинацией
01:10:00 Работа с “хлебными крошками”
01:11:16 Проработка блога на главной
01:18:56 Добавляем страницу категории
01:21:50 Добавляем страницу тега
01:22:51 Создаем страницу статьи
01:28:01 Подключение шапки для статьи
01:30:40 Отображение имени автора
01:31:28 Вместо заключения
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Спасибище за такой познавательный, и главное - пошаговый ролик. Лучи добра тебе
Обожаю учиться с Вами..! У Вас замечательная дикция, Вас легко слушать и воспринимать..!
Как можно 1,5 часа сухой и подробной информации выговорить без остановки!? Браво, вы крутая 👍💪
монтаж?
Ваши видео очень хороши. Что по сути, что по наполненности. Всегда можно почерпнуть массу полезной информации. Спасибо!
Спасибо Анна за урок всё четко и понятно.
Один из лучших движков! Сам начинал с него.
Очень нравятся ваши уроки, все четко и по факту и легко разобраться
Очень понятные и хорошие уроки у вас. Подробно и с пошаговым объяснением.
Ваши уроки просто потрясающие, вся информация усваивается с лёгкостью и отлаживается в памяти на долго. Жаль у нас в школе, были не такие учителя.
У нас в школе тоже так себе преподавали 😅
Да с таких видео уроков можно многому научиться.
Я понятия не имел, как создать блог с нуля с помощью Wordpress, теперь я знаю, как это сделать. Спасибо за этот замечательный урок и спасибо за то, что сделали это бесплатно.
Рекомендации, как всегда, четкие, понятные, думаю, всем доступные!
Спасибо за видео. Ваши уроки многому научат людей в этом деле неосведомлённых.
Содержательно. Это первое, что я подумал, когда увидел сколько оно длится. Хорошо, что я заметил таймкоды...
Видео очень хорошее, если кто-то не имеет понятия с чего начинать. То посмотрев его вы приближаетесь на шаг к своей задумке
Интересный образ получился. Так много нового для себя узнавал. Спасибо. 😊
Вот это годный контент. Мало про верстку Wordpress видосов на RUclips. Все на JS больше сосредоточены.
Подробно и с пошаговым объяснением,спасибо за видео!
Хороший урок, очень рад.
Анна хорошо рассказала. Спасибо, за проделанную работу. Было очень интересно
Спасибо за полезную информацию все очень понравилось!👍
Спасибо большое за видеоурок , всё понятно и доступно изложено .
очень интересный проект, как мне кажется) отличное видео!
Всё четко и понятно пояснили,спасибо!
Спасибо за видео, пару комментариев: 1. для того, чтобы посмотреть страницу очистив кэш css не нужно использовать отдельный браузер - есть соотв. плагины для браузера, которые выводят кнопку очистить кэш и перезагрузить страницу, также можно воспользоваться встроенной функцией Очистить кэш. 2. в хлебных крошках ссылку на главную страницу сайта лучше указывать / или используя функцию wordpress site_url() - тогда не нужно будет править код при переезде сайта на другой домен. Для хлебных крошек лучше жестко не прописывать пути, есть готовые примеры wp. 3. используйте все же менеджер ftp и visual studio code для работы с кодом, так у вас будет возможность отменить изменения и будет подсветка кода, также можно будет сворачивать большие блоки
Про плагины знаю, но о полезных плагинах более подробно планировала рассказать на курсе. Цель видео была показать именно перенос вёрстки 🙌
CTRL + F5 обновление страницы со сбросом кеша
Большое спасибо за полезную информацию.Очень качественный и подробный обзор.
Благодарю за обширный обзор создания блога с помощью Wordpress...
Отличный материал хорошо объяснила мне очень понравилось
Вроде с первого урока все усвоил. Спасибо за ясный и полный обзор и урок
Спасибо за очень хорошее информационное видео всё объяснили очень дохотчиво и ясно.
Интересный голос 😊
Как и личико 😊
Спасибо на информативность)
Благодарю ❤
Такие преподаватели должны быть в вузах
Обязательно возьму себе это видео сохраню. А то как ходить по сайтам я знаю) а вот как это всё самой сделать без понятия )
Анна спасибо за видео а что вы думаете по поводу связки Next js + Strapi headless cms ? получиться же намного производительнее, юзер экспайренс соверщенно другой на нексте все летает, можно где динамика SSR делать а где статика SSG и скроксть будет молниеносная + нет гемора с обновлением всего это дела как на врод пресс + нет плагинов которые на нексте не нужны + сама вёрстка и работа с лайутами в нексте а не эти повторения хеадера футера на каждой странице = что скажете ?
Здравствуйте Анна! Подскажите пожалуйста, где можно купить толковый курс node-js? Спасибо)
Как бы хейтеры не разводили хайп, вордпресс всегда остается актуален. Его ниша низко- и среднебюджетных, готовых и обкатанных решений пока надолго зацементирована удобством, доступностью, наличию тысячи бесплатных плагинов, сообществом.
Дополню: многие сервисы также делают решения для интеграций в раличные CMS. В их число всегда входит Wordpress.
Спасибо за ролик! Удачи в продвижении канала)
P.S.
можно заменить на так короче:)
Чем больше практики чем лучше запоминается материал , и потом щёлкается как орешки
увы, невозможно сделать донат
Чтобы стили обновлялись сразу, я дописываю к стилям и js версионность вида css/style.css?v= и проблема решена.
Благодарю вас дорогая за ценную и полезную инфу))).Давно уже мечтаю открыть свой блог!!)))
Всë гениальное просто сказывается, а я то пытался пытался, психанул и свою cms написал 😂😂😂
Отличный учебник!
Не могли бы вы создать учебник для Quill Forms?
Спасибо за видео. Глянула пока по диагонали, подскажите, может ли заказчик потом добавлять страницы и менять контент самостоятельно без спец знаний?
Да, статьи точно сможет. А вот если ему потребуется новая страница с отличающимся дизайном, то без разработчика, скорее всего, не сможет.
@@annblok_webdev спасибо!
думаю мало у кого получится все сделать хорошо с первого раза
Спасибо за стабильно отличный интересный и полезный контент👍
Объясните, пожалуйста, в чём смысл переносить обычный сверстанный в html сайт на Wordpress, только лишь в языке php?!
Чтобы из админки редукторы могли публиковать статьи и они выводились сразу на сайт
48:50 новые стили можно сразу увидеть, для этого достаточно прожать Ctrl+Shift+R
Да… когда я училась работать на ПК , то приходилось ходить в компьютерный клуб. Лет так 25 назад 😊
Скажите пожалуйста, а можно ли к такому блогу подключить комментарии? Спасибо
Можно
... Записать по теме wordPress (1:32).
создание:
- 'дочерней темы'
- 'глобальной настройки темы (customize_register)'
- 'метабоксов'
- 'своих типов постов (register_post_type)'
- 'таксономии'
- 'конструкторы (elementor,...)'
48:30 - почему тут вы использовали тот же принцип отступа через margin? Разве через gap было бы не лучше?
Почему бы не сбросить кэш вместо перехода в другой браузер?
спасибо, очень доходчиво расказываете, ато я уже заколебался на Блогере вести свой сайт.
Как же я долго **** возился с картинкой к посту, не надо его в img src вставлять, просто код php. Может кому то сэкономлю время, просто надо было на wp kama зайти и пример посмотреть) А за урок спасибо!
53:20 кто привык к программированию тем всё там понятно, заменить статичные прописанные значения на переменные или их функции.
Обзаведись SSH подключением. Или хотя-бы FTP. Желательно прям в IDE.
на этом и приехал, в подключении стилей в functions.php . Ничего не сработало в этой части и ответов по каме нет...
Чтобы скрипты из functions.php корректно вставлялись в вашу тему, необходимо размещать перед закрывающим тегом .
anna display: flex;
Как натянуть верстку на WordPress своими силами?
SE optimization - было правильно, ведь это сокр. search engine optimization. Получилась тавтология Search Engine Optimization Optimization
Мало сделать сайт, надо еще грамотно его запустить 👍
Анна почему тариф за 50 тыс доступ к уроку 2 месяца? Вы сума сошли? Вообще новичков не уважаете!!!
Исходя из постов, которые мы берем из баз данных, затем идет формирование количества страниц. Но, что то я не улавливаю сути ...
Мда, даже за верстку надо заплатить.
Инфы много по этой теме чет я прикурил(
Куча левой болтавни и рекламы!
Wordpress больше не актуален
43% сайтов всего мира работают на wordpress
Подобные комментарии больше неактуальны.
ЧТо за колдунство? Создал страницу About. Если в менеджере называю страницу page.php, то сайт по адресу /about показывает контент, а если переименовать в about.php, то сразу все ломается. Не понял принципа, почему страницу называем именно page.php и как сделать если у меня 5 страниц about, news, contact и так далее.
UPD: заработало, когда переименовал в page-about.php и так далее
Видео очень хорошее, если кто-то не имеет понятия с чего начинать. То посмотрев его вы приближаетесь на шаг к своей задумке