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

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

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

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

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

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

Меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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