Освоите WordPress, научитесь разрабатывать свои темы и сможете брать более дорогие и интересные заказы
Курс для тех, кто уже знает HTML и CSS и может выполнять простые проекты. Для того, чтобы такие разработчики смогли освоить новый инструмент, выйти на интересные заказы и зарабатывать больше денег.
Заказы по Wordpress на бирже Upwork
Программа курса из трёх модулей
1490р 12 990р
Доступ сразу
Самая популярная во всём мире CMS для управления сайтом. На зарубежных фриланс-биржах множество заказов, связанных с Wordpress: от простых доработок до полноценной разработки сайтов с нуля.
WordPress — самый популярный движок для сайтов
сайтов в мире используют
CMS WordPress
Рейтинг Точно так же если вы зайдёте на фриланс-биржи СНГ, найдёте огромное количество работы, связанной с WordPress. Как с доработками, так и с разработкой проектов с нуля. Это касается любой фриланс-биржи.
В этом модуле разбираемся с основами, которые нам нужны для курса: локальный сервер,
базовые знания PHP. Без этого багажа дальше двигаться будет сложно.
Редактор кода
Для чего нужен редактор кода
Почему мы будем использовать VS Code
Установка VS Code
Настройка плагинов для VS Code
Локальный сервер
Для чего нужен локальный сервер
Как установить OpenServer на Windows
Как установить MAMP на Mac OS
HTML для самых маленьких
Структура HTML документа
Текстовые теги в HTML
Ссылки в HTML
Изображения
HTML таблицы
Атрибуты тегов
Семантические теги
Формы HTML
Основы PHP
Синтаксис
Вывод на экран
Переменные
Массивы
Функции
Циклы
Результат модуля:
у вас подготовленное
и настроенное рабочее пространство, зарегистрирован боевой домен и хостинг. Можно приступать к разработке.
Начнем разбираться с движком Wordpress: установим его на локальном сервере, настроим и создадим необходимые файлы для нашей темы. И сразу присупим к практике.
Установка WordPress
Официальный сайт Wordpress
Установка на локальном сервере
Создание базы данных
Обзор админ панели
Практика: создание новой темы
Иерархия файлов темы
Готовый шаблон темы underscores
Включение дебаггинга
Файл style.css + заготовка
Файл index.php
Файлы header.php и footer.php
Функции get_header(), get_footer()
Функции wp_head() и wp_footer()
Файл functions.php
Хуки Wordpress
Функция add_actions()
Функция wp_enqueue_style()
Функция get_stylesheet_uri()
Функция get_template_directory_uri()
Практика: шапка сайта
Работа с макетом
Динамический тег title
Динамическая кодировка и язык
Файлы шапки сайта header.php
Хук after_setup_theme
Функция body_class()
Логотип, который можно менять
has_custom_logo() и get_custom_logo()
Дополнительный функционал темы
Функция add_theme_support()
Регистрация зон меню
register_nav_menus()
Создание динамического меню
Вывод меню в шапке: wp_nav_menu()
Форма поиска searchform.php
Функция get_search_form()
Практика: шаблон поста
Иерархия файлов темы
Файл single-post.php
Файл single.php
Подключаем куски шаблона
Папка template parts
Функция get_template_part()
Условная функция is_singular()
Функция comments_template()
Функция the_post_navigation()
Модуль первый. Создание темы WordPress
Практика: пост-галерея
Переводим иконки в SVG спрайт
Генератор SVG спрайтов
Пост со слайдером на фоне
Swiper Slider native js
Подключение скриптов к wordpress
Проверка наличия обложки поста
Функция has_post_thumbnail()
Функция get_attached_media()
Практика: адаптив главной страницы
Адаптивная верстка на @media запросах
Адаптируем шапку сайта
Регистрируем jQuery в Wordpress
Подключение jQuery через CDN
Пишем скрипт мобильного меню
Адаптив для CSS Grid и flexbox
Практика: контент поста
Настройка ширины контента
Стили для вложенных тегов контента
Функция the_content()
Редактор Gutenberg Wordpress
Практика: шапка, контент и автор
Меняем стили шапки поста
Подключаем другой логотип
Блок автора: аватар, статьи, ссылка
Функция count_user_posts()
Склоняем слова после числительных
Функция plural_form()
Практика: шеринг в соцсетях
Кнопки для репостов в соцсетях
Вставка блока в Gutenberg
Добавление плагина кнопок для репостов
Стилизуем кнопки с репостами
Расширим функционал темы и подготовим её
к публикации на хостинге. Настроим и оптимизируем тему под поисковые системы в Яндекс и Гугл.
SEO-оптимизация сайта
Плагин для SEO
Заголовки на сайте
Семантическая разметка
Микроразметка
Регистрация в Яндекс.Вебмастер
Регистрация в Google Search Console
Модуль второй. Докрутка темы
Публикация на хостинге
Выгрузки Базы данных
Перенос файлов сайта
Покупка домена
Оплата хостинга
Безопасное соединение HTTPS
SSL сертификат
Импорт базы данных
Передача файлов через FTP
Настройка бэкапа
Результат курса
Курс, на котором мы создадим полноценный сайт со статьями. За основу возьмем дизайн макет
в программе Figma. На курсе будем использовать HTML, CSS, jQuery и PHP. Стили напишем на препроцессоре SASS. Тему Wordpress создадим
с нуля самостоятельно. Figma
Обзор интерфейса программы
Инструменты работы над макетом
Блоки кода
Экспорт объекта
Дубликат макета
Регистрация хостинга
Получение хостинг-
аккаунта
Технический домен
Практика: комментарии к посту
Файл с шаблоном комментариев
comments_template()
Функция wp_list_comments()
Callback для комментариев
Получаем аватар
Получаем дату комментария
Выводим комментарии в верстку
Создаем свою форму для ввода комментария
Настройки комментариев через админ панель
Практика: форма подписки
Как сделать HTML-форму через Getresponse
Размещаем форму на сайте Wordpress
Отправляем email письма после заполнения формы
Практика: вывод постов на главном экране
Подключение шрифтов через Google Fonts
Подключение шрифтов от дизайнера
Создание записей и рубрик в админке
Вывод постов через цикл foreach()
Запрос постов из базы данных
Функция get_posts() и ее параметры
Миниатюры для постов post thumbnails
Вывод аватара и имени автора поста
Практика: отключение миниатюр и вывод постов
Отключение миниатюр через админку
Отключение миниатюр через хук-фильтр
Верстка раздела с популярными постами
Фильтр постов из базы данных
Обрезаем длинный заголовок
Многоточие в конце заголовка
Выводим миниатюру к посту
Практика: CSS Grid, посты в разном формате
Общий запрос в базу данных WP_Query()
Условия для вывода разных постов
Разная разметка для постов на CSS Grid
Вывод тегов поста get_the_tags()
Счетчик комментариев comments_number()
Дата постов the_time()
Биография автора the_author_meta()
Практика: сайдбар и виджеты
Что такое сайдбар и зачем он нужен
Регистрация сайдбара register_sidebars()
Файл сайдбаров sidebar.php и sidebar-{name}.php
Вывод сайдбара dynamic_sidebar()
Регистрация виджета register_widget()
Настройка фронтенда виджета
Настройка бэкэнда виджета
Стили для виджета
Практика: выводим облако тегов
Хуки виджета тегов
Функция the_tags()
wp_tag_cloud()
Верстка виджета тегов
Стили для тега
Практика: вывод постов с большой обложкой
Выводим обложку на весь экран
Функция get_the_post_thumbnail_url()
Фон для блока с помощью градиента
Практика: виджет последних постов
Меняем цвета категорий постов
Регистрируем новую зону виджетов
Регистрируем виджет последних постов
Выводим виджет в верстку
Функция esc_url()
Функция esc_html()
Функция get_category_link()
Человеко-понятная дата поста
Практика: подвал сайта
Шаблон подвала footer.php
Функция get_footer()
Файлы footer.php и footer-{name}.php
Функция wp_footer()
Регистрируем зону виджетов
Выводим виджет напрямую
Функция the_widget()
Практика: страница поиска
Шаблоны страницы search.php
Правим стили для поле поиска
Выводим посты из поиска
Пагинация на странице поиска
Функция the_posts_pagination()
Практика: страница категорий
Шаблон страницы category.php
Выводим заголовок категории
Функция get_cat_name()
Выводим посты в цикле Wordpress
Пагинация на странице категорий
Практика: страница контакты
Создаем шаблон из любого php-файла
Шаблон страницы контакты
Делаем html-форму обратной связи
Как работает AJAX внутри Wordpress
Отправляем форму через скрипт wp_mail()
Создаем форму обратной связи через плагин
Contact Form 7 и его настройка
Сбор контактов в базу данных
Практика: пользовательские поля
Стандартные пользовательские поля Wordpress
Функция get_post_meta()
Плагин Advanced Custom Fields (ACF)
Настройка ACF и вывод полей на странице
Поле с email, которое меняется на всем сайте
Практика: свой тип записей
Как зарегистрировать свой тип записей
Функция register_post_type()
Новый тип записей: уроки
Как вывести уроки в админке
Выводим уроки в верстку
Практика: таксономии
Что такое таксономии wordpress
Древовидные и плоские таксономии
Функция register_taxonomy()
Создаем свои категории для уроков
Создаем метки для уроков
Практика: хлебные крошки
Что такое bradcrumb
Функция the_breadcrumb()
Свой шаблон для крошек
Практика: перевод сайта на другой язык
Как происходит перевод в Wordpress
Файлы формата .pot .po и .mo
Редактор файлов перевода poedit
Функции для перевода __() _x() и другие
Переводим сайт с английского на русский
Практика: пользователи и роли
Как создать нового пользователя в админке
Права участников, подписчиков, авторов и админов
Регистрируем новую роль внутри темы
Функция add_role()
Получаем список ролей wp_roles()
Выводим роль автора на странице