Курс по созданию темы WordPress с нуля на основе готовой HTML-вёрстки

В процессе этого курса вы научитесь создавать темы для WordPress абсолютно с нуля, на основе готовой вёрстки и дизайна. Тему можно будет целиком редактировать через админку и кастомайзер. Без плагинов. Без воды.

Вёрстка, с которой мы будем работать

Скриншоты вёрстки, с которой мы будем работать на этом курсе. Но безусловно, курс подходит под любую вёрстку, поэтому, если вдруг вы захотите использовать свою, то так даже будет лучше!

Натяжка вёрстки на WordPress, главная страница сайта
Создаем форму обратной связи в WordPress на основе готовой HTML-вёрстки
Создание темы WordPress на основе готовой HTML-вёрстки

По итогам курса:

  • Станете настоящим разработчиком на WordPress

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

  • Будете знать, что хорошо, а что плохо

    Иногда люди учатся на каких-то рандомных видосиках на YouTube, и потом на их код страшно смотреть. За мои почти 15 лет работы с WordPress я, кажется, столкнулся уже со всеми вариантами подобных творений и точно знаю, как делать не нужно.

  • Легко найдёте себе или заказы на биржах фриланса, или вакансию

    Решил не прикладывать тут скриншоты, но факты на лицо: во-первых, WordPress — это более 40% всех сайтов интернета, во-вторых, мы всегда рады новым разработчикам на WordPress в свою команду.

  • Приобретёте уверенность

    Моя задача — не только дать вам готовый контент и пошаговый план действий, но и подать его таким образом, чтобы вы поняли, насколько всё на самом деле легко и вдохновились на достижения.

План курса

01

Основы создания тем для WordPress

Покажу вам два пути, по которым можно пойти, создавая тему для WordPress. В результате этого урока наша тема появится в админке и её можно будет активировать. Начнём процесс переноса вёрстки главной страницы в тему, при этом сразу изучим несколько ключевых функций WordPress. Расскажу, как быстро находить ошибки в своём коде.

02

Динамическое подключение CSS и JavaScript

Знали ли вы, что в WordPress нельзя подключать стили и скрипты обычным способом через теги <link> или <script>?

О том, почему, и как это делать правильно мы и поговорим в этом уроке.

03

Меню

В этом уроке запрограммируем меню нашей вёрстки. Как использовать области меню в случае, если на сайте несколько меню, а также как создавать меню с несколькими уровнями вложенности элементов. И самое главное – научу натягивать абсолютно любую верстку меню, не изменяя её.

04

Структура файлов темы

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

Приступим к натяжке всех остальных страниц вёрстки: страница ошибки 404, страница контактов, страница поста, статичная страницы, архивы категорий и меток.

05

Основной цикл

Цикл WordPress – это стандартный механизм WP, использующийся для вывода практически любого контента на сайте.

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

06

Прилепленные посты

Очень часто люди, столкнувшись с необходимостью вывести какую-то определенную запись на блоге перед всеми остальными, обращаются к фрилансерам (реальная история), не зная того, что такой функционал уже предусмотрен в WordPress по умолчанию.

В этом уроке покажу вам не только то, как сделать, чтобы одна или несколько записей в блоге выводились в начале, но и оформим их в другом стиле.

07

Поиск на сайте

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

08

Изображения. Размеры изображений

Один из самых важны уроков нашего курса – в нём вы узнаете, как WordPress обрабатывает все загруженные изображения, а также о том, как в разных местах сайта использовать разные размеры и при этом не захламить ими место на сервере.

09

Дополнительные циклы

Дополнительные циклы – это когда на какой-то определённой странице, помимо её основного контента, мы выводим посты каким-то ещё образом. В нашей теме два таких места – блок с похожими записями и свежие посты в сайдбаре.

10

Настройка и стилизация редактора Gutenberg

В этом уроке мы сделаем так, что при редактировании записи / страницы в админке они будут выглядеть точно так же, как и на сайте!

Что конкретно мы сделаем: подключим в Gutenberg шрифты – такие же, которые используются в вёрстке, настроим размеры шрифтов и абзацев и межстрочные интервалы, стилизуем заголовки, функционал «Буквицы» (это когда первая буква в абзаце большая), блок цитаты, списки, ширину контента и т.д.

11

Форма обратной связи

В этом уроке я покажу вам как работать с формами в WordPress, и на примере мы подключим форму обратной связи, которая у нас с вами есть в вёрстке, на странице «Контакты». И мы не будем использовать никакие плагины для этого!

12

Виджеты и сайдбары

В этом видеоуроке я покажу вам не только, как по полной использовать стандартный функционал «Виджеты» в WordPress, но и покажу, как отключить те, которые вам не нужны.

13

Пользователи

В этом уроке поработаем в админке, а именно – добавим несколько дополнительных полей в профили пользователей («Инстаграм», «Facebook», «Twitter», «Pinterest»), после чего выведем значения этих полей в блоке об авторе под основным контентом записей.

14

Комментарии

А в этом уроке мы с вами научимся натягивать вёрстку комментариев на функционал в WordPress. Покажу, как можно реализовать поддержку «ответов на комментарий» / древовидных комментариев.

15

Защита от спама

Обычно, стоит вам только опубликовать ваш сайт на WordPress в сети, ждите огромного количества спамных комментариев. Причём самое интересное, что это случается даже, когда у вас на сайте нет функционала комментариев.

В этом уроке покажу лёгкий и действенный способ защиты от спама без плагинов!

16

Мета-поля на примере счётчика просмотров

Мета-поля и метаданные – это ещё одна ключевая тема, в которой нужно разбираться любому разработчику на WordPress. Расскажу и покажу вам несколько способов работы с ними, поделюсь, почему некоторые способы я считаю лучше, а другие хуже. И всё это мы сделаем на примере обычного счётчика количества просмотров контента.

17

Настройки темы

В этом видеоуроке мы с вами добавим в нашу тему немного настроек, а именно – настройку фиксированной/нефиксированной шапки и позволим пользователям изменять текст в футере сайта.

Чтобы подробнее понять, как всё это будет выглядеть и работать – посмотрите это видео:

18

Произвольные типы записей

Типы записей — это пожалуй одна из тех вещей, которые превращают WordPress из движка для блогов в CMS, на которой можно создать практически что угодно. В этом уроке научимся создавать свой произвольный тип записи и работать с ним.

В качестве примера – доработаем форму обратной связи таким образом, чтобы помимо отправки сообщения она также сохраняла информацию о лидах в базу данных и чтобы эта информация отображалась и редактировалась в админке WordPress.

19

Произвольные таксономии

Типы записей и таксономии в WordPress тесно связаны, так что этот урок – логическое продолжение предыдущего. В нём мы доработаем пример с лидами – сделаем их разделение по странам.

20

Работа со сторонними API

Иногда на сайте бывает нужно вывести например курсы валют или погоду на сегодня. Для этого и нужен HTTP API в WordPress, с которым мы научимся работать в этом уроке.

21

Интернационализация и локализация

В этом видеоуроке я научу вас добавлять в тему поддержку возможности перевода (интернационализация), а также переведём её на какой-нибудь язык (локализация).

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

Отзывы о курсах Миши

Пару лет вёл курс по WordPress оффлайн, за то время накопилось несколько отзывов студентов. С тех пор правда больше отзывы не собирал, наверное зря.

Большое спасибо за проведённый курс, разбираться в WordPress начал намного лучше, чем до этого. WordPress очень мощная и интересная штука, знаний осталось много, осталось применить их на практике... — Владимир

Даже несмотря на то, что я уже сталкивалась с вордпрессом и знала некоторые основы, мне очень помогло, потому что позволило структурировать все знания, позволило восполнить пробелы... — Лена

Миша Рудрастых ведет курс

Ваш преподаватель

Миша Рудрастых

«Открыл в себе любовь к преподаванию совершенно случайно. Сначала я создал этот блог, как заметки для самого себя, а потом обнаружил, что мне нравится именно объяснять все тонкости, рассказывать, что, как и почему нужно делать. А ещё люблю кофе, книги про Гарри Поттера и сноуборд».

Купить курс
  • 21 видеоурок
  • Можно скачать готовый код после каждого урока
  • Можно начать проходить курс сразу же после оплаты
  • Достаточно базовых знаний HTML и CSS, чтобы пройти курс
  • Единоразовый платёж
  • Доступ навсегда
  • Уроки актуальны в 2024-м году
5000 р

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