Мы используем cookie для стабильной работы сервиса. Подробнее

Сайт на Wordpress, Верстка сайта и перенос на CMS

ФорматОнлайн
Длительность30 минут в день
Объём8 занятий
По окончанииStepik
О курсе

Подробнее

В этом курсе мы создадим три сайта на Wordpress. Первый сайт мы очень быстро сверстаем на HTML, CSS, JS это будет одностраничный сайт. После этого мы создадим свою тему на Wordpress и настроим полностью наш сайт, перенесем его на настоящий хостинг, настроим форму для отправки письма и защитим свою почту от спама. Мы рассмотрим весь процесс создания Landing Page на Wordpress, начнем с установки CMS и постепенно сделаем нашу админку удобной для наполнения сайта информацией, а так же создадим слайдер на Swiper.js которого не было в вёрстке. В следующем модуле мы усложним задачу и создадим многостраничный сайт компании изготавливающей двери на заказ. Тут мы уже не будем верстать сайт, а вы сможете скачать готовый код верстки состоящий из 10 страниц и сразу же приступить к натяжке вёрстки на Wordpress. В рамках этой главы мы создадим многостраничный сайт на Wordpress. Настроим каталог товаров с фильтрацией по категориям, настроим пагинацию в каталоге чтобы товары отображались на нескольких страницах если их слишком много. Сделаем страницу товара с галереей, характеристиками и формой заказа товара. Настроим страницу с портфолио компании, где подключим галерею изображений. Научимся выводит записи из разных рубрик, выводить формы с помощью шорткодов, работать с плагином CFS и Contact Form 7 и в завершении курса перенесем все на настоящий хостинг, создадим почтовый домен, настроим работу наших форм и завершим создание сайта. В следующих нескольких модулях вы научитесь верстать сайт по макету из Figma и Pixso и переносить верстку на Worpdress (эти модули записаны в 2024 году и являются самыми актуальными) В этом видео курсе я покажу весь жизненный цикл переноса одностраничного сайта на Wordpress. Мы начнем с установки CMS Wodpress и создания базы данных в phpMyAdmin. После этого приступим к созданию своей темы, научимся подключать стили, скрипты и шрифты. Добавим возможность выбора логотипа сайта через панель настроек Wordpress. После этого познакомимся с произвольными полями на CMS Wordpress, установим плагин Custom Field Suite и научимся работать с ним. Создадим слайдер с помощью Swiper.js и бесплатного повторителя в плагине CFS. Постепенно перенесем все остальные разделы сайта на Wordpress с помощь плагина CFS, подключим и настроим плагин Contact Form 7 для отправки писем через форму обратной связи. В завершение работы над сайтом мы перенесем его с локального сервера Open Server на реальный хостинг, я покажу как перенести сайт максимально просто и быстро, настроим Contact Form 7 на оправку писем, добавим защиту от спама с помощью интеграции Google Recapcha и скроем значок recapcha на нашем сайте. После того как вы пройдете обучение в данном курсе, вы сможете с легкостью перенести практически любой сайт на Wordpress. Имея верстку сайта на HTML+CSS, вы просто и без проблем сможете создать свою собственную тему на Wordpress и настроить её правильно, для того чтобы сайтом можно было управлять из админки.
Требования

Что нужно для старта

  • Уверенное понимание основ HTML и CSS
  • Базовые навыки программирования на JS и PHP
  • Базовые навыки работы с компьютером
  • Никакой другой предварительной подготовки
Результат

Что вы получите

  • верстать сайт из Figma в современных реалиях без Dev Mode
  • верстать сайт из Pixso
  • верстать сайт из Marsy
  • делать адаптивный дизайн под разные устройства
  • работать с CMS Wordpress (установка, настройка, создание базы данных)
  • работать с произвольными полями (плагин CFS) и настраивать админку сайта
  • настраивать плагин Contact Form 7 для создания форм обратной связи
  • создавать свою тему сайта на Wordpress
  • работать со слайдером изображений Swiper.js
  • делать свой сайт мультиязычным с помощью плагина ConveyThis
  • переносить сайт на настоящий хостинг и подключать к нему доменное имя
  • работать через FTP протокол
  • подключать SSL сертификат к сайту
Аудитория

Для кого этот курс

  • Этот курс для начинающих верстальщиков желающих научиться верстать сайт по макету из Figma, Pixso или Marsy и изучить движок Wordpress и расширить свой спектр предоставляемых услуг на рынке.
Содержание

Программа курса

8 занятий
ТемаЧто внутри
01Верстка сайта из Marsy, 2020

- Введение, Подготовка проекта
- Верстаем шапку сайта
- Раздел "О нас"
- Раздел "Команда"
- Раздел "Услуги"
- Раздел "Контакты"
- Делаем адаптивный дизайн для сайта
- Делаем меню сайта на JavaScript

02Сайт на Wordpress, 2020

- Установка Wordpress, Введение
- Создание темы на Wordpress
- Подключение стилей, скриптов и шрифтов
- Выбор логотипа и иконки сайта
- CFS повторитель на Wordpress
- Слайдер Swiper.js на Wordpress
- Создание раздела услуги
- Работа с Contact form 7
- Перенос с локального сервера на Хостинг
- Как быстро сделать мультиязычный сайт
- Защита от спама, интеграция reCAPTCHA
- Как скрыть логотип reCAPTCHA

03Сайт на Wordpress, 2021

- Обзор сайта который мы создадим на Wordpress
- Установка Wordpress и обзор админки
- Создание темы и выбор логотипа
- Шаблоны страниц и меню
- Портфолио, Политика конфиденциальности и ошибка 404
- Наши преимущества, вывод записей в цикле по рубрикам
- Шорткод формы и работа с Contact Form 7
- Вывод записей по рубрикам
- Вывод полей CFS, открыть PDF и скачать файл
- Контакты и библиотека List.js
- Каталог с фильтрацией, пагинация, иерархия темы
- Страница товара
- Главная страница
- Перенос сайта на хостинг

04Верстка сайта из Figma, 2024

- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles

05Верстка сайта из Pixso, 2024

- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание

06Сайт на Wordpress, 2024

- Введение
- Установка Wordpress
- Админка Wordpress
- Создание темы
- header и footer
- Подключение стилей
- Выбор логотипа
- Open Server 6.0.0
- Шаблон страницы
- Плагин CFS
- Картинка на фон
- Ошибка 404
- Цикл на CFS
- Домашнее задание
- Завершаем работу
- Перенос на хостинг

07Блочные темы, 2026

- Установка Wordpress 7
- Классические и блочные темы
- Песочница Wordpress
- Local Wordpress
- Создание блочной темы
- Шрифты и цвет
- Меню из Figma
- Итоги модуля

08В разработке

- Урок
- Урок
- Урок

01Верстка сайта из Marsy, 2020

- Введение, Подготовка проекта
- Верстаем шапку сайта
- Раздел "О нас"
- Раздел "Команда"
- Раздел "Услуги"
- Раздел "Контакты"
- Делаем адаптивный дизайн для сайта
- Делаем меню сайта на JavaScript

02Сайт на Wordpress, 2020

- Установка Wordpress, Введение
- Создание темы на Wordpress
- Подключение стилей, скриптов и шрифтов
- Выбор логотипа и иконки сайта
- CFS повторитель на Wordpress
- Слайдер Swiper.js на Wordpress
- Создание раздела услуги
- Работа с Contact form 7
- Перенос с локального сервера на Хостинг
- Как быстро сделать мультиязычный сайт
- Защита от спама, интеграция reCAPTCHA
- Как скрыть логотип reCAPTCHA

03Сайт на Wordpress, 2021

- Обзор сайта который мы создадим на Wordpress
- Установка Wordpress и обзор админки
- Создание темы и выбор логотипа
- Шаблоны страниц и меню
- Портфолио, Политика конфиденциальности и ошибка 404
- Наши преимущества, вывод записей в цикле по рубрикам
- Шорткод формы и работа с Contact Form 7
- Вывод записей по рубрикам
- Вывод полей CFS, открыть PDF и скачать файл
- Контакты и библиотека List.js
- Каталог с фильтрацией, пагинация, иерархия темы
- Страница товара
- Главная страница
- Перенос сайта на хостинг

04Верстка сайта из Figma, 2024

- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles

05Верстка сайта из Pixso, 2024

- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание

06Сайт на Wordpress, 2024

- Введение
- Установка Wordpress
- Админка Wordpress
- Создание темы
- header и footer
- Подключение стилей
- Выбор логотипа
- Open Server 6.0.0
- Шаблон страницы
- Плагин CFS
- Картинка на фон
- Ошибка 404
- Цикл на CFS
- Домашнее задание
- Завершаем работу
- Перенос на хостинг

07Блочные темы, 2026

- Установка Wordpress 7
- Классические и блочные темы
- Песочница Wordpress
- Local Wordpress
- Создание блочной темы
- Шрифты и цвет
- Меню из Figma
- Итоги модуля

08В разработке

- Урок
- Урок
- Урок

Документ после выпуска

Stepik

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Сайт на Wordpress, Верстка сайта и перенос на CMS» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Информация обновлена 3 сентября 2026 г.

Продолжить выбор

Похожие курсы

Apache Kafka База
Apache Kafka База

Изучите Apache Kafka под руководством опытных спикеров с АМА-сессиями,закрытым чатом и сертификацией.

Онлайн
50 000 ₽от 12 500 ₽/мес на 4 мес.
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипе…

Онлайн8 занятий
490 ₽
Создание и анимация сайта
15 ак.ч.
Создание и анимация сайта

В этом курсе мы узнаем, как создать интересный сайт с необычной сеткой и композицией. Научимся экспериментировать и находить новые решения в дизайне. Ну и конечно же добавим анима…

Онлайн8 занятий
Цена по запросу
Веб-мастер
−35%7 месяцев
Веб-мастер

На курсе Вы узнаете, кто такой веб-мастер и сможете применить свои приобретенные знания для продуктивной работы в данной области

Онлайн5 занятий
85 100 ₽−35%
55 300 ₽
Веб разработка - переподготовка
−40%2 месяца
Веб разработка - переподготовка

Курс профессиональной переподготовки «Веб разработка» по всей России. ✓ Дистанционное обучение ✓ Получение диплома с бесплатной доставкой ✓ Цена 32 980 руб.

Онлайн5 занятий
Текстовые уроки
54 980 ₽−40%
32 980 ₽
Начать без затрат

Бесплатные курсы

Основы веб-разработки
Бесплатно1 час
Основы веб-разработки

Здесь вы познакомитесь с основами верстки, программированию на JavaScript. Курсы этого трека помогут освоить все ключевые навыки, которые нужны фронтенд-разработчику для создания…

Онлайн1 занятийНачальный
Домашние задания
Бесплатно