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

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

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

WordPress – это 40% всех сайтов интернета

Это значит, что имея навыки разработки сайтов на WordPress, вы всегда сможете найти себе работу (неважно, фриланс или офис), как в русскоязычном сегменте интернета, так и в англоязычном.

В подтверждении своих слов вот ссылка на статистику, вот ссылка на результаты поиска на крупнейшей бирже фриланса Upwork по запросу «wordpress».

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

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

Этот урок доступен бесплатно. Для просмотра зарегистрируйтесь или войдите.

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

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

Этот урок доступен бесплатно. Для просмотра зарегистрируйтесь или войдите.

В этом уроке, который длится практически 40 минут, мы сделаем первые шаги по интеграции интерфейса в админке WordPress, а именно – запрограммируем Меню нашей вёрстки:

вёрстка меню WordPress

А непосредственно в админке оно будет выглядеть вот так:

интерфейс управления меню WordPress

Рассмотрим такие моменты, как:

  • Что такое области меню? Регистрация и использование нескольких областей.
  • Вложенность меню.
  • Сложные модификации меню при помощи класса Walker.

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

Приступим к натяжке всех остальных страниц вёрстки:

  • Страница ошибки 404,
  • Страница контактов,
  • Страница поста,
  • Страница статичной страницы,
  • Страница категорий и меток.

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

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

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

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

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

Тема изображений в WordPress довольно обширна, поэтому я выделил на это отдельный урок.

В этом уроке вы узнаете:

  • Что такое функционал «Изображение записи» и как включить его для вашей темы.
  • Откуда берутся разные размеры изображения для разных частей сайта. Как ими управлять?
  • Вы научитесь не только изменять/отключать стандартные размеры, но также и регистрировать любые свои.
  • Как почисить ваш сайт от неиспользуемых размеров?
  • Ну, и естественно, о том, как выводить нужный вам размер в нужном месте в теме.

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

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

Стилизация редактора Gutenberg в WordPress под дизайн вашей темы

Что мы сделаем в итоге:

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

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

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

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

А в этом уроке мы с вами научимся натягивать вёрстку комментариев на функционал в WordPress.

Покажу, как можно реализовать поддержку «ответов на комментарий» / древовидных комментариев.

Что вас ждёт в видеоуроке:

  • Покажу, как добавить скрытое поле комментария для HTML-формы и для формы, вставленной через функцию comment_form().
  • Доработаем стандартный обработчик комментария wp-comments-post.php, чтобы боты уже не смогли так легко к нему обратиться и заспамить вам весь сайт!

В этом видеоуроке мы при помощи произвольных полей создадим счётчик просмотров для постов.

Мы рассмотрим такие моменты:

  • Как сделать так, чтобы слово «просмотров» склонялось в зависимости от цифры – «1 просмотр», «2 просмотра», «5 просмотров».
  • Как сделать так, чтобы счётчик просмотров прекрасно работал с установленными кэширующими плагинами на сайте, например WP-Super-Cache.
  • Добавим в админку метабокс, в котором вы вручную сможете изменять значение количества просмотров для каждого поста индивидуально. Двумя способами – ручками и при помощи плагина Carbon Fields.

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

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

Купить курс

3500 р7000 р